Eclipse e4 Tutorial - EclipseCon 2010

Eclipse e4 Tutorial

© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Tom Schindl – BestSolution.atLars Vogel – http://www.vogella.de

Kai Tödter – Siemens AG

OutlineTheory

The e4 Programming Model – Tom Schindl

The Workbench Model – Lars Vogel Styling in e4 – Kai Tödter

Labs Programming Model (looking a bit

behind e4 Dependency Injection) Create an RCP-Application from scratch Work with CSS to retheme the Contacts

Demo© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2

InstallationUSB-Sticks with Eclipse-SDK

Only copy the version you need for your OS located at SDK-Folder

Slides as PDFs located in slides-Folder Examples code located in samples-

Folder Solutions code located in solutions-

Folder

© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3

E4 and Example Installation

Copy the e4 zip file on your laptop and unzip it. Start e4 with eclipse.exe

Use File -> Import -> „Existing Projects into Workspace“ to import the projects from directory „samples“. „Select archive file“ -> *.zip

4© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

e4 The Programming Model

Tom SchindlBestSolution.at

© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

OutlinePOJO as the Programming ModelDependency Injection

JSR 330 Annotations e4 specific Annotations The IEclipseContext

HandlersLab Tasks


POJO as the ProgrammingModel

All building blocks of e4 are POJO


2 Main Object-TypesPart

UI Component representing an Editor, Table, Tree, …

Most likely has a constructor which accepts a Composite

Handler Reacts on Commands execute by the

user through Button press, KeyBinding, …

Has to have a method named execute() with a variable number of Parameters


Dependency InjectionWhat is DI

Inversion of control: Your application doesn’t reach out stuff but gets it provided/injected from the outside framework

e4 provides an JSR 330 compatible injection implementation @Inject – Field, Constructor and Method

injection @Named – Specify a custom qualifier to

context object (default is fully qualified classname of the injected type)


Dependency InjectionExample of an e4-Part


public class MyPart { @Inject private ECommandService cmdService;

@Inject public SampleView(Composite parent) { }

@Inject private void setSelection(@Optional @Named( IServiceConstants.SELECTION) Contact contact) { // Handle changed selection }

private void execCommand() { // Execute command }}

Dependency Injectione4 specific Annotations

@Optional: Marking the parameter as optional

@PostConstruct: Called after Object created and Fields- and Methods-Injection finished

@PreDestroy: Called before the object is destroyed (e.g. the Part shown in the UI is removed)


Dependency InjectionExample Usage of e4

PostConstruct /PreDestroy Annotations


public class MyPart { @Inject private ITimerService timerService;

@PostConstruct private void init() { if(timerService != null) { // Do something } }

@PreDestroy private void uninit() { if(timerService != null) { // Do something } }}

Dependency Injection IEclipseContext

Stores information of possible Injection Values

Hierarchical Datastructure Rootcontext backed up by OSGi-Service

Registry (every registered as an OSGi-Service can get injected)

Dynamic context information: Possibility to contribute an IContextFunction through DS to construct Objects on the fly


Using Eclipse DIEclipse DI can consumed standalone

in OSGi-Applications


public Object start() { // Get Bundle Information Bundle bundle = FrameworkUtil.getBundle(getClass()); BundleContext bundleContext = bundle.getBundleContext(); IEclipseContext eclipseCtx = EclipseContextFactory.getServiceContext(bundleContext);

// Fill Context with information using set(String,Object) // … // Create instance of class ContextInjectionFactory.make(MyPart.class, eclipseCtx);}

Writing Handlers Implement an Execute-Method

Can have any number of arguments Use IServiceConstants for general

context informations


public class AboutHandler { public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); }}

LabTask 1 – Part 1Create a Headless RCP-Application

Add as dependency▪ org.eclipse.e4.core.services▪ javax.inject▪ org.eclipse.swt▪ org.eclipse.jface

Create a class MyPart with a TableViewer Constructor accepts an SWT-Composite

16© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

LabTask 2 Import

org.eclipse.tutorial.pgm.service Inject

org.eclipse.tutorial.pgm.service.ITimeService

Register Listener in postconstruction phase and update viewer with Informations

Unregister Listener in predestroy


LabTask 3Use Method-Injection

Add method set-method which injects an Object of type String known under the FQN „org.eclipsecon.myObject“ (hint use the @Named and @Optional )

Start a thread before launching the event loop and set a new value in the IEclipseContext for „org.eclipsecon.myObject“


Eclipse e4:

Eclipse, the modeled Workbench and 20 other things

Lars Vogel

Mini-Agenda

The existing Eclipse 3.x UI model

e4 workbench model

Model to UI -> Renderer

„The 20 things“ aka as Services

Excersise: e4 wizard

Create a new applicaton via File -> New -> Other -> e4 -> e4 Application Project

Choose a name, e.g. „org.eclipsecon.e4.first“ Leave all default and go to the last tab and press

finish. On the „org.eclipsecon.e4.first.product“ select

the overview tab. Press „Launch an Eclipse application“ -> your

application should start

In case you have problem, please use „de.vogella.e4.rcp.wizard“ from your important workspace as a reference.


Motivation

Why a new approach?

Eclipse 3.x the workbench model

UI Contributions via plugin.xml

Stored in separate registries (ViewRegistry, EditorRegistry)

Several advisers, e.g Actions created by ActionBarAdvicers

UI model is pre-defined

© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

Eclipse 3.x the workbench model

Not easy to test

No single place to look for the workbench model


Editor vrs. View - ViewParts are not equal

Editor

The Singleton Problem

PlatformUI.getWorkbench()

Platform.getExtensionRegistry()

ResourcePlugin.getWorkspace()

Dependencies make UI difficult to test and hard to re-use


27

If I only had a consistent view of the Eclipse workbench

The e4 Workbench Model

e4 Workbench Model

EMF inside


If I only had a consistent view and behavior of the Eclipse workbench

If I only had a consistent view and behavior of the Eclipse workbench

5 reasons why using EMF is fantastic:

Proven domain model technology Runtime small (1.5 MB) and highly optimized Tooling available Easy to build visual tools on top Tap in to the EMF ecosystem (EMF-Compare, CDO, …)


The e4 Workbench Model

Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“

Example ElementsApplication

Part (aka View / Editor)

The e4 Workbench ModelEach application has it‘s live model

Workbench window Menu with menu items Window Trim, e.g.

toolbar with toolbar items

Parts Sash Container▪ Parts

Part Stack▪ Parts

Handlers Key Bindings Commands


Model is Flexible

Perspectives are options

Stack / Slash Forms are optional

Extend it to get your own functionality (more on renderes later)


Defining the model

Application.e4xmi

Base Model provided by xmi file (Application.e4xmi)

Model Components are contribution of extension point „ org.eclipse.e4.workbench.model”

Model can be dynamically changed by Code

User model changes are stored as (intelligent) deltas and applied during startup.


Application.e4xmi

Model Components

User changes

Only models the Application (frame)

Limits of the e4 application model

Modeled Workbench

Content of the view not part

of the e4 model

Model URI’s

The Part in the Model

The Part’s URI


Parts

public class ListView {

@Inject private IEclipseContext

context;

@Inject public ListView(Composite

parent) { // ...


• Parts are POJO’s

• Services are injected via the the framework

• Defined Lifecycle via annotioans (@PostConstruct, @Predestroy)

Re-usable Easier to test

Hierarchy of ViewParts in 3.x vrs. Parts


Eclipse e4Eclipse 3.x

Commands & HandlersHandlers have and id and a command have an URI for the implementing class,

e.g.platform:/plugin/...SaveHandler

Commands have and id and a name can be inserted in menus and toolbars

Menus / Toolbar Use commands or DirectItems



How is this model translated into UI components?

UI RendererThe Workbench model is

independent of a specific UI toolkit

Each UI elements gets are renderer Renderer manage Lifecycle of the UI-

Element Creation Model to widget binding Rendering Disposal


Renderers


How to determine a Renderer

During startup, the app context is asks for an IPresentationEngine service

The default is an SWT based presentation engine

The presentation engine asks the RenderFactory for the Renderers of the individual UI components


org.eclipse.e4.workbench.ui.renderers.swt.WorkbenchRendererFactory returns org.eclipse.e4.workbench.ui.renderers.swt.SWTPartRenderer for the model components

e.g. org.eclipse.e4.workbench.ui.renderers.swt.SashRenderer

RendererFactory Examplepublic class WorkbenchRendererFactory implements

IRendererFactory {

public AbstractPartRenderer getRenderer(MUIElement uiElement,

Object parent) { if (uiElement instanceof MPart) { if (contributedPartRenderer == null) { contributedPartRenderer = new

ContributedPartRenderer(); initRenderer(contributedPartRenderer); } return contributedPartRenderer; }

//...



Services

Eclipse Application Services (“Twenty Things”)


Long-running operations

Progress reporting Error handling Navigation model Resource

management Status line Drag and drop Undo/Redo Accessing

preferences

Editor lifecycle Receiving input Producing selection Standard dialogs Persisting UI state Logging Interface to help

system Menu contributions Authentication Authorization

Examples


Other services are for example Logger IShellProvider

OSGi services is also available via dependency injection

Workbench Services follow usually with E*Service pattern, e.g.

EPartService ESelectionService EModelService

Excersise: Using the Model Editor

Load the project „de.vogella.e4.rcp.first“. Start the application via the .product file and

validate that the application is working. Select the Application.e4xmi file, right click and

select Open-with „E4 WorkbenchModel Editor “. Rename the menu entry „Hello“ Rename the title of the „View1“ Change the order of the Views in the stack.


Excersise: Model Componets

Load the project „de.vogella.e4.rcp.modelcontributions“.

Open plugin.xml and check the extension point „ org.eclipse.e4.workbench.model”

Review the files „components.e4xmi“ and „components2.e4xmi“

Create a new class „ org.eclipse.e4.modelcomponets.parts.Part4“ as a copy of an existing part and add it via model contribution to your UI.

Remember that all ID‘s must be unique!! Remember to use the correct ID for the parent!!


Excersise: Services

Load the project „ de.vogella.e4.rcp.first“. Open class

„ org.eclipse.e4.modelcomponets.parts.View1“ Add private member @Inject Logger logger Write some log messages in the method init(), for

example logger.info("UI will start to build");


e4 CSS Styling

Kai TödterSiemens Corporate Technology

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

OutlineCSS StylingDemoLab TaskDiscussion

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52

Styling the User Interface In Eclipse 3.x, UI styling can be done

using The Presentation API Custom Widgets

These mechanisms are very limited It is not possible to implement a

specific UI design, created by a designer

e4 provides a CSS based UI styling that addresses all the above issues


Contacts Demo without CSS Styling


Dark CSS Styling with Gradients


Bright CSS Styling with Gradients


Bright CSS Styling with new look


How does the CSS look like?Label { font: Verdana 8px; color: rgb(240, 240, 240);}

Table { background-color: gradient radial #575757 #101010 100%; color: rgb(240, 240, 240); font: Verdana 8px;}

ToolBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px;}


Some Things you cannot style (yet)

Menu bar backgroundTable headers

Partly implemented:Gradients

Planned:Having similar capabilities compared

with WebKit’s gradients


How to enable CSS Styling

Create a contribution to the extension point

org.eclipse.core.runtime.products

<extension id="product" point="org.eclipse.core.runtime.products"> <product application="org.eclipse.e4.ui.workbench.swt.application" name="E4 Contacs Demo"> <property name="applicationCSS" value="platform:/plugin/contacts/css/dark.css"> </property> </product></extension>


How to use custom attributes?

Java

Label label = new Label(parent, SWT.NONE);label.setData("org.eclipse.e4.ui.css.id",

"SeparatorLabel");

CSS

#SeparatorLabel { color: #f08d00;}


e4 CSS EditorsCSS has a well known syntaxBut which UI elements can be

styled?Which CSS attributes does a specific

element support?

The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes

A project is already set up, stay tuned… 62© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Gradient Examples


Dynamic Theme Switching

It is possible to change the CSS based styling at runtimeGood for accessibilityGood for user preferences


CSS Styling Engine

Getting the styling engine:

Display display = shell.getDisplay();final CSSEngine engine =

(CSSEngine) display.getData( "org.eclipse.e4.ui.css.core.engine");

This is a current workaround The engine should be a service accessible

through the EclipseContext


Theme Switching CodeURL url = FileLocator.resolve(new URL("platform:/plugin/org.eclipse.e4.demo.contacts/css/

new.css"));

InputStreamReader streamReader = new InputStreamReader(

url.openStream(););engine.reset();engine.parseStyleSheet(streamReader);streamReader.close();

try {shell.setRedraw(false);shell.reskin(SWT.ALL);

} finally {shell.setRedraw(true);

} 66© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Contacs Demo on RAP


How will the e4 IDE look like?

Designers are working on a new e4 workbench look

Watch bug 293481 for mockups Windows XP Windows 7 Mac Cocoa

https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481




e4 IDE Mockup (February 2010)


Demo


Lab Task Install the Contacts Demo sources

form the USB stickStart the demoEdit both css/dark-gradient.css and

css/bright-gradient.cssPlay around switching the css styles

at runtime and watch the differences you made

Optional: Create a new colorful psychedelic look for the Contacts Demo. Send screen shots to [email protected] 71© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

e4: Where to go from here:


Eclipse e4 Wiki http://wiki.eclipse.org/E4

Eclipse e4 Tutorial http://www.vogella.de/articles/EclipseE4/article.html

Eclipse e4 Whitepaper http://www.eclipse.org/e4/resources/e4-whitepaper.php

Lars Vogel‘s Blog http://www.vogella.de/blog

Tom Schindl‘s Blog http://tomsondev.bestsolution.at/

Kai Toeder http://www.toedter.com/blog/

http://wiki.eclipse.org/E4

http://www.vogella.de/articles/EclipseE4/article.html

http://www.eclipse.org/e4/resources/e4-whitepaper.php

http://www.vogella.de/blog

http://tomsondev.bestsolution.at/

http://www.toedter.com/blog/

Photo credits Target http://www.sxc.hu/photo/1078182 Rusty stuff http://www.sxc.hu/photo/450663 Binder: http://www.sxc.hu/photo/443042 Something is different http://www.sxc.hu/photo/944284 Praying Girl http://www.sxc.hu/photo/646227 Pin http://www.sxc.hu/photo/771409 Box: http://www.sxc.hu/photo/502457 Screws http://www.sxc.hu/photo/1148064 House with compartments http://www.sxc.hu/photo/494103 Stacked stones http://www.sxc.hu/photo/998524 Thinking Guy http://www.sxc.hu/photo/130484 Drawing Hand http://www.sxc.hu/photo/264208 Waiter http://www.sxc.hu/photo/157966

Discussion

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 74

License & Acknowledgements

This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License

See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

Many slides are based on the work of: Tom Schindl and Kai Tödter Tom Schindl, BestSolution, see

http://www.bestsolution.at Kai Tödter, Siemens AG

75

http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

http://www.bestsolution.at/

Documents

Eclipse e4 Tutorial - EclipseCon 2010