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