Using the Page Editor Extensions for Dreamweaver

This chapter provides an overview of Dreamweaver extensions and discusses how to:

• Edit CalicoUI.properties.

• Insert a Configurator runtime object.

• Edit properties of Advanced Configurator objects.

Understanding Dreamweaver Extensions

PeopleSoft Advanced Configurator provides extensions for Macromedia® Dreamweaver™ that help the web developer build a website for a Configurator model. This chapter describes the Configurator extensions and how to use them. If you do not use Dreamweaver, skip this chapter.

See Using JSP Form Control Templates.

Configurator extensions for Dreamweaver include:

• A Configurator item in the Commands menu of the taskbar of the Dreamweaver Document window.

  This menu item tells you which version of the extensions you have, enables you to edit the CalicoUI.properties file, and add it to your website.

• A Configurator panel in the Dreamweaver Objects palette.

  This panel enables you to insert Configurator objects into the active Document window.

• A Configurator item in the Insert menu of the task bar of the Dreamweaver Document window.

  This menu item also enables you to insert Configurator objects into the active Document window.

• Dreamweaver Property inspectors for most of the Configurator objects.

  These inspectors enable you to edit properties of Configurator objects that are in the active Document window.

Advanced Configurator Runtime Objects

A Configurator object is a graphical user interface that creates JavaServer Pages (JSP) syntax on a JSP page when you insert the object into the active document window in Dreamweaver. You can view the syntax created by an object by having the Dreamweaver HTML Source window open as you insert objects or edit their properties.

See Using JSP Form Control Templates.

There are 10 Configurator objects that you can insert into the active Document window. Two of the objects are general purpose:

• Form

• Button

You need a Configurator Form to process other Configurator objects. A Configurator Button submits a page, or resets the picks on a page.

Note. You must use the form and button created by the Configurator Form and Configurator Button objects. They set attributes to work with your Configurator model.

Do not use more than one Configurator form on a JavaServer Page.

Three Configurator objects create form controls for selection points in the model:

• List

• Group

• Table

In fact, each of these three objects creates two types of form controls:

• Single-select: Enables the user to select only one item. A drop-down list box and radio-button group are single-select form controls.

• Multi-Select: Enables the user to select one or more items. A text list and check box group are multi-select form controls.

The type of selection point—whether it is optional or required—determines which type of form control these three Configurator objects create.

Note. The modeler creates the selection points in your model. A selection point is that point in your model where the user selects one or more items from two or more items. A selection point is optional if the user can select none of the items, and required if the user must select at least one item.

Two Configurator objects create a single-select form control that uses images to select an item:

• Single-select image control

• Image table

Single-Select Image Control places an image on the page where you indicate, to select one domain member of a selection point. Image Table places images for every domain member of a selection point in either a row or a column on the page, to select any domain member of a selection point.

Two Configurator objects create messages for constraint violations:

• Control Why Help

• Application Why Help

Control Why Help creates messages for a selection point. Application Why Help creates messages for the entire model.

Configurator NumericData is the tenth object. It displays the total—that is, the summation—for a numeric attribute of user picks, such as price, at runtime.

Creating a Solution

To create a Configurator web application in Dreamweaver, do the following:

1. In Windows Explorer, create a directory for your website files; for example:

   D:\Dev\WebSites\myWebApp1

2. In Dreamweaver, create a site (select Site, New Site).

3. Edit the CalicoUI.properties file.

   See Editing CalicoUI.properties.

4. Create JSP pages by inserting Configurator objects into an active Document.

   See Editing Properties of Advanced Configurator Objects, Inserting a Configurator Runtime Object.

See Also

Deployment for a Web Application Based on a Single Component Model

Advanced Configurator System Administration

Editing CalicoUI.properties

The CalicoUI.properties file must be in your web application directory with your JSP pages. Add it after you create your site in Dreamweaver. This file determines the display of the following Configurator objects in your application:

• List

• Group

• Table

• Numeric Data

Before you add the CalicoUI.properties file to your web application directory, you must first edit it to apply to your model.

To edit and add the CalicoUI.properties file to your web application directory, from an active Document window:

1. Select Commands, Edit Calico UI Properties File.

   A dialog box asks if you want to add the Configurator UI properties file to your site.

2. Click OK.

   The Add Calico UI Properties File To Site dialog box appears, so that you can edit the file before adding it to your application directory.

3. Set values for the following:

Inserting a Configurator Runtime Object

To insert a Configurator object into the active Document window:

1. Select Window, Objects.

   The Dreamweaver Objects palette appears.

2. Click the down arrow in the upper right-hand corner of the Objects palette, and in the menu that appears, click Advisor.

   The Advisor panel appears.

3. Drag and drop the object that you want to insert from the Advisor panel.

   The object’s insert dialog box appears.

   Note. You can also insert Configurator objects from the Configurator item of the Insert menu.

4. Complete at least the required fields of the insert dialog box, and click OK.

   For most of the Configurator objects, if you have not previously included CalicoProcessForm.jsp in your web application directory, a dialog box prompts you whether to include it.

5. Click OK.

   CalicoProcessForm.jsp processes the Configurator form on your JSP page before CalicoProcessFormInc.jsp processes it in the normal way. By default, CalicoProcessForm.jsp does nothing, and adding it to your website has no effect. Modify this file only if you want to preprocess your Configurator form.

   See Using JSP Form Control Templates.

Inserting a Form

You need a Configurator form to process all of the other Configurator objects on the JSP page. All other Configurator objects on the page must be inserted in the same Configurator form.

You insert the Configurator Form object into the active Document window from the Advisor panel of the Dreamweaver Objects palette.

If you try to insert another Configurator object before you insert the Configurator form, a message prompts you to insert the form with the other object.

Warning! Do not use more than one Configurator form on a JavaServer Page.

Inserting a Button

A Configurator button does one of the following:

• Submits the page.

• Resets the page.

The submit button redirects to the URL that you set. The reset button sets picks on the page to the state that they had when the page was generated, and can redirect to another URL, if you want.

CLEAR is a reset button. It sets the user’s choice of a vehicle to what it was when the page was generated. COMPONENTS redirects to the URL of the page for choosing components.

Insert a Configurator Button object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

Set the properties of a Configurator Button object in the Insert Calico Button dialog box.

Inserting a List

A Configurator List is one of the following:

• A drop-down list box for a single-select selection point.

• A text list for a multi-select selection point.

The drop-down list box initially displays only one item, but expands to display all of the items available for a selection point. The user can select only one item. The text list displays the number of items that you set, and scrolls through additional items, if any. The user can select one or more items.

PICK A VEHICLE is a drop-down list box of four items. The PICK COMPONENTS text list is set to display one item, and scrolls through three others. The PICK KITS text list is set to display three items. Because the selection point has only three items, the list has no scroll bars. Insert a Configurator List object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

Set the properties of a Configurator List object in the Insert Calico List dialog box:

onBlur = "foo()"; onClick= "foo2()"

Inserting a Group

A Configurator Group is one of the following:

• A radio-button group for a single-select selection point.

• A check box group for a multi-select selection point.

With radio buttons, the user can select only one item. However, you can include an item at the top or bottom of the group to enable the user to select nothing, if the selection point is optional. With check boxes, the user can select one or more items, and can select nothing by clearing all of the check boxes.

SELECT A VEHICLE enables the user to select only one vehicle. If the selection point is optional, you can include a None button at the top or bottom of the group to enable the user to select nothing. SELECT COMPONENTS and SELECT KITS enable the user to select one or more items, or nothing at all.

To insert a group:

1. Insert a Configurator Group object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

2. Set the properties of a Configurator Group object in the Insert Calico Group dialog box.

3. Set the following:

   ID	Enter an ID that is unique across all controls for your application.

    

   Selection Point

   Browse to the <ModelName>.modelinfo.xml file, click it, and choose one of the selection points in the drop-down list box. (The model information file is created when the model is created and compiled.)

    

   Caption Type

   Select either text or image from the drop-down list box.

    

   String or Path

   If you want the caption to be text, enter it. If you want the caption to be an image, browse to the image, and click it.

    

   Sort	Click to order picked items first in the list after a pick is submitted.

    

   Show Eliminated

   Click to display elimination levels, then enter the upper and lower limits, inclusive, for the elimination levels that you want to display. (The modeler defines elimination levels in the model.)

    

   Show “None”

   Select one of the items in the drop-down list box. First places the None item at the top of the list. Last places the None item at the bottom of the list. Do Not Show excludes a None item from the list. (This field applies only to single-select lists.)

    

   Replace “None” With

   Enter text to identify the item in the list that lets the user choose nothing. “None” is used if you leave this field blank.

    

   Events

   Click, then enter the HTML syntax to handle an event for this control. For example: onBlur = "foo()"; onClick= "foo2()"

    

   Attributes

   Click, then enter the attributes that you want to include. Separate multiple attributes with commas. Attributes replace domain member names. To display attributes, the modeler should create an attribute for domain member names; for example, an attribute called “DomMbrName” or “Desc.” Note. If you want column headings for your attributes, you must use the Configurator Table object, which creates a radio-box group or check box group, with attributes in columns, and column headings.

Inserting a Table

A Configurator Table is one of the following:

• A radio-button group for a single-select selection point.

  This displays the button and attributes for each item in columns with column headings.

• A check box group for a multi-select selection point.

  This displays the check box and attributes for each item in columns with column headings.

As with any radio button, the user can select only one item. However, with a Configurator Table object, you can include an item at the top or bottom of the radio-button group to enable the user to select nothing, if the selection point is optional. With check boxes, the user can select one or more items, and can select nothing by clearing all of the check boxes.

DECIDE WHICH VEHICLE is a radio-button table. All of the items in it are null because the modeler did not assign values for the code and cost attributes for this selection point. DECIDE WHICH COMPONENTS and DECIDE WHICH KITS are check box tables. The modeler assigned values to the code and cost attributes for these two selection points. (Code and Cost are actually headings that the web designer assigned to these two attributes. The modeler named these attributes Abbreviation and Price.)

Notice that attributes replace item names. If you want to use the Configurator Table object, the modeler should create an attribute for the name of an item, so that you can display it.

To insert a table:

1. Insert a Table object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

2. Set the properties of a Configurator Table object in the Insert Calico Table dialog box.

   ID	Enter an ID that is unique across all controls for your application.

    

   Selection Point

   Browse to the <ModelName>.modelinfo.xml file, click it, and choose one of the selection points in the drop-down list box. (The model information file is created when the model is created and compiled.)

    

   Caption Type

   Select either text or image from the drop-down list box.

    

   String or Path

   If you want the caption to be text, enter it. If you want the caption to be an image, browse to the image, and click it.

    

   Sort	Click to order picked items first in the list after a pick is submitted.

    

   Show Eliminated

   Click to display elimination levels, then enter the upper and lower limits, inclusive, for the elimination levels that you want to display. (The modeler defines elimination levels in the model.)

    

   Show “None”

   Select one of the items in the drop-down list box. First places the None item at the top of the list. Last places the None item at the bottom of the list. Do Not Show excludes a None item from the list. (This field applies only to single-select lists.)

    

   Replace “None” With

   Enter text to identify the item in the list that lets the user choose nothing. “None” is used if you leave this field blank.

    

   Events

   Click, then enter the HTML syntax to handle an event for this control. For example: onBlur = "foo()"; onClick= "foo2()"

    

   Attributes

   Click, then enter the attributes that you want to include. Separate multiple attributes with commas. Attributes replace domain member names. To display attributes, the modeler should create an attribute for domain member names; for example, an attribute called “DomMbrName” or “Desc.” Note. If you want column headings for your attributes, you must use the Configurator Table object, which creates a radio-box group or check box group, with attributes in columns, and column headings.

    

   Column Heading

   Enter the column heading for each attribute that you include. Separate multiple columns with commas.

Inserting an Image

The two image objects enable you to create a control for a single-select selection point that uses images to select a domain member:

• Single-Select Image Control: Generates an image to select one domain of a selection point.

  You use the object multiple times to specify the image and location on the page for each domain member of a selection point. At runtime, selecting one image deselects another.

• Image Table: Generates either a column or a row of images for all of the domain members of a selection point.

  You use it once to specify the image for every domain member of a selection point, and whether you want the images placed horizontally in a row, or vertically in a column. At runtime, selecting one image in the row or column de-selects another.

When the “selectable” green image is selected and submitted, it is replaced by a corresponding “selected” green image.

Note. The images of a Single-Select Table Image control are placed in a table row (in a table cell) and centered.

You set the properties of a Configurator Image object in one of the following dialog boxes:

To insert a Single Select Image:

1. Insert an Image object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

2. Specify the properties in the dialog boxes.

Because Image Table generates one control with images for every domain member of the selection point, whereas multiple instances of Single Select Image Control generate a control image by image, the dialog boxes differ from each another in that:

• Single Select Image Control requires a domain member name.

  Image Table does not use domain member names.

• Image Table requires an image attribute in the Configurator model.

  Single Select Image Control also accepts an image name.

• Image Table requires an alternative text attribute in the model.

  Single Select Image Control also accepts an alternative text name.

Inserting Why Help

Configurator Why Help displays messages on constraints resulting from user picks. There are two types of Configurator Why Help:

• Control Why Help: This object displays messages on constraints resulting from picks on the specified control.

• Application Why Help: This object displays messages on constraints resulting from picks anywhere in the application.

You can attach labels to the messages. The labels are displayed only when the messages are displayed.

You set the properties of a Configurator Why Help object in one of the following dialog boxes:

Selection Point

Browse to the <ModelName>.modelinfo.xml file, click it, and choose one of the selection points in the drop-down list box for which you want Control Why Help. (You do not set a selection point for Application Why Help, because it applies to all selection points in the model.)

Inserting a Numeric Data Object

The Configurator Numeric Data object displays a total—that is, a summation—for a numeric attribute of user picks, such as price, at runtime. The summation is preceded on the same line by a caption, followed by a colon (:).

Note. The modeler creates a selection point for each summation.

You can attach labels to the messages. The labels are displayed only when the messages are displayed.

Insert a Configurator Numeric Data object into the active document window from the Advisor panel of the Dreamweaver Objects palette.

Set the properties of a Configurator Numeric Data object in the Insert Numeric Data dialog box:

Selection Point

Browse to the <ModelName>.modelinfo.xml file, click it, and choose one of the selection points for numeric data—that is, the summation of a numeric attribute—in the drop-down list box. (The model information file is created when the model is created and compiled. Note. The modeler creates a selection point for each summation of a numeric attribute, and may constrain the summation to certain selection points. For example, the modeler may constrain a selection point called TotalPrice to the price (a numeric attribute) of HardDrive (one selection point) and PowerSupply (another selection point). At runtime, TotalPrice is the summation of the price attribute of all hard drive items and power supply items selected by the user.

Editing Properties of Advanced Configurator Objects

Each of the Configurator objects, except Form and Button, has a unique Dreamweaver Property inspector that enables you to edit the properties that you set when you inserted the object.

To access the property inspector for a Configurator object:

1. In an active document window, select the Configurator object whose properties you want to edit.

2. Select Window, Properties.

   The Property inspector appears.

3. If the arrow in the lower right-hand corner of the inspector is pointing down, click it to expand the Property inspector.

Editing Forms and Buttons

Configurator forms and buttons don't have a property inspector in which to change their property values. To achieve a form or button with different properties, delete it, then reinsert it, setting the desired properties on the new object.

Warning! The action type for both Configurator buttons is submit. Do not set the action type of any Configurator button to reset in either the standard Property inspector or HTML source.

Editing Lists, Groups, and Tables

The Property dialog boxes for Configurator List, Configurator Group, and Configurator Table are similar.