Presentation is loading. Please wait.

Presentation is loading. Please wait.

Eclipse e4 DI, services and the modeled Workbench Lars Vogel.

Similar presentations


Presentation on theme: "Eclipse e4 DI, services and the modeled Workbench Lars Vogel."— Presentation transcript:

1 Eclipse e4 DI, services and the modeled Workbench Lars Vogel

2 Eclipse e4 – Building blocks Declarative Styling Modeled Workbench Rendering Engine Dependecy Injection IEclipseContext Core Services © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

3 Eclipse e4 – Add-ons XWT Toolkit Model © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

5 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 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

6 Editors are special

7 The Singleton Problem PlatformUI.getWorkbench() Platform.getExtensionRegistry() ResourcePlugin.getWorkspace() © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

8 Problems with the Eclipse 3.x workbench model No single place to look for the workbench model UI model is pre-defined Not easy to test (Platform Singletons create dependency to Eclipse platform) © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

9 9 If I only had a consistent view of the Eclipse workbench

10 The e4 Workbench Model e4 Workbench Model EMF inside © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

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

13 Example Elements Application Part (aka View / Editor)

14 The e4 Workbench Model 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)

15 Model is Flexible Perspectives are optional Stack / Sash are optional Extend the model to get your own functionality (more on renderes later) © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

16 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

17 Only models the Application (frame) Limits of the e4 application model Modeled Workbench Content of the view not part of the e4 model

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

19 Parts 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

20 © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

21 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Plain Old Java Objects (POJO‘s)

22 Hierarchy of ViewParts in 3.x vrs. Parts © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) Eclipse e4 Eclipse 3.x

23 Commands & Handlers 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)

24 How is this model translated into UI components?

25 UI Renderer 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)

26 Renderers © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

27 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

28 RendererFactory Example public class WorkbenchRendererFactory implements IRendererFactory { public AbstractPartRenderer getRenderer(MUIElement uiElement, Object parent) { if (uiElement instanceof MPart) { if (contributedPartRenderer == null) { contributedPartRenderer = new ContributedPartRenderer(); initRenderer(contributedPartRenderer); } return contributedPartRenderer; } //... © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

29 The e4 Programming Model

30 Inversion of control: The necessary functionality is injected into the class © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de) Java Class

31 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) © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

32 public class MyPart private ECommandService public SampleView(Composite parent) { private IServiceConstants.SELECTION) Contact contact) { // Handle changed selection } private void execCommand() { // Execute command } © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

33 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 © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

34 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) Dependency Injection bundle "org.eclipse.e4.core.di“ Contexts bundle "org.eclipse.e4.core.contexts" © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 34

35 Example Usage of e4 PostConstruct /PreDestroy Annotations © Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 35 public class MyPart private ITimerService private void init() { if(timerService != null) { // Do something private void uninit() { if(timerService != null) { // Do something }

36 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 © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

37 Eclipse DI can consumed standalone in OSGi- Applications 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); } © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

38 Implement an Execute-Method – Can have any number of arguments – Use IServiceConstants for general context informations public class AboutHandler { public void Shell shell){ MessageDialog.openInformation( shell, "About", "e4 Application example."); } © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

40 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

41 LabTask 3 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“

42 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

43 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

44 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

45 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. 45 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

46 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!! 46 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

47 Excersise: Services 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"); 47 © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

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

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

51 Contacts Demo without CSS Styling 51 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

52 Dark CSS Styling with Gradients 52 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

53 Bright CSS Styling with Gradients 53 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

54 Bright CSS Styling with new look 54 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

55 How does the CSS look like? 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; } 55 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

56 Some Things you cannot style (yet) Menu bar background Table headers Partly implemented: Gradients Planned: Having similar capabilities compared with WebKit’s gradients 56 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

57 How to enable CSS Styling Create a contribution to the extension point org.eclipse.core.runtime.products 57 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

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

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

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

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

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

63 Theme Switching Code 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); } 63 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

64 Contacs Demo on RAP 64 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

65 How will the e4 IDE look like? Designers are working on a new e4 workbench look Watch bug for mockups – Windows XP – Windows 7 – Mac Cocoa https://bugs.eclipse.org/bugs/show_bug.cgi?i d= https://bugs.eclipse.org/bugs/show_bug.cgi?i d= © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

66 e4 IDE Mockup (February 2010) 66 © Kai Tödter and others, Licensed under Creative Commons Attribution- Noncommercial-No Derivative Works 3.0 Germany License.

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

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

69 e4: Where to go from here: 69 © 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 –

70 Photo credits Open Door Corn Chess Pill box Singleton: Syringe / Injection: Target Rusty stuff Binder: Something is different Praying Girl Pin Box: Screws House with compartments Stacked stones Thinking Guy Drawing Hand Waiter

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

72 License & Acknowledgements 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 72


Download ppt "Eclipse e4 DI, services and the modeled Workbench Lars Vogel."

Similar presentations


Ads by Google