Eclipse e4 Overview

Eclipse e4
DI, services,
CSS and the
modeled Workbench
Lars Vogel
http://www.vogella.de
http://www.twitter.com/vogella

Mini-Agenda
Scope and targets of e4
The existing Eclipse 3.x UI model
e4 workbench model
Styling
Services

Eclipse e4 Scope
Targets developmentfor Eclipse (plugins) or based on Eclipse (Eclipse RCP).

Eclipse e4 Targets
Make Eclipse development more effective and the result more visual appealing.

So, what’s wrong with Eclipse 3.X?

Problems with the Eclipse 3.x programming model
Complex
Lots of API
Platform functionality via singletons
Not easy to test
Not a consistent way to define the UI
UI makes assumptions, e.g. Editors / Views

If only Eclipse development would be easier and the UI would be more flexible.
7

Eclipse e4 – Building blocks
Declarative Styling
Rendering Engine
Modeled Workbench
Dependecy Injection
IEclipseContext
Core Services

Eclipse e4 – Add-ons
XWT
Open Social Gadgets
Toolkit Model

The Modeled Workbench

The e4 Workbench Model
e4 Workbench Model
EMF inside

Eclipse Modeling Framework (EMF) is fantastic because:
De-facto standard for modeling in Eclipse
Proven domain model technology
Runtime small (1.5 MB) and highly optimized
Tooling available
Tap in to the EMF ecosystem (EMF-Compare, CDO, …)
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“

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 (CTabFolder)
Parts
Handlers
Key Bindings
Commands

Model is Flexible
No distinction between View and Editor
Perspectives are optional
Stack / Sash are optional
Several windows easily possible
Flexible Toolbars

Attention:
In the context of e4 a View and an Editor are both so called “Parts”. Don’t get confused if I speak about “Parts”.

Defining the model
Base Model provided by „Application.e4xmi“
Contributions possible via extension point“org.eclipse.e4.workbench.model”
Model can be dynamically changed by User or Code
User model changes can be stored
User changes
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 in e4
Plain Old Java Objects (POJO‘s)

InherianceHierachy of Views Parts before e4
Object
EventManager
WorkbenchPart
ViewPart
View

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

Model available at runtime

How is this model translated into UI components?
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

Model and UI Renderers
Model
I don’t care who draws me
The Workbench model is independent of a specific UI toolkit

Renderers
Renderer Factory
Eclipse default is the SWT Renderer
Can be selected at Startup via parameter

Renderers
Widget Renderer
Renderer Factory
Returns for every model element

Widget Renderer
Each UI elements gets a renderer
Renderer manage Lifecycle of the UI-Element
Creation
Model to widget binding
Rendering
Disposal

Renderer: flexible but complex

e4 CSS Styling

Eclipse 3.X - Styling the User Interface
UI styling via
The Presentation API
Custom Widgets
Very limited

In reality all RCP apps look like the an IDE

Eclipse3.X - IDE feeling
Eclipse e4 – CSS Styling
Example from Kai Toedter
Some elements cannot currently not be styled:
Menu bar background
Table headers
e4 supports theme switching during runtime

How to enable CSS Styling
Property "applicationCSS” in 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>

Example CSS
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;
}

Java
Label label =
new Label(parent, SWT.NONE);
label.setData("org.eclipse.e4.ui.css.id",
"SeparatorLabel");
CSS
#SeparatorLabel {
color: #f08d00;
}
Assign custom attributes

New Look & Feel for Eclipse e4 – SDK
https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481

The e4 Programming Model

Dependency Injection
Inversion of control: The necessary functionality is injected into the class
Java Class

Dependency Injection in e4
JSR 330 compatible injection implementation
@javax.inject.Inject – Field, Constructor and Method injection
@javax.inject.Named – Specify a custom qualifier to context object (default is fully qualified classname of the injected type)
e4 specific annotations, e.g. @Optional

Java Class
Services are injected via the the e4 framework
publicclassListView {
@Inject
privateIEclipseContextcontext;
@Inject
private Loggerlogger;
@Inject
publicListView(Composite parent) {
// ...

Lifecycle
@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)

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

IEclipseContext

IEclipseContext
Stores information of possible Injection Values
Hierarchical Datastructure
OSGi Services part of the Context
Dynamic context information: Possibility to contribute an IContextFunction through DS to construct Objects on the fly

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

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
Don‘t forget: OSGi services are also available via dependency injection

Photo credits
Hammer http://www.sxc.hu/photo/ 604247
Open Door http://www.sxc.hu/photo/1228296
Corn http://www.sxc.hu/photo/ 939151
Thinking man http://www.sxc.hu/photo/ 324541
Chess http://www.sxc.hu/photo/ 958410
Pill box http://www.sxc.hu/photo/ 510413
Under construction http://www.sxc.hu/photo/ 1268302
Singleton: http://www.sxc.hu/photo/ 988381
Frame for EMF reasons http://www.sxc.hu/photo/ 461975
Syringe / Injection: http://www.sxc.hu/photo/ 468493
Smiley http://www.sxc.hu/photo/ 1211480
Lock http://www.sxc.hu/photo/ 352344
Life Cycle http://www.sxc.hu/photo/ 1265027
Thank you picture http://www.sxc.hu/photo/ 986313
Gummibaerchen 191472
Runtime model http://www.sxc.hu/photo/ 765733
Binder: http://www.sxc.hu/photo/443042
Praying Girl http://www.sxc.hu/photo/646227
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

Thank you
For further questions:
Lars.Vogel@gmail.com
http://www.vogella.de
http://www.twitter.com/vogella

e4: Where to go from here:
Eclipse e4 Tutorial
http://www.vogella.de/articles/EclipseE4/article.html
Eclipse e4 Wiki
http://wiki.eclipse.org/E4
Eclipse e4 Whitepaper
http://www.eclipse.org/e4/resources/e4-whitepaper.php

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

http://karakais.blogspot.com	96
http://www.slideshare.net	85
http://karakais.blogspot.de	45
http://karakais.blogspot.in	4
http://karakais.blogspot.fr	2
http://karakais.blogspot.it	1
http://karakais.blogspot.ca	1
http://karakais.blogspot.co.uk	1

Eclipse e4 Overview

by Lars Vogel on Apr 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 235

Statistics

Eclipse e4 Overview — Presentation Transcript