1. © 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.  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.  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.  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. Tom Schindl BestSolution.at © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

6.  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.  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.  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.  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.  Example of an e4-Part © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10 public class MyPart { @Inject private ECommandService cmdService; @Inject public SampleView(Composite parent) { } @Inject private void setSelection(@Optional @Named( IServiceConstants.SELECTION) Contact contact) { // Handle changed selection } private void execCommand() { // Execute command }

11.  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.  Example Usage of e4 PostConstruct /PreDestroy Annotations © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12 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 }

13.  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.  Eclipse DI can consumed standalone in OSGi- Applications © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14 public Object start() { // Get Bundle Information Bundle bundle = FrameworkUtil.getBundle(getClass()); BundleContext bundleContext = bundle.getBundleContext(); IEclipseContext eclipseCtx = EclipseContextFactory.getServiceContext(bundleContext); // Fill Context with information using set(String,Object) // … // Create instance of class ContextInjectionFactory.make(MyPart.class, eclipseCtx); }

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

16.  Create a Headless RCP-Application  Add as dependency ▪ org.eclipse.e4.core.services ▪ javax.inject ▪ org.eclipse.swt ▪ org.eclipse.jface  Create a class MyPart with a TableViewer  Constructor accepts an SWT-Composite 16 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

17.  Import org.eclipse.tutorial.pgm.service  Inject org.eclipse.tutorial.pgm.service.ITimeService  Register Listener in postconstruction phase and update viewer with Informations  Unregister Listener in predestroy 17 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

18.  Use Method-Injection  Add method set-method which injects an Object of type String known under the FQN „org.eclipsecon.myObject“ (hint use the @Named and @Optional )  Start a thread before launching the event loop and set a new value in the IEclipseContext for „org.eclipsecon.myObject“ 18 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

19. Lars Vogel

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

21.  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. Why a new approach?

23.  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.  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

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

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

29. If I only had a consistent view and behavior of the Eclipse workbench 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, …) © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

31. Application Part (aka View / Editor)

32. 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. 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. Application.e4xmi 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. © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Application.e4xmi Model Components User changes

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

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

37. public class ListView { @Inject private IEclipseContext context; @Inject public ListView(Composite parent) { //... © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Parts are POJO’s Services are injected via the the framework Defined Lifecycle via annotioans ( @PostConstruct, @Predestroy)  Re-usable  Easier to test

38. © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Eclipse e4 Eclipse 3.x

39. 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)

40. How is this model translated into UI components?

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

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

44. public class WorkbenchRendererFactory implements IRendererFactory { public AbstractPartRenderer getRenderer(MUIElement uiElement, Object parent) { if (uiElement instanceof MPart) { if (contributedPartRenderer == null) { contributedPartRenderer = new ContributedPartRenderer(); initRenderer(contributedPartRenderer); } return contributedPartRenderer; } //... © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

47. © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)  Other services are for example  Logger  IShellProvider  OSGi services is also available via dependency injection  Workbench Services follow usually with E*Service pattern, e.g.  EPartService  ESelectionService  EModelService

48.  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)

49.  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)

50.  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)

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

52.  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

53.  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.

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

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

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

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

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

59.  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.

60. 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"> 60 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

61.  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.

62.  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.

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

64.  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.

65. Getting the styling engine: Display display = shell.getDisplay(); final CSSEngine 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.

66. URL url = FileLocator.resolve(new URL( "platform:/plugin/org.eclipse.e4.demo.contacts/css/new.css")); InputStreamReader streamReader = new InputStreamReader( 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.

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

68.  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?i d=293481 https://bugs.eclipse.org/bugs/show_bug.cgi?i d=293481 68 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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

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

71.  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.

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

73.  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

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

75.  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_UShttp://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.athttp://www.bestsolution.at  Kai Tödter, Siemens AG 75