Developing Rich Clients with the Eclipse 4 Application Platform

This is the slide deck I use for my one day Eclipse 4 tutorial. See http://toedter.com/training/. You find the corresponding reference implementations of the labs and some code snippets at https://github.com/toedter/e4-tutorial. This work is licensed under a Creative Commons Attribution 4.0 International License.

1. Rich Client Development with the Eclipse 4 Application Platform Kai Tödter (Updated 2014/05/28) 5/28/2014 1 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
2. Who am I?  Senior Software System Architect at Siemens Building Technologies  Eclipse RCP/e4 expert  Open Source advocate  UX and Web Technology lover  E-mail: kai@toedter.com  Twitter: twitter.com/kaitoedter  Google+: gplus.to/toedter  Blog: toedter.com/blog 5/28/2014 2 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
3. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 3 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
4. e4 Objectives 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 4 Picture from fcl1971 http://www.sxc.hu/photo/1081630
5. e4 Objectives  Make it easier to write plug-ins  Allow better control over the look of Eclipse based products  Provide a uniform, pervasive platform across computing environments (Web / RIA, Desktop, Server, Cloud, Embedded)  Increase diversity of contributors to the platform  Maintain backward compatibility for API-clean clients 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 5
6. What’s new in Eclipse 4.x?  Application Model (based on EMF)  Application Model objects are mostly POJOs  Dependency Injection  CSS Styling  Rendering Engine  Services  … 5/28/2014 6 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
7. Eclipse RCP 4.x Architecture Operating System Java Virtual Machine Runtime (Equinox, OSGi) Application Model, Rendering Engine, CSS Styling, Dependency Injection, Services 4.x Workbench PDE EMF Core UI Core (JFace, SWT) JDT Additional Platform Bundles 3.x Compatibility Layer 5/28/2014 7 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
8. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 8 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
9. Starting Eclipse 4.x Development There are two options:  Eclipse 4.x SDK +  Eclipse 4.x tooling  Eclipse 3.x SDK +  Eclipse 4.x tooling  Eclipse 4.x RCP target platform For this tutorial we choose Eclipse 4.x SDK + Eclipse 4.x tooling 5/28/2014 9 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
10. Eclipse 4.x SDK on Windows 7 5/28/2014 10 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
11. Install the e4 Tooling  Select Help/Install new Software…  Usually work with: e4 IBuild Updates  Install E4 Tools/Eclipse e4 Tools (Incubation) 5/28/2014 11 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. Picture by Rodolfo Clix, http://www.sxc.hu/photo/1009690
12. Getting Started  Eclipse 4.x tooling provides a new wizard to generate an e4 based RCP application  We start with generation such a “Hello, e4” application  Later we will create our tutorial application e4 Contacts manually 5/28/2014 12 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
13. Lab: Install the e4 Tooling  Install the 2 local p2 repositories  eclipse-e4-repo-incubation-xxxxxx.zip  emf-xsd-Update-2.x.x.zip  Select Help/Install New Software…  Add these 2 local p2 repositories as archives  Select „Work with: Only local Sites“  Uncheck „Contact all update sites during install…“  Install  E4 Tools/Eclipse E4 Tools (Incubation) 5/28/2014 13 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
14. Lab: Generate “Hello, e4”  Start the SDK  Select New/Other…/e4/e4 Application Project  Name the project org.eclipse.e4.tutorial.hello  Click “Next”  Change property Name to Hello e4  Change property Provider to your name  Click “Finish” 5/28/2014 14 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
15. Lab: Launch “Hello, e4”  Double-Click org.e4-tutorial.hello.product  Click on “Launch an Eclipse Application” in the Testing section  If the launch fails, don’t worry…  Open your org.e4-tutorial.hello.product launch configuration, select the Plug-ins tab and add all required plug-ins  Launch again, this should work!  Play around with the application 5/28/2014 15 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
16. The generated Project 5/28/2014 16 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
17. The generated “Hello, e4” Application 5/28/2014 17 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
18. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 18 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
19. Application Model 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 19 Picture by miamiamia, http://www.sxc.hu/photo/1168590
20. Application Model  Uses EMF (Eclipse Modeling Framework)  Contains graphical elements, like  part stacks, parts, menu bar and toolbar  Contains non-graphical element, like  commands, handlers, key bindings  Can be modified at runtime  Can be edited using tools like the e4 Application Model Editor 5/28/2014 20 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
21. Differences with Eclipse 3.x  No distinction between views and editors => Everything is a part  No need of perspectives => Can be used if desired 5/28/2014 21 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
22. The e4 Application Model Editor 5/28/2014 22 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
23. Application Model  The model is stored in an XMI file  Best practice is to name it Application.e4xmi  The model is contributed through the extension point org.eclipse.core.runtime.products  In the product tag there is a property  with name applicationXMI  And value org.eclipse.e4.tutorial.hello/Application.e4xmi 5/28/2014 23 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
24. NLS / Externalized Texts  Similar to 3.x  Use %<key> in the model as a placeholder  Add „key“ to the bundle‘s resource properties file (default is OSGI-INF/l10n/bundle.properties)  Translation is a pure decoration process that happens at rendering time  Switching the UI language dynamically on the fly is planned for future versions  Use the model tooling to externalize Strings 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 24
25. Addons  Allow to bring in code that needs access to the DI container e.g. to register code or register with the event bus  Used to plug in into the event bus to modify the application model on certain events (e.g. double click on a TabItem)  A standard e4 app needs at least 6 addons  CommandServiceAddon, CommandProcessingAddon  ContextServiceAddon, ContextProcessingAddon  BindingServiceAddon, BindingProcessingAddon 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 25
26. Lab: Manual Application Creation  Create a Plug-in Project org.eclipse.e4.tutorial.contacts  Add a Product Extension  Create a minimal Application Model  Create a Product Configuration  Launch the application 5/28/2014 26 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
27. Lab: Create a Plug-in Project  On the first wizard page  Name the project org.eclipse.e4.tutorial.contacts  Select Equinox as target platform  On the second wizard page  Change the Name property to e4 Contacts  Put your name as Vendor  Uncheck Generate an Activator  Click Finish  Now your project is created 5/28/2014 27 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
28. Lab: Create a Product Definition (1)  Open the file META-INF/MANIFEST.MF  Click on Extensions in the Overview tab  This makes the Extensions tab visible if hidden  Choose the “Dependencies” tab and add a dependency to org.eclipse.equinox.app  Save (Press CTRL s)  Select the Extensions tab and add the extension point org.eclipse.core.runtime.products  Make sure to put product in the ID field 5/28/2014 28 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
29. Lab: Create a Product Definition (2)  Add a product to the …products extension  In the application field, put org.eclipse.e4.ui.workbench.swt.E4Application  Use e4 Contacts as product name 5/28/2014 29 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
30. Lab: Minimal Application Model  Select menu New/Other…/Eclipse 4/Model/New Application Model  Put /org.eclipse.e4.tutorial.contacts as Container  Click Finish, then the Application.e4xmi will be opened in the e4 WorkbenchModel editor  In the editor, click Window in the left area and select Trimmed Window in the right area  Click on the icon next to Trimmed Window  Set Width to 800 ,Height to 600 and Label to e4 Contacts 5/28/2014 30 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
31. Lab: Application Model Editor 5/28/2014 31 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
32. Lab: Resulting Application.e4xmi <?xml version="1.0" encoding="ASCII"?> <application:Application xmi:version= "2.0" xmlns:xmi= "http://www.omg.org/XMI" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xmlns:application= "http://www.eclipse.org/ui/2010/UIModel/application" xmlns:basic= "http://www.eclipse.org/ui/2010/UIModel/application/ui/basic" xmi:id= "_PXE0EJ-qEd-iBNJWVQ-d9Q" elementId= "org.eclipse.e4.tutorial.contacts.application" > <children xsi:type= "basic:TrimmedWindow" xmi:id= "_eB6zsJ-xEd-iBNJWVQ-d9Q" label= "e4 Contacts" width= "800" height= "600" /> </application:Application> 5/28/2014 32 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
33. Lab: Create a Product Configuration (1)  Create a product configuration  Name it contacts  Choose Use an existing product: org.eclipse.e4.tutorial.contacts.product  Click Finish  Add dependencies  org.eclipse.e4.ui.workbench.renderers.swt  Click Add Required Plug-ins and save 5/28/2014 33 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
34. Lab: Create a Product Configuration (2)  Open plugin.xml in the manifest editor  Add property to the e4 Contacts product  name appName  Value e4 Contacts  Add property to the e4 Contacts product  name applicationXMI  value org.eclipse.e4.tutorial.contacts/Application.e4xmi  Property applicationXMI is not necessary if you name the application model Application.e4xmi 5/28/2014 34 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
35. Lab: Resulting plugin.xml <plugin> <extension id="product" point="org.eclipse.core.runtime.products" > <product application="org.eclipse.e4.ui.workbench.swt.E4Application" name="e4 Contacts" > <property name="appName" value="e4 Contacts" > </property> <property name="applicationXMI" value="org.eclipse.e4.tutorial.contacts/Application.e4xmi" > </property> </product> </extension> </plugin> 5/28/2014 35 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
36. Lab: Launch empty e4 Contacts App 5/28/2014 36 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
37. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 37 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
38. Commands and Handlers 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 38 Picture from http://www.sxc.hu/photo/1005737
39. Command  Is an abstraction for a generic action  Like save, open, etc.  Has no implementation of a behavior  This is done by handlers  Can be used in toolbars or menus  The same command can be customized with specific UI elements, like icon, text, etc.  Have properties: id, name, description, category and tag  Can have a key binding 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 39
40. Handler  Provides an implementation of a behavior  Can be bound to a Command  Is a POJO!  Uses Annotations  to declare methods to be executed: @Execute  to check, if it can be executed: @CanExecute  Gets its dependencies injected (DI) 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 40
41. public class ExitHandler { @Execute public void exit(IWorkbench workbench) { workbench.close(); } } A simple Exit Handler 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 41 Injected at Runtime
42. Lab: Create a Handler  Add two new dependencies to your project (open plugin.xml in editor, then select “Dependencies” tab)  org.eclipse.e4.ui.workbench  org.eclipse.e4.core.di  Create the class ExitHandler in the package org.eclipse.e4.tutorial.contacts.handlers  Use the @Execute annotation  Use the interface IWorkbench in the execute method, it will be injected automatically 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 42
43. Lab: Add a Menu  In the e4 WorkbenchModel editor add a Main Menu to the Trimmed Window  Give it the id menu:org.eclipse.ui.main.menu  Expand the Main Menu and select Children  Add a Menu with Label File  Add a Direct MenuItem to the Menu  Choose your ExitHandler the for the Class URI and put Exit (Direct) in the Label field  Save and launch the e4 contacts product 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 43
44. e4 Contacts with Menu 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 44
45. Lab: Use a Command (1)  In the e4 WorkbenchModel editor select Application/Commands  Add a Command with  Id contacts.exit  Name Exit (Command)  In the e4 WorkbenchModel editor select Application/Handlers  Add a Handler and use contacts.exit as Command 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 45
46. Lab: Use a Command (2)  In the e4 WorkbenchModel editor select Trimmed Window/Main Menu/ Children/Menu/Children  Add a HandledMenuItem to the Menu  Use contacts.exit as Command  Save and launch the e4 contacts product 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 46
47. e4 Contacts with two Menu Items 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 47
48. The Domain Model (1)  We use two domain model interfaces  An Contact  Has attributes like firstName, lastName, email  An ContactsRepository  Provides methods for getting all contacts, adding and removing a contact  We use OSGi Declarative Services (DS)  Loose coupling  Implementation can be changed at runtime  DI in Application Model objects works out of the box 5/28/2014 48 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
49. The Domain Model (2)  Bundle org.eclipse.e4.tutorial.contacts.model contains the two interfaces  Bundle org.eclipse.e4.tutorial.contacts.model.simple contains a simple implementation and the OSGi declarative service 5/28/2014 49 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
50. Contact Interface public interface Contact { String getFirstName(); void setFirstName(String firstName); String getLastName(); void setLastName(String lastName); String getEmail(); void setEmail(String email); void addPropertyChangeListener( PropertyChangeListener listener); void removePropertyChangeListener( PropertyChangeListener listener); } 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 50 Needed for Beans Databinding
51. ContactsRepository Interface public interface ContactsRepository { IObservableList getAllContacts(); void addContact(Contact contact); void removeContact(Contact contact); } IObservableList can be used with databinding 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 51
52. OSGi Declarative Service <?xml version="1.0" encoding="UTF-8"?> <scr:component xmlns:scr="http://www.osgi.org/xmlns/scr/v1.1.0" name="org.eclipse.e4.tutorial.contacts.model.simple.contactsrepository"> <implementation class="o.e.e4.tutorial.contacts.model.simple.SimpleContactsRepository"/> <service> <provide interface="o.e.e4.tutorial.contacts.model.ContactsRepository"/> </service> </scr:component> 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 52 * o.e.e4 = org.eclipse.e4
53. Parts 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 53 Picture from http://www.sxc.hu/photo/1269461
54. Part  A Part is a POJO!  There is no distinction between ViewPart and EditorPart like in Eclipse 3.x  A Part gets his depended objects through DI  A Part can use life cycle annotations for its methods  The UI within a part is implemented with SWT and JFace 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 54
55. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 55 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
56. Dependency Injection (DI) 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 56 Picture by Roberto Clix, from http://www.sxc.hu/photo/948813
57. e4 Dependency Injection (1)  JSR 330 compatible annotations  @javax.inject.Inject  Field, Constructor and Method injection  @javax.inject.Named  A named qualifier to the context object  Default is fully qualified class name of the injected type  @javax.inject.Singleton  Should only be instantiated once per injection scope  Provider<T>  Defers the injection to demand-time. Any value that can be injected can also be obtained through a provider 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 57
58. e4 Dependency Injection (2)  JSR 250 compatible annotations  @PostConstruct  Is invoked after all injections are done and the object is created  @PreDestroy  Is invoked before the object will be destroyed by the DI container. This is good for cleaning up… 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 58
59. e4 Dependency Injection (3)  e4 specific annotations  @Optional  Marks a parameter or attribute as optional. If there is no object to be injected at runtime, null is injected instead but the workflow continues  @Active  Similar purpose to @Named, indicating the value should be resolved from the active context  @Preference  Provides simple interfacing with the Eclipse preferences framework 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 59
60. e4 Dependency Injection (4)  e4 specific annotations  @Creatable  will be automatically created by the injector if an instance was not present in the injection context. The created instance is not stored in the context  @Focus  Must be used with parts to set the focus on a specific control 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 60
61. e4 Dependency Injection (5)  e4 specific annotations  @CanExecute, @Execute  For Handler implementations  @GroupUpdates  For batched updates, see example on next slides  @EventTopic, @UIEventTopic  To react on events, see example on next slides  @AboutToShow, @AboutToHide  Used in dynamic menu contribution elements. The annotated methods are called on showing/hiding of the menu 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 61
62. @GroupUpdates @Inject @GroupUpdates void setInfo(@Named("string1") String s, @Named("string2") String s2) { … … IEclipseContext context = ...; context.set("string1", "a"); context.set("string2", "b"); // trigger @GroupUpdates context.processWaiting(); 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 62
63. @EventTopic @Inject public void setSelection(@EventTopic(REFRESH_EVENT) Object data) { // … } @UIEventTopic ensures the event notification is performed in the UI thread 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 63
64. The List View Part public class ListView { @Inject public ListView( Composite parent, ContactsRepository contactsRepository) { // create UI ... } } 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 64
65. Add a Part to the Application Model  Add a Part to the Controls section  Use a POJO like the List View as Class URI 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 65
66. Lab: Add a List View (1)  Import the projects  org.eclipse.e4.tutorial.contacts.model  org.eclipse.e4.tutorial.contacts.model.simple  In your project org.eclipse.e4.tutorial.contacts  Add dependencies  org.eclipse.swt  org.eclipse.jface  org.eclipse.jface.databinding  javax.inject  org.eclipse.core.databinding  org.eclipse.core.databinding.beans  org.eclipse.e4.tutorial.contacts.model  Create a class org.eclipse.e4.tutorial.contacts.views.ListView 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 66
67. Lab: Add a List View (2)  Copy the snippet “ListView.txt” into the body of your List View class  Add your List View as Part to the Application Model  Save all, then open your product configuration and add all required plug-ins in the dependencies  Launch the application 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 67
68. e4 Contacts with List View 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 68
69. Part Stacks and Sashes (1)  A typical RCP application has more than one Part  To use a Sash and a Part Stack, just add a PartSashContainer to the Trimmed Window and a Part Stack to the PartSashContainer  You can use Drag & Drop to move your part into the Part Stack 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 69
70. Part Stacks and Sashes in the Editor 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 70
71. Lab: Add Sash and Part Stacks  Add a PartSashContainer to the Trimmed Window  Use Horizontal orientation  Add two Part Stacks to the Sash  Move your List View Part to the first Part Stack  Give the second Part Stack the id org.eclipse.e4.tutorial.contacts.partstacks.second  We need that later in the tutorial 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 71
72. e4 Contacts with Part Stacks and Sash 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 72
73. Application Model Contributions  The Application Model is dynamic  Other bundles can make all kinds of contributions  Contributors just need to know the id of the element they want to contribute to  There are two kind of contributions  Static fragments  Dynamic processors 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 73
74. Model Fragments  In this tutorial, a new bundle wants to contribute a part to the second part stack  This bundle has to contribute to the extension point org.eclipse.e4.workbench.model  The extension refers to a new XMI model fragment, stored in the file xmi/fragment.e4xmi 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 74
75. Model Fragment Extension <extension id="org.eclipse.e4.tutorial.contacts.views.details.fragment" point="org.eclipse.e4.workbench.model"> <fragment uri="xmi/fragment.e4xmi"> </fragment> </extension> 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 75
76. fragment.e4xmi in Model Editor 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 76
77. Lab: New Part as Model Fragment (1)  Create a new bundle org.eclipse.e4.tutorial.contacts.views.details  Add the following dependencies to this bundle:  javax.inject  org.eclipse.swt  org.eclipse.core.databinding  org.eclipse.core.databinding.beans  org.eclipse.jface.databinding  org.eclipse.e4.tutorial.contacts.model  org.eclipse.e4.core.di  org.eclipse.e4.ui.services 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 77
78. Lab: New Part as Model Fragment (2)  Copy the file DetailsView.java into the src folder of the new project  Create a new folder xmi in the new project  Create a New Model Fragment in the xmi folder  Add the DetailsView as Part to the new Model Fragment, set  Element ID org.eclipse.e4.tutorial.contacts.partstacks.second  Featurename children 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 78
79. Lab: New Part as Model Fragment (3)  Create the extension for org.eclipse.e4.workbench.model  Tip: Uncheck “Show only extensions…”  Don’t forget to create a new fragment (right click on org.eclipse.e4.workbench.model in the Extensions tab of the editor …)  Add the bundle org.eclipse.e4.tutorial.contacts.views.details to your run configuration (add it to the dependencies of contacts.product)  Save and launch 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 79
80. e4 Contacts with new Model Fragment 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 80
81. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 81 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
82. Services 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 82 Picture from http://www.sxc.hu/photo/157966
83. e4 Services  Editor lifecycle  Receiving input  Selection  Standard dialogs  Persisting UI state  Logging  Interface to help system  Menu contributions  Authentication  Authorization  Long-running operations  Progress reporting  Error handling  Navigation model  Resource management  Status line  Drag and drop  Undo/Redo  Accessing preferences 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 83 The above list is not complete…
84. Example: Selection Provider @Inject private ESelectionService selectionService; ... tableViewer .addSelectionChangedListener(new ISelectionChangedListener() { public void selectionChanged(SelectionChangedEvent event) { IStructuredSelection selection = (IStructuredSelection) event.getSelection(); selectionService.setSelection(selection.getFirstElement()); } }); 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 84
85. Example: Selection User @Inject public void setSelection( @Optional @Named(IServiceConstants.ACTIVE_SELECTION) Contact contact) { if (contact != null) { ... 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 85
86. Lab: Add Selection  React on selections in the ListView and propagate them to the selection service  Make the DetailsView reacting on the active selection  Launch and check if the selection mechanism is working properly 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 86
87. e4 Contacts with Selection 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 87
88. Lifecycle Hooks  You can register a property in the product extension to hook in the application’s lifecycle  Key: lifeCycleURI  Value: bundleclass://<bundle id>/<class>  E.g. <property> name="lifeCycleURI“ value="bundleclass://login/login.LifeCycleManager"> </property> 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 88
89. Lifecycle Hooks Annotations  @PostContextCreate  Called after the creation and initialization of the Application’s IEclipseContext  Can be used to add services, etc. to the context  @ProcessAdditions  Called directly after the application model is loaded  Can be used to add additional elements to the application model  @ProcessRemovals  Can be used to remove elements from the application model  @PreSave  Called before the application model is saved 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 89
90. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 90 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
91. UI Styling 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 91 Picture from http://www.sxc.hu/photo/1089931
92. UI Styling  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 many of the above issues © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 92 5/28/2014
93. Contacts Demo without CSS Styling 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 93
94. Dark CSS Styling with radial Gradients © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 94 5/28/2014
95. Gray CSS Styling with linear Gradients © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 95 5/28/2014
96. Blue CSS Styling with linear Gradients 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 96
97. 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; } .MTrimBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px; } © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 97 5/28/2014
98. Some Things you cannot style (yet?)  Menu bar background  Table headers  Buttons  Scrollbars  … Rudamentary implemented:  Gradients © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 98 5/28/2014
99. How to enable CSS Styling  Create a contribution to the extension point org.eclipse.core.runtime.products  In the product tag add a property  with name applicationCSS  And value platform:/plugin/<bundle id>/<path to css>  Use this mechanism if you only want to provide one CSS theme 5/28/2014 99 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
100. CSS Themes Create a contribution to the extension point org.eclipse.e4.ui.css.swt.theme <extension point="org.eclipse.e4.ui.css.swt.theme"> <theme basestylesheeturi="css/blue.css" id="org.eclipse.e4.tutorial.contacts.themes.blue" label="Blue Theme"> </theme> </extension> © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 100 5/28/2014
101. How to enable CSS Styling with Theme 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"> <property name="cssTheme" value="org.eclipse.e4.tutorial.contacts.themes.blue"> </property> </product> </extension> © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 101 5/28/2014
102. How to enable CSS Styling (3)  Extension point org.eclipse.ui.css.swt.theme © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 102 5/28/2014
103. How to use custom attributes?  Java: Label label = new Label(parent, SWT.NONE); label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel");  Application Model: Give the element an id  CSS: #SeparatorLabel { color: #f08d00; } © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 103 5/28/2014
104. e4 CSS Editor  CSS has a well known syntax  But which UI elements can be styled?  Which CSS attributes does a specific element support?  Eclipse 4.x tooling includes an Xtext based CSS editor with syntax highlighting and content assist  You find it under E4 Tools/E4 CSS editor in the e4 p2 repository © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 104 5/28/2014
105. e4 CSS Editor (2) 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 105
106. Gradient Examples © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 106 5/28/2014 linear orange black linear orange black 60% linear orange black orange 50% 100% radial orange black radial orange black 60% radial orange black orange 50% 100%
107. Dynamic Theme Switching  It is possible to change the CSS based theme at runtime  Good for accessibility  Good for user preferences 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 107 Picture from http://www.sxc.hu/photo/823108
108. Theme Switching  DI of IThemeEngine  IThemeEngine provides API for applying styles and theme management @Execute public void setTheme( IThemeEngine engine ) { engine.setTheme( "org.eclipse.e4.demo.contacts.themes.darkgradient"); } © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 108 5/28/2014
109. Lab: Add a CSS Theme  Open the fragment.e4xmi in the model editor ad set the part id to DetailsView  This is used by the css: #DetailsView  Add dependency to org.eclipse.e4.ui.css.swt.theme  In the …contacts project, create a folder css  Copy the file blue.css in the css folder  Create a theme extension in the plugin.xml for the blue theme  Use this theme in the product extension  Save and launch 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 109
110. e4 Contacts with blue Theme 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 110
111. Styling an 3.x RCP Application 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 111 Picture from http://www.sxc.hu/photo/1089931
112. 3.x RCP Mail © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 112 5/28/2014
113. 3.x RCP Mail with CSS Styling © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 113 5/28/2014
114. 3.x RCP Mail with blue CSS Styling © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 114 5/28/2014
115. Outline  Eclipse 4.x RCP Overview  Creating a “Hello, World” RCP 4.x application  Application model  Toolbar, menu, parts, commands, and handlers  Dependency injection  Services  Look & Feel customization with CSS  Rendering Engine 5/28/2014 115 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
116. Rendering 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 116 Picture from http://www.sxc.hu/photo/1263022
117. Application Model and Rendering  The Application model has no dependencies to a specific UI toolkit  During startup, the app context is asks for an IPresentationEngine service  The default is an SWT based presentation engine  The presentation engine asks a registered RendererFactory for Renderers 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 117
118. Tasks of the Renderer  Manages lifecycle of the UI element  Creation  Model to widget binding  Rendering  Disposal 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 118
119. RendererFactory Example 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; } //... 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 119
120. Multiple Renderers  One model element (e.g. a Part Stack)  Could have different renderers 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 120 Part Stack CTabRenderer ... PShelfRenderer
121. Custom Renderer Factories public class RendererFactory extends WorkbenchRendererFactory { @Override public AbstractPartRenderer getRenderer(MUIElement uiElement, Object parent) { if (uiElement instanceof MPartStack && usePShelfRenderer() ) { if( stackRenderer == null ) { stackRenderer = new PShelfStackRenderer(); initRenderer(stackRenderer); } return stackRenderer; } return super.getRenderer(uiElement, parent); } } 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 121
122. RendererFactory Registration  Add a property to your product extension  name = "rendererFactoryUri"  value = "<URI to your class>"  E.g. "bundleclass://org.eclipse.e4.tutorial.contacts.ren derer/org.eclipse.e4.tutorial.contacts.renderer.Re ndererFactory" 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 122
123. Lab: Use a custom RendererFactory  Create a new class RendererFactory that extends WorkbenchRendererFactory  Implement getRenderer(MUIElement uiElement, Object parent)  Print out the class of the MUIElement  Return super.getRenderer()…  Register the RendererFactory as property in your product  Save and launch 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 123
124. Current SWT Rendering Workflow  Product defines E4Application  o.e = org.eclipse  o.e.e4.ui.internal.workbench.swt.E4Application  E4 SWT Application loads application model  E4 SWT Application creates E4 SWT Workbench  o.e.e4.ui.internal.workbench.E4Workbench  E4 SWT Workbench creates SWT Rendering Engine  SWT Rendering Engine creates SWT Renderers 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 124
125. Prototype Rendering Workflow  Product defines E4Application  Either SWT, JavaFX or Swing  All are derived from Generic E4 Application  Generic E4 Application loads application model  UI specific E4 Application creates UI specific Workbench  All specific Workbenches are derived from Generic Workbench and only provide Rendering Engine URI  Generic Workbench creates UI specific Rendering Engine  UI specific Rendering Engine create UI specific Renderers 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 125
126. Advantages  All application model related code is shared by all UI toolkit specific implementations  Same idea also works for Addons  Generic MinMax has a proof of concept implementation This could be the base for product-quality rendering engines based on SWT, JavaFX and Swing 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 126
127. e4 Contacts Demo with JavaFX Renderer 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 127
128. e4 Contacts Demo with Swing Renderer 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 128
129. e4 Contacts Demo with Swing Renderer (2) 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 129
130. Alternative Approach in e(fx)clipse  e(fx)clipse provides a stand-alone JavaFX rendering engine  Already separated in base- and JavaFX-specific parts  But no generic approach to support SWT etc. => Since I do not work on my POC, I recommend e(fx)clipse for JavaFX rendering of the Eclipse 4 application model 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 130
131. Links & Downloads  e(fx)clipse  Needed for JavaFX e4 Rendering  http://efxclipse.org  e4 Rendering Proof of Concept  https://github.com/toedter/e4-rendering  JavaFX CSS Styling  http://docs.oracle.com/javafx/2/css_tutorial/jfxpu b-css_tutorial.htm 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 131
132. 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 132 Picture from http://www.sxc.hu/photo/922004
133. License & Acknowledgements  This work is licensed under a Creative Commons Attribution 4.0 International License.  See http://creativecommons.org/licenses/by/4.0/  Many thanks to Tom Schindl (http://www.bestsolution.at) and Lars Vogel (www.vogella.de) for providing valuable feedback 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 133
134. Picture Index Many thanks to the authors of the following pictures:  Slide “e4 Objectives”: http://www.sxc.hu/photo/1081630  Slide “Install the e4 Tooling”: http://www.sxc.hu/photo/1009690  Slide “Application Model”: http://www.sxc.hu/photo/1168590  Slide “Commands and Handlers: http://www.sxc.hu/photo/1005737  Slide “Parts”: http://www.sxc.hu/photo/1269461  Slide “Dependency Injection (DI)”: http://www.sxc.hu/photo/948813  Slide “Services”: http://www.sxc.hu/photo/157966  Slide “UI Styling”: http://www.sxc.hu/photo/1089931  Slide “Dynamic Theme Switching”: http://www.sxc.hu/photo/823108  Slide “Rendering”: http://www.sxc.hu/photo/1263022  Slide “Discussion”: http://www.sxc.hu/photo/922004 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 134