Director Tutorials

Customizing Pageflow-generated Forms

Objective

To learn how to use the Form Designer to:

• Apply Novell data type formats to form controls

• Use the Style Manager to change fonts

• Define Model Item Properties on a bind element

Before you begin   See About exteNd Director Tutorials.

Prerequisites   You must complete the exercises in Creating a Database Pageflow.

Concepts

• About the Form Designer

• About the Form tab

• About the Model tab

• About the Event Editor

Exercises

• Displaying data with a custom format

• Adding class style rules

• Adding model item properties

Before you get started   You'll be working with forms that you generated when you did the Creating a Database Pageflow. You'll be working with the following forms:

• TutorialemployeesDetails.xhtml

• TutorialdepartmentsEdit.xhtml

You can open these forms in the Form Designer by:

• Navigating to ExpressPortal-resource.spf\data\form directory (make sure you are viewing the ExpressPortal.spf file using source layout), then selecting the form and:

  • Double-clicking it

  or

  • Right mouse-clicking and choosing Open

or

• Opening the form from within the Pageflow (Tutorialemployees.xml and Tutorialdepartments.xml ).

Displaying data with a custom format

To specify a data type for a bind element:

1. Open TutorialemployeesDetails.xhtml.

2. Click the Form tab.

3. Select hiredate.

4. Navigate to the Property Inspector (in the lower right pane).

   TIP:   Make sure you select the Output tab of the Property Inspector and not the Output (label) tab.

5. Change the Format property as follows:

   Control name	Format property value
   hiredate	dd/MM/yyyy

   

6. Select salary.

7. Navigate to the Property Inspector (in the lower right pane) and make the following changes to the Format property:

   Control name	Format property value
   salary	CURRENCY

8. Click Save.

Adding class style rules

To add a class style rule:

1. Open TutorialemployeesDetails.xhtml (located in the ExpressPortal project under ExpressPortal-resource.spf\data\form).

2. In the Form tab, select the employeeid label.

3. In the Property Inspector select the Output(label) tab.

4. Click Edit class style rules. The Edit class styles dialog displays:

   

5. Click New Style.

   The Add new style dialog displays:

   

   (Class name is a generated value, so the value in your dialog might be different.)

6. Accept the default class name and click OK.

   The Style Manager dialog displays:

   

7. Select the Text tab and supply these values:

   Property	Value
   Font family	Arial, Helvetica, sans-serif
   Font size	12 pt
   Font weight	bold

8. Click OK to close the Font properties dialog.

9. Click OK to close the Style Manager dialog.

10. Click Save.

You can see the changes on the form when you run it in Preview mode (clicking the XForms Preview tab in the Form Designer) or by running the form within the Pageflow.

To test the format and font changes:

1. Start a new application server session.

2. Start a new browser instance.

3. Open the Express Portal application by typing this URL:

   http://host/ExpressPortal

   The default page for a guest user opens in your browser.

4. Click Login.

   

   The Login dialog opens in your browser:

   

5. Log in as a portal administrator or as a user, then click login or the Enter key.

   The default page for the user you specified opens in your browser.

6. Click Tutorial (under Personal Pages).

7. Click Search.

8. Click View to view a list of employee records for a department (for example, Product Development).

9. Choose an employee (for example, Duke Ellington) and click View.

   You will see the employee record with:

   • The currency format applied to the salary field and the date format applied to the hire date field.

   • The employeeid label style changes

   

Adding model item properties

To define an instance element as Required

1. Open TutorialemployeesEdit.xhtml.

2. In the Model tab, select the bind:nodeset=record/firstname element.

3. In the Property Inspector, click Add Model Item Properties.

4. In the Add Model Item Properties dialog, select Required, then click OK.

   

5. In the Property Inspector, change the Required value to true().

   

6. Click Save.

To test the changes:

1. Restart your application server and browser instances.

2. Click Search.

3. Click View to view any of the employee records.

4. Choose an employee and click Edit.

5. Clear the First Name field and click Update.

   The first time you do this, you are notified by a dialog that the data is invalid. When you clear the dialog, the field causing the problem is displayed in red. If you click Update again without correcting the problem, you'll see a second dialog indicating a submission error. These message actions are created by default when the forms are created. You can modify the messages in the Model tab of the Form Designer.

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