You are browsing past revisions for this area.

Date Editor Preview
You are previewing another version of this material. This will not become the current version unless you click "Revert." If you change your mind, click "cancel."

The next generation UI

Wazaabi provides a complete a complete model support for describing UI in SWT, SWING and JSF, but can be extended to other UI technologies.


The Architect

Architect is the Wazaabi editor for modeling UI. In Wazaabi, modeling a UI means defining the underlying UI model in the target UI technology.

What's new in this modeler ?

Architect is a flexible modeler. The palette can be loaded with UI components from a target, either SWT or JSF or SWING. When a specific model is loaded, the Editor enables to build the corresponding target UI model.

The GUI edited in Architect is rendered within a GEF editor, but how the model can rendered in GEF? Actually, Architect works with two viewers, the Wazaabi Viewer (hidden) and the GEF viewer.

 

 

  • The Arcthitect viewers

The GEF viewer is the main editor of Architect. The SWT model is rendered in the Wazaabi viewer and then, the complete image of the UI is copied in the GEF Viewer. In order to identify each model UI component in the GEF viewer, a GEF figure is associated to each component and drawn on their position on the UI image.

As a result, each click on the part of the image corresponding to a model UI component can be detected.

OK, I see, but If I do not want to create an SWT model, How can I create a JSF model ?

 

That's become interesting. Indeed, an SWT model is rendered into the GEF editor, but that's not the main source model. The SWT model is named the ViewModel because it is the one we see, but the real edited model is the SourceModel, the one we edit.

The M2M live-Weaver framework is responsible for translating, live, the Source Model to the View Model. The set of transformations are described in rule files.

  • The main architect view

Let us take a simple command scenario:

  1. A GUI designer drag & drop an element on the Architect editor from the palette
  2. A create command is issued on the GEF editor
  3. The command create the component by the Model factory and add the child on the parent component, the Source Model is updated
  4. The Source Model adapter notifies the M2M Weaver that a change occurred, and the M2M live weaver reports those change to the View model according to the set of transformation rules
  5. As the View Model is updated, the View Model adapter notifies the Wazaabi engine that the model has changed
  6. The Wazaabi viewer redraws the UI
  7. The M2MSwtRootEditPart update the GEF Viewer