Nexaweb Visual Editor

The Nexaweb Visual Editor, available in the Nexaweb perspective and shown in Figure 53, displays an XAL file in which you design a user interface. The Visual Editor allows you to quickly build user interface files by dragging and dropping components.

In addition, you can switch to the source tab at the bottom of the Visual Editor to view and edit the current XML source for the file. Modifying the source and switching back to the Visual Editor tab automatically displays the modification made to the XML file in the source editor.

The following panes appear in the Nexaweb perspective by default:

View Pane	Location Relative to Visual Editor
Navigator	Left
Palette	Left
Servers	Below
Console	Below
Outline	Right
Data	Right
Properties	Right
Layout	Right

You design an application UI by dragging Layout panes and components from the Palette view into the visual editor pane. You then use the Properties pane to customize the elements in the UI Document. The Properties pane displays the properties of an element selected in the UI file.

$image\img00084.gif$

Figure 53 – Nexaweb Visual Editor

The Visual Editor supports the following editing options in any layout:

Option	Appearance	Description
Resize	$image\img00085.gif$ $image\img00086.gif$	When you select a component in a UI file, resize handles appear. When you place the cursor over a resize handle, the cursor becomes a double arrow. Drag a resize handle to resize the component.
Move	$image\img00087.gif$	When you place the cursor over a component, a move cursor appears. Click and drag to move the component within the UI file.
Move multiple components	$image\img00088.gif$	To select multiple components, click on the first component, then press and hold the Ctrl key while you select additional components. All components remain selected until you click outside of one of the components.

You can change the order of components within the following layout panes by dragging a component to a new location:

Layout Pane	Java or Ajax
freePane	Both
horizontalBoxPane	Both
verticalBoxPane	Both
borderPane	Both
verticalFlowPane	Java
horizontalFlowPane	Java
gridPane	Java

For example, in a vertical box pane:

$image\img00089.gif$

When you select a component, a red line appears identifying the selected component.

$image\img00090.gif$

Drag the component to its new location in the layout:

$image\img00091.gif$