© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. Tom Schindl – BestSolution.at Lars Vogel – Kai Tödter – Siemens AG

 Theory  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

 USB-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

 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)

Tom Schindl BestSolution.at © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 POJO as the Programming Model  Dependency Injection  JSR 330 Annotations  e4 specific Annotations  The IEclipseContext  Handlers  Lab Tasks © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6

 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

 Part  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

 What 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 – Field, Constructor and Method injection – 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

 Example 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 private ECommandService public SampleView(Composite parent) { private IServiceConstants.SELECTION) Contact contact) { // Handle changed selection } private void execCommand() { // Execute command }

 e4 specific Annotations Marking the parameter as optional Called after Object created and Fields- and Methods-Injection finished 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

 Example 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 private ITimerService private void init() { if(timerService != null) { // Do something private void uninit() { if(timerService != null) { // Do something }

 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

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

 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 Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); }

 Create 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.

 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.

 Use Method-Injection  Add method set-method which injects an Object of type String known under the FQN „org.eclipsecon.myObject“ (hint use )  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.

Lars Vogel

The existing Eclipse 3.x UI model e4 workbench model Model to UI -> Renderer „The 20 things“ aka as Services

 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)

Why a new approach?

 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)

 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

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

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

Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“

Application Part (aka View / Editor)

Each 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)

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)

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) Modeled Workbench Content of the view not part of the e4 model

The Part in the Model The Part’s URI © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

public class ListView private IEclipseContext 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  Re-usable  Easier to test

© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Eclipse e4 Eclipse 3.x

Handlers  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)

How is this model translated into UI components?

 The 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)

 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

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

© 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

 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)

 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)

 Load the project „ de.vogella.e4.rcp.first“.  Open class „ org.eclipse.e4.modelcomponets.parts.View1“  Add private 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)

Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 CSS Styling  Demo  Lab Task  Discussion © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52

 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.

54 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

55 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

56 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

57 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Label { font: Verdana 8px; color: rgb(240, 240, 240); } Table { background-color: gradient radial # # %; color: rgb(240, 240, 240); font: Verdana 8px; } ToolBar { background-color: # # # % 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.

 Menu bar background  Table 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.

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"> 60 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 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.

 CSS has a well known syntax  But 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.

63 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 It is possible to change the CSS based styling at runtime  Good for accessibility  Good for user preferences 64 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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.

URL 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.

67 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 Designers are working on a new e4 workbench look  Watch bug for mockups  Windows XP  Windows 7  Mac Cocoa  d= d= © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

69 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

70 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

 Install the Contacts Demo sources form the USB stick  Start the demo  Edit both css/dark-gradient.css and css/bright-gradient.css  Play 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 71 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

72 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)  Eclipse e4 Wiki   Eclipse e4 Tutorial   Eclipse e4 Whitepaper   Tom Schindl‘s Blog   Kai Toeder   Lars Vogel‘s Blog 

 Target  Rusty stuff  Binder:  Something is different  Praying Girl  Pin  Box:  Screws  House with compartments  Stacked stones  Thinking Guy  Drawing Hand  Waiter

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 74

 This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License  See nd/3.0/de/deed.en_UShttp://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  Kai Tödter, Siemens AG 75