Kai Tödter Siemens Corporate Technology

Transcription

1 Kai Tödter Siemens Corporate Technology

2 Objectives of e4 e4 Workbench Model Models & Rendering Other UI Models Services CSS Styling Demo Discussion 2

3 Making it easier to write plug-ins Allowing better control over the look of Eclipse based products Providing a uniform, pervasive platform across computing environments (Web / RIA, Desktop, Server, Cloud, Embedded) Increasing diversity of contributors to the platform Maintaining backward compatibility for APIclean clients 3

4 EclipseCon 08 Mock up model based upon HashMaps Mock hosted hacked into 3.x E4-Summit Ottawa (22nd /23rd May) May 20th: Mail to e4-dev A radical approach to explore new paths for e4 Platform designed from Scratch No statics, no singletons, usage of dependency injection (DI) 4

5 EMF!? But why? It's a proven domain model technology so why invent our own? It already has tooling (Editor, ) Easier to build visual tools on top Integration points for different technologies like EMF-Compare, CDO, 5

6 EMF, but isn't it bloat? Distinguish between installation and runtime bloat Installation bloat about 1.5 MB Runtime size of EMF is highly optimized e.g. storage of boolean Benefit from upstream changes Ultra Slim Diet in 3.5 6

7 Main Building Blocks Application model instance POJOs to fill the parts of the UI with content Additional Building Blocks CSS based theming for your RCP application Accessing services (see next slides) 7

8 Workbench window Menu with menu items Window Trim, e.g. toolbar with toolbar items Parts Sash Container Part Stack Parts Handlers Key Bindings Commands 8

9 9

10 public class ListView private IEclipseContext public ListView(Composite parent) { //... 10

11 The Part in the Model The Part s URI => POJO 11

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

13 Handlers are POJOs get the necessary dependencies injected 13

14 public class SaveHandler { public boolean MDirtyable dirtyable) { return dirtyable.isdirty(); } public void execute( IEclipseContext IStylingEngine Shell final MContribution contribution) throws InvocationTargetException, InterruptedException { //... 14

15 The Workbench model has no dependencies to a specific UI toolkit During startup, the app context is asks for an IPresentationEngine service The default is an SWT based presentation engine The presentation engine asks a RenderFactory for Renderers => As a proof of concept, It would be possible to implement a Swing based presentation engine 15

16 Manage Lifecycle of the UI-Element Creation Model to widget binding Rendering Disposal 16

17 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; 17

18 One model element (e.g. a Part Stack) could have different possible renderers Part Stack CTabRenderer PShelfRenderer... 18

19 public class RendererFactory extends WorkbenchRendererFactory public AbstractPartRenderer getrenderer(muielement uielement, Object parent) { if (uielement instanceof MPartStack && usepshelfrenderer() ) { if( stackrenderer == null ) { stackrenderer = new PShelfStackRenderer(); initrenderer(stackrenderer); } return stackrenderer; } } } return super.getrenderer(uielement, parent); 19

20 In the current e4 incubator there are two more model approaches for fine grained UI XWT (XML Window Toolkit) TM (Toolkit Model) The future will show, which project might be their home after evolving from the incubator status 20

21 Declarative UI framework based on XML Physical separation of UI definition in XML from the run-time logic in programming language Visual editor provided Developed by Soyatec 21

22 Picture from Yves Yang s blog: 22

23 <Shell xmlns=" xmlns:x=" <Shell.layout> <FillLayout/> </Shell.layout> <Button text="hello, world!"> </Button> </Shell> In the Java code: Shell shell= (Shell)XWT.load(file); 23

24 The Toolkit Model is an Ecoremodel of the user interface (UI) components The model includes concepts like Composite, TabFolder, Text, Layout, etc. The model is split into a generic and toolkitspecific parts TM is developed by HallvardTrætteberg, Norwegian University of Science and Technology 24

25 Picture from 25

26 e4 provides access to many services. These services are divided in sections: Core User Interface Advanced Domain-Specific Most of these services are injected using DI or through the IEcliseContext, see also: 26

27 Life Cycle Authentication/Single Sign-on Status Handling Logging and Tracing Extension Registry Scheduling Work/Reporting Progress Reading/Writing of Preferences String Localization Adapting Objects Commands/Handlers EventingSystem Participating in Undo/Redo Support 27

28 Receiving Input Providing Selection Information Persisting State and Data Managing Shared Resources Participating in Editor/SaveablePart Life Cycle Updating UI Elements Notifications Status Reporting Part Service 28

29 Shell Provider Reacting to Workbench Model Changes. Participating in Label and Icon Decoration Reacting to Changes to the Context Dynamically Contributing to the Workbench Model Object Contributions Focus Service 29

30 Workspace/Resources Database Connection Getting Hold of the Domain Model 30

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

32 32

33 33

34 34

35 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; } 35

36 Menu bar background Table headers Partly implemented: Gradients Planned: Having similar capabilities compared with WebKit s gradients 36

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

38 Java Label label = new Label(parent, SWT.NONE); label.setdata("org.eclipse.e4.ui.css.id", "SeparatorLabel"); CSS #SeparatorLabel { } color: #f08d00; 38

39 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 to EclipseCon 39

40 40

41 It is possible to change the CSS based styling at runtime Good for accessibility Good for user preferences 41

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

43 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); } 43

44 44

45 Designers are working on a new e4 workbench look Watch bug for mockups Windows XP Windows 7 Mac Cocoa d=

46 46

47 Install the latest Eclipse 3.6 ItegrationBuild SDK Install the latest EMF SDK Open the CVS repository: host: dev.eclipse.org root: cvsroot/eclipse user: anonymous Check out the project e4/releng 47

48 Import the following team project sets from releng/org.eclipse.e4.ui.releng: e4.ui.psf e4.ui.examples.psf e4.ui.css.psf Open project org.eclipse.e4.demo.contacts/contacts.product In the Overview tab of the configuration editor, click Launch an Eclipse Application Now the contacts demo should start with the dark CSS theme 48

49 49

50 50

51 This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License See nd/3.0/de/deed.en_us Many slides about the e4 workbench model are based on the work of Tom Schindl, BestSolution See 51