Post on 15-May-2015
description
transcript
Eclipse e4 Tutorial
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Tom Schindl – BestSolution.atLars Vogel – http://www.vogella.de
Kai Tödter – Siemens AG
OutlineTheory
The e4 Programming Model – Tom Schindl
The Workbench Model – Lars Vogel Styling in e4 – Kai Tödter
Labs Programming Model (looking a bit
behind e4 Dependency Injection) Create an RCP-Application from scratch Work with CSS to retheme the Contacts
Demo© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2
InstallationUSB-Sticks with Eclipse-SDK
Only copy the version you need for your OS located at SDK-Folder
Slides as PDFs located in slides-Folder Examples code located in samples-
Folder Solutions code located in solutions-
Folder
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3
E4 and Example Installation
Copy the e4 zip file on your laptop and unzip it. Start e4 with eclipse.exe
Use File -> Import -> „Existing Projects into Workspace“ to import the projects from directory „samples“. „Select archive file“ -> *.zip
4© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
e4 The Programming Model
Tom SchindlBestSolution.at
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
OutlinePOJO as the Programming ModelDependency Injection
JSR 330 Annotations e4 specific Annotations The IEclipseContext
HandlersLab Tasks
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6
POJO as the ProgrammingModel
All building blocks of e4 are POJO
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7
2 Main Object-TypesPart
UI Component representing an Editor, Table, Tree, …
Most likely has a constructor which accepts a Composite
Handler Reacts on Commands execute by the
user through Button press, KeyBinding, …
Has to have a method named execute() with a variable number of Parameters
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
Dependency InjectionWhat is DI
Inversion of control: Your application doesn’t reach out stuff but gets it provided/injected from the outside framework
e4 provides an JSR 330 compatible injection implementation @Inject – Field, Constructor and Method
injection @Named – Specify a custom qualifier to
context object (default is fully qualified classname of the injected type)
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9
Dependency InjectionExample of an e4-Part
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10
public class MyPart { @Inject private ECommandService cmdService;
@Inject public SampleView(Composite parent) { }
@Inject private void setSelection(@Optional @Named( IServiceConstants.SELECTION) Contact contact) { // Handle changed selection }
private void execCommand() { // Execute command }}
Dependency Injectione4 specific Annotations
@Optional: Marking the parameter as optional
@PostConstruct: Called after Object created and Fields- and Methods-Injection finished
@PreDestroy: Called before the object is destroyed (e.g. the Part shown in the UI is removed)
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 11
Dependency InjectionExample Usage of e4
PostConstruct /PreDestroy Annotations
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12
public class MyPart { @Inject private ITimerService timerService;
@PostConstruct private void init() { if(timerService != null) { // Do something } }
@PreDestroy private void uninit() { if(timerService != null) { // Do something } }}
Dependency Injection IEclipseContext
Stores information of possible Injection Values
Hierarchical Datastructure Rootcontext backed up by OSGi-Service
Registry (every registered as an OSGi-Service can get injected)
Dynamic context information: Possibility to contribute an IContextFunction through DS to construct Objects on the fly
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13
Using Eclipse DIEclipse DI can consumed standalone
in OSGi-Applications
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14
public Object start() { // Get Bundle Information Bundle bundle = FrameworkUtil.getBundle(getClass()); BundleContext bundleContext = bundle.getBundleContext(); IEclipseContext eclipseCtx = EclipseContextFactory.getServiceContext(bundleContext);
// Fill Context with information using set(String,Object) // … // Create instance of class ContextInjectionFactory.make(MyPart.class, eclipseCtx);}
Writing Handlers Implement an Execute-Method
Can have any number of arguments Use IServiceConstants for general
context informations
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 15
public class AboutHandler { public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); }}
LabTask 1 – Part 1Create a Headless RCP-Application
Add as dependency▪ org.eclipse.e4.core.services▪ javax.inject▪ org.eclipse.swt▪ org.eclipse.jface
Create a class MyPart with a TableViewer Constructor accepts an SWT-Composite
16© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
LabTask 2 Import
org.eclipse.tutorial.pgm.service Inject
org.eclipse.tutorial.pgm.service.ITimeService
Register Listener in postconstruction phase and update viewer with Informations
Unregister Listener in predestroy
17© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
LabTask 3Use Method-Injection
Add method set-method which injects an Object of type String known under the FQN „org.eclipsecon.myObject“ (hint use the @Named and @Optional )
Start a thread before launching the event loop and set a new value in the IEclipseContext for „org.eclipsecon.myObject“
18© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Eclipse e4:
Eclipse, the modeled Workbench and 20 other things
Lars Vogel
Mini-Agenda
The existing Eclipse 3.x UI model
e4 workbench model
Model to UI -> Renderer
„The 20 things“ aka as Services
Excersise: e4 wizard
Create a new applicaton via File -> New -> Other -> e4 -> e4 Application Project
Choose a name, e.g. „org.eclipsecon.e4.first“ Leave all default and go to the last tab and press
finish. On the „org.eclipsecon.e4.first.product“ select
the overview tab. Press „Launch an Eclipse application“ -> your
application should start
In case you have problem, please use „de.vogella.e4.rcp.wizard“ from your important workspace as a reference.
21© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Motivation
Why a new approach?
Eclipse 3.x the workbench model
UI Contributions via plugin.xml
Stored in separate registries (ViewRegistry, EditorRegistry)
Several advisers, e.g Actions created by ActionBarAdvicers
UI model is pre-defined
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Eclipse 3.x the workbench model
Not easy to test
No single place to look for the workbench model
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Editor vrs. View - ViewParts are not equal
Editor
The Singleton Problem
PlatformUI.getWorkbench()
Platform.getExtensionRegistry()
ResourcePlugin.getWorkspace()
Dependencies make UI difficult to test and hard to re-use
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
27
If I only had a consistent view of the Eclipse workbench
The e4 Workbench Model
e4 Workbench Model
EMF inside
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
If I only had a consistent view and behavior of the Eclipse workbench
If I only had a consistent view and behavior of the Eclipse workbench
5 reasons why using EMF is fantastic:
Proven domain model technology Runtime small (1.5 MB) and highly optimized Tooling available Easy to build visual tools on top Tap in to the EMF ecosystem (EMF-Compare, CDO, …)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
The e4 Workbench Model
Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
Example ElementsApplication
Part (aka View / Editor)
The e4 Workbench ModelEach application has it‘s live model
Workbench window Menu with menu items Window Trim, e.g.
toolbar with toolbar items
Parts Sash Container▪ Parts
Part Stack▪ Parts
Handlers Key Bindings Commands
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Model is Flexible
Perspectives are options
Stack / Slash Forms are optional
Extend it to get your own functionality (more on renderes later)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Defining the model
Application.e4xmi
Base Model provided by xmi file (Application.e4xmi)
Model Components are contribution of extension point „ org.eclipse.e4.workbench.model”
Model can be dynamically changed by Code
User model changes are stored as (intelligent) deltas and applied during startup.
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Application.e4xmi
Model Components
User changes
Only models the Application (frame)
Limits of the e4 application model
Modeled Workbench
Content of the view not part
of the e4 model
Model URI’s
The Part in the Model
The Part’s URI
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Parts
public class ListView {
@Inject private IEclipseContext
context;
@Inject public ListView(Composite
parent) { // ...
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
• Parts are POJO’s
• Services are injected via the the framework
• Defined Lifecycle via annotioans (@PostConstruct, @Predestroy)
Re-usable Easier to test
Hierarchy of ViewParts in 3.x vrs. Parts
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Eclipse e4Eclipse 3.x
Commands & HandlersHandlers have and id and a command have an URI for the implementing class,
e.g.platform:/plugin/...SaveHandler
Commands have and id and a name can be inserted in menus and toolbars
Menus / Toolbar Use commands or DirectItems
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
How is this model translated into UI components?
UI RendererThe Workbench model is
independent of a specific UI toolkit
Each UI elements gets are renderer Renderer manage Lifecycle of the UI-
Element Creation Model to widget binding Rendering Disposal
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Renderers
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
How to determine a Renderer
During startup, the app context is asks for an IPresentationEngine service
The default is an SWT based presentation engine
The presentation engine asks the RenderFactory for the Renderers of the individual UI components
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
org.eclipse.e4.workbench.ui.renderers.swt.WorkbenchRendererFactory returns org.eclipse.e4.workbench.ui.renderers.swt.SWTPartRenderer for the model components
e.g. org.eclipse.e4.workbench.ui.renderers.swt.SashRenderer
RendererFactory Examplepublic 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; }
//...
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Services
Eclipse Application Services (“Twenty Things”)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Long-running operations
Progress reporting Error handling Navigation model Resource
management Status line Drag and drop Undo/Redo Accessing
preferences
Editor lifecycle Receiving input Producing selection Standard dialogs Persisting UI state Logging Interface to help
system Menu contributions Authentication Authorization
Examples
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Other services are for example Logger IShellProvider
OSGi services is also available via dependency injection
Workbench Services follow usually with E*Service pattern, e.g.
EPartService ESelectionService EModelService
Excersise: Using the Model Editor
Load the project „de.vogella.e4.rcp.first“. Start the application via the .product file and
validate that the application is working. Select the Application.e4xmi file, right click and
select Open-with „E4 WorkbenchModel Editor “. Rename the menu entry „Hello“ Rename the title of the „View1“ Change the order of the Views in the stack.
48© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Excersise: Model Componets
Load the project „de.vogella.e4.rcp.modelcontributions“.
Open plugin.xml and check the extension point „ org.eclipse.e4.workbench.model”
Review the files „components.e4xmi“ and „components2.e4xmi“
Create a new class „ org.eclipse.e4.modelcomponets.parts.Part4“ as a copy of an existing part and add it via model contribution to your UI.
Remember that all ID‘s must be unique!! Remember to use the correct ID for the parent!!
49© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Excersise: Services
Load the project „ de.vogella.e4.rcp.first“. Open class
„ org.eclipse.e4.modelcomponets.parts.View1“ Add private member @Inject Logger logger Write some log messages in the method init(), for
example logger.info("UI will start to build");
50© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
e4 CSS Styling
Kai TödterSiemens Corporate Technology
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
OutlineCSS StylingDemoLab TaskDiscussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52
Styling the User Interface 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 all the above issues
53© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Contacts Demo without CSS Styling
54© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Dark CSS Styling with Gradients
55© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Bright CSS Styling with Gradients
56© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Bright CSS Styling with new look
57© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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;}
ToolBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px;}
58© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Some Things you cannot style (yet)
Menu bar backgroundTable headers
Partly implemented:Gradients
Planned:Having similar capabilities compared
with WebKit’s gradients
59© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
How to enable CSS Styling
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 Demo"> <property name="applicationCSS" value="platform:/plugin/contacts/css/dark.css"> </property> </product></extension>
60© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
How to use custom attributes?
Java
Label label = new Label(parent, SWT.NONE);label.setData("org.eclipse.e4.ui.css.id",
"SeparatorLabel");
CSS
#SeparatorLabel { color: #f08d00;}
61© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
e4 CSS EditorsCSS has a well known syntaxBut which UI elements can be
styled?Which CSS attributes does a specific
element support?
The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes
A project is already set up, stay tuned… 62© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Gradient Examples
63© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Dynamic Theme Switching
It is possible to change the CSS based styling at runtimeGood for accessibilityGood for user preferences
64© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
CSS Styling Engine
Getting the styling engine:
Display display = shell.getDisplay();final CSSEngine engine =
(CSSEngine) display.getData( "org.eclipse.e4.ui.css.core.engine");
This is a current workaround The engine should be a service accessible
through the EclipseContext
65© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Theme Switching CodeURL url = FileLocator.resolve(new URL("platform:/plugin/org.eclipse.e4.demo.contacts/css/
new.css"));
InputStreamReader streamReader = new InputStreamReader(
url.openStream(););engine.reset();engine.parseStyleSheet(streamReader);streamReader.close();
try {shell.setRedraw(false);shell.reskin(SWT.ALL);
} finally {shell.setRedraw(true);
} 66© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Contacs Demo on RAP
67© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
How will the e4 IDE look like?
Designers are working on a new e4 workbench look
Watch bug 293481 for mockups Windows XP Windows 7 Mac Cocoa
https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481
68© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
e4 IDE Mockup (February 2010)
69© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Demo
70© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Lab Task Install the Contacts Demo sources
form the USB stickStart the demoEdit both css/dark-gradient.css and
css/bright-gradient.cssPlay around switching the css styles
at runtime and watch the differences you made
Optional: Create a new colorful psychedelic look for the Contacts Demo. Send screen shots to kai@toedter.com 71© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
e4: Where to go from here:
72© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Eclipse e4 Wiki http://wiki.eclipse.org/E4
Eclipse e4 Tutorial http://www.vogella.de/articles/EclipseE4/article.html
Eclipse e4 Whitepaper http://www.eclipse.org/e4/resources/e4-whitepaper.php
Lars Vogel‘s Blog http://www.vogella.de/blog
Tom Schindl‘s Blog http://tomsondev.bestsolution.at/
Kai Toeder http://www.toedter.com/blog/
Photo credits Target http://www.sxc.hu/photo/1078182 Rusty stuff http://www.sxc.hu/photo/450663 Binder: http://www.sxc.hu/photo/443042 Something is different http://www.sxc.hu/photo/944284 Praying Girl http://www.sxc.hu/photo/646227 Pin http://www.sxc.hu/photo/771409 Box: http://www.sxc.hu/photo/502457 Screws http://www.sxc.hu/photo/1148064 House with compartments http://www.sxc.hu/photo/494103 Stacked stones http://www.sxc.hu/photo/998524 Thinking Guy http://www.sxc.hu/photo/130484 Drawing Hand http://www.sxc.hu/photo/264208 Waiter http://www.sxc.hu/photo/157966
Discussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 74
License & Acknowledgements
This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License
See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US
Many slides are based on the work of: Tom Schindl and Kai Tödter Tom Schindl, BestSolution, see
http://www.bestsolution.at Kai Tödter, Siemens AG
75