Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


FormManager Fun in Visual InterDev 6

When dropped onto an Active Server Pages (ASP) page, the FormManager design-time control (DTC) resembles a puppet master. By pulling the right strings, you manipulate the properties and behavior of other objects in a Web page form.


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

Create a "Form About Nothing"
Although forms are usually linked to database fields, the form in this article doesn't use any external data. In fact, you might call it "The form about nothing". I'm going to demonstrate some useful features of the FormManager by using it to create an ASP script. You'll see how to use events to change the properties of form objects—all in server-side script. To orient you to the goal, Figure 1 shows the end result of what we'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 your project.  I have my themes and layouts set to "<none>" to keep the page simple. You'll also need to add two GIF images of the same dimensions to the Images folder 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 the Design 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 should look like Figure 2.

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

Now let's start designing the form. First, insert a table on the page by clicking the Table menu and clicking Insert Table. You want three rows, two columns, and a border. Don't allow text to wrap. Figure 4 shows how the 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 the form: two buttons, two button images, a text label and a checkbox. You'll notice in the finished 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.

Tip:    Be careful to select the Design-Time versions of these objects, not the plain old HTML versions.

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

Name: ChangeButton
Caption: Make Changes
Visible: checked

Tip:    Give objects meaningful names as you create them. Later on, when you are manipulating the objects with the FormManager, you'll find it easier to recognize them. Otherwise, you might be stuck guessing which is Button1 and which is Button10.

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

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

Name: UndoButton
Caption: Undo Changes
Visible: not checked

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

The next two buttons will actually be buttons that are images. (The pictures 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 at design-time. In the top row of the second column, drop a button. Set its properties as follows:

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

Figure 7 shows how the Ontario 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 demonstrate how the FormManager lets you manipulate numerous properties. Drag a label DTC into the second row of column two and set these properties:

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

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

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

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

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

Now that you've finished adding objects to the form, your screen Visual InterDev 6 working page should look like Figure 11.

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 some server-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. So far, you don't have any modes, but you need at least one. Think of modes as the identifiers for distinct ASP pages—except that FormManager keeps them all in one page. For this small demo, you're only going to use one mode, called Flip. Type Flip as the New Mode box and then click the right arrow (>) to add Flip to the list of available modes. Make the Form Mode tab look like Figure 13.

Now that you have a mode, you can start manipulating objects within the form. Click the Action tab. This page isn't very intuitive in its design, but it makes up for it in functionality. Across the top, you see four columns: Current Mode, Object, Event and 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 what this 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 how your FormManager Action tab should look.

Put the FormMode Settings into Plain English
It helps to put these FormManager settings into a couple of sentences. For this 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 ChangeButton disappear by running the Member routine called hide. There's no need 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 Make Changes button, the hide routine makes the button disappear. You may recall that you added two buttons into that cell. Let's add more commands to display the second button while hiding the first button and change the images.  Go back into the properties of FormManager and add more actions on the Action tab. Click in the second row of the lower grid and set these parameters:

Object Member Value
UndoButton show ()
OntImageButton hide ()
QuebecImageButton show ()

Your Action tab should look like Figure 15 after you've finished entering the data.

Close the property page, save the file, view the page in the browser and click the Make Changes button. You notice two changes: the Undo Changes button and the Quebec 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. Since Canada's capital city, Ottawa, is not in Quebec, the checkbox control should be enabled but unchecked. Notice that we don't need to add a second label object because we can alter the text of the existing label.

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

Object Member Value
Label1 setCaption ('Quebec')
Checkbox1 disabled 0
Checkbox1 setChecked (0)

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, with the checkbox DTC you enable the control by setting the disabled property to zero. By setting setChecked to zero you tell the DTC that you want the checkbox cleared. Figure 16 demonstrates what you should see 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—or undo—anything. To make it work, you need to go back to the FormManager, add a transition row for UndoButton that is similar to the first row you previously created there, and then set this series of actions for UndoButton's onclick event:

Object Member Value
QuebecImageButton hide ()
OntImageButton show ()
Checkbox1 setChecked (1)
UndoButton hide ()
ChangeButton show ()

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

I'll leave it to you to fix some of the cosmetic problems, like centering the controls within the table cells, removing the table border and adding a heading to the page. You can download my code here. Note that the download does not include the VID 6 script library files that you need to have installed on the Web server.

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

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

Ken Cox is a senior information developer and Web application programmer in Toronto, Canada for Nortel. An original Active Server Pages (ASP) and Visual InterDev (VID) beta tester, Ken is a Microsoft Most Valuable Professional (MVP) in the ASP newsgroup. Ken was a broadcast journalist in Toronto and Quebec City before turning to computers and technical writing as a second career. He writes on VID, ASP and Internet Information Server for computer magazines and freelances as a technical editor and contributor for computer book publishers. His hobbies include snowmobiling and ‘60s rock ’n’ roll.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date