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.
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.
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.
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
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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
The generated Project
5/28/2014 16 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
The generated “Hello, e4” Application
5/28/2014 17 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
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.
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
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.
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.
The e4 Application Model Editor
5/28/2014 22 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
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.
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
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
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.
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.
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.
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.
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.
Lab: Application Model Editor
5/28/2014 31 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
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.
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.
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.
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.
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.
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.
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
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
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
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
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
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
e4 Contacts with Menu
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 44
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
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
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
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.
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.
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
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
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
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
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
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.
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
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
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
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
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
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
@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
@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
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
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
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
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
e4 Contacts with List View
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 68
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
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
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
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
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
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
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
fragment.e4xmi in Model Editor
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 76
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
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
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
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
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.
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
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…
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
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
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
e4 Contacts with Selection
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 87
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
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
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.
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
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
Contacts Demo without CSS Styling
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 93
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
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
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
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
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
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.
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
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
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
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
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
e4 CSS Editor (2)
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 105
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%
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
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
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
e4 Contacts with blue Theme
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 110
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
3.x RCP Mail
© Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 112 5/28/2014
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
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
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.
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
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
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
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
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
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
RendererFactory Registration
Add a property to your product extension
name = "rendererFactoryUri"
value = "<URI to your class>"
E.g. "bundleclass://org.eclipse.e4.tutorial.contacts.renderer/org.eclipse.e4.tutorial.contacts.renderer.RendererFactory"
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 122
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
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
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
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
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
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
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
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
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/jfxpub-css_tutorial.htm
5/28/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 131
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
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
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