SlideShare a Scribd company logo
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
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
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
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)
e4 The Programming ModelTom SchindlBestSolution.at© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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
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
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
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
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
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
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
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
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
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
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.
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.
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.
Eclipse e4:Eclipse, the modeled Workbench and 20 other thingsLars Vogel
Mini-Agenda The existing Eclipse 3.x UI modele4 workbench modelModel to UI -> Renderer„The 20 things“ aka as Services
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)
Motivation Why a new approach?
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)
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)
Editor vrs. View - ViewParts are not equalEditor
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)
If I only had a consistent view of the Eclipse workbench27
The e4 Workbench Modele4 Workbench ModelEMF inside© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
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)
The e4 Workbench ModelModel „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“
Example ElementsApplicationPart (aka View / Editor)
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)
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)
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)
Limits of the e4 application modelOnly models the Application (frame)Modeled WorkbenchContent of the view not part of the e4 model
Model URI’sThe Part in the ModelThe Part’s URI© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
PartspublicclassListView {   @Inject   privateIEclipseContextcontext;   @Inject   publicListView(Composite parent) {// ...Parts are POJO’s
Services are injected via the the framework
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)
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)
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)
How is this model translated into UI components?© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
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)
Renderers© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
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)
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)
Services© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
Eclipse Application Services (“Twenty Things”)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© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
ExamplesOther 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© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
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)

More Related Content

What's hot (20)

PDF
I pad uicatalog_lesson02
Rich Helton
 
PPT
Basic of Applet
suraj pandey
 
PPTX
C# Security Testing and Debugging
Rich Helton
 
PPTX
Azure rev002
Rich Helton
 
PPTX
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
Rich Helton
 
PPTX
Learning C# iPad Programming
Rich Helton
 
PDF
Visual Studio Automation Object Model. EnvDTE interfaces
PVS-Studio
 
PDF
Android programming-basics
Aravindharamanan S
 
PPT
Python harness fundamental
Robin0590
 
PPT
AspMVC4 start101
Rich Helton
 
PDF
UI Automation_White_CodedUI common problems and tricks
Tsimafei Avilin
 
PPT
Plug-in Architectures
elliando dias
 
PDF
Lecture 22
Debasish Pratihari
 
PPTX
Selenium Interview Questions & Answers
Techcanvass
 
PPTX
San Diego ASP.NET Meeting Oct 21st
Woody Pewitt
 
PPT
Entity frameworks101
Rich Helton
 
PDF
Selenium - Introduction
Amr E. Mohamed
 
PPTX
Test automation using selenium
Cynoteck Technology Solutions Private Limited
 
PPTX
Java Programming- Introduction to Java Applet Programs
Trinity Dwarka
 
PDF
Apache maven, a software project management tool
Renato Primavera
 
I pad uicatalog_lesson02
Rich Helton
 
Basic of Applet
suraj pandey
 
C# Security Testing and Debugging
Rich Helton
 
Azure rev002
Rich Helton
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
Rich Helton
 
Learning C# iPad Programming
Rich Helton
 
Visual Studio Automation Object Model. EnvDTE interfaces
PVS-Studio
 
Android programming-basics
Aravindharamanan S
 
Python harness fundamental
Robin0590
 
AspMVC4 start101
Rich Helton
 
UI Automation_White_CodedUI common problems and tricks
Tsimafei Avilin
 
Plug-in Architectures
elliando dias
 
Lecture 22
Debasish Pratihari
 
Selenium Interview Questions & Answers
Techcanvass
 
San Diego ASP.NET Meeting Oct 21st
Woody Pewitt
 
Entity frameworks101
Rich Helton
 
Selenium - Introduction
Amr E. Mohamed
 
Test automation using selenium
Cynoteck Technology Solutions Private Limited
 
Java Programming- Introduction to Java Applet Programs
Trinity Dwarka
 
Apache maven, a software project management tool
Renato Primavera
 

Viewers also liked (11)

PPTX
RESTful Web Services
Gordon Dickens
 
PPT
Eclipse Plug-in Develompent Tips And Tricks
Chris Aniszczyk
 
PDF
OSGi Technology, Eclipse and Convergence - Jeff McAffer, IBM
mfrancis
 
ODP
Eclipse Extensions Vs OSGI Services Tikal@ EclipseDemoCamps Tel Aviv
guestb69b980e
 
KEY
OSGi, Eclipse and API Tooling
Chris Aniszczyk
 
PPTX
Intro to OSGi and Eclipse Virgo
Gordon Dickens
 
PDF
Eclipse plug in development
Martin Toshev
 
PPT
Atmosphere Powerpoint
Mrs. Henley
 
PDF
K TO 12 GRADE 7 LEARNING MODULE IN HEALTH (Q3-Q4)
LiGhT ArOhL
 
PDF
K TO 12 GRADE 7 LEARNING MODULE IN SCIENCE (Q3-Q4)
LiGhT ArOhL
 
PDF
Visual Design with Data
Seth Familian
 
RESTful Web Services
Gordon Dickens
 
Eclipse Plug-in Develompent Tips And Tricks
Chris Aniszczyk
 
OSGi Technology, Eclipse and Convergence - Jeff McAffer, IBM
mfrancis
 
Eclipse Extensions Vs OSGI Services Tikal@ EclipseDemoCamps Tel Aviv
guestb69b980e
 
OSGi, Eclipse and API Tooling
Chris Aniszczyk
 
Intro to OSGi and Eclipse Virgo
Gordon Dickens
 
Eclipse plug in development
Martin Toshev
 
Atmosphere Powerpoint
Mrs. Henley
 
K TO 12 GRADE 7 LEARNING MODULE IN HEALTH (Q3-Q4)
LiGhT ArOhL
 
K TO 12 GRADE 7 LEARNING MODULE IN SCIENCE (Q3-Q4)
LiGhT ArOhL
 
Visual Design with Data
Seth Familian
 
Ad

Similar to Eclipse e4 Tutorial - EclipseCon 2010 (20)

PDF
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Marakana Inc.
 
PDF
Eclipse e4
Chris Aniszczyk
 
PDF
Eclipse 40 Labs- Eclipse Summit Europe 2010
Lars Vogel
 
PPTX
Eclipse 4.0 - Dynamic Models
Lars Vogel
 
PDF
Eclipse e4 - Google Eclipse Day
Lars Vogel
 
PDF
Developing Rich Clients with the Eclipse 4 Application Platform
Kai Tödter
 
PPTX
Eclipse Overview
Lars Vogel
 
PPT
javagruppen.dk - e4, the next generation Eclipse platform
Tonny Madsen
 
ODP
Shake that-fud-vrs5
wimjongman
 
PPT
Eclipse 2011 Hot Topics
Lars Vogel
 
ODP
Cool stuff in E4 for developers
Mickael Istria
 
PPT
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Tonny Madsen
 
ODT
E4 Eclipse Super Force
Kaniska Mandal
 
PPTX
Use Eclipse technologies to build a modern embedded IDE
Benjamin Cabé
 
PPS
Dependency injection in e4 - in Intro.
17thcamel
 
PDF
Riena on-e4-ese2010
christiancampo
 
DOC
EMF Tips n Tricks
Kaniska Mandal
 
PPTX
Eclipse RCP Overview @ Rheinjug
Lars Vogel
 
PPTX
Experiences from porting a commercial RCP application to Eclipse 4.x
Fredrik Attebrant
 
PDF
Overview of Eclipse technologies
PT.JUG
 
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Marakana Inc.
 
Eclipse e4
Chris Aniszczyk
 
Eclipse 40 Labs- Eclipse Summit Europe 2010
Lars Vogel
 
Eclipse 4.0 - Dynamic Models
Lars Vogel
 
Eclipse e4 - Google Eclipse Day
Lars Vogel
 
Developing Rich Clients with the Eclipse 4 Application Platform
Kai Tödter
 
Eclipse Overview
Lars Vogel
 
javagruppen.dk - e4, the next generation Eclipse platform
Tonny Madsen
 
Shake that-fud-vrs5
wimjongman
 
Eclipse 2011 Hot Topics
Lars Vogel
 
Cool stuff in E4 for developers
Mickael Istria
 
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Tonny Madsen
 
E4 Eclipse Super Force
Kaniska Mandal
 
Use Eclipse technologies to build a modern embedded IDE
Benjamin Cabé
 
Dependency injection in e4 - in Intro.
17thcamel
 
Riena on-e4-ese2010
christiancampo
 
EMF Tips n Tricks
Kaniska Mandal
 
Eclipse RCP Overview @ Rheinjug
Lars Vogel
 
Experiences from porting a commercial RCP application to Eclipse 4.x
Fredrik Attebrant
 
Overview of Eclipse technologies
PT.JUG
 
Ad

More from Lars Vogel (19)

PDF
Eclipse IDE and Platform news on Fosdem 2020
Lars Vogel
 
PDF
Eclipse platform news and how to contribute to the Eclipse Open Source project
Lars Vogel
 
PDF
Android design and Custom views
Lars Vogel
 
PDF
How to become an Eclipse committer in 20 minutes and fork the IDE
Lars Vogel
 
PDF
Building beautiful User Interface in Android
Lars Vogel
 
PDF
What is so cool about Android 4.0
Lars Vogel
 
PDF
What is so cool about Android 4.0?
Lars Vogel
 
PDF
Android Jumpstart Jfokus
Lars Vogel
 
PPT
Android C2DM Presentation at O'Reilly AndroidOpen Conference
Lars Vogel
 
PPTX
Android Overview (Karlsruhe VKSI)
Lars Vogel
 
PPTX
Android Introduction on Java Forum Stuttgart 11
Lars Vogel
 
PPT
Google App Engine for Java
Lars Vogel
 
PPTX
Android Cloud to Device Messaging with the Google App Engine
Lars Vogel
 
PDF
Google App Engine for Java
Lars Vogel
 
PPTX
Android Programming made easy
Lars Vogel
 
PPT
Google App Engine for Java (GAE/J)
Lars Vogel
 
PPTX
Programming Android
Lars Vogel
 
PPT
Beautiful UIs With JFace Databinding
Lars Vogel
 
PDF
Eclipse E4 Open Social Gadgetsvrs3
Lars Vogel
 
Eclipse IDE and Platform news on Fosdem 2020
Lars Vogel
 
Eclipse platform news and how to contribute to the Eclipse Open Source project
Lars Vogel
 
Android design and Custom views
Lars Vogel
 
How to become an Eclipse committer in 20 minutes and fork the IDE
Lars Vogel
 
Building beautiful User Interface in Android
Lars Vogel
 
What is so cool about Android 4.0
Lars Vogel
 
What is so cool about Android 4.0?
Lars Vogel
 
Android Jumpstart Jfokus
Lars Vogel
 
Android C2DM Presentation at O'Reilly AndroidOpen Conference
Lars Vogel
 
Android Overview (Karlsruhe VKSI)
Lars Vogel
 
Android Introduction on Java Forum Stuttgart 11
Lars Vogel
 
Google App Engine for Java
Lars Vogel
 
Android Cloud to Device Messaging with the Google App Engine
Lars Vogel
 
Google App Engine for Java
Lars Vogel
 
Android Programming made easy
Lars Vogel
 
Google App Engine for Java (GAE/J)
Lars Vogel
 
Programming Android
Lars Vogel
 
Beautiful UIs With JFace Databinding
Lars Vogel
 
Eclipse E4 Open Social Gadgetsvrs3
Lars Vogel
 

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“
  • 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
  • 66. Authorization© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)
  • 70. OSGi services is also available via dependency injection
  • 71. Workbench Services follow usually with E*Service pattern, e.g.
  • 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 [email protected] 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