his article takes a first look at the FormManager, one of the important new featuresin Visual InterDev 6. When dropped onto an Active Server Pages (ASP) page, the FormManagerdesign-time control (DTC) resembles a puppet master. By pulling the right strings, youmanipulate the properties and behavior of other objects in a Web page form. Form objectscan include buttons, text fields and even labels. By setting “modes” in theFormManager, a single scripted page can act like many different pages. Rather thancreating separate forms for Adding, Updating and Deleting database records, you can assignthose modes to one script.

Create a “Form About Nothing”
Although forms are usually linked to database fields, the form in this article doesn’tuse any external data. In fact, you might call it “The form about nothing”. I’mgoing to demonstrate some useful features of the FormManager by using it to create an ASPscript. You’ll see how to use events to change the properties of form objects?all inserver-side script. To orient you to the goal, Figure 1 shows the end result of whatwe’re building.

Let’s start by opening a VID6 project and adding an ASP file such as”default.asp”. Make sure that the Visual InterDev 6 script libraries are in yourproject.  I have my themes and layouts set to “” to keep thepage simple. You’ll also need to add two GIF images of the same dimensions to the Imagesfolder of the  project. You can download my images and all of the code here.

We’ll be working in VID’s design view most of the time, so you’ll want to click theDesign tab at the bottom of the working pane. Since FormManager is a design-time control,make sure your Toolbox is visible and then click the Design-Time tab. The Toolbox shouldlook like Figure 2.

To add the FormManager DTC, click FormManager, drag the icon to your page, and drop thecontrol. The first time you drop one of these controls, VID asks you (see Figure 3) to enable its Scripting ObjectModel. Click Yes.

Now let’s start designing the form. First, insert a table on the page by clicking theTable menu and clicking Insert Table. You want three rows, two columns, and a border. Don’tallow text to wrap. Figure 4 shows howthe dialog box should look.

You Can Add Buttons that Don’t Appear at Run-time
For this demonstration, you are going to put these controls on theform: two buttons, two button images, a text label and a checkbox. You’ll notice in thefinished product that at run time our ASP page displays only one of each type of control.Let’s add the various objects into the table cells.

Drag and drop a button DTC into the top row of column one. Right-click thebutton and bring up the button’s  property page. (Selecting an item to get at itsproperties can be tricky. Sometimes you need to click away from the object and then clickon its border to make the selection or resize cursor appear.) Set the properties of thisbutton as follows:

Name: ChangeButton
Caption: Make Changes
Visible: checked

Figure 5 shows how theproperty page should look once you’ve added the name and caption.

Add another button DTC to the same cell. When you start using theFormManager, you’ll make sure that only one button appears on the form at run time. Hereare the properties to set for the second button:

Name: UndoButton
Caption: Undo Changes
Visible: not checked

Figure 6 shows how theUndoButton’s property page should look once you’ve added the name and caption.

The next two buttons will actually be buttons that are images. (Thepictures are the flags of the two Canadian provinces in which I have lived.) Once again,only one image/button will appear on the screen at run time but we need to insert both atdesign-time. In the top row of the second column, drop a button. Set its properties asfollows:

Name: OntImageButton
Image: images/ontario.gif
Alternate text: Ontario flag
Visible: checked

Figure 7 shows how theOntario flag image button’s property page should look.

Add the second image button with these properties:

Name: QuebecImageButton
Image: images/quebec.gif
Alternate text: Quebec flag
Visible: not checked

Server-side Script in the DTC Controls Checkboxes Too
The final two controls, a label and a checkbox, will help demonstratehow the FormManager lets you manipulate numerous properties. Drag a label DTC into thesecond row of column two and set these properties:

Name: Label1
Field/Expression: Ontario
Color: Blue
Visible: checked

Figure 8 shows theappearance of the General tab, and Figure9 shows where you set the label text color to blue.

Drag a checkbox DTC into the third row of the second column and set theseproperties:

Name: Checkbox1
Caption: Ottawa is in this province
Enabled: not checked
Visible: checked

In Figure 10, you seehow the initial properties of the checkbox should appear.

Now that you’ve finished adding objects to the form, your screen VisualInterDev 6 working page should look like Figure11.

If you’re curious, view the page in your browser. It should look like Figure 12.

Modes Are Like Separate Pages Using One Page
At last you’re ready to play with the FormManager and create someserver-side script. Select the FormManager and view its properties. On the Form Mode tab,you’ll find a group box called States, and in the group box, a field called New Mode. Sofar, you don’t have any modes, but you need at least one. Think of modes as the identifiersfor distinct ASP pages?except that FormManager keeps them all in one page. For this smalldemo, you’re only going to use one mode, called Flip. Type Flip as the New Mode box andthen click the right arrow (>) to add Flip to the list of available modes. Make theForm Mode tab look like Figure 13.

Now that you have a mode, you can start manipulating objects within theform. Click the Action tab. This page isn’t very intuitive in its design, but it makes upfor it in functionality. Across the top, you see four columns: Current Mode, Object, Eventand Next Mode. Click in the Current mode field and you’ll notice that you can select Flip,the mode we just added.  Set these properties and then you can consider whatthis means in plain English:

Current Mode: Flip
Object: ChangeButton
Event: onclick
Next Mode: Flip

And in the bottom area for actions, set these properties:

Object: ChangeButton
Member: hide
Value: ()

Figure 14 shows howyour FormManager Action tab should look.

Put the FormMode Settings into Plain English
It helps to put these FormManager settings into a couple of sentences. Forthis one, the instructions for the run-time activity go like this:

“When our Current Mode is Flip and the Object(button) called ChangeButton fires an onclick Event(that is, the button is clicked), set the Next Mode to the mode called Flip.Also, whenever ChangeButton is clicked, make the Object called ChangeButtondisappear by running the Member routine called hide. There’s noneed to set any Value for hide so just insert ().”

If you close the property page and view the ASP page in your browser,you’ll discover that FormManager is following the instructions. When you click the MakeChanges button, the hide routine makes the button disappear. You may recall that you addedtwo buttons into that cell. Let’s add more commands to display the second button whilehiding the first button and change the images.  Go back into the properties ofFormManager and add more actions on the Action tab. Click in the second row of the lowergrid and set these parameters:

Your Action tab should look like Figure 15 after you’ve finished enteringthe data.

Close the property page, save the file, view the page in the browser andclick the Make Changes button. You notice two changes: the Undo Changes button and theQuebec flag are now showing. For the sake of accuracy, you need to make two more tweaks to your form. The label should be “Quebec” when the Quebec flag is showing. SinceCanada’s capital city, Ottawa, is not in Quebec, the checkbox control should be enabledbut unchecked. Notice that we don’t need to add a second label object because we can alterthe text of the existing label.

Back in the FormManager’s Action tab, here’s what you need to add:

Some Routines in the DTC Take Parameters
Notice that the label DTC calls on a routine that changes the caption(setCaption) but you have to supply the value (‘Quebec’) as a parameter. Likewise, withthe checkbox DTC you enable the control by setting the disabled property to zero. Bysetting setChecked to zero you tell the DTC that you want the checkbox cleared. Figure 16 demonstrates what you shouldsee when you view the page in the browser and click the Make Changes button.

At this point you have a button labeled Undo Changes that doesn’t do?orundo?anything. To make it work, you need to go back to the FormManager, add a transitionrow for UndoButton that is similar to the first row you previously created there, and thenset this series of actions for UndoButton’s onclick event:

Figure 17 shows thetwo form mode transitions and some of the actions that take place when you click thebutton called UndoButton.

I’ll leave it to you to fix some of the cosmetic problems, like centeringthe controls within the table cells, removing the table border and adding a heading to thepage. You can download my code here. Note that the download doesnot include the VID 6 script library files that you need to have installed on the Webserver.

Server-side Code Isn’t the Most Efficient
If you’re familiar with the onClick event in Visual Basic or DHTML, you’llrecognize the concept of using one click to change the properties of objects all over theplace. Unfortunately, in the HTML world implementing the changes requires a round-trip tothe server. All of this could be done quite nicely and efficiently as Dynamic HTML if onlyall browsers would support DHTML. Until then, we can do a creditable job with server-sidecode and design-time controls to make the coding easy.

In this article, you’ve seen how you can use the Visual InterDev 6FormManager design-time control to create an event-driven form. With the form you canchange the properties of HTML objects on the click of a button. You’ve seen that the eventcode runs on the Web server and the server sends only regular HTML to the browser. Fromhere, you can explore more of Visual InterDev’s DTCs, including the textbox, listbox andoptiongroup.