Eclipse Demo Camp 2010 - UI Bindings - An Introduction


Published on

Presentation from Eclipse Demo Camp 2010 in Copenhagen.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Eclipse Demo Camp 2010 - UI Bindings - An Introduction

  1. 1. UI Bindings - An Introduction Presentation by Tonny Madsen at Eclipse Demo Camp in Copenhagen 1. December 2010
  2. 2. The Problem – Consistency and Maintainability <ul><li>Consistency </li></ul><ul><ul><li>Cornerstone of all UI Design Guides </li></ul></ul><ul><ul><li>If you can do it for one widget, you should be able to do it for all widgets! </li></ul></ul><ul><li>Maintainability! </li></ul><ul><li>Guideline 1.1 : </li></ul><ul><ul><li>Follow and apply good user interface design principles: user in control, directness, consistency, forgiveness, feedback, aesthetics, and simplicity. </li></ul></ul>
  3. 3. The Problem – rephrased <ul><li>Basically, how do you solve these common problems: </li></ul><ul><ul><li>all currencies, amounts, dates, customer IDs and whatever are shown in the same manner all over the application </li></ul></ul><ul><ul><li>all date fields support the same set of shortcuts for &quot;today&quot;, &quot;next week&quot;, &quot;next weekend&quot;, etc. </li></ul></ul><ul><ul><li>all enumeration fields of the same base type are mapped in the same manner - whether a combobox, list or simple text field is wanted in a specific form </li></ul></ul><ul><ul><li>all forms use the same colors, fonts and images </li></ul></ul><ul><ul><li>the application can still be developed using both automated UI generation and existing commercial UI design tools </li></ul></ul><ul><ul><li>when new UI ideas are developed they can be added to the application without having to redo all forms again </li></ul></ul><ul><ul><li>the UI can utilize the current UI Forms, EMF validators, and field assist without having to hand code everything repeatably </li></ul></ul><ul><ul><li>the developed code does not contain too much boilerplate code for the UI </li></ul></ul>
  4. 4. Three Approaches <ul><li>New custom widget set that adds semantics to the basic SWT widgets </li></ul><ul><ul><li>Knows how to search for a customer, etc </li></ul></ul><ul><ul><li>Disadvantages: </li></ul></ul><ul><ul><ul><li>What about tables and trees </li></ul></ul></ul><ul><ul><ul><li>A value is often not enough </li></ul></ul></ul><ul><ul><ul><li>Cannot use any existing UI design tools </li></ul></ul></ul><ul><li>Modeling the UI in a DSL – usually XML – and then generate the widget tree at build time or run-time </li></ul><ul><ul><li>Disadvantages: </li></ul></ul><ul><ul><ul><li>Special case code can be hard to add </li></ul></ul></ul><ul><ul><ul><li>Cannot use any existing UI design tools </li></ul></ul></ul><ul><li>Java code with a decorator pattern </li></ul><ul><li>The UI Bindings framework does not preclude you from modeling the UI in XML! </li></ul>
  5. 5. Demo <ul><li>How does it look like.. </li></ul>
  6. 6. Design Philosophy <ul><li>Java rather than XML </li></ul><ul><ul><li>Though we still have a lot of extension points </li></ul></ul><ul><li>The Model is… EMF </li></ul><ul><ul><li>Other real-life models are possible – e.g. the data binding framework supports Java Beans </li></ul></ul><ul><ul><li>Utilizes EMF meta information like bounds and annotations </li></ul></ul><ul><li>Add-on Functionality as Add-on Classes </li></ul><ul><ul><li>Keeps the core functionality as simple as possible </li></ul></ul><ul><ul><li>Though it is probably more complicated than need be </li></ul></ul><ul><li>Avoid hard-coded limitations </li></ul><ul><ul><li>Extensibility via extension point: UI attributes, decorators, observable factories, model annotations </li></ul></ul>
  7. 7. The Shop Model
  8. 8. The Internals <ul><li>UI Attributes </li></ul><ul><ul><li>Provides a common interface to widgets in the form of </li></ul></ul><ul><ul><ul><li>A number of observables: value, list, min and max value, etc </li></ul></ul></ul><ul><ul><ul><li>A field assist adapter </li></ul></ul></ul><ul><ul><ul><li>A number of properties </li></ul></ul></ul><ul><li>Decorators </li></ul><ul><ul><li>Binds a single model (EMF) attribute to a single UI attribute </li></ul></ul><ul><li>Decorator Providers </li></ul><ul><ul><li>Provides a decorator based on the “types” of the model attribute and the UI attribute (and a type specification) </li></ul></ul><ul><li>Model Annotations </li></ul><ul><ul><li>Provides additional information about specific (EMF) entities and features </li></ul></ul>
  9. 9. Model Annotations <ul><li>Arguments for decorators </li></ul><ul><ul><li>Tooltips, read-only </li></ul></ul><ul><ul><li>Min and max values </li></ul></ul><ul><ul><li>Valid values for lists </li></ul></ul><ul><li>Can be specified in several places </li></ul><ul><ul><li>As EMF annotations </li></ul></ul><ul><ul><li>As UI Binding Model annotations </li></ul></ul><ul><ul><li>In specific bindings </li></ul></ul>
  10. 10. Eclipse Technologies <ul><li>EMF </li></ul><ul><ul><li>Domain model </li></ul></ul><ul><ul><li>Internal model </li></ul></ul><ul><li>UI Forms </li></ul><ul><ul><li>Used to generate the forms, wizards, etc </li></ul></ul><ul><li>EMF Validation </li></ul><ul><ul><li>Used to provide non-trivial validation </li></ul></ul><ul><li>Data Binding </li></ul><ul><ul><li>All bindings to widgets </li></ul></ul><ul><li>Field Assist </li></ul><ul><li>Quick Fixes </li></ul>
  11. 11. If You Want to Know More about UI Bindings <ul><li>The Project: </li></ul><ul><ul><li>http:// -bindings </li></ul></ul>