Your SlideShare is downloading. ×
  • Like
  • Save
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Learn about Eclipse e4 from Lars Vogel at SF-JUG


San Francisco Java User Group hosted an event on April 13th, 2010 with Lars Vogel, a committer on the Eclipse e4 project, who gave a talk on the next generation of the Eclipse Platform. We had two …

San Francisco Java User Group hosted an event on April 13th, 2010 with Lars Vogel, a committer on the Eclipse e4 project, who gave a talk on the next generation of the Eclipse Platform. We had two speakers that evening, this is the first of the two presentations. This event was hosted by SUPINFO. Sponsored by TEKsystems, Guidewire Software, Sun, O'Reilly, JetBrains, and Marakana. Organized by Marakana. Video by Max Walker. Photography by Aleksandar Gargenta.

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Eclipse e4 DI, services, CSS and the modeled Workbench Lars Vogel
  • 2. Mini-Agenda
  • 3. Eclipse e4 Scope Targets development for Eclipse (plugins) or based on Eclipse (Eclipse RCP).
  • 4. Eclipse e4 Targets Make Eclipse development more effective and the result more visual appealing.
  • 5. So, what’s wrong with Eclipse 3.X?
  • 6. 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. 7
  • 8. Eclipse e4 – Building blocks Declarative Styling Rendering Engine Modeled Workbench Dependecy Injection IEclipseContext Core Services
  • 9. Eclipse e4 – Add-ons XWT Open Social Gadgets Toolkit Model
  • 10. The Modeled Workbench
  • 11. The e4 Workbench Model
  • 12. Eclipse Modeling Framework (EMF) is fantastic because: De-facto standard for modeling in Eclipse IfIf I only had a consistent I only had a consistent view and behavior of the Proven domain model technology view and behavior of the Eclipse workbenchsmall (1.5 MB) and highly Eclipse workbench Runtime optimized Tooling available Tap in to the EMF ecosystem (EMF- Compare, CDO, …)
  • 13. The e4 Workbench Model Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
  • 14. The e4 Workbench Model 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
  • 15. Model is Flexible No distinction between View and Editor Perspectives are optional Stack / Sash are optional Several windows easily possible Flexible Toolbars
  • 16. Attention: IfIf I only had a consistent I only had a consistent Inview and behaviorofofe4 a the context of theView and an Editor view and behavior the Eclipse workbench are both so called “Parts”. Don’t get Eclipse workbench confused if I speak about “Parts”.
  • 17. Defining the model User changes Base Model provided by „Application.e4xmi“ Contributions possible via extension point “org.eclipse.e4.workbench.model” Model Components Model can be dynamically changed by User or Code Application.e4xmi Application.e4xmi User model changes can be stored
  • 18. Limits of the e4 application model • Only models the Application (frame) Modeled Workbench Content of the view not part of the e4 model
  • 19. Model URI’s The Part in the Model The Part’s URI
  • 20. Plain Old Java Objects (POJO‘s)
  • 21. 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
  • 22. Model available at runtime
  • 23. How is this model translated into UI components? © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
  • 24. Model and UI Renderers Model I don’t care who draws me • The Workbench model is independent of a specific UI toolkit
  • 25. Renderers Renderer Factory Eclipse default is the SWT Renderer Can be selected at Startup via parameter
  • 26. Renderers Renderer Factory Widget Renderer Returns for every model element
  • 27. Widget Renderer • Each UI elements gets a renderer • Renderer manage Lifecycle of the UI-Element – Creation – Model to widget binding – Rendering – Disposal
  • 28. Renderer: flexible but complex
  • 29. e4 CSS Styling
  • 30. Eclipse 3.X - Styling the User Interface • UI styling via – The Presentation API – Custom Widgets • Very limited
  • 31. In reality all RCP apps look like the an IDE
  • 32. 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
  • 33. 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>
  • 34. 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; }
  • 35. Assign custom attributes • Java Label label = new Label(parent, SWT.NONE); label.setData("", "SeparatorLabel"); • CSS #SeparatorLabel { color: #f08d00; }
  • 36. New Look & Feel for Eclipse e4 – SDK
  • 37. The e4 Programming Model
  • 38. • Inversion of control: The necessary functionality is injected into the class
  • 39. • 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
  • 40. Services are injected via the the e4 framework public class ListView { @Inject private IEclipseContext context; @Inject private Logger logger; @Inject public ListView(Composite parent) { // ...
  • 41. 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)
  • 42. 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 } } }
  • 43. – 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
  • 44. • 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."); } }
  • 45. © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
  • 46. Eclipse Application Services (“Twenty Things”) Editor lifecycle Long-running operations Receiving input Progress reporting Producing selection Error handling Standard dialogs Navigation model Persisting UI state Resource management Logging Status line Interface to help system Drag and drop Menu contributions Undo/Redo Authentication Accessing preferences Authorization Don‘t forget: OSGi services are also available via dependency injection
  • 47. Photo credits • Hammer 604247 • Thank you picture • Open Door 986313 • Gummibaerchen 191472 • Corn 939151 • Runtime model • Thinking man 765733 324541 • Binder: • Chess 958410 • Praying Girl • Pill box 510413 • Under construction • Box: 1268302 • Screws • Singleton: 988381 • House with compartments • Frame for EMF reasons 461975 • Stacked stones • Syringe / Injection: 468493 • Thinking Guy • Smiley 1211480 • Lock 352344 • Drawing Hand • Life Cycle 1265027 • Waiter
  • 48. Thank you For further questions:
  • 49. e4: Where to go from here: Eclipse e4 Tutorial Eclipse e4 Wiki Eclipse e4 Whitepaper
  • 50. License & Acknowledgements • This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License – See 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 – Kai Tödter, Siemens AG