Chapter 6 -- Using Design-Time Controls

Chapter 6

Using Design-Time Controls

Introduction

Design-time controls (DTCs) offer you a more functional and aesthetically pleasing interface for creating data-enriched pages than do standard HTML controls. The data-bound DTCs simplify incorporating data in your ASP Web pages or HTML pages to talk to a database (as you saw in the last chapter). The DTCs included with Microsoft Visual InterDev 6 allow you to target a wide range of browsers or to narrow the focus of the application to take advantage of the unique features of Microsoft Internet Explorer 4.

This chapter focuses on the features and uses of DTCs in applications. Chapter 8 will focus on how to use server and client script with DTCs.

DTCs have two components:

• The control that runs in Visual InterDev to provide you with property pages and automated design features
• The run-time scripting objects that implement the control

These two components work together to provide the developer with a powerful set of controls for use in Visual InterDev's integrated development environment (IDE).

Visual InterDev 6 includes a number of DTCs that automatically generate much of the server-side and client-side scripting required for applications. This includes traditional HTML, Microsoft VBScript (Visual Basic, Scripting Edition), Microsoft JScript, and ADO (ActiveX Data Objects) code. Many DTCs generate all the logic necessary to establish database connections within a Web site, perform queries, and display results.

Visual InterDev 6 builds upon the rich DTC foundation laid by Visual InterDev 1. The new DTC features not only work to automate ADO functions but also provide data-bound features that automatically link components such as Textbox DTCs with a Recordset DTC. This new functionality makes it extremely easy to build a Web page with fields linked to a database on the server.

Insert a DTC into a page by following these steps:

1. Select the Design-Time Controls tab of the Toolbox.

2. Drag the DTC you wish to insert from the Toolbox, and drop it on the ASP file in the editor.

   Edit the properties of a DTC by following these steps:

3. Right-click the DTC in the editor, and select Properties.
4. Make your changes in the Properties dialog box, and click Apply.

The new DTCs do not display the code for the implementation of the control in the editor as they did in Visual InterDev 1. Instead, the controls are represented graphically in both the Source View and Design View editors. Figure 6-1 shows the Design View editor with a Textbox DTC and a Label DTC on a page.

You can see how the two fields are represented graphically in the Design View editor. The label is a large text site and appears to be standard HTML text typed into the page. The string "Inventory Solutions" is actually text that is entered in the DataField property of the DTC. The other control on the page is the Textbox DTC containing the text "txtItemNumber." This text is the ID property of the DTC.

If you switch to Source view, the DTCs will still be graphically displayed. The display you see there is the same display that we have used in most of the figures in this book so far. Figure 6-2 shows the same page that is shown in Figure 6-1.

Figure 6-1. The Visual InterDev 6 editors show a graphical version of the DTCs by default.

Figure 6-2. The Source View editor also renders the DTCs graphically.

Often you will see the Source View editor when it is in the process of rendering the graphical display for a DTC. This occurs when you switch to Source view from another view or when you scroll along a page quickly. This is quite normal. When it happens, you might see Visual InterDev with a display similar to that in Figure 6-3.

Figure 6-3. Visual InterDev renders the DTCs in a page each time it must redisplay the portion of the page viewable in the editor.

The display in Figure 6-3 shows some of the static text used to store the DTC properties in the page. For instance, you can see the text displayed in the Textbox DTC is set to "Inventory Solutions," just as we set it in the DTC properties.

You can also display the code for a DTC by changing a setting for the control in the editor. Follow these steps:

1. Display the page containing the DTC in Source view.
2. Right-click the DTC.
3. Select Show Run-Time Text.

Displaying the run-time text of a DTC will result in a display similar to Figure 6-4. You can see how the DTC relies on server-side code in the Script Library and also uses client-side Java code to implement the control. Examining this code will give you a good understanding of how a particular DTC is implemented.

Figure 6-4. The run-time text for a control can be displayed in the Source View editor.

You can quickly hide the DTC's run-time code once you have finished reviewing it by selecting View Controls Graphically from the View menu.

You can view controls (that is, DTCs, Java applets, and other controls) in Source view as text. This is useful for viewing the exact contents of a page and for quickly making changes to a series of controls. You can choose to view a control always as text in the Source View editor. This shows the control in the same fashion as a Visual InterDev 1 DTC, shown in Figure 6-5 below.

Viewing a control as text applies only in Source view. Design view and Quick view always render the graphical view of a control (if possible). You can set the default view for DTCs by selecting Options from the Tools menu and using the HTML section of the Options dialog box.

You can view a control as text by following these steps:

1. Right-click the DTC in the Source View editor.
2. Select Always View As Text.

These steps set the VIEWASTEXT attribute in the DTC's <OBJECT> tag.

You can also view all DTCs as text by selecting View Controls As Text on the View menu. When you select this option, all DTCs on the page will be displayed as text until you switch to Design view or Quick view and back. You can also use the View Controls Graphically command on the View menu to redisplay DTCs graphically. Any DTCs for which you have selected the Always View As Text option will continue to be viewed as text.

Selecting Refresh from the View menu will cause the editor to display all DTCs in the current default view except those whose <OBJECT> tag contains the VIEWASTEXT attribute.

Figure 6-5. DTCs can also be displayed as text in the Source View editor.

Displaying DTCs as text can affect how DTCs function on a page. DTCs do not function properly if they are displayed as text, because they cannot communicate with the Scripting Object Model framework. You must make sure the options are set to view DTCs graphically before you add a DTC to a page. If you inadvertently add a DTC to the page while the view controls as text option is set, the HTML editor cannot create an instance of the DTC and will display only the HTML <OBJECT> tag for the DTC, not the DTC itself.

You can permanently convert a DTC's code to text by following these steps:

1. Display the page containing the DTC in Source view.
2. Right-click the DTC, and select Convert To Run-Time Text from the popup menu.
3. Visual InterDev will display a confirmation message warning you that this action cannot be undone and that you will experience a loss in functionality. (See Figure 6-6.) Click Yes to convert the DTC to text.

Figure 6-6. This message warns you that the Convert To Run-Time Text action cannot be undone and that the DTC will experience a loss in functionality.

Once you have converted a DTC to run-time text, the run-time code for the DTC will appear in the Source View editor. For example, the run-time code for the Textbox DTC looks like this:

 <script language="JavaScript"      src="_ScriptLibrary/TextBox.HTM"></script> <SCRIPT LANGUAGE=JavaScript> function _inittxtItemNumber() {     txtItemNumber.setStyle(TXT_TEXTBOX);     txtItemNumber.setMaxLength(30);     txtItemNumber.setColumnCount(30); } CreateTextbox('txtItemNumber', _inittxtItemNumber, null); </script> 

This code is now editable and can be changed to suit your purposes.

WARNING

---

Microsoft is going to replace the Scripting Object Model JScript code with COM objects in early 1999. It is quite likely that some or all of the run-time code for the DTCs will change at that point. For this reason, you should treat the code that a DTC generates as a black box. As with all black-box code, do not change it directly since you might render the code unusable in future versions. Caveat emptor.

DTC Properties Window and Property Pages

Visual InterDev now includes the Properties window that lists the properties for selected objects such as DTCs. The Properties window lists the property name and the current settings, as shown in Figure 6-7.

As you work with objects, the Properties window will continually update to display the properties for the current object. Each time you select another object, the Properties window will update for that object. As you change properties, the changes are applied immediately. You can also use the drop-down list at the top of the Properties window to display the properties for another object.

You can display the Properties window at any time by pressing the F4 key.

Many objects will display a Custom property with an ellipsis button (a button with three periods on it). Clicking the ellipsis will display the property pages for that object.

Figure 6-7. The Properties window updates automatically as you select objects in the editors.

The first property shown in Figure 6-7 is Custom. You can click the ellipsis to the right of the Custom property or double-click Custom and Visual InterDev 6 will display the custom property pages for the object. Figure 6-8 shows the custom property pages for the Label DTC.

Figure 6-8. Most DTCs have custom property pages.

Like the Properties window, the custom property pages will display properties for the currently selected object in the editor. Just click a different object in the editor and the custom property pages will display for the new object.

Each DTC will display its own set of properties. Some controls have similar properties. For example, all the DTCs use the ID property to name the control. This is the property you use in your script code to refer to the control. The ID property is shown as ID in the Properties window and as Name on property pages.