Rialto studio is composed of 2 areas:

• The design area in which you build the user interface
• The design tool with all the functionality

This area represents the global page in which you will be able to drop, resize or remove components

It is a frame with a toolbar an three tabs. The frame is draggable so that you can move it anywhere on the screen.

In this section you find the global action button:

• The switch button can be use to switch between design mode and preview mode. The preview mode just show how will be the rialto page but you can’t interact with the components
• The align buttons allow to align (left, right and top) the selected components
• The clear button remove everything from the design area
• The save button allow to save the current work in a local file
• The load button allow to load a xml description stored in a local file

The first frame of this tab contain all the component that you can drop on the design area. When clicking on a component the grid will be fill with the init properties. You can change them by double clicking on the cell.

In this view you have a tree representation of the interface you are working on. By clicking on a node the grid will be fill with the current properties of the related component. You can change them by double clicking on the cell.

In this tab you can choose the output (xml or javascript) and the textarea will be fill with the corresponding source code of the current work.

In the design tab you just have to drag an drop the component you want to create. If you want to change the init parameter just click once on it, the grid will be fill with the default values. Just edit the propertie you want to change then drag an drop the component.

You can drag from the design tab and inside the design area. If the current movement is not possible there will be no effects (for example you can’t drop an treenode instance in something different from a treeview instance).

Most of the component can be resizable after drop. Just put the cursor at the limit of the component and resize it by draging.

You can refresh a component in the tree tab. Just select it by clicking on his node representation. Update the grid and the refresh will automatically be made in the design area.

On mouse right click on a component you have a contextual menu that allow to remove or select the component. You can also select component by left mouse click holding the ctrl key. Multi select will enable align button of the toolbar.

In this view you have a tree representation of the interface you are working on. When you select a node the corresponding component will be selected in the design area. You can change his position by drag an drop it in another component (another node of the tree representation) or remove it by drop it in the dash.

With the toolbar button you can store your current work in a local file. Your browser can ask you to confirm the fact you are working on local file. Load or save button click open a popup window. You’ll be ask to choose a local file using the browse button. The popup title represents the current file. If you don’t choose another file the current one will be use (for load or for save).

At present to save in a file, this file must exist.

• The grid drop open a popup use to set the header parameters of the grid.

• When using a tabfolder you can activate on of his tabitem by selected it in the tree tab. This is helpful if you want to update his content.

The idea of the studio is to store the description in a xml model. In the package of the studio you find a W3C Xml Schema to validate your description. You also have a XSL folder that contain XSL stylesheet. You can use them to transform your xml description in JSP, PHP or JSF rialto description.