From Q3 2010 onward, the new drag ’n drop QAML UI Builder extension will be available. The extension is an Eclipse (3.5) plug-in that allows the creation of a web application without hardly any knowledge of Java, HTML or QAML. As long as you can ‘draw’ it with this extension, QAFE does the rest and the app will be directly available in Flex or GWT (or whichever other supporting Web 2.0 environment). As a result, the focus stays where it should be: with the application and its functionality.
Drag ’n drop UI close up?
The screenshot above shows an overview of the QAML UI Builder plug-in for Eclipse. This is the default setup (it also possible to create a custom setup in Eclipse). The following components can be distinguished:
1. The Component Palette (on the right). This contains all the graphical components QAFE supports for building a presentation layer. The components have been organized. All charting components, for instance, have been grouped.
2. In the middle, you can see the Drag ‘n Drop Editor. This is where it’s happening. Creating a screen is child’s play: just drag a component from the Palette.
3. Once a component has been placed in the Editor, the Properties View allows modification of its properties. The changes that affect the look and feel, are immediately displayed in the Editor (such as disabled; if true, it is grayed out).
4. Finally, the left side of Eclipse contains the Project Explorer, which lists all the QAML files that are part of the project.
In the screenshot, a Window has already been created. It contains a menu and below it, a toolbar with a number of items. They have been defined as Menu-Definition and Toolbar-Definition (all reusable components). By default, a Window has a RootPanel. In Panels, other components can be placed, including additional Panels. When you do this, you specify the orientation (layout):
- absolute layout
- auto layout
- border layout
- grid layout
- horizontal layout
- vertical layout
In the example, a Datagrid and a TabPanel component have been dragged into the Window. The Tab component is nothing other than a Panel, that can have multiple components and therefore, also has a layout to position its components. In this case, the TabPanel has two Tab components in the RootPanel. The Tab component named ‘Private’ has a grid layout with 2 columns and 7 rows and contains Label, TextField (property type is text), Checkbox, Choice with 2 Choice Items (M and F), TextField (property type is date) and DropDown with DropDown Items.
Code editor
So far, the screen has been entirely created in the drag ’n drop QAML UI Builder. If a developer wants to review and modify the generated code, they can select the Code tab in the bottom left corner of the Editor View. Changes can then be directly made in QAML. Code changes that are made manually are directly displayed in the Design tab.
Editing code manually has been made easier in QAML. The QAFE team has considerably improved the structure and the look (and the usability of reusable components like Panel-Definitions, etc.). When in doubt, the drag ’n drop UI Builder provides the answer. When you work in the Code tab, auto completion is applied based on the XSD, so that editing of a file goes a lot faster.
Other features
Images with an internet URL are displayed directly (and are resizable). The entries of a dropdown can also be placed and reorganized etc. using drag ’n drop. Layouts can be modified with one click. And the QAML UI Builder contains more features that increase productivity. Larger applications, for instance, will have more Windows or more reusable Panel components (wizards for instance). Once they have been created, they are accessible using the dropdown in the top left corner of the Editor. This way, custom Menu-Definitions, Panel-Definitions and Toolbar-Definitions become ideal building blocks to dress up new screens with and/or to modify all screens with a particular component in one hit.
Advantages of QAFE QAML UI Builder
The good thing about drag ‘n drop editing is that you won’t miss any brackets for instance, as tends to happen when you are manually editing XML. Drag ’n drop-editing also helps keep an overview, especially in more complex, larger applications. Furthermore, many things that are or are not technically allowed are taken care of by the UI Editor. The ease of use of this tool means that developers will produce functional screens faster, so more time can be spent on the functionality behind the screens. This is a pleasant way to work. Especially knowing that thanks to the technology independent structure of QAFE, you don’t have to start all over again when new web technologies are introduced.
