Visual InterDev

Creating Forms with Design-Time Controls

See Also

One of the primary advantages of using the scripting object model is that it simplifies the script required to process the information in Web page forms. By using the scripting object model and design-time controls, you can create the user interface for your application in much the same way you create forms in Microsoft® Visual Basic® and Microsoft® Access.

You can create a user-interface using the design-time controls listed in the following table.

Button Textbox Listbox
Label Grid Checkbox
OptionGroup Recordset RecordsetNavBar

Note   Design-time controls are implemented using script stored in the Script Library. Do not alter the contents of the library, or the controls might not work properly.

Selecting a Target Platform

Before you add controls to your page, you must decide what platform you will be using for your application: server or client. Your choice determines how the design-time controls are created and where events occur. Use the following table as your guide.

Target platform Result Choose if
Server
  • Your page is an .asp file.

  • Script objects are created in server script. Their properties, methods, and events are available only in server script.

  • Scripting object model events (such as onclick) are processed in server script. For more information, see Writing Script for Script Objects.

  • Data binding occurs on the server.
 Your application will be used by a variety of browsers. Advantages include:
  • The application will run the same on all browsers.

  • You want to be able control access to the application logic and database connection string information.
Client
  • Your page can be either an .asp or .htm file.

  • Script objects are created using client script. Their properties, methods, and events are available only in client script.

  • Events are processed in client script.  For more information, see Writing Script for Script Objects.

  • Data binding can occur on either the client or the server.
 The application will be used only by browsers that support Dynamic HTML (DHTML) such as Microsoft® Internet Explorer 4.0. The advantage is typically a better user experience. In addition, your application can use the DHTML object model.

It is important to understand that the target platform not only determines where a script object is created, but also how you can write script for it. For example, if the target platform for a control is Server, its corresponding script object is created in server script. You can only access the script object's properties, methods, and events in server script — the script object is not available to client script. The reverse is also true: if a control's target platform is Client, the properties, events, and methods of the corresponding script object are not available in server script.

Choosing a target platform does not mean that all design-time controls generate script for that platform. The scripting platform for an individual control, and for individual scripts, will depend on how the control is used. For example, the target platform for a Save button in a form might be Server so that the script can save information to a database. But another script, even for the same button, might run on the client in order to validate the data before it is saved.

You can choose a target platform for an individual page or as the default for your project.

To specify a target platform for a page

  1. Switch to Source view.

  2. Right-click the page and choose Properties.

  3. In the Property Pages window, choose the General tab.

  4. Under DTC scripting platform, choose Server or Client.

Note   If you change target platforms, existing event-handling scripts are not automatically changed to reflect the new setting, but you can do this manually. For example, when changing the target from Server to Client, event handlers in server <SCRIPT RUNAT="Server"> blocks need to be moved to client <SCRIPT> blocks. For details, see Writing Script for Script Objects.

If you know you want to use the same platform all the time, you can set the default target for a project. All pages you create after that will reflect your default setting.

To specify a target platform for a project

  1. In the Project Explorer, right-click the project, and then choose Properties.

  2. In the Property Pages window, choose the Editor Defaults tab.

  3. Under DTC scripting platform, choose Server or Client.

Note   If you already have pages with the design-time controls on them, changing the project default does not change the settings for those pages.

By default, all design-time controls on the page inherit the target platform from the current page. However, you can change the target platform for an individual control. For example, some of the design-time controls on your page might be bound to a database and use the server as a target. Others might not be data-bound and use the client as a target.

Note   Data-bound design-time controls must use the same target platform as the recordset object that they are bound to.

To specify a target platform for an individual control

  1. Switch to Source view.

  2. Right-click the control, and then choose Properties.

  3. In the Property Pages window, choose the General tab.

  4. Under Scripting Platform, select Client or Server.

Adding Controls to a Page

You add design-time controls to the page by dragging them and then setting their properties.

To add design-time controls

  1. Make sure that you have set options to view controls graphically. From the View menu, choose View Controls Graphically.

    Note   To set this option as default, use the HTML node of the Options dialog box.

  2. Drag the design-time control from the Design-Time Controls tab of the Toolbox to your page.

    If the target platform for a page is Server and the scripting object model is not already enabled for the page, you are prompted to enable it now. You must enable the scripting object model for design-time controls to work properly.

    Note   Do not define forms using the HTML <FORM> tag. The scripting object model framework creates a form for you.

  3. Right-click the control, and then choose Properties. The custom Properties window for that control appears.

  4. Set options for the control as required.

Note   When you print a page in the HTML editor, some design-time controls might not be displayed with the values you set. If you put more than one instance of a design-time control on a page — for example, if you put multiple Textbox or Button controls on a page — the second and subsequent ones will display their default values in the printout.

By default, design-time controls are displayed using their graphical representation in both Design view and Source view. For example, the Button design-time control appears as a button.

You can choose to view the controls as text. However, while the control is in text mode, it cannot communicate with other controls on the page, which can cause the control not to function properly. For details, see Source View, HTML Editor.

Note   ASP pages do not render properly in Quick view, because Quick view does not run server script. Therefore, Quick view does not allow you to preview script objects whose target platform is server.

You can cut, copy, and paste design-time controls as well. However, you can do this successfully only if you copy the graphical version of a control, not the text version. For details about viewing controls as text or graphically, see Source View, HTML Editor.

To make it easier for you to specify options for design-time controls, you can set their properties using custom property pages.

To set properties for design-time controls

Each design-time control supports different options. For details about the properties you can set for each, press F1 in the Property Pages dialog box.

The design-time controls generate script in the page to implement the corresponding script object. You can preview the generated text for a control.

To preview generated text

  1. Switch to Source view.

  2. Right-click the design-time control, and then choose Show Run-time Text.

You can permanently convert a design-time control to run-time text, which leaves the script required to create the script object, but strips the information used to communicate with other controls and to display the control graphically.

You might do this if you wanted to customize the generated text, but this is not the recommended way to work with design-time controls.

To convert a design-time control permanently to text

Warning   Converting to run-time text is a one-way operation. You cannot undo the operation to return to a graphical view. You should make this conversion only if you are comfortable customizing the control's run-time text.

Creating a Form with Design-Time Controls

When you use the scripting object model and design-time controls, you do not create forms using the HTML <FORM> tag. Instead, you drag the design-time controls that you need onto the page.

Tip   An easy way to assemble a form with design-time controls is to use the FormManager. For details, see Simplifying Data Entry Pages and Creating Event-Driven Forms.

To define specific behavior for individual controls, you can write event handlers in script. Rather than adding an HTML Submit button, you can add a Save button that calls a forms-processing method, as in the following VBScript example:

Sub btnSave_onclick
   ProcessForm()
End sub

The forms-handling procedure can be anywhere else on the page. It can extract values from the form by requesting value of the controls on the page. The following example tests the value of a text box called txtName:

Sub ProcessForm()
   If txtName.value = "" then
      txtName.value = "Please enter a name!"
   Else
      ' etc.
   End if
End sub

For more information, see Writing Script for Script Objects.