Eclipse e4 Tutorial - EclipseCon 2010

11,026 views
10,903 views

Published on

Tutorial about Eclipse e4

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,026
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
318
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Eclipse e4 Tutorial - EclipseCon 2010

  1. 1. Eclipse e4 Tutorial<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />Tom Schindl – BestSolution.at<br />Lars Vogel – http://www.vogella.de<br />Kai Tödter – Siemens AG<br />
  2. 2. Outline<br />Theory<br />The e4 Programming Model – Tom Schindl<br />The Workbench Model – Lars Vogel<br />Styling in e4 – Kai Tödter<br />Labs<br />Programming Model (looking a bit behind e4 Dependency Injection)<br />Create an RCP-Application from scratch<br />Work with CSS to retheme the Contacts Demo<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />2<br />
  3. 3. Installation<br />USB-Sticks with Eclipse-SDK<br />Only copy the version you need for your OS located at SDK-Folder<br />Slides as PDFs located in slides-Folder<br />Examples code located in samples-Folder<br />Solutions code located in solutions-Folder<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />3<br />
  4. 4. E4 and Example Installation<br />Copy the e4 zip file on your laptop and unzip it. Start e4 with eclipse.exe<br />Use File -> Import -> „Existing Projects into Workspace“ to import the projects from directory „samples“.<br />„Select archive file“ -> *.zip<br />4<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  5. 5. e4 The Programming Model<br />Tom Schindl<br />BestSolution.at<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  6. 6. Outline<br />POJO as the Programming Model<br />Dependency Injection<br />JSR 330 Annotations<br />e4 specific Annotations<br />The IEclipseContext<br />Handlers<br />Lab Tasks<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />6<br />
  7. 7. POJO as the ProgrammingModel<br />All building blocks of e4 are POJO <br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />7<br />
  8. 8. 2 Main Object-Types<br />Part<br />UI Component representing an Editor, Table, Tree, …<br />Most likely has a constructor which accepts a Composite<br />Handler<br />Reacts on Commands execute by the user through Button press, KeyBinding, …<br />Has to have a method named execute() with a variable number of Parameters<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />8<br />
  9. 9. Dependency Injection<br />What is DI<br />Inversion of control: Your application doesn’t reach out stuff but gets it provided/injected from the outside framework<br />e4 provides an JSR 330 compatible injection implementation<br />@Inject – Field, Constructor and Method injection<br />@Named – Specify a custom qualifier to context object (default is fully qualified classname of the injected type)<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />9<br />
  10. 10. Dependency Injection<br />Example of an e4-Part<br />publicclassMyPart {<br />@Inject<br />privateECommandServicecmdService;<br />@Inject<br />public SampleView(Composite parent) {<br /> }<br />@Inject<br />private voidsetSelection(@Optional @Named(<br />IServiceConstants.SELECTION) Contactcontact) {<br />// Handle changedselection<br /> }<br />private voidexecCommand() {<br />// Execute command<br /> }<br />}<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />10<br />
  11. 11. Dependency Injection<br />e4 specific Annotations<br />@Optional: Marking the parameter as optional<br />@PostConstruct: Called after Object created and Fields- and Methods-Injection finished<br />@PreDestroy: Called before the object is destroyed (e.g. the Part shown in the UI is removed)<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />11<br />
  12. 12. Dependency Injection<br />Example Usage of e4 PostConstruct /PreDestroy Annotations<br />publicclassMyPart {<br />@Inject<br />privateITimerServicetimerService;<br />@PostConstruct<br />private voidinit() {<br />if(timerService!= null) {<br />// Do something<br /> }<br /> }<br /> @PreDestroy<br />private voiduninit() {<br />if(timerService != null) {<br />// Do something<br /> }<br /> }<br />}<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />12<br />
  13. 13. Dependency Injection<br />IEclipseContext<br />Stores information of possible Injection Values<br />Hierarchical Datastructure<br />Rootcontext backed up by OSGi-Service Registry (every registered as an OSGi-Service can get injected)<br />Dynamic context information: Possibility to contribute an IContextFunction through DS to construct Objects on the fly<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />13<br />
  14. 14. Using Eclipse DI<br />Eclipse DI can consumed standalone in OSGi-Applications<br />publicObjectstart() {<br />// GetBundle Information<br />Bundlebundle = FrameworkUtil.getBundle(getClass());<br />BundleContextbundleContext = bundle.getBundleContext();<br />IEclipseContexteclipseCtx = <br />EclipseContextFactory.getServiceContext(bundleContext);<br />// FillContextwithinformationusingset(String,Object)<br /> // …<br />// Create instanceofclass<br />ContextInjectionFactory.make(MyPart.class, eclipseCtx);<br />}<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />14<br />
  15. 15. Writing Handlers<br />Implement an Execute-Method<br />Can have any number of arguments<br />Use IServiceConstantsforgeneralcontextinformations<br />publicclassAboutHandler {<br /> public void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){<br />MessageDialog.openInformation(<br /> shell, "About", "e4 Application example.");<br /> }<br />}<br />© Tom Schindl and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />15<br />
  16. 16. LabTask 1 – Part 1<br />Create a Headless RCP-Application<br />Add asdependency<br />org.eclipse.e4.core.services<br />javax.inject<br />org.eclipse.swt<br />org.eclipse.jface<br />Create a classMyPartwith a TableViewer<br />Constructoraccepts an SWT-Composite<br />16<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  17. 17. LabTask 2<br />Import org.eclipse.tutorial.pgm.service<br />Injectorg.eclipse.tutorial.pgm.service.ITimeService<br />Register Listener in postconstructionphaseand update viewerwithInformations<br />UnregisterListener in predestroy<br />17<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  18. 18. LabTask 3<br />UseMethod-Injection<br />Add methodset-methodwhichinjects an Objectof type String knownunderthe FQN „org.eclipsecon.myObject“ (hintusethe@Named and @Optional )<br />Start a threadbeforelaunchingtheeventloopandset a newvalue in theIEclipseContextfor „org.eclipsecon.myObject“ <br />18<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  19. 19. Eclipse e4:Eclipse, the modeled Workbench and 20 other things<br />Lars Vogel<br />
  20. 20. Mini-Agenda <br />The existing Eclipse 3.x UI model<br />e4 workbench model<br />Model to UI -> Renderer<br />„The 20 things“ aka as Services<br />
  21. 21. Excersise: e4 wizard<br />Create a new applicaton via File -> New -> Other -> e4 -> e4 Application Project<br />Choose a name, e.g. „org.eclipsecon.e4.first“<br />Leave all default and go to the last tab and press finish.<br />On the „org.eclipsecon.e4.first.product“ select the overview tab.<br />Press „Launch an Eclipse application“ -> your application should start<br />In case you have problem, please use „de.vogella.e4.rcp.wizard“ from your important workspace as a reference.<br />21<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  22. 22. Motivation <br />Why a new approach?<br />
  23. 23. Eclipse 3.x the workbench model<br />UI Contributions via plugin.xml<br />Stored in separate registries (ViewRegistry, EditorRegistry)<br />Several advisers, e.g Actions created by ActionBarAdvicers<br />UI model is pre-defined<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  24. 24. Eclipse 3.x the workbench model<br />Not easy to test<br />No single place to look for the workbench model<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  25. 25. Editor vrs. View - ViewParts are not equal<br />Editor<br />
  26. 26. The Singleton Problem<br />PlatformUI.getWorkbench()<br />Platform.getExtensionRegistry()<br />ResourcePlugin.getWorkspace()<br />Dependencies make UI difficult to test and hard to re-use <br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  27. 27. If I only had a consistent view of the Eclipse workbench<br />27<br />
  28. 28. The e4 Workbench Model<br />e4 Workbench Model<br />EMF inside<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  29. 29. 5 reasons why using EMF is fantastic:<br />Proven domain model technology<br />Runtime small (1.5 MB) and highly optimized<br />Tooling available<br />Easy to build visual tools on top<br />Tap in to the EMF ecosystem (EMF-Compare, CDO, …)<br />If I only had a consistent view and behavior of the Eclipse workbench<br />If I only had a consistent view and behavior of the Eclipse workbench<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  30. 30. The e4 Workbench Model<br />Model „ UIElements.ecore“ is contained in plugin „org.eclipse.e4.ui.model.workbench“<br />
  31. 31. Example Elements<br />Application<br />Part (aka View / Editor)<br />
  32. 32. The e4 Workbench Model<br />Each application has it‘s live model<br />Workbench window <br />Menu with menu items <br />Window Trim, e.g. toolbar with toolbar items <br />Parts Sash Container<br />Parts<br />Part Stack<br />Parts<br />Handlers<br />Key Bindings<br />Commands<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  33. 33. Model is Flexible<br />Perspectives are options<br />Stack / Slash Forms are optional<br />Extend it to get your own functionality (more on renderes later)<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  34. 34. Defining the model <br />User changes<br />Base Model provided by xmi file (Application.e4xmi)<br />Model Components are contribution of extension point „ org.eclipse.e4.workbench.model”<br />Model can be dynamically changed by Code<br />User model changes are stored as (intelligent) deltas and applied during startup.<br />Model Components<br />Application.e4xmi<br />Application.e4xmi<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  35. 35. Limits of the e4 application model<br />Only models the Application (frame)<br />Modeled Workbench<br />Content of the view not part of the e4 model<br />
  36. 36. Model URI’s<br />The Part in the Model<br />The Part’s URI<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  37. 37. Parts<br />publicclassListView {<br /> @Inject<br /> privateIEclipseContextcontext;<br /> @Inject<br /> publicListView(Composite parent) {<br />// ...<br /><ul><li>Parts are POJO’s
  38. 38. Services are injected via the the framework
  39. 39. Defined Lifecycle via annotioans (@PostConstruct, @Predestroy)</li></ul> Re-usable<br /> Easier to test<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  40. 40. Hierarchy of ViewParts in 3.x vrs. Parts <br />Eclipse 3.x<br />Eclipse e4<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  41. 41. Commands & Handlers<br />Handlers<br />have and id and a command<br />have an URI for the implementing class, e.g.platform:/plugin/...SaveHandler<br />Commands<br />have and id and a name<br />can be inserted in menus and toolbars<br />Menus / Toolbar<br />Use commands or DirectItems <br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  42. 42. How is this model translated into UI components?<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  43. 43. UI Renderer<br />The Workbench model is independent of a specific UI toolkit<br />Each UI elements gets are renderer <br />Renderer manage Lifecycle of the UI-Element<br />Creation<br />Model to widget binding<br />Rendering<br />Disposal<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  44. 44. Renderers<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  45. 45. How to determine a Renderer<br />During startup, the app context is asks for an IPresentationEngine service<br />The default is an SWT based presentation engine<br />The presentation engine asks the RenderFactory for the Renderers of the individual UI components<br />org.eclipse.e4.workbench.ui.renderers.swt.WorkbenchRendererFactory returns org.eclipse.e4.workbench.ui.renderers.swt.SWTPartRenderer for the model components<br />e.g. org.eclipse.e4.workbench.ui.renderers.swt.SashRenderer<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  46. 46. RendererFactory Example<br />publicclassWorkbenchRendererFactoryimplementsIRendererFactory {<br />publicAbstractPartRenderergetRenderer(MUIElementuiElement, <br /> Object parent) {<br /> if (uiElementinstanceofMPart) {<br /> if (contributedPartRenderer == null) {<br />contributedPartRenderer = newContributedPartRenderer();<br />initRenderer(contributedPartRenderer);<br /> }<br /> returncontributedPartRenderer;<br /> }<br />//...<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  47. 47. Services<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  48. 48. Eclipse Application Services (“Twenty Things”)<br /><ul><li>Long-running operations
  49. 49. Progress reporting
  50. 50. Error handling
  51. 51. Navigation model
  52. 52. Resource management
  53. 53. Status line
  54. 54. Drag and drop
  55. 55. Undo/Redo
  56. 56. Accessing preferences
  57. 57. Editor lifecycle
  58. 58. Receiving input
  59. 59. Producing selection
  60. 60. Standard dialogs
  61. 61. Persisting UI state
  62. 62. Logging
  63. 63. Interface to help system
  64. 64. Menu contributions
  65. 65. Authentication
  66. 66. Authorization</li></ul>© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  67. 67. Examples<br /><ul><li>Other services are for example
  68. 68. Logger
  69. 69. IShellProvider
  70. 70. OSGi services is also available via dependency injection
  71. 71. Workbench Services follow usually with E*Service pattern, e.g.
  72. 72. EPartService
  73. 73. ESelectionService
  74. 74. EModelService</li></ul>© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  75. 75. Excersise: Using the Model Editor<br />Load the project „de.vogella.e4.rcp.first“.<br />Start the application via the .product file and validate that the application is working. <br />Select the Application.e4xmi file, right click and select Open-with „E4 WorkbenchModel Editor“.<br />Rename the menu entry „Hello“<br />Rename the title of the „View1“<br />Change the order of the Views in the stack.<br />48<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  76. 76. Excersise: Model Componets<br />Load the project „de.vogella.e4.rcp.modelcontributions“.<br />Open plugin.xml and check the extension point „ org.eclipse.e4.workbench.model”<br />Review the files „components.e4xmi“ and „components2.e4xmi“<br />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.<br />Remember that all ID‘s must be unique!!<br />Remember to use the correct ID for the parent!!<br />49<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  77. 77. Excersise: Services<br />Load the project „ de.vogella.e4.rcp.first“.<br />Open class „ org.eclipse.e4.modelcomponets.parts.View1“ <br />Add private member @Inject Logger logger<br />Write some log messages in the method init(), for example logger.info("UI will start to build"); <br />50<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />
  78. 78. e4 CSS Styling<br />Kai Tödter<br />Siemens Corporate Technology<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  79. 79. Outline<br />CSS Styling<br />Demo<br />Lab Task<br />Discussion<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />52<br />
  80. 80. Styling the User Interface<br />In Eclipse 3.x, UI styling can be done using<br />The Presentation API<br />Custom Widgets<br />These mechanisms are very limited<br />It is not possible to implement a specific UI design, created by a designer<br />e4 provides a CSS based UI styling that addresses all the above issues<br />53<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  81. 81. Contacts Demo without CSS Styling<br />54<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  82. 82. Dark CSS Styling with Gradients<br />55<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  83. 83. Bright CSS Styling with Gradients<br />56<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  84. 84. Bright CSS Styling with new look<br />57<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  85. 85. How does the CSS look like?<br />Label {<br /> font: Verdana 8px;<br /> color: rgb(240, 240, 240);<br />}<br />Table {<br /> background-color: gradient radial #575757 #101010 100%;<br /> color: rgb(240, 240, 240);<br /> font: Verdana 8px;<br />}<br />ToolBar{<br /> background-color: #777777 #373737 #202020 50% 50%;<br /> color: white;<br /> font: Verdana 8px;<br />}<br />58<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  86. 86. Some Things you cannot style (yet)<br />Menu bar background<br />Table headers<br />Partly implemented:<br />Gradients<br />Planned:<br />Having similar capabilities compared with WebKit’s gradients<br />59<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  87. 87. How to enable CSS Styling<br />Create a contribution to the extension point <br />org.eclipse.core.runtime.products<br /><extension<br />id="product"<br />point="org.eclipse.core.runtime.products"><br /><product<br />application="org.eclipse.e4.ui.workbench.swt.application"<br />name="E4 Contacs Demo"><br /> <property<br />name="applicationCSS"<br />value="platform:/plugin/contacts/css/dark.css"><br /></property><br /></product><br /></extension><br />60<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  88. 88. How to use custom attributes?<br />Java<br />Label label = <br />new Label(parent, SWT.NONE);<br />label.setData("org.eclipse.e4.ui.css.id", <br />"SeparatorLabel");<br />CSS<br />#SeparatorLabel {<br /> color: #f08d00;<br />}<br />61<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  89. 89. e4 CSS Editors<br />CSS has a well known syntax<br />But which UI elements can be styled?<br />Which CSS attributes does a specific element support?<br />The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes<br />A project is already set up, stay tuned…<br />62<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  90. 90. Gradient Examples<br />63<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  91. 91. Dynamic Theme Switching<br />It is possible to change the <br /> CSS based styling at runtime<br />Good for accessibility<br />Good for user preferences<br />64<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  92. 92. CSS Styling Engine<br />Getting the styling engine:<br />Display display = shell.getDisplay();<br />finalCSSEngine engine = (CSSEngine) display.getData("org.eclipse.e4.ui.css.core.engine");<br />This is a current workaround<br />The engine should be a service accessible through the EclipseContext<br />65<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  93. 93. Theme Switching Code<br />URL url = FileLocator.resolve(new URL(<br />"platform:/plugin/org.eclipse.e4.demo.contacts/css/new.css"));<br />InputStreamReaderstreamReader = newInputStreamReader(<br />url.openStream(););<br />engine.reset();<br />engine.parseStyleSheet(streamReader);<br />streamReader.close();<br />try {<br />shell.setRedraw(false);<br />shell.reskin(SWT.ALL);<br />} finally {<br />shell.setRedraw(true);<br />}<br />66<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  94. 94. Contacs Demo on RAP<br />67<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  95. 95. How will the e4 IDE look like?<br />Designers are working on a new e4 workbench look<br />Watch bug 293481 for mockups<br />Windows XP<br />Windows 7<br />Mac Cocoa<br />https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481<br />68<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  96. 96. e4 IDE Mockup (February 2010)<br />69<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  97. 97. Demo<br />70<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  98. 98. Lab Task<br />Install the Contacts Demo sources form the USB stick<br />Start the demo<br />Edit both css/dark-gradient.css and css/bright-gradient.css<br />Play around switching the css styles at runtime and watch the differences you made<br />Optional: Create a new colorful psychedelic look for the Contacts Demo. Send screen shots to kai@toedter.com <br />71<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  99. 99. e4: Where to go from here:<br />72<br />© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de) <br />Eclipse e4 Wiki<br />http://wiki.eclipse.org/E4<br />Eclipse e4 Tutorial<br />http://www.vogella.de/articles/EclipseE4/article.html<br />Eclipse e4 Whitepaper <br />http://www.eclipse.org/e4/resources/e4-whitepaper.php<br />Tom Schindl‘s Blog <br />http://tomsondev.bestsolution.at/<br />Kai Toeder<br />http://www.toedter.com/blog/<br />Lars Vogel‘s Blog<br />http://www.vogella.de/blog<br />
  100. 100. Photo credits<br />Target http://www.sxc.hu/photo/1078182<br />Rusty stuff http://www.sxc.hu/photo/450663<br />Binder: http://www.sxc.hu/photo/443042<br />Something is different http://www.sxc.hu/photo/944284<br />Praying Girl http://www.sxc.hu/photo/646227<br />Pin http://www.sxc.hu/photo/771409<br />Box: http://www.sxc.hu/photo/502457<br />Screws http://www.sxc.hu/photo/1148064<br />House with compartments http://www.sxc.hu/photo/494103<br />Stacked stones http://www.sxc.hu/photo/998524<br />Thinking Guy http://www.sxc.hu/photo/130484<br />Drawing Hand http://www.sxc.hu/photo/264208<br />Waiter http://www.sxc.hu/photo/157966<br />
  101. 101. Discussion<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />74<br />
  102. 102. License & Acknowledgements<br />This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License<br />See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US<br />Many slides are based on the work of: Tom Schindl and Kai Tödter<br />Tom Schindl, BestSolution, see http://www.bestsolution.at<br />Kai Tödter, Siemens AG<br />75<br />

×