column header to sort. In the dropdown list, choose Both.

Step 4. Set the value to display in the "Account Type" column

In the Programmer;s pane, set Display to Field. Choose Account Type from the list of
fields.

Step 5. Adjust the column widths

Now that all the columns are specified, you can adjust the column widths by simply
clicking and dragging on the dividers between the columns:

Drag the divider between the "Company" and "Contact" columns to increase the width
of the "Company" column. Drag the divider between the "Contact" and "Type" columns
to increase the width of the Contact column.

Choose File - Save, or press Ctrl+S to save your work.

Create the action bar

You've already familiar with Action Bars from the Contact form lesson. Views can have
action bars too. We'll create the following actions for the Contact Management view:

• New Contact: This action opens up a new Contact form for the user to
fill out and submit.
• Move to Trash: To delete documents, first select them, then choose
Move to Trash. Documents moved to trash are not deleted immediately -
they're marked with a trash bin icon.
• Empty Trash: This action deletes the documents that the user has
moved to trash.

Step 1. Open the Action pane

The Action pane is where you specify the Action Bar properties and create actions. To
open the Action pane, drag the frame splitter at the right edge of the Designer window
to the size you want:

Step 2. Bring up the Action Bar Properties box

Click anywhere in the Action pane to select the pane. Choose Design - Action Bar
Properties to bring up the Action Bar Properties box.
Step 3. Specify the Action Bar color

Choose the light-blue Color shown below:

Step 4. Specify Web access

As we did for the action bar in the Contact form, specify the use of the Action Bar
applet when displaying on the Web by setting Display to Using Java Applet.

Step 5. Specify button properties

Select the second tab of the Action Bar Properties box to specify general action button
properties:
Click the Color control to bring up the color palette. Along the top of the color palette
are icons that represent special color choices. Choose the None icon (circled above).

Step 6. Specify button label properties

Select the third tab of the Action Bar Properties box to specify the appearance of button
labels:

Set Font to Arial.

Set Size to 9.

Choose File - Save, or press CTRL+S to save your work.

Now that you've specified the properties of the Action Bar, you'll create the action
buttons in the following sections.

Create the "New Contact" action

You've already created action buttons in the Contact form. The process is the same here.

Step 1. Create the new "New Contact" action button

Choose Create - Action.

This creates the new action, and brings up the Action Properties box, with focus in the
Name field. Set the name to "New Contact".

Step 2. Specify a graphic for the "New Contact" action

Still in the first panel of the Action Properties box, set Graphic to Custom.

In the Image field, click the folder icon to bring up the list of image resources. Choose
"act_newcontact.gif".

Step 3. Script the "New Contact" action

Enter the following Formula script into the Programmer's pane (you can copy and paste
the text):

@SetTargetFrame("_top");
@Command([Compose]; "Contact")

Click the checkmark button to save the script.

Create the "Move to Trash" action

Step 1. Create the new "Move to Trash" action button

Choose the menu command Create - Action.

This creates the new action, and brings up the Action Properties box, with focus in the
Name field. Set the name to "Move to Trash".

Step 2. Specify a graphic for the "Move to Trash" action

Still in the first panel of the Action Properties box, set Graphic to Custom.

In the Image field, click the folder icon to bring up the list of image resources. Choose
"act_movetotrash.gif".

Step 3. Script the "Move to Trash" action

Enter the following Formula script into the Programmer's pane (you can copy and paste
the text):

@Command([MoveToTrash])

Click the checkmark button to save the script.

Create the "Empty Trash" action
Step 1. Create the new "Empty Trash" action button

Choose the menu command Create - Action.

This creates the new action, and brings up the Action Properties box, with focus in the
Name field. Set the name to "Empty Trash".

Step 2. Specify a graphic for the "Empty Trash" action

Still in the first panel of the Action Properties box, set Graphic to Custom.

In the Image field, click the folder icon to bring up the list of image resources. Choose
"act_emptytrash.gif".

Step 3. Script the "Empty Trash" action

Enter the following Formula script into the Programmer's pane (you can copy and paste
the text):

@Command([EmptyTrash])

Click the checkmark button to save the script.

Choose File - Save, or press CTRL+S to save your work.

Preview your work

Click the preview button of your choice to see the view you've created. It should look
something like this:

• Use the "New Contact" button to create new contacts to populate the
view.
• Try using "Move to Trash" and "Empty Trash" to delete contacts.
• Click the column headers to see the dynamic sorting capabilities in
action.

Congratulations - you've created your first view!

You can now click back in the Designer window and close the "Contact Management"
view.
9. Creating an Outline
In this section...
Outlines provide a robust and flexible way to display links to destinations in your site.
An example of the use of an outline is in the frameset we're building for the Sales
Department part of the WaterWorks site. The Sales frameset will look something like
this when we're done:

Notice the outline control highlighted in the picture. The outline presents links to parts
of the Sales Department site, such as "Contact Management", "Sales Tracking", etc.
Some of the features of outlines are:

• Outlines can be relatively simple, like the one we'll construct for this
sample site, or they can be complex, with entries organized into a
hierarchy that you expand and collapse.
• You can use text color and background color to specify how to display
outline entries on mouse-over and selection.
• You can specify images to use as the background for outline entries, or a
icons that display next to the label (as we'll do in the WaterWorks
example).

Outlines are an ideal way to present site maps providing links to all the destinations in a
site. In the example we're building, the outline is the site map for the Sales Department
part of the site.

There are two parts to using an outline in your site:

1. Defining the outline: An outline element must first be created. This

includes specifying all the entries in the outline, the links that the entries
point to, and the icons or background images used for the outline entries.
2. Embedding an outline control in a page or form: For end users to see
an outline, you must embed an outline control in a page or form. When
 you embed an outline control, you specify which outline to display in the
control. One outline can appear in multiple places in your application by
creating multiple outline controls that refer to that one outline. You can
further customize the appearance of each outline control by changing the
text font, the color and size, the spacing between entries, and so on.

In this section you'll create the outline for the Sales Department site. You'll create a new
page called "Sales Links", and you'll embed the outline in the page.

Create a new outline...

Step 1. Select the Outlines design element

Select the Outlines element in the Design pane:

Step 2. Create a new outline

Click the New Outline button to create a new outline:

The new outline displays in the Work pane:

New outlines always start with one entry at the top of the pane (indicated by the arrow).
This entry serves as a "root" for the outline entries you subsequently create.

Notice the row of buttons across the top of the pane. These perform various functions
related to the outline. You use the New Entry button to create new outline entries.

Step 3. Name the new outline

Double-click on the outline root to bring up the Outline Properties box:

Set the name to "Sales Links".

Create the outline entries...

You'll now create five outline entries, as shown in the picture at the beginning of this
lesson.

Step 1. Create the outline entry for "Contact Management"

Click the New Entry button. A new, untitled outline entry appears below the outline
root, and the Outline Entry Properties box opens, with the focus in the Label field. Enter
the label "Contact Management".

Step 2. Set the content for "Contact Management"

Now you'll specify the behavior of the outline entry. Use the Content section of the
Properties box:

The Content section lets you specify what item to display when the user clicks on this
outline entry, and what frame to display it in.

First - what item to display:

• Set Type to Named Element.

 • Choose View as the type of Named Element.
• In the Value field, type in "Contact Management", or if you prefer, click
on the folder button next to the field to bring up the Locate Object
dialog box. In the Locate Object dialog box, choose the "Contact
Management" view.

Second - where to display the object:

• We haven't yet created the Sales frameset, but when we do, the frame on
the right-hand side will be called "Sales Target". This frame will be
where we want to display the Contact Management view. Therefore, in
the Frame field, enter "Sales Target".

Step 3. Specify an icon to display next to "Contact Management"

Now you'll specify an icon to display next to the Contact Management outline entry.
You do this in the Image section of the Properties box:

In the Image field, enter "outl_contact.gif". Or, if you prefer, click the folder icon,
(indicated by the arrow), to bring up the Insert Image Resource dialog box. Choose
"outl_contact.gif" from the list of images.

Choose File - Save or press Ctrl+S to save your work.

Step 4. Create the remaining outline entries

Now we'll add several more outline entries. All but the last one are just dummy entries -
we're putting them there to fill out the outline control, but there's no destination to
actually link to. We'll specify a label and icon for each:

• Click New Entry. Enter the label "Sales Tracking". Choose the image
"outl_salestrack.gif".
• Click New Entry. Enter the label "Service and Support". Choose the
image "outl_service".
• Click New Entry. Enter the label "Internal News". Choose the image
"outl_internal".
 • Click New Entry. Enter the label "Industry News". Choose the image
"outl_industry".

Note: You can modify the order of the entries at any time by clicking on an entry an
dragging it up or down.

Step 5. Specify the properties for the "Industry News" outline entry

You may recognize that last outline entry you created. "Industry News' is the name of
the first page we created in this tutorial. Let's set the Content for this entry to link to the
Industry News page:

• Set Type to Named Element. Leave the named element type as Page.
• In the Value field, type in "Industry News", or if you prefer, click on the
folder icon next to the field to bring up the Locate Object dialog box. In
the Locate Object dialog box, choose the "Industry News" page.
• Set Frame to "Sales Target".

We're done defining the outline. It has five entries, all with icon images specified. The
"Contact Management" and "Industry News" entries have each been set to bring up an
element you created in an earlier lesson.

Choose File - Close to close the outline. Since you've made changes to the outline since
the last time you saved your work, Designer will ask if you want to save your work
before closing. Click Yes.

Create the new page...

Now you'll create the "Sales Links" page in which you'll embed the outline control.

Step 1. Select the Pages design element

Select the Pages element in the Design pane: