Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

e4 Webinar - Toolkit Model


Published on

Presents e4's Toolkit Model and tools

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

e4 Webinar - Toolkit Model

  1. 1. e4’s Toolkit Model – a new view on GUI Hallvard Trætteberg, Associate Professor, Dept. of Computer and Information Sciences Norwegian Univ. of Science and Technology Hallvard Trætteberg, e4’s Toolkit Model
  2. 2. Agenda <ul><li>Motivation </li></ul><ul><li>Tookit Model </li></ul><ul><ul><li>model </li></ul></ul><ul><ul><li>architecture </li></ul></ul><ul><li>Eclipse editors and views </li></ul>
  3. 3. Motivation <ul><li>Hand-coding GUIs is hard </li></ul><ul><ul><li>GUI frameworks can be complex </li></ul></ul><ul><ul><li>Conceptual gap between concrete GUI and the GUI code </li></ul></ul><ul><li>What works? </li></ul><ul><ul><li>GUI builders are very useful for part of the design task </li></ul></ul><ul><ul><li>HTML+DOM+Javascript has caught on </li></ul></ul><ul><ul><li>Model-based techniques are maturing and more wide-spread </li></ul></ul><ul><li>Can a combination of these be used for e4? </li></ul>
  4. 4. TM – model and architecture <ul><li>Ecore-based model of standard GUI elements </li></ul><ul><ul><li>hierarchy of widgets </li></ul></ul><ul><ul><li>simple elements – label, text field, buttons, list, ... </li></ul></ul><ul><ul><li>composites – generic, group box, tab folder, ... </li></ul></ul><ul><ul><li>SWT-specific layout </li></ul></ul><ul><ul><li>coming soon: </li></ul></ul><ul><ul><ul><li>table and tree widgets </li></ul></ul></ul><ul><ul><ul><li>styling in the model and with CSS </li></ul></ul></ul><ul><ul><ul><li>2d graphics </li></ul></ul></ul><ul><li>EMF API & tools are used to manage TM instances </li></ul><ul><ul><li>Java code with static and reflective API </li></ul></ul><ul><ul><li>generic editors and model-based techniques </li></ul></ul><ul><ul><li>ATL, Teneo, CDO ... </li></ul></ul>
  5. 5. TM – model and architecture <ul><li>Rendering for a specific toolkit is provided separately </li></ul><ul><ul><li>model is designed to be portable (SWT, Swing, Ajax, ...) </li></ul></ul><ul><ul><li>the model is “live”: concrete widgets are updated when model changes </li></ul></ul>TM model instance Toolkit-specific renderer Concrete toolkit widgets model changes propagate to widgets widget events propagate to model
  6. 6. Javascript support <ul><li>Wrappers for Ecore objects make them seem like native Javascript objects </li></ul><ul><li>Extra behavior may be added </li></ul><ul><ul><li>annotations to Ecore operations </li></ul></ul><ul><ul><li>separate files contributing methods to EClasses </li></ul></ul><ul><ul><li>EObjects may have their own methods </li></ul></ul><ul><ul><li>on<Property>Change methods used for event handling </li></ul></ul><ul><li>Standard Ecore classes has already been extended </li></ul><ul><ul><li>create new objects from EClasses </li></ul></ul><ul><ul><li>navigate in EObject hierarchies by index of name </li></ul></ul><ul><ul><li>functional API for searching, mapping and filtering </li></ul></ul>
  7. 7. Editors and views <ul><li>Tree-based editor with preview </li></ul><ul><ul><li>“ poor man’s” GUI builder </li></ul></ul><ul><ul><li>can load EMF application data </li></ul></ul><ul><ul><li>supports scripting </li></ul></ul><ul><ul><li>GUI gradually becomes functional </li></ul></ul><ul><li>Palette view – drag’n drop model fragments </li></ul><ul><li>Script editor – edit Javascript for model element </li></ul><ul><li>Preview pane – previews active editor content </li></ul><ul><li>Script scrapbook – try out snippets on live model </li></ul>
  8. 8. Typical workflow <ul><li>Create GUI sketch with appropriate tool </li></ul><ul><ul><li>wireframesketcher is no-nonsense and EMF-based </li></ul></ul><ul><li>Create TM instance </li></ul><ul><ul><li>drag’n drop model fragments from palette </li></ul></ul><ul><ul><li>edit properties and add layout </li></ul></ul><ul><li>Create sample data </li></ul><ul><ul><li>create Ecore model of domain data </li></ul></ul><ul><ul><li>create example data for data model </li></ul></ul><ul><li>Script model </li></ul><ul><ul><li>populate with example data </li></ul></ul><ul><ul><li>react to user events </li></ul></ul>
  9. 9. Tree-based editor with preview
  10. 10. Palette view – drag’n drop model fragments
  11. 11. Script editing – edit and try