Welcome to the Visual Builder.
You can use the Visual Builder to create simple SmartClient-based screens and export them as XML or JavaScript definitions that can be added to an application.

To use the Visual Builder:

Create components by dragging them out of the "Component Library" into the Component tree, or simply double-clicking them to add them as a child to the selected component in the tree.

You can also rearrange components in the Component tree by drag and drop, or right-click to get rid of them.

Add DataSources to the project using the "Add" button in the "DataSources" tab of the "Project" panel. You can add new DataSources using wizards, or use existing DataSources, which will include any DataSource placed in the [webroot]/shared/ds directory. See the QuickStart Guide, Chapter 6, DataBinding for information on creating DataSources.

Bind components to data by dragging DataSources from the "DataSources" tab and dropping them onto databinding-capable components (such as Grids).

Edit component properties by clicking on the component in the Component tree, which will show a property sheet. Properties are grouped into expandable/collapsible sections. You can hover over the title of any property to see documentation.

Add behaviors in the Events tab of the property sheet. Click the green plus sign (+) next to the name of an Event for a list of Actions that can be taken when that Event occurs.

Save and share screens via the "Project" pane in the lower right-hand corner (and the "screen" menu in the middle pane. Saved screens have a permanent URL that you can share with other team members. By default, saved screens are stored in the workspaces/ directory under tools/visualBuilder/, and can be edited by external tools, then reloaded.

See sample code by clicking on the "Code" header to reveal code for the current screen in both XML and JS formats. This code serves as a good reference for developers learning SmartClient, and can be copied and pasted to other tools as a starter screen definition.