Rich Clients with Eclipse 4.x

Rich Clients with Eclipse 4.x Kai Tödter Siemens Corporate Technology

Who am I? Software Architect/Engineer at Siemens Corporate Technology Eclipse RCP expert and OSGi enthusiast Open Source advocate Committer at e4 and Platform UI E-mail: kai.toedter@siemens.com Twitter: twitter.com/kaitoedter Blog: toedter.com/blog5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2

Outline Eclipse 4.x RCP Overview Creating a “Hello, World” RCP 4.x application Workbench model Toolbar, menu, parts, commands, and handlers Dependency injection Services Look & Feel customization with CSS Rendering Engine5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3

e4 ObjectivesPicture fromhttp://www.sxc.hu/photo/10816305/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 4

e4 Objectives Make it easier to write plug-ins Allow better control over the look of Eclipse based products Provide a uniform, pervasive platform across computing environments (Web / RIA, Desktop, Server, Cloud, Embedded) Increase diversity of contributors to the platform Maintain backward compatibility for API-clean clients5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5

What’s new in Eclipse 4.x? Workbench Model (based on EMF) Workbench objects are mostly POJOs Dependency Injection CSS Styling Rendering Engine Services (aka “the 20 things”) …5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6

Eclipse RCP 4.x Architecture Additional Platform JDT PDE Bundles 3.x Compatibility Layer 4.x Workbench Workbench Model, Rendering Engine, CSS Styling, Dependency Injection, Services Runtime (Equinox, OSGi) EMF Core UI Core (JFace, SWT) Java Virtual Machine Operating System5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7

Eclipse 4.x SDK on Windows 75/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9

Demo „Hello e4“Picture by Office Online, iStockPhotohttp://office.microsoft.com/en-us/images/results.aspx?qu=world#ai:MP900444203|5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10

Workbench ModelPicture by miamiamia,http://www.sxc.hu/photo/11685905/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12

Workbench Model Uses EMF (Eclipse Modeling Framework) Contains graphical elements, like  part stacks, parts, menu bar and toolbar Contains non-graphical element, like  commands, handlers, key bindings Can be modified at runtime Can be edited using tools like the e4 WorkbenchModel Editor5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13

Differences with Eclipse 3.x No distinction between views and editors => Everything is a part No need of perspectives => Can be used if desired5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14

The e4 WorkbenchModel Editor5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 15

Workbench Model DemoPicture by miamiamia,http://www.sxc.hu/photo/11685905/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16

Commands and Handlers Picture from http://www.sxc.hu/photo/10057375/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 18

Command Is an abstraction for a generic action  Like save, open, etc. Has no implementation of a behavior  This is done by handlers Can be used in toolbars or menus  The same command can be customized with specific UI elements, like icon, text, etc. Have properties: id, name, description, category and tag Can have a key binding5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19

Handler Provides an implementation of a behavior Can be bound to a Command Is a POJO! Uses Annotations  to declare methods to be executed: @Execute  to check, if it can be executed: @CanExecute Gets its dependencies injected (DI)5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20

A simple Exit Handlerpublic class ExitHandler { Injected at Runtime @Execute public void execute(IWorkbench workbench) { workbench.close(); }}5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21

Commands and Handlers Demo Picture from http://www.sxc.hu/photo/10057375/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22

PartsPicture from http://www.sxc.hu/photo/12694615/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 23

Part A Part is a POJO! There is no distinction between ViewPart and EditorPart like in Eclipse 3.x A Part gets his depended objects through DI A Part can use life cycle annotations for its methods The UI within a part is implemented with SWT and JFace5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 24

Dependency Injection (DI) Picture by Roberto Clix, from http://www.sxc.hu/photo/9488135/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 26

e4 Dependency Injection (1) JSR 330 compatible injection implementation  @javax.inject.Inject  Field, Constructor and Method injection  @javax.inject.Named  A named qualifier to the context object  Default is fully qualified class name of the injected type5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 27

e4 Dependency Injection (2) e4 specific annotations  @Optional  Marks a parameter or attribute as optional. If there is no object to be injected at runtime, null is injected instead but the workflow continues  @PostConstruct  Is invoked after all injections are done and the object is created  @PreDestroy  Is invoked before the object will be destroyed by the DI container. This is good for cleaning up…5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 28

The List View Partpublic class ListView { @Inject public ListView( Composite parent, IContactsRepository contactsRepository) { // create UI ... }}5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 29

Dependency Injection (DI) Demo Picture by Roberto Clix, from http://www.sxc.hu/photo/9488135/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 30

Services Picture from http://www.sxc.hu/photo/1579665/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 32

e4 Services (aka “The 20 Things”)e4 provides access to many services.These services are divided in sections: Core User Interface Advanced Domain-SpecificMost of these services are injected using DI, see also:http://wiki.eclipse.org/E4/Eclipse_Application_Services5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 33

e4 Services Editor lifecycle  Long-running operations Receiving input  Progress reporting Selection  Error handling Standard dialogs  Navigation model Persisting UI state  Resource management Logging  Status line Interface to help system  Drag and drop Menu contributions  Undo/Redo Authentication  Accessing preferences Authorization The above list is not complete…5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 34

Example: Selection Provider@Injectprivate ESelectionService selectionService;...tableViewer .addSelectionChangedListener(new ISelectionChangedListener() { public void selectionChanged(SelectionChangedEvent event) { IStructuredSelection selection = (IStructuredSelection) event.getSelection(); selectionService.setSelection(selection.getFirstElement()); }});5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 35

Example: Selection User@Injectpublic void setSelection( @Optional @Named(IServiceConstants.ACTIVE_SELECTION) IContact contact) { if (contact != null) { ...5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 36

Services Picture from http://www.sxc.hu/photo/1579665/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 37

UI StylingPicture fromhttp://www.sxc.hu/photo/10899315/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 39

UI Styling 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 many of the above issues5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 40

Contacts Demo without CSS Styling5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 41

Dark CSS Styling with radial Gradients5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 42

Gray CSS Styling with linear Gradients5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 43

Blue CSS Styling with linear Gradients5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 44

Gradient Examples linear orange black linear orange black 60% linear orange black orange 50% 100% radial orange black radial orange black 60% radial orange black orange 50% 100%5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 45

Dynamic Theme Switching It is possible to change the CSS based theme at runtime Good for accessibility Good for user preferences Picture from http://www.sxc.hu/photo/8231085/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 46

Theme Switching DI of IThemeEngine IThemeEngine provides API for applying styles and theme management@Executepublic void execute( IThemeEngine engine ) { engine.setTheme( "org.eclipse.e4.demo.contacts.themes.darkgradient");}5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 47

Styling an 3.x RCP ApplicationPicture fromhttp://www.sxc.hu/photo/10899315/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 48

3.x RCP Mail5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 49

3.x RCP Mail with CSS Styling5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 50

3.x RCP Mail with blue CSS Styling5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 51

CSS StylingPicture fromhttp://www.sxc.hu/photo/10899315/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52

RenderingPicture fromhttp://www.sxc.hu/photo/12630225/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 54

Workbench Model and Rendering 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 registered RendererFactory for Renderers => As a proof of concept, It would be possible to implement a Swing based presentation engine5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 55

Tasks of the Renderer Manages lifecycle of the UI element  Creation  Model to widget binding  Rendering  Disposal5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 56

RendererFactory Examplepublic 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; }//...5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 57

Multiple RenderersOne model element (e.g. a Part Stack)could have different renderers Part Stack CTabRenderer PShelfRenderer ...5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 58

Picture fromhttp://www.sxc.hu/photo/9220045/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 59

License & Acknowledgements This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License  See http://creativecommons.org/licenses/by-nc- nd/3.0/de/deed.en_US Parts of the material are based on work of Tom Schindl (http://www.bestsolution.at) and Lars Vogel (www.vogella.de)5/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 60

Picture Index Slide “e4 Objectives”: http://www.sxc.hu/photo/1081630Many thanks to the authors of the following pictures: Slide “Install the e4 Tooling”: http://www.sxc.hu/photo/1009690 Slide „Demo Hello e4“: http://office.microsoft.com/en- us/images/results.aspx?qu=world#ai:MP900444203| Slide “Workbench Model”: http://www.sxc.hu/photo/1168590 Slide “Commands and Handlers: http://www.sxc.hu/photo/1005737 Slide “Parts”: http://www.sxc.hu/photo/1269461 Slide “Dependency Injection (DI)”: http://www.sxc.hu/photo/948813 Slide “Services”: http://www.sxc.hu/photo/157966 Slide “UI Styling”: http://www.sxc.hu/photo/1089931 Slide “Dynamic Theme Switching”: http://www.sxc.hu/photo/823108 Slide “Rendering”: http://www.sxc.hu/photo/1263022 Slide “Discussion”: http://www.sxc.hu/photo/9220045/4/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 61

http://www.toedter.com	3025
http://toedter.com	29
url_unknown	16
http://webcache.googleusercontent.com	6
http://translate.googleusercontent.com	5
http://www.slideshare.net	3
http://paper.li	1
http://www.techgig.com	1

Rich Clients with Eclipse 4.x

by Kai Tödter

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 3,086

Statistics

Rich Clients with Eclipse 4.x Presentation Transcript