I will inaugurate the EURA NOVA R&D director’s blog by a post on the Wazaabi framework. Actually it is a very good starting point to explain the development we led, in collaboration with Olivier Moises, about the live model UI.

A lot of terms in this title!

Indeed, we have live, model, declarative, and finally UI.  That’s not obvious to link them at the first sight.

What does mean live model ?

Live means that the model is instantiated in memory at run-time. Usually the MDA approach consists in defining models and by defining a bunch of templates generating the final artifacts, e.g., the code, the XML files, the JSF pages, etc. This procedure is called M2T, model to text. With the live approach, the model does not generate code, we use the model instance and the information it conveys at run time. The approach is enabled by modelling frameworks such as EMF which provides a JAVA representation of the model.

Well, I see but how a live-model can be a UI?

That is the main purpose of the Wazaabi framework. The UI is described as a model and this model is rendered live to the target UI technology by the engine.

This is really a new way to consider GUI development. Having live model at runtime enable to avoid the generation code phase, this means that the same code is used at design and runtime. The designer is the developer. By the adapter pattern provided by EMF, any change on the model side are reflected on the UI, then you have a full control of modifying live the UI.

OK, but what’s declarative UI then?

Declarative means the ability to “declare” the UI instead of programming the UI such as XAML, XWT or other XML-based UI do. EMF provides natively the ability to declare model element. As a result, Wazaabi UI can directly benefit of this feature by  providing declarative editor for defining the UI model.

New perspectives by using models

The first question that raised is “why do I need a model UI if XML-UI already work?”. Using models for rendering a UI open a significant number of new perspectives by changing the way to approach the MDA. A next post will investigate the new perspectives offered by approaching the software development as live model and the new challenges it involves.

First of all, it changes the way to use model in software. Instead of generating your application code, you adapt the live model. A second project, next to Wazaabi, the binding/weaving engine has been developed. Fed with the UI model, it can make the link between the business objects and their graphical representation.  At the end of the day, this is nothing else than a transformation between two or n models. A next post will describe in detail this M2M weaver.

Using models in UI, enables the versionning of UI and even comparison of UI. The EMF compare project [2] from EMFT  could be used for this purpose. A repository of UIs could be used by using a model repository as CDO [4] or a simple DB. Therefore you can use framework such as EMF query [3] to retrieve particular UIs. Using model open new landscape for UI development and management.

When do we code something?

Let’s finish this post with a code snippet. We wil develop a simple form in Wazaabi.

The Wazaabi SWT code for the UI is very close to the SWT programming and that is normal as it modelised the whole SWT library. In this snippet we set the main composite and we put a grid layout with 2 columns.

// create a composite and set its layout
 Composite composite = WidgetsFactory.eINSTANCE.createComposite();
 GridLayout gridLayout = LayoutsFactory.eINSTANCE.createGridLayout();
 composite.setLayout(gridLayout);
 // Set the number of columns
 gridLayout.setNumColumns(2);

Now we create the labels and text fields and we add them as children of the main composite.

// create two labels with text
 Label nameLabel = WidgetsFactory.eINSTANCE.createLabel();
 Text nameText = WidgetsFactory.eINSTANCE.createText();

 Label addressLabel = WidgetsFactory.eINSTANCE.createLabel();
 Text addressText = WidgetsFactory.eINSTANCE.createText();

 // Set the labels
 nameLabel.setText("Name:");
 addressLabel.setText("Address:");

 // Save & cancel button
 PushButton save = WidgetsFactory.eINSTANCE.createPushButton();
 save.setText("Save");

 PushButton cancel = WidgetsFactory.eINSTANCE.createPushButton();
 cancel.setText("cancel");

 // Add to the composite
 composite.getChildren().add(nameLabel);
 composite.getChildren().add(nameText);

 composite.getChildren().add(addressLabel);
 composite.getChildren().add(addressText);

 composite.getChildren().add(save);
 composite.getChildren().add(cancel);

The final step is to create the SWT viewer which will instanciate the engine for rendering the SWT model. The viewer just takes the shell as argument.

// init SWT Engine in standalone mode
 SWTStandaloneHelper.init();

 // create the shell
 Display display = new Display();
 Shell mainShell = new Shell(display, SWT.SHELL_TRIM);
 mainShell.setText("Wazaabi UI form");
 mainShell.setLayout(new FillLayout());
 mainShell.setSize(300, 100);

 // create the viewer
 SWTControlViewer viewer = new SWTControlViewer(mainShell);

That’s all !  The result is that simple dialog:

The complete code could be downloaded at [5].

References

[1] The Wazaabi framework, http://wazaabi.org

[2] The EMF compare project, http://wiki.eclipse.org/EMF_Compare

[3] The EMF query2 project download page, http://www.eclipse.org/modeling/emf/downloads/?project=query2

[4] The CDO project, Eclipsepedia, http://wiki.eclipse.org/CDO

[5] The simple form Java code, http://wazaabi.org/files/java/FormSnippet.java