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.at
Lars Vogel – http://www.vogella.de
Kai Tödter – Siemens AG

Outline
Theory
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
2

Installation
USB-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
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 Schindl
BestSolution.at

Outline
POJO as the Programming Model
Dependency Injection
JSR 330 Annotations
e4 specific Annotations
The IEclipseContext
Handlers
Lab Tasks
6

POJO as the ProgrammingModel
All building blocks of e4 are POJO
7

2 Main Object-Types
Part
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
8

What 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)
9

Example of an e4-Part
publicclassMyPart {
@Inject
privateECommandServicecmdService;
@Inject
public SampleView(Composite parent) {
}
@Inject
private voidsetSelection(@Optional @Named(
IServiceConstants.SELECTION) Contactcontact) {
// Handle changedselection
}
private voidexecCommand() {
// Execute command
}
}
10

e4 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)
11

Example Usage of e4 PostConstruct /PreDestroy Annotations
publicclassMyPart {
@Inject
privateITimerServicetimerService;
@PostConstruct
private voidinit() {
if(timerService!= null) {
// Do something
}
}
@PreDestroy
private voiduninit() {
if(timerService != null) {
// Do something
}
}
}
12

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
13

Using Eclipse DI
Eclipse DI can consumed standalone in OSGi-Applications
publicObjectstart() {
// GetBundle Information
Bundlebundle = FrameworkUtil.getBundle(getClass());
BundleContextbundleContext = bundle.getBundleContext();
IEclipseContexteclipseCtx =
EclipseContextFactory.getServiceContext(bundleContext);
// FillContextwithinformationusingset(String,Object)
// …
// Create instanceofclass
ContextInjectionFactory.make(MyPart.class, eclipseCtx);
}
14

Writing Handlers
Implement an Execute-Method
Can have any number of arguments
Use IServiceConstantsforgeneralcontextinformations
publicclassAboutHandler {
public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){
MessageDialog.openInformation(
shell, "About", "e4 Application example.");
}
}
15

LabTask 1 – Part 1
Create a Headless RCP-Application
Add asdependency
org.eclipse.e4.core.services
javax.inject
org.eclipse.swt
org.eclipse.jface
Create a classMyPartwith a TableViewer
Constructoraccepts 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
Injectorg.eclipse.tutorial.pgm.service.ITimeService
Register Listener in postconstructionphaseand update viewerwithInformations
UnregisterListener in predestroy
17

LabTask 3
UseMethod-Injection
Add methodset-methodwhichinjects an Objectof type String knownunderthe FQN „org.eclipsecon.myObject“ (hintusethe@Named and @Optional )
Start a threadbeforelaunchingtheeventloopandset a newvalue in theIEclipseContextfor „org.eclipsecon.myObject“
18

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.
21

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

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

If I only had a consistent view of the Eclipse workbench
27

The e4 Workbench Model
e4 Workbench Model
EMF inside

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, …)
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

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

Example Elements
Application
Part (aka View / Editor)

Each 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
User changes
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.
Model Components
Application.e4xmi
Application.e4xmi

Limits of the e4 application model
Only models the Application (frame)
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
publicclassListView {
@Inject
privateIEclipseContextcontext;
@Inject
publicListView(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 3.x
Eclipse e4

Commands & Handlers
Handlers
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 Renderer
The 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 Example
publicclassWorkbenchRendererFactoryimplementsIRendererFactory {
publicAbstractPartRenderergetRenderer(MUIElementuiElement,
Object parent) {
if (uiElementinstanceofMPart) {
if (contributedPartRenderer == null) {
contributedPartRenderer = newContributedPartRenderer();
initRenderer(contributedPartRenderer);
}
returncontributedPartRenderer;
}
//...

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.
48

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!!
49

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");
50

e4 CSS Styling
Kai Tödter
Siemens Corporate Technology

Outline
CSS Styling
Demo
Lab Task
Discussion
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
53

Contacts Demo without CSS Styling
54

Dark CSS Styling with Gradients
55

Bright CSS Styling with Gradients
56

Bright CSS Styling with new look
57

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;
}
58

Some Things you cannot style (yet)
Menu bar background
Table headers
Partly implemented:
Gradients
Planned:
Having similar capabilities compared with WebKit’s gradients
59

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>
60

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;
}
61

e4 CSS Editors
CSS has a well known syntax
But 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

Gradient Examples
63

Dynamic Theme Switching
It is possible to change the
CSS based styling at runtime
Good for accessibility
Good for user preferences
64

CSS Styling Engine
Getting the styling engine:
Display display = shell.getDisplay();
finalCSSEngine 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
65

Theme Switching Code
URL url = FileLocator.resolve(new URL(
"platform:/plugin/org.eclipse.e4.demo.contacts/css/new.css"));
InputStreamReaderstreamReader = newInputStreamReader(
url.openStream(););
engine.reset();
engine.parseStyleSheet(streamReader);
streamReader.close();
try {
shell.setRedraw(false);
shell.reskin(SWT.ALL);
} finally {
shell.setRedraw(true);
}
66

Contacs Demo on RAP
67

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
68

e4 IDE Mockup (February 2010)
69

Demo
70

Lab Task
Install the Contacts Demo sources form the USB stick
Start the demo
Edit both css/dark-gradient.css and css/bright-gradient.css
Play 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 kai@toedter.com 
71

e4: Where to go from here:
72
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
Tom Schindl‘s Blog
http://tomsondev.bestsolution.at/
Kai Toeder
http://www.toedter.com/blog/
Lars Vogel‘s Blog
http://www.vogella.de/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
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://www.eclipsecon.org	226
http://www.slideshare.net	64
http://localhost:3000	1

Eclipse e4 Tutorial - EclipseCon 2010

by Lars Vogel

Accessibility

Upload Details

Usage Rights

3 Embeds 291

Statistics