Developing Rich Clients with the Eclipse 4 Application Platform

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: kai@toedter.com
 Twitter: twitter.com/kaitoedter
 Google+: gplus.to/toedter
 Blog: toedter.com/blog

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

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

What’s new in Eclipse 4.x?
 Application Model (based on EMF)
 Application Model objects are mostly POJOs
 Dependency Injection
 CSS Styling
 Services
 …

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

Outline
 Toolbar, menu, parts, commands, and handlers
 Services

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

Eclipse 4.x SDK on Windows 7

Install the e4 Tooling
 Select Help/Install new Software…
 Usually work with: e4 IBuild Updates
 Install E4 Tools/Eclipse e4 Tools (Incubation)
Picture by Rodolfo Clix,

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

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)

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”

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

The generated Project

The generated “Hello, e4” Application

Outline
 Services

Application Model
Picture by miamiamia,

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

Differences with Eclipse 3.x
 No distinction between views and editors
=> Everything is a part
 No need of perspectives
=> Can be used if desired

The e4 Application Model Editor

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

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

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

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

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

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
 Make sure to put product in the ID field

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

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

Lab: Application Model Editor

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>

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

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

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>

Lab: Launch empty e4 Contacts App

Outline
 Services

Commands and Handlers
Picture from

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

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)

public class ExitHandler {
@Execute
public void exit(IWorkbench workbench) {
workbench.close();
}
}
A simple Exit Handler
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

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

e4 Contacts with Menu

Lab: Use a Command (1)
 In the e4 WorkbenchModel editor select
Application/Commands
 Add a Command with
 Id contacts.exit
 Name Exit (Command)
Application/Handlers
 Add a Handler and use contacts.exit as
Command

Lab: Use a Command (2)
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

e4 Contacts with two Menu Items

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

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

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);
}
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

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>
* o.e.e4 = org.eclipse.e4

Parts
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

Outline
 Services

Dependency Injection (DI)
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

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

 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

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

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

@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();

@EventTopic
@Inject public void
setSelection(@EventTopic(REFRESH_EVENT)
Object data) {
// …
}
@UIEventTopic ensures the event notification is
performed in the UI thread

The List View Part
public class ListView {
@Inject
public ListView(
Composite parent,
ContactsRepository contactsRepository) {
// create UI ...
}
}

Add a Part to the Application Model
 Add a Part to the Controls section
 Use a POJO like the List View as Class URI

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
 Create a class
org.eclipse.e4.tutorial.contacts.views.ListView

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

e4 Contacts with List View

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

Part Stacks and Sashes in the Editor

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

e4 Contacts with Part Stacks and Sash

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

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

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>

fragment.e4xmi in Model Editor

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.core.di
 org.eclipse.e4.ui.services

 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

 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

e4 Contacts with new Model Fragment

Outline
 Services

Services
Picture from

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
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());
}
});

Example: Selection User
@Inject
public void setSelection(
@Optional
@Named(IServiceConstants.ACTIVE_SELECTION)
Contact contact) {
if (contact != null) {
...

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

e4 Contacts with Selection

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>

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

Outline
 Services

UI Styling
Picture from

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. 925/28/2014

Contacts Demo without CSS Styling

Dark CSS Styling with radial Gradients

Gray CSS Styling with linear Gradients

Blue CSS Styling with linear Gradients

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;
}

Some Things you cannot style (yet?)
 Menu bar background
 Table headers
 Buttons
 Scrollbars
 …
Rudamentary implemented:
 Gradients

How to enable CSS Styling
 Create a contribution to the extension point
 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

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>

How to enable CSS Styling with Theme
Create a contribution to the extension point
<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>

How to enable CSS Styling (3)
 Extension point
org.eclipse.ui.css.swt.theme

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;
}

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

e4 CSS Editor (2)

Gradient Examples
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
Picture from

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");
}

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

e4 Contacts with blue Theme

Styling an 3.x RCP Application
Picture from

3.x RCP Mail

3.x RCP Mail with CSS Styling

3.x RCP Mail with blue CSS Styling

Outline
 Services

Rendering
Picture from

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

Tasks of the Renderer
 Manages lifecycle of the UI element
 Creation
 Model to widget binding
 Rendering
 Disposal

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;
}
//...

Multiple Renderers
 One model element (e.g. a Part Stack)
 Could have different renderers
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);
}
}

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"

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

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

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

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

e4 Contacts Demo with JavaFX Renderer

e4 Contacts Demo with Swing Renderer

e4 Contacts Demo with Swing Renderer (2)

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

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

Picture from

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

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

Developing Rich Clients with the Eclipse 4 Application Platform

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Developing Rich Clients with the Eclipse 4 Application Platform (20)

Recently uploaded (20)

Developing Rich Clients with the Eclipse 4 Application Platform