Developing Rich Clients with the Eclipse 4 Application Platform

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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: [email protected]  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.

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

The generated Project 5/28/2014 16 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 17

Slide 17 text

The generated “Hello, e4” Application 5/28/2014 17 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

The e4 Application Model Editor 5/28/2014 22 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

NLS / Externalized Texts  Similar to 3.x  Use % 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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

Lab: Application Model Editor 5/28/2014 31 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 32

Slide 32 text

Lab: Resulting Application.e4xmi 5/28/2014 32 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

Lab: Resulting plugin.xml 5/28/2014 35 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

e4 Contacts with Menu 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

OSGi Declarative Service 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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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  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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

@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

Slide 63

Slide 63 text

@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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

e4 Contacts with List View 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Model Fragment Extension 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 75

Slide 76

Slide 76 text

fragment.e4xmi in Model Editor 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 76

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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.

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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…

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

e4 Contacts with Selection 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 87

Slide 88

Slide 88 text

Lifecycle Hooks  You can register a property in the product extension to hook in the application’s lifecycle  Key: lifeCycleURI  Value: bundleclass:///  E.g. name="lifeCycleURI“ value="bundleclass://login/login.LifeCycleManager"> 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 88

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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.

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Contacts Demo without CSS Styling 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 93

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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//  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.

Slide 100

Slide 100 text

CSS Themes Create a contribution to the extension point org.eclipse.e4.ui.css.swt.theme © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 100 5/28/2014

Slide 101

Slide 101 text

How to enable CSS Styling with Theme Create a contribution to the extension point org.eclipse.core.runtime.products © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 101 5/28/2014

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

e4 CSS Editor (2) 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 105

Slide 106

Slide 106 text

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%

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

e4 Contacts with blue Theme 5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 110

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

3.x RCP Mail © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 112 5/28/2014

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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.

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

RendererFactory Registration  Add a property to your product extension  name = "rendererFactoryUri"  value = ""  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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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