Overview of the Eclipse e4 platform

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

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

3. Eclipse e4 Scope Targets developmentfor 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 e4 Workbench Model EMF inside

12. 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 If I only had a consistent view and behavior of the Eclipse workbench

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: In the context of e4 a View and an Editor are both so called “Parts”. Don’t get confused if I speak about “Parts”. 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

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

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. Parts in e4 Plain Old Java Objects (POJO‘s)

21. InherianceHierachy of Views Parts before e4 Object EventManager WorkbenchPart ViewPart View

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

23. Model available at runtime

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

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

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

27. Renderers Widget Renderer Renderer Factory Returns for every model element

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

29. Renderer: flexible but complex

30. e4 CSS Styling

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

32. In reality all RCP apps look like the an IDE

34. Table headers e4 supports theme switching during runtime

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

36. 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; }

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

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

39. The e4 Programming Model

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

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

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

45. IEclipseContext

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

47. 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."); } }

48. Services © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

50. Progress reporting

51. Error handling

52. Navigation model

53. Resource management

54. Status line

55. Drag and drop

56. Undo/Redo

57. Accessing preferences

58. Editor lifecycle

59. Receiving input

60. Producing selection

61. Standard dialogs

62. Persisting UI state

63. Logging

64. Interface to help system

65. Menu contributions

66. Authentication

67. Authorization

69. Gummibaerchen 191472

70. Runtime model http://www.sxc.hu/photo/ 765733

71. Binder: http://www.sxc.hu/photo/443042

72. Praying Girl http://www.sxc.hu/photo/646227

73. Box: http://www.sxc.hu/photo/502457

74. Screws http://www.sxc.hu/photo/1148064

75. House with compartments http://www.sxc.hu/photo/494103

76. Stacked stones http://www.sxc.hu/photo/998524

77. Thinking Guy http://www.sxc.hu/photo/130484

78. Drawing Hand http://www.sxc.hu/photo/264208

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

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

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