Director Tutorials

Using the Form Designer Wizard

Objective

To learn how to use the Form Designer Wizard to:

• Create a new form using sample instance data

• Reference an external schema file

• Apply formats to the instance data

Before you begin   See About exteNd Director Tutorials.

Concepts

• About the Form Designer

• About the Form tab

• About the Model tab

• About the Event Editor

Exercises

• To access the schema file needed for this exercise:

• To create a form using the Form Designer Wizard:

• To test the form:

• To reference an external schema:

• To apply data type formats:

To access the schema file needed for this exercise:

1. Navigate to the Projects\Express\data directory (under the exteNd installation directory).

2. Create two new subdirectories called xsd and xml.

3. Copy EmployeeList.xsd to the xsd directory and EmployeeListData.xml to the xml directory. (Both files are located in the Director52Tutorial.zip file).

To create a form using the Form Designer Wizard:

1. With the Express Portal project open in exteNd Director, select File>New>File.

2. Click the Portlet tab.

3. Select Form.

   

4. Click OK.

5. Enter TutorialEmployeesList as the Form name.

   

6. Click Next.

7. With the Sample XML data radio button selected, click Browse.

8. Select EmployeeListData.xml and click Next. (You copied this file to the Projects\Express\data\xml directory earlier).

9. Click Next to accept the defaults on the controls formatting panel.

10. Click Finish. When the Form Designer Wizard completes, your generated form should contain two layout boxes and a repeat look like this:

    

To test the form:

1. With the TutorialEmployeesList form open in the Form Designer, click XForms Preview.

   Your form should look like this:

   

   You can also use XForms Preview mode to verify the format of the data your form submits by clicking the form's submit button and viewing the results in the left-most pane.

   Click View form in browser to see get an idea of what the form looks like within the browser environment. You cannot test submissions in the browser environment though.

To reference an external schema:

1. With the form open in the Form Designer, choose the Model tab.

2. Select the Model root node.

   

3. In the Property Inspector, click Edit schema list.

4. Click Add.

5. Click EmployeeList.xsd from the ExpressPortal-ResourceSet\xsd directory.

   

6. Click OK.

7. Click OK.

8. Save the form.

To apply data type formats:

Now that the model is associated with a schema, you can apply data type formats to the bound controls.

1. With the form open in the Form Designer, choose the Form tab.

2. In the Repeat block, select data:hireDate.

3. In the Property Inspector, change the:

   • Width property to 173

   • Format property to FULL

   

4. In the Repeat block, select data:salary.

5. In the Property Inspector, change the:

   • Format property to CURRENCY

   

6. Click Save.

7. Click XForms Preview to see the changes to the form.

Copyright © 2004-2005 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved.  more ...