eclipse e4 tutorial - eclipsecon 2010
DESCRIPTION
Tutorial about Eclipse e4TRANSCRIPT
![Page 1: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/1.jpg)
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
![Page 2: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/2.jpg)
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
![Page 3: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/3.jpg)
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
![Page 4: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/4.jpg)
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)
![Page 5: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/5.jpg)
e4 The Programming Model
Tom SchindlBestSolution.at
© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 6: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/6.jpg)
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
![Page 7: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/7.jpg)
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
![Page 8: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/8.jpg)
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
![Page 9: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/9.jpg)
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
![Page 10: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/10.jpg)
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 }}
![Page 11: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/11.jpg)
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
![Page 12: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/12.jpg)
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 } }}
![Page 13: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/13.jpg)
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
![Page 14: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/14.jpg)
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);}
![Page 15: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/15.jpg)
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."); }}
![Page 16: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/16.jpg)
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.
![Page 17: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/17.jpg)
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.
![Page 18: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/18.jpg)
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.
![Page 19: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/19.jpg)
Eclipse e4:
Eclipse, the modeled Workbench and 20 other things
Lars Vogel
![Page 20: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/20.jpg)
Mini-Agenda
The existing Eclipse 3.x UI model
e4 workbench model
Model to UI -> Renderer
„The 20 things“ aka as Services
![Page 21: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/21.jpg)
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)
![Page 22: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/22.jpg)
Motivation
Why a new approach?
![Page 23: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/23.jpg)
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)
![Page 24: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/24.jpg)
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)
![Page 25: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/25.jpg)
Editor vrs. View - ViewParts are not equal
Editor
![Page 26: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/26.jpg)
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)
![Page 27: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/27.jpg)
27
If I only had a consistent view of the Eclipse workbench
![Page 28: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/28.jpg)
The e4 Workbench Model
e4 Workbench Model
EMF inside
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
![Page 29: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/29.jpg)
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)
![Page 30: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/30.jpg)
The e4 Workbench Model
Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
![Page 31: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/31.jpg)
Example ElementsApplication
Part (aka View / Editor)
![Page 32: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/32.jpg)
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)
![Page 33: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/33.jpg)
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)
![Page 34: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/34.jpg)
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
![Page 35: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/35.jpg)
Only models the Application (frame)
Limits of the e4 application model
Modeled Workbench
Content of the view not part
of the e4 model
![Page 36: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/36.jpg)
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)
![Page 37: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/37.jpg)
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
![Page 38: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/38.jpg)
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
![Page 39: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/39.jpg)
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)
![Page 40: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/40.jpg)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
How is this model translated into UI components?
![Page 41: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/41.jpg)
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)
![Page 42: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/42.jpg)
Renderers
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
![Page 43: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/43.jpg)
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
![Page 44: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/44.jpg)
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)
![Page 45: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/45.jpg)
© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Services
![Page 46: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/46.jpg)
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
![Page 47: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/47.jpg)
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
![Page 48: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/48.jpg)
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)
![Page 49: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/49.jpg)
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)
![Page 50: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/50.jpg)
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)
![Page 51: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/51.jpg)
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.
![Page 52: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/52.jpg)
OutlineCSS StylingDemoLab TaskDiscussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52
![Page 53: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/53.jpg)
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.
![Page 54: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/54.jpg)
Contacts Demo without CSS Styling
54© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 55: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/55.jpg)
Dark CSS Styling with Gradients
55© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 56: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/56.jpg)
Bright CSS Styling with Gradients
56© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 57: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/57.jpg)
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.
![Page 58: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/58.jpg)
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.
![Page 59: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/59.jpg)
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.
![Page 60: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/60.jpg)
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.
![Page 61: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/61.jpg)
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.
![Page 62: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/62.jpg)
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.
![Page 63: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/63.jpg)
Gradient Examples
63© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 64: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/64.jpg)
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.
![Page 65: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/65.jpg)
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.
![Page 66: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/66.jpg)
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.
![Page 67: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/67.jpg)
Contacs Demo on RAP
67© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 68: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/68.jpg)
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.
![Page 69: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/69.jpg)
e4 IDE Mockup (February 2010)
69© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 70: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/70.jpg)
Demo
70© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 71: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/71.jpg)
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 [email protected] 71© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 72: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/72.jpg)
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/
![Page 73: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/73.jpg)
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
![Page 74: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/74.jpg)
Discussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 74
![Page 75: Eclipse e4 Tutorial - EclipseCon 2010](https://reader036.vdocument.in/reader036/viewer/2022062300/5554f681b4c905bb2a8b5208/html5/thumbnails/75.jpg)
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