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