Presentation is loading. Please wait.

Presentation is loading. Please wait.

DI, services and the modeled Workbench

Similar presentations


Presentation on theme: "DI, services and the modeled Workbench"— Presentation transcript:

1 DI, services and the modeled Workbench
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 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 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, …) 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 © 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 Workbench window Menu with menu items
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 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 Application.e4xmi
User changes 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. Model Components Application.e4xmi Application.e4xmi © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

17 Limits of the e4 application model
Only models the Application (frame) 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 context; public ListView(Composite parent) { // ... 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)

20 Views Parts before e4 View ViewPart WorkbenchPart EventManager
Object EventManager WorkbenchPart ViewPart View © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

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

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

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

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 Dependency Injection Inversion of control: The necessary functionality is injected into the class Java Class © Lars Vogel, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

32 Dependency Injection - Part Example
public class MyPart { @Inject private ECommandService cmdService; 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 2 Main Object-Types Part Handler
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 Dependency Injection e4 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) 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.

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

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

37 Using Eclipse DI 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 Writing Handlers 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 © 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 Services © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

43 Eclipse Application Services (“Twenty Things”)
Editor lifecycle Receiving input Producing selection Standard dialogs Persisting UI state Logging Interface to help system Menu contributions Authentication Authorization Long-running operations Progress reporting Error handling Navigation model Resource management Status line Drag and drop Undo/Redo Accessing preferences © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

44 Examples Workbench Services follow usually with E*Service pattern, e.g. EPartService ESelectionService EModelService Other services are for example Logger IShellProvider OSGi services is also available via dependency injection © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

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

48 Kai Tödter Siemens Corporate Technology
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 Outline CSS Styling Demo Lab Task Discussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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

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

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

53 Bright CSS Styling with Gradients
© 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
© 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 # # %; ToolBar { background-color: # # # % 50%; color: white; © 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 © 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 <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> © 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; } © 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… © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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

64 Contacs Demo on RAP © 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?id=293481 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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

67 Demo © 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  © 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:
Eclipse e4 Wiki Eclipse e4 Tutorial Eclipse e4 Whitepaper Tom Schindl‘s Blog Kai Toeder Lars Vogel‘s Blog © Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

70 Photo credits Open Door 1228296 Corn 939151 Chess 958410
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.

72 License & Acknowledgements
This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License See Many slides are based on the work of: Tom Schindl and Kai Tödter Tom Schindl, BestSolution, see Kai Tödter, Siemens AG


Download ppt "DI, services and the modeled Workbench"

Similar presentations


Ads by Google