Learn about Eclipse e4 from Lars Vogel at SF-JUG


Published on

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. http://www.sfjava.org/calendar/12296574/

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Learn about Eclipse e4 from Lars Vogel at SF-JUG

  1. 1. Eclipse e4 DI, services, CSS and the modeled Workbench Lars Vogel http://www.vogella.de http://www.twitter.com/vogella
  2. 2. Mini-Agenda
  3. 3. Eclipse e4 Scope Targets development for Eclipse (plugins) or based on Eclipse (Eclipse RCP).
  4. 4. Eclipse e4 Targets Make Eclipse development more effective and the result more visual appealing.
  5. 5. So, what’s wrong with Eclipse 3.X?
  6. 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. 7. If only Eclipse development would be easier and the UI would be more flexible. 7
  8. 8. Eclipse e4 – Building blocks Declarative Styling Rendering Engine Modeled Workbench Dependecy Injection IEclipseContext Core Services
  9. 9. Eclipse e4 – Add-ons XWT Open Social Gadgets Toolkit Model
  10. 10. The Modeled Workbench
  11. 11. The e4 Workbench Model
  12. 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. 13. The e4 Workbench Model Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
  14. 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. 15. Model is Flexible No distinction between View and Editor Perspectives are optional Stack / Sash are optional Several windows easily possible Flexible Toolbars
  16. 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. 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. 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. 19. Model URI’s The Part in the Model The Part’s URI
  20. 20. Plain Old Java Objects (POJO‘s)
  21. 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. 22. Model available at runtime
  23. 23. How is this model translated into UI components? © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
  24. 24. Model and UI Renderers Model I don’t care who draws me • The Workbench model is independent of a specific UI toolkit
  25. 25. Renderers Renderer Factory Eclipse default is the SWT Renderer Can be selected at Startup via parameter
  26. 26. Renderers Renderer Factory Widget Renderer Returns for every model element
  27. 27. Widget Renderer • Each UI elements gets a renderer • Renderer manage Lifecycle of the UI-Element – Creation – Model to widget binding – Rendering – Disposal
  28. 28. Renderer: flexible but complex
  29. 29. e4 CSS Styling
  30. 30. Eclipse 3.X - Styling the User Interface • UI styling via – The Presentation API – Custom Widgets • Very limited
  31. 31. In reality all RCP apps look like the an IDE
  32. 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. 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. 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. 35. Assign custom attributes • Java Label label = new Label(parent, SWT.NONE); label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel"); • CSS #SeparatorLabel { color: #f08d00; }
  36. 36. New Look & Feel for Eclipse e4 – SDK https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481
  37. 37. The e4 Programming Model
  38. 38. • Inversion of control: The necessary functionality is injected into the class
  39. 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. 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. 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. 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. 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. 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. 45. © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
  46. 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. 47. Photo credits • Hammer http://www.sxc.hu/photo/ 604247 • Thank you picture http://www.sxc.hu/photo/ • Open Door 986313 http://www.sxc.hu/photo/1228296 • Gummibaerchen 191472 • Corn http://www.sxc.hu/photo/ 939151 • Runtime model http://www.sxc.hu/photo/ • Thinking man http://www.sxc.hu/photo/ 765733 324541 • Binder: http://www.sxc.hu/photo/443042 • Chess http://www.sxc.hu/photo/ 958410 • Praying Girl • Pill box http://www.sxc.hu/photo/ 510413 http://www.sxc.hu/photo/646227 • Under construction • Box: http://www.sxc.hu/photo/502457 http://www.sxc.hu/photo/ 1268302 • Screws http://www.sxc.hu/photo/1148064 • Singleton: http://www.sxc.hu/photo/ 988381 • House with compartments • Frame for EMF reasons http://www.sxc.hu/photo/494103 http://www.sxc.hu/photo/ 461975 • Stacked stones • Syringe / Injection: http://www.sxc.hu/photo/998524 http://www.sxc.hu/photo/ 468493 • Thinking Guy • Smiley http://www.sxc.hu/photo/ 1211480 http://www.sxc.hu/photo/130484 • Lock http://www.sxc.hu/photo/ 352344 • Drawing Hand • Life Cycle http://www.sxc.hu/photo/ http://www.sxc.hu/photo/264208 1265027 • Waiter http://www.sxc.hu/photo/157966
  48. 48. Thank you For further questions: Lars.Vogel@gmail.com http://www.vogella.de http://www.twitter.com/vogella
  49. 49. 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
  50. 50. 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