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.


How can we declare UI? We have got 3 ways

Ok, I see that Wazaabi enable to define the UI as models, and those models are rendered at runtime by engines. But now I want to create a GUI, how can I declare such models?

1. Graphically with Architect

Architect is Graphical editor which enables the designer to define the GUI.
<include snap shot of the modeler>
One particularity of Architect, is that it builds the UI model behind and uses an a specific engine to render this model. According to the target UI technology, a specific engine will be loaded. The engine is responsible for rendering the UI model as close as possible from the UI technology rendering.
  • Wazaabi Architect

2. Programmatically

Wazaabi API enables developer to directly build the UI as other traditional UI. In this example we build a simple form [The complete JAVA code can be downloaded here].


// 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);
// 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);
  • Wazaabi UI example

3. Declaratively

The Wazaabi framework is delivered with declarative editor on which you can simply declare the content and the design of the GUI.

  • UI Form Delcarative