Creating a Data Bound Form

Creates a form in a new UI component with data bound to the selected data source file.

You define the fields to appear on the form as you select the data from this source to bind to this form.

To create a Data Bound form, follow these steps:

1. To open the Generate Data Bound Form wizard, either:

From Nexaweb Data perspective:	From Nexaweb perspective:
Right click on a data source or piece of data under the Data Source node in the Data view and select Generate data bound form	Right click a MCO java file and select Nexaweb > Generate data bound form

2. Complete the Generate Data Bound Form wizard as follows:

$image\img00197.gif$

Nexaweb Project: Specify the Nexaweb project with which to associate the form.

Form's top level container: Select from the drop down list the type of container to use for this form.

Label / Field Relationship: Select from the drop down list the look of the label\field layout for this form.

Add OK button to form: Click checkbox to add an OK button to this form.

Add Cancel button to form: Click checkbox to add a Cancel button to this form.

ID: Displays the ID of the datasource you selected.

Source URL: Specifies the file you selected as the source URL. To select another source file, click the arrow to specify one of the following options:

Create MCO class
The New Managed Client Object wizard appears.
Create JSP stub file
The New Nexaweb JSP page wizard appears.
Choose MCO
The Data Source MCO dialog appears.
Choose a file
The Choose a file dialog appears.

Binding prefix: Optionally, specify a prefix identifying the path to the data used in this binding.

Add datasource to Form: Click checkbox to include complete reference to this datasource in the UI file.

Click Next.
The Field Binding and Widget Settings and dialog appears.

3. Complete the Field Binding and Widget Settings dialog as follows:

$image\img00198.gif$

Bind: A list of each piece of data that you can bind to the UI appears in the Binding Query String field. A check mark appears in the Bind check box by default indicating Nexaweb Studio binds this data to the UI. Click the Bind check box to exclude a piece of data from the UI.

Bind Query String: Lists the name of each piece of data that you can bind to the UI. Optionally, specify an alternative bind query string to obtain this piece of data from the source.

Binding Type: Click in the binding type field to select the binding type: one_time (gets data once and does not refresh) or one way (refreshes data at intervals when it changes at the source.)

Widget Type: Click in this field to select the type of widget within the UI component to which to bind this piece of data.

Move Up/Down: Use the Move Up/Down keys to re-arrange the order of data.

Add/Delete: Use the Add/Delete keys to add or delete data to bind to the UI.

4. Click Next.
The Field Settings dialog appears.

$image\img00199.gif$

Field Name: The Field Settings wizard lists the fields that you selected to bind to the UI on the Field Bindings and Widget Settings wizard. Optionally, click in a field name to specify a new name to appear where this data displays in the UI component.

Widget Type: Click in this field for a Field Name to select a different widget type to associate with this data in the UI.

Binding Location: Click the arrow in the Binding Location field to select a different attribute of the widget specified in the Widget Type field to which to bind the data..

5. Click Next.
A dialog appears on which you specify the file to use as the data bound form.

$image\img00200.gif$

Enter or select the parent folder: Enter the parent folder in which to store this data bound form, or select the folder from project lists shown.

File Name: Specifies a name for this file.

Advanced: Optionally, click Advanced to specify a file to which to link this file. Click the Link to file in filesystem check box. Specify the file name or click Browse to locate a file. Click Variables to specify defined path variables.

6. Click Finish.
Nexaweb displays the data bound form in the Nexaweb Visual Editor similar to Figure 101, and saves the file in the specified project directory.

$image\img00201.gif$

Figure 101: Data Bound Form