Tutorial about Eclipse e4

1. Eclipse e4 Tutorial © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. Tom Schindl – BestSolution.at Lars Vogel – http://www.vogella.de Kai Tödter – Siemens AG

2. Outline Theory The e4 Programming Model – Tom Schindl The Workbench Model – Lars Vogel Styling in e4 – Kai Tödter Labs Programming Model (looking a bit behind e4 Dependency Injection) Create an RCP-Application from scratch Work with CSS to retheme the Contacts Demo © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2

3. Installation USB-Sticks with Eclipse-SDK Only copy the version you need for your OS located at SDK-Folder Slides as PDFs located in slides-Folder Examples code located in samples-Folder Solutions code located in solutions-Folder © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3

4. E4 and Example Installation Copy the e4 zip file on your laptop and unzip it. Start e4 with eclipse.exe Use File -> Import -> „Existing Projects into Workspace“ to import the projects from directory „samples“. „Select archive file“ -> *.zip 4 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

5. e4 The Programming Model Tom Schindl BestSolution.at © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

6. Outline POJO as the Programming Model Dependency Injection JSR 330 Annotations e4 specific Annotations The IEclipseContext Handlers Lab Tasks © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6

7. POJO as the ProgrammingModel All building blocks of e4 are POJO © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7

8. 2 Main Object-Types Part UI Component representing an Editor, Table, Tree, … Most likely has a constructor which accepts a Composite Handler Reacts on Commands execute by the user through Button press, KeyBinding, … Has to have a method named execute() with a variable number of Parameters © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8

9. Dependency Injection What is DI Inversion of control: Your application doesn’t reach out stuff but gets it provided/injected from the outside framework e4 provides an JSR 330 compatible injection implementation @Inject – Field, Constructor and Method injection @Named – Specify a custom qualifier to context object (default is fully qualified classname of the injected type) © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9

10. Dependency Injection Example of an e4-Part publicclassMyPart { @Inject privateECommandServicecmdService; @Inject public SampleView(Composite parent) { } @Inject private voidsetSelection(@Optional @Named( IServiceConstants.SELECTION) Contactcontact) { // Handle changedselection } private voidexecCommand() { // Execute command } } © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10

11. Dependency Injection e4 specific Annotations @Optional: Marking the parameter as optional @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) © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 11

12. Dependency Injection Example Usage of e4 PostConstruct /PreDestroy Annotations publicclassMyPart { @Inject privateITimerServicetimerService; @PostConstruct private voidinit() { if(timerService!= null) { // Do something } } @PreDestroy private voiduninit() { if(timerService != null) { // Do something } } } © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12

13. Dependency Injection IEclipseContext Stores information of possible Injection Values Hierarchical Datastructure Rootcontext backed up by OSGi-Service Registry (every registered as an OSGi-Service can get injected) Dynamic context information: Possibility to contribute an IContextFunction through DS to construct Objects on the fly © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13

14. Using Eclipse DI Eclipse DI can consumed standalone in OSGi-Applications publicObjectstart() { // GetBundle Information Bundlebundle = FrameworkUtil.getBundle(getClass()); BundleContextbundleContext = bundle.getBundleContext(); IEclipseContexteclipseCtx = EclipseContextFactory.getServiceContext(bundleContext); // FillContextwithinformationusingset(String,Object) // … // Create instanceofclass ContextInjectionFactory.make(MyPart.class, eclipseCtx); } © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14

15. Writing Handlers Implement an Execute-Method Can have any number of arguments Use IServiceConstantsforgeneralcontextinformations publicclassAboutHandler { public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); } } © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 15

16. LabTask 1 – Part 1 Create a Headless RCP-Application Add asdependency org.eclipse.e4.core.services javax.inject org.eclipse.swt org.eclipse.jface Create a classMyPartwith a TableViewer Constructoraccepts an SWT-Composite 16 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

17. LabTask 2 Import org.eclipse.tutorial.pgm.service Injectorg.eclipse.tutorial.pgm.service.ITimeService Register Listener in postconstructionphaseand update viewerwithInformations UnregisterListener in predestroy 17 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

18. LabTask 3 UseMethod-Injection Add methodset-methodwhichinjects an Objectof type String knownunderthe FQN „org.eclipsecon.myObject“ (hintusethe@Named and @Optional ) Start a threadbeforelaunchingtheeventloopandset a newvalue in theIEclipseContextfor „org.eclipsecon.myObject“ 18 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

19. Eclipse e4:Eclipse, the modeled Workbench and 20 other things Lars Vogel

20. Mini-Agenda The existing Eclipse 3.x UI model e4 workbench model Model to UI -> Renderer „The 20 things“ aka as Services

21. Excersise: e4 wizard Create a new applicaton via File -> New -> Other -> e4 -> e4 Application Project Choose a name, e.g. „org.eclipsecon.e4.first“ Leave all default and go to the last tab and press finish. On the „org.eclipsecon.e4.first.product“ select the overview tab. Press „Launch an Eclipse application“ -> your application should start In case you have problem, please use „de.vogella.e4.rcp.wizard“ from your important workspace as a reference. 21 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

22. Motivation Why a new approach?

23. Eclipse 3.x the workbench model UI Contributions via plugin.xml Stored in separate registries (ViewRegistry, EditorRegistry) Several advisers, e.g Actions created by ActionBarAdvicers UI model is pre-defined © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

24. Eclipse 3.x the workbench model Not easy to test No single place to look for the workbench model © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

25. Editor vrs. View - ViewParts are not equal Editor

26. The Singleton Problem PlatformUI.getWorkbench() Platform.getExtensionRegistry() ResourcePlugin.getWorkspace() Dependencies make UI difficult to test and hard to re-use © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

27. If I only had a consistent view of the Eclipse workbench 27

28. The e4 Workbench Model e4 Workbench Model EMF inside © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

29. 5 reasons why using EMF is fantastic: Proven domain model technology Runtime small (1.5 MB) and highly optimized Tooling available Easy to build visual tools on top 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 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

30. The e4 Workbench Model Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“

31. Example Elements Application Part (aka View / Editor)

32. 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 Parts Handlers Key Bindings Commands © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

33. Model is Flexible Perspectives are options Stack / Slash Forms are optional Extend it to get your own functionality (more on renderes later) © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

34. Defining the model User changes Base Model provided by xmi file (Application.e4xmi) Model Components are contribution of extension point „ org.eclipse.e4.workbench.model” Model can be dynamically changed by Code User model changes are stored as (intelligent) deltas and applied during startup. Model Components Application.e4xmi Application.e4xmi © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

35. Limits of the e4 application model Only models the Application (frame) Modeled Workbench Content of the view not part of the e4 model

36. Model URI’s The Part in the Model The Part’s URI © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

38. Services are injected via the the framework

39. Defined Lifecycle via annotioans (@PostConstruct, @Predestroy) Re-usable  Easier to test © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

40. Hierarchy of ViewParts in 3.x vrs. Parts Eclipse 3.x Eclipse e4 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

41. 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 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

43. UI Renderer The Workbench model is independent of a specific UI toolkit Each UI elements gets are renderer Renderer manage Lifecycle of the UI-Element Creation Model to widget binding Rendering Disposal © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

45. How to determine a Renderer During startup, the app context is asks for an IPresentationEngine service The default is an SWT based presentation engine The presentation engine asks the RenderFactory for the Renderers of the individual UI components org.eclipse.e4.workbench.ui.renderers.swt.WorkbenchRendererFactory returns org.eclipse.e4.workbench.ui.renderers.swt.SWTPartRenderer for the model components e.g. org.eclipse.e4.workbench.ui.renderers.swt.SashRenderer © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

46. RendererFactory Example publicclassWorkbenchRendererFactoryimplementsIRendererFactory { publicAbstractPartRenderergetRenderer(MUIElementuiElement, Object parent) { if (uiElementinstanceofMPart) { if (contributedPartRenderer == null) { contributedPartRenderer = newContributedPartRenderer(); initRenderer(contributedPartRenderer); } returncontributedPartRenderer; } //... © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

49. Progress reporting

50. Error handling

51. Navigation model

52. Resource management

53. Status line

54. Drag and drop

55. Undo/Redo

56. Accessing preferences

57. Editor lifecycle

58. Receiving input

59. Producing selection

60. Standard dialogs

61. Persisting UI state

62. Logging

63. Interface to help system

64. Menu contributions

65. Authentication

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

68. Logger

69. IShellProvider

70. OSGi services is also available via dependency injection

71. Workbench Services follow usually with E*Service pattern, e.g.

72. EPartService

73. ESelectionService

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

75. Excersise: Using the Model Editor Load the project „de.vogella.e4.rcp.first“. Start the application via the .product file and validate that the application is working. Select the Application.e4xmi file, right click and select Open-with „E4 WorkbenchModel Editor“. Rename the menu entry „Hello“ Rename the title of the „View1“ Change the order of the Views in the stack. 48 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

76. Excersise: Model Componets Load the project „de.vogella.e4.rcp.modelcontributions“. Open plugin.xml and check the extension point „ org.eclipse.e4.workbench.model” Review the files „components.e4xmi“ and „components2.e4xmi“ Create a new class „ org.eclipse.e4.modelcomponets.parts.Part4“ as a copy of an existing part and add it via model contribution to your UI. Remember that all ID‘s must be unique!! Remember to use the correct ID for the parent!! 49 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

77. Excersise: Services Load the project „ de.vogella.e4.rcp.first“. Open class „ org.eclipse.e4.modelcomponets.parts.View1“ Add private member @Inject Logger logger Write some log messages in the method init(), for example logger.info("UI will start to build"); 50 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

78. e4 CSS Styling Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

79. Outline CSS Styling Demo Lab Task Discussion © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52

80. Styling the User Interface In Eclipse 3.x, UI styling can be done using The Presentation API Custom Widgets These mechanisms are very limited It is not possible to implement a specific UI design, created by a designer e4 provides a CSS based UI styling that addresses all the above issues 53 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

81. Contacts Demo without CSS Styling 54 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

82. Dark CSS Styling with Gradients 55 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

83. Bright CSS Styling with Gradients 56 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

84. Bright CSS Styling with new look 57 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

85. How does the CSS look like? 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; } 58 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

86. Some Things you cannot style (yet) Menu bar background Table headers Partly implemented: Gradients Planned: Having similar capabilities compared with WebKit’s gradients 59 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

87. How to enable CSS Styling Create a contribution to the 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> 60 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

88. How to use custom attributes? Java Label label = new Label(parent, SWT.NONE); label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel"); CSS #SeparatorLabel { color: #f08d00; } 61 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

89. e4 CSS Editors CSS has a well known syntax But which UI elements can be styled? Which CSS attributes does a specific element support? The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes A project is already set up, stay tuned… 62 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

90. Gradient Examples 63 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

91. Dynamic Theme Switching It is possible to change the CSS based styling at runtime Good for accessibility Good for user preferences 64 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

92. CSS Styling Engine Getting the styling engine: Display display = shell.getDisplay(); finalCSSEngine engine = (CSSEngine) display.getData("org.eclipse.e4.ui.css.core.engine"); This is a current workaround The engine should be a service accessible through the EclipseContext 65 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

93. Theme Switching Code URL url = FileLocator.resolve(new URL( "platform:/plugin/org.eclipse.e4.demo.contacts/css/new.css")); InputStreamReaderstreamReader = newInputStreamReader( url.openStream();); engine.reset(); engine.parseStyleSheet(streamReader); streamReader.close(); try { shell.setRedraw(false); shell.reskin(SWT.ALL); } finally { shell.setRedraw(true); } 66 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

94. Contacs Demo on RAP 67 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

95. How will the e4 IDE look like? Designers are working on a new e4 workbench look Watch bug 293481 for mockups Windows XP Windows 7 Mac Cocoa https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481 68 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

96. e4 IDE Mockup (February 2010) 69 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

97. Demo 70 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

98. Lab Task Install the Contacts Demo sources form the USB stick Start the demo Edit both css/dark-gradient.css and css/bright-gradient.css Play around switching the css styles at runtime and watch the differences you made Optional: Create a new colorful psychedelic look for the Contacts Demo. Send screen shots to kai@toedter.com  71 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

99. e4: Where to go from here: 72 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Eclipse e4 Wiki http://wiki.eclipse.org/E4 Eclipse e4 Tutorial http://www.vogella.de/articles/EclipseE4/article.html Eclipse e4 Whitepaper http://www.eclipse.org/e4/resources/e4-whitepaper.php Lars Vogel‘s Blog http://www.vogella.de/blog Tom Schindl‘s Blog http://tomsondev.bestsolution.at/ Kai Toeder http://www.toedter.com/blog/

100. Photo credits Target http://www.sxc.hu/photo/1078182 Rusty stuff http://www.sxc.hu/photo/450663 Binder: http://www.sxc.hu/photo/443042 Something is different http://www.sxc.hu/photo/944284 Praying Girl http://www.sxc.hu/photo/646227 Pin http://www.sxc.hu/photo/771409 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

101. Discussion © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 74

102. 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 75