Eclipse e4 Tutorial - EclipseCon 2010
Download as PPTX, PDF9 likes5,009 views
This document provides an overview of an Eclipse e4 tutorial, including the theory and labs covered. The theory section will discuss the e4 programming model, workbench model, and styling in e4. The labs will involve programming the model, creating an RCP application from scratch, and restyling the Contacts demo with CSS. Instructions are provided for installing the necessary files and examples.
Eclipse e4 Tutorial - EclipseCon 2010
- 1. 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.deKai Tödter – Siemens AG
- 2. OutlineTheoryThe e4 Programming Model – Tom SchindlThe Workbench Model – Lars VogelStyling in e4 – Kai TödterLabsProgramming Model (looking a bit behind e4 Dependency Injection)Create an RCP-Application from scratchWork 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
- 3. InstallationUSB-Sticks with Eclipse-SDKOnly copy the version you need for your OS located at SDK-FolderSlides as PDFs located in slides-FolderExamples code located in samples-FolderSolutions code located in solutions-Folder© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.3
- 4. E4 and Example InstallationCopy the e4 zip file on your laptop and unzip it. Start e4 with eclipse.exeUse File -> Import -> „Existing Projects into Workspace“ to import the projects from directory „samples“.„Select archive file“ -> *.zip4© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 5. e4 The Programming ModelTom SchindlBestSolution.at© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 6. OutlinePOJO as the Programming ModelDependency InjectionJSR 330 Annotationse4 specific AnnotationsThe IEclipseContextHandlersLab Tasks© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.6
- 7. POJO as the ProgrammingModelAll building blocks of e4 are POJO © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.7
- 8. 2 Main Object-TypesPartUI Component representing an Editor, Table, Tree, …Most likely has a constructor which accepts a CompositeHandlerReacts 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
- 9. Dependency InjectionWhat is DIInversion of control: Your application doesn’t reach out stuff but gets it provided/injected from the outside frameworke4 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
- 10. Dependency InjectionExample of an e4-PartpublicclassMyPart {@InjectprivateECommandServicecmdService;@Injectpublic SampleView(Composite parent) { }@Injectprivate voidsetSelection(@Optional @Named(IServiceConstants.SELECTION) Contactcontact) {// Handle changedselection }private voidexecCommand() {// Execute command }}© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.10
- 11. 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
- 12. Dependency InjectionExample Usage of e4 PostConstruct /PreDestroy AnnotationspublicclassMyPart {@InjectprivateITimerServicetimerService;@PostConstructprivate voidinit() {if(timerService!= null) {// Do something } } @PreDestroyprivate voiduninit() {if(timerService != null) {// Do something } }}© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.12
- 13. Dependency InjectionIEclipseContextStores information of possible Injection ValuesHierarchical DatastructureRootcontext 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
- 14. Using Eclipse DIEclipse DI can consumed standalone in OSGi-ApplicationspublicObjectstart() {// GetBundle InformationBundlebundle = FrameworkUtil.getBundle(getClass());BundleContextbundleContext = bundle.getBundleContext();IEclipseContexteclipseCtx = EclipseContextFactory.getServiceContext(bundleContext);// FillContextwithinformationusingset(String,Object) // …// Create instanceofclassContextInjectionFactory.make(MyPart.class, eclipseCtx);}© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.14
- 15. Writing HandlersImplement an Execute-MethodCan have any number of argumentsUse IServiceConstantsforgeneralcontextinformationspublicclassAboutHandler { public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){MessageDialog.openInformation( shell, "About", "e4 Application example."); }}© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.15
- 16. LabTask 1 – Part 1Create a Headless RCP-ApplicationAdd asdependencyorg.eclipse.e4.core.servicesjavax.injectorg.eclipse.swtorg.eclipse.jfaceCreate a classMyPartwith a TableViewerConstructoraccepts an SWT-Composite16© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 17. LabTask 2Import org.eclipse.tutorial.pgm.serviceInjectorg.eclipse.tutorial.pgm.service.ITimeServiceRegister Listener in postconstructionphaseand update viewerwithInformationsUnregisterListener in predestroy17© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 18. LabTask 3UseMethod-InjectionAdd methodset-methodwhichinjects an Objectof type String knownunderthe FQN „org.eclipsecon.myObject“ (hintusethe@Named and @Optional )Start a threadbeforelaunchingtheeventloopandset a newvalue in theIEclipseContextfor „org.eclipsecon.myObject“ 18© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 19. Eclipse e4:Eclipse, the modeled Workbench and 20 other thingsLars Vogel
- 20. Mini-Agenda The existing Eclipse 3.x UI modele4 workbench modelModel to UI -> Renderer„The 20 things“ aka as Services
- 21. Excersise: e4 wizardCreate a new applicaton via File -> New -> Other -> e4 -> e4 Application ProjectChoose 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 startIn 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)
- 22. Motivation Why a new approach?
- 23. Eclipse 3.x the workbench modelUI Contributions via plugin.xmlStored in separate registries (ViewRegistry, EditorRegistry)Several advisers, e.g Actions created by ActionBarAdvicersUI model is pre-defined© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 24. Eclipse 3.x the workbench modelNot easy to testNo single place to look for the workbench model© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 25. Editor vrs. View - ViewParts are not equalEditor
- 26. The Singleton ProblemPlatformUI.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 workbench27
- 28. The e4 Workbench Modele4 Workbench ModelEMF inside© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 29. 5 reasons why using EMF is fantastic:Proven domain model technologyRuntime small (1.5 MB) and highly optimizedTooling availableEasy to build visual tools on topTap in to the EMF ecosystem (EMF-Compare, CDO, …)If I only had a consistent view and behavior of the Eclipse workbenchIf I only had a consistent view and behavior of the Eclipse workbench© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 30. The e4 Workbench ModelModel „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
- 31. Example ElementsApplicationPart (aka View / Editor)
- 32. The e4 Workbench ModelEach application has it‘s live modelWorkbench window Menu with menu items Window Trim, e.g. toolbar with toolbar items Parts Sash ContainerPartsPart StackPartsHandlersKey BindingsCommands© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 33. Model is FlexiblePerspectives are optionsStack / Slash Forms are optionalExtend it to get your own functionality (more on renderes later)© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 34. Defining the model User changesBase 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 CodeUser model changes are stored as (intelligent) deltas and applied during startup.Model ComponentsApplication.e4xmiApplication.e4xmi© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 35. Limits of the e4 application modelOnly models the Application (frame)Modeled WorkbenchContent of the view not part of the e4 model
- 36. Model URI’sThe Part in the ModelThe Part’s URI© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 37. PartspublicclassListView { @Inject privateIEclipseContextcontext; @Inject publicListView(Composite parent) {// ...Parts are POJO’s
- 38. Services are injected via the the framework
- 39. Defined Lifecycle via annotioans (@PostConstruct, @Predestroy) Re-usable Easier to test© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 40. Hierarchy of ViewParts in 3.x vrs. Parts Eclipse 3.xEclipse e4© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 41. Commands & HandlersHandlershave and id and a commandhave an URI for the implementing class, e.g.platform:/plugin/...SaveHandlerCommandshave and id and a namecan be inserted in menus and toolbarsMenus / ToolbarUse commands or DirectItems © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 42. How is this model translated into UI components?© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 43. UI RendererThe Workbench model is independent of a specific UI toolkitEach UI elements gets are renderer Renderer manage Lifecycle of the UI-ElementCreationModel to widget bindingRenderingDisposal© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 44. Renderers© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 45. How to determine a RendererDuring startup, the app context is asks for an IPresentationEngine serviceThe default is an SWT based presentation engineThe presentation engine asks the RenderFactory for the Renderers of the individual UI componentsorg.eclipse.e4.workbench.ui.renderers.swt.WorkbenchRendererFactory returns org.eclipse.e4.workbench.ui.renderers.swt.SWTPartRenderer for the model componentse.g. org.eclipse.e4.workbench.ui.renderers.swt.SashRenderer© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 46. RendererFactory ExamplepublicclassWorkbenchRendererFactoryimplementsIRendererFactory {publicAbstractPartRenderergetRenderer(MUIElementuiElement, Object parent) { if (uiElementinstanceofMPart) { if (contributedPartRenderer == null) {contributedPartRenderer = newContributedPartRenderer();initRenderer(contributedPartRenderer); } returncontributedPartRenderer; }//...© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 47. Services© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 48. Eclipse Application Services (“Twenty Things”)Long-running operations
- 50. Error handling
- 51. Navigation model
- 53. Status line
- 54. Drag and drop
- 55. Undo/Redo
- 57. Editor lifecycle
- 58. Receiving input
- 60. Standard dialogs
- 62. Logging
- 63. Interface to help system
- 65. Authentication
- 66. Authorization© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 67. ExamplesOther services are for example
- 68. Logger
- 69. IShellProvider
- 70. OSGi services is also available via dependency injection
- 71. Workbench Services follow usually with E*Service pattern, e.g.
- 72. EPartService
- 74. EModelService© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
- 75. Excersise: Using the Model EditorLoad 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)
- 76. Excersise: Model ComponetsLoad 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)
- 77. Excersise: ServicesLoad the project „ de.vogella.e4.rcp.first“.Open class „ org.eclipse.e4.modelcomponets.parts.View1“ Add private member @Inject Logger loggerWrite 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)
- 78. e4 CSS StylingKai TödterSiemens Corporate Technology© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 79. OutlineCSS StylingDemoLab TaskDiscussion© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.52
- 80. Styling the User InterfaceIn Eclipse 3.x, UI styling can be done usingThe Presentation APICustom WidgetsThese mechanisms are very limitedIt is not possible to implement a specific UI design, created by a designere4 provides a CSS based UI styling that addresses all the above issues53© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 81. Contacts Demo without CSS Styling54© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 82. Dark CSS Styling with Gradients55© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 83. Bright CSS Styling with Gradients56© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 84. Bright CSS Styling with new look57© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 85. 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.
- 86. Some Things you cannot style (yet)Menu bar backgroundTable headersPartly implemented:GradientsPlanned:Having similar capabilities compared with WebKit’s gradients59© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 87. How to enable CSS StylingCreate a contribution to the extension point org.eclipse.core.runtime.products<extensionid="product"point="org.eclipse.core.runtime.products"><productapplication="org.eclipse.e4.ui.workbench.swt.application"name="E4 Contacs Demo"> <propertyname="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.
- 88. How to use custom attributes?JavaLabel 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.
- 89. 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 attributesA 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.
- 90. Gradient Examples63© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 91. Dynamic Theme SwitchingIt is possible to change the CSS based styling at runtimeGood for accessibilityGood for user preferences64© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 92. CSS Styling EngineGetting the styling engine:Display display = shell.getDisplay();finalCSSEngine engine = (CSSEngine) display.getData("org.eclipse.e4.ui.css.core.engine");This is a current workaroundThe engine should be a service accessible through the EclipseContext65© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 93. Theme Switching CodeURL url = FileLocator.resolve(new URL("platform:/plugin/org.eclipse.e4.demo.contacts/css/new.css"));InputStreamReaderstreamReader = newInputStreamReader(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.
- 94. Contacs Demo on RAP67© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 95. How will the e4 IDE look like?Designers are working on a new e4 workbench lookWatch bug 293481 for mockupsWindows XPWindows 7Mac Cocoahttps://bugs.eclipse.org/bugs/show_bug.cgi?id=29348168© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 96. e4 IDE Mockup (February 2010)69© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 97. Demo70© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
- 98. Lab TaskInstall 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 madeOptional: 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.
- 99. e4: Where to go from here:72© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Eclipse e4 Wikihttp://wiki.eclipse.org/E4Eclipse e4 Tutorialhttp://www.vogella.de/articles/EclipseE4/article.htmlEclipse e4 Whitepaper http://www.eclipse.org/e4/resources/e4-whitepaper.phpLars Vogel‘s Bloghttp://www.vogella.de/blogTom Schindl‘s Blog http://tomsondev.bestsolution.at/Kai Toederhttp://www.toedter.com/blog/
- 100. Photo creditsTarget http://www.sxc.hu/photo/1078182Rusty stuff http://www.sxc.hu/photo/450663Binder: http://www.sxc.hu/photo/443042Something is different http://www.sxc.hu/photo/944284Praying Girl http://www.sxc.hu/photo/646227Pin http://www.sxc.hu/photo/771409Box: http://www.sxc.hu/photo/502457Screws http://www.sxc.hu/photo/1148064House with compartments http://www.sxc.hu/photo/494103Stacked stones http://www.sxc.hu/photo/998524Thinking Guy http://www.sxc.hu/photo/130484Drawing Hand http://www.sxc.hu/photo/264208Waiter http://www.sxc.hu/photo/157966
- 101. Discussion© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.74
- 102. License & AcknowledgementsThis work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany LicenseSee http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_USMany slides are based on the work of: Tom Schindl and Kai TödterTom Schindl, BestSolution, see http://www.bestsolution.atKai Tödter, Siemens AG75