eclipse e4 overview
DESCRIPTION
Overview of the Eclipse e4 platformTRANSCRIPT
Eclipse e4
DI, services, CSS and the
modeled Workbench
Lars Vogelhttp://www.vogella.dehttp://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 development for 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
7
If only Eclipse development would be easier and the UI would be more flexible.
Eclipse e4 – Building blocks
Declarative Styling
Modeled Workbench
Rendering Engine
Dependecy Injection
IEclipseContext
Core Services
Eclipse e4 – Add-ons
XWT
Toolkit Model
Open Social Gadgets
The Modeled 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
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, …)
The e4 Workbench Model
Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
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 (CTabFolder)• Parts
– Handlers– Key Bindings– Commands
Model is FlexibleNo distinction between View and Editor
Perspectives are optional
Stack / Sash are optional
Several windows easily possible
Flexible Toolbars
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
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
Application.e4xmi
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 storedApplication.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’sThe Part in the Model
The Part’s URI
Parts in e4
Plain Old Java Objects (POJO‘s)
Inheriance Hierachy of Views Parts before e4
VIEW
VIEWPART
WORKBENCHPART
EVENTMANAGER
OBJECT
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 toolbarsMenus / Toolbar• Use commands or DirectItems
Model available at runtime
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
How is this model translated into UI components?
Model and UI Renderers
• The Workbench model is independent of a specific UI toolkit
I don’t care who draws me
Model
Renderers
Renderer Factory
Eclipse default is the SWT Renderer
Can be selected at Startup via parameter
RenderersWidget RendererRenderer 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
Eclipse 3.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 StylingProperty "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 CSSLabel { 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
public class ListView {
@Inject private IEclipseContext context; @Inject private Logger logger;
@Inject public ListView(Composite parent)
{ // ...
Services are injected via the the e4 framework
Java
Class
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
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 } }}
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
public class AboutHandler { public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); }}
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
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
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
e4: Where to go from here:
Eclipse e4 Tutorialhttp://www.vogella.de/articles/EclipseE4/article.html
Eclipse e4 Wikihttp://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