Приглашаем посетить
Чернышевский (chernyshevskiy.lit-info.ru)

Data Consumers: HTML Elements

Data Consumers: HTML Elements

Data binding uses standard HTML elements to present data to the user. These elements include HTML Form elements, basic HTML constructs such as Anchors and Images, more esoteric constructs such as Objects and Applets, simple containers for other HTML elements such as DIV and Span, and Tables for repeating items from a data set. This section provides a detailed explanation of each data consumer, beginning with the basic consumers and continuing to the more complex elements.

The DIV and Span Elements

DIV and Span are simple containers for text or for other HTML elements. Because DIV and Span are block elements (they have begin and end tags), binding them binds their contents. Both DIV and Span support the DATAFORMATAS attribute and can be bound to HTML data in the column of a data source object. Neither element can have its contents modified by the viewer of the page; therefore, the bindings to the DIV and Span are also read-only.


NOTE: Data can still be modified through the data object model. In this case, changes to the data from a script will be reflected in bound DIVs and Spans.

The following code demonstrates a bound DIV and a bound Span:

<DIV DATASRC=#stocklist DATAFLD="Symbol" DATAFORMATAS=TEXT></DIV>
<SPAN DATASRC=#stocklist DATAFLD="ChangeF" DATAFORMATAS=HTML></SPAN>

The Input Element

The types of Input elements supported by data binding are listed here:


NOTE: The Input elements do not require an enclosing Form element when used for data binding. No Submit button is required either.

The TextArea Element

Data binding a TextArea element binds the complete text of the multiline text box to a single column.

An example of a data-bound TextArea element is shown here:

<TEXTAREA DATASRC=#stocklist DATAFLD="News">

The Marquee Element

As with the DIV and Span elements, binding to a Marquee element binds the contents of the element. You can optionally add the DATAFORMATAS=HTML attribute to indicate that the bound data is HTML. If you do so, the data will be parsed and rendered by the browser.

An example of a data-bound Marquee element is shown here:

<MARQUEE DATASRC=#stocklist DATAFLD="Last" DATAFORMATAS=HTML>
</MARQUEE>

The Select Element

A data-bound Select element allows the binding of a single selected value from a list. The VALUE attribute of the Option element corresponding to the selection is the value stored in the bound column of the data source object. When the value in the data source object does not correspond to any values specified on an Option element in the Select element, no values are selected. Data-bound Select elements can use either the drop-down list or the combo box user interface, depending on setting of the SIZE attribute. The MULTIPLE attribute is ignored on data-bound Select elements because it is not possible to bind an element to more than one value from a single column.

An example of a data-bound combo box is shown here:

<SELECT DATASRC=#stocklist DATAFLD="Type">
   <OPTION VALUE=L>Long
   <OPTION VALUE=S>Short
</SELECT>

A data-bound drop-down list would use the following Select element:

<SELECT SIZE=2 DATASRC=#stocklist DATAFLD="Type">
   <OPTION VALUE=L>Long
   <OPTION VALUE=S>Short
</SELECT>

Although the list of options for the Select element cannot be bound directly to a data source object, it is possible, through a script, to populate the options of the Select element from a data source object. The following code illustrates this technique:

<!-- Data source object to supply the Select element options -->
<OBJECT ID="selectlist" WIDTH="0" HEIGHT="0"
      CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
   <PARAM NAME="DataURL" VALUE="selectdata.txt">
   <PARAM NAME="UseHeader" VALUE="True">
</OBJECT>

<!-- List to be populated -->
<SELECT ID=typeselect>
</SELECT>

<SCRIPT FOR=window EVENT=onload() LANGUAGE="JavaScript">
   var i, newop;

   selectlist.recordset.MoveFirst();
   for (i = 1; i <= selectlist.recordset.AbsolutePosition; i++) {
      newop = document.createElement("option");
      newop.value = selectlist.recordset("value");
      newop.text = selectlist.recordset("display");
      typeselect.add(newop);
      selectlist.recordset.MoveNext();   
   }
</SCRIPT>

The handler for the window onload event reads through the data from the data source object and adds an option for each record in the data to the Select element. The MoveFirst method and AbsolutePosition property are explained in the sections "Move Methods" and "The recordNumber Property," respectively, later in this chapter.

The IMG Element

Data binding supports binding the SRC attribute of the Img element. The value supplied by the binding should be a URL to the image file to be displayed. The URL can be either an absolute URL or a relative URL. When it is a relative URL, either the base URL for the document or the URL specified in a <BASE> tag is used to construct the full URL to retrieve the image file. The downloading of the image file proceeds as if the IMG element were statically defined within the document—that is, the image data is downloaded using the threads available to the browser.

An example of a data-bound IMG element is shown here:

<IMG DATASRC=#stocklist DATAFLD="Chart"> 

The Anchor Element

Like the IMG element, binding to the HREF attribute of an Anchor element is supported in Dynamic HTML. The bound value is expected to be either a relative or an absolute URL. The same rules apply to the URL of the Anchor element as apply to the Img element.

An example of a data-bound Anchor element is shown here:

<A DATASRC=#stocklist DATAFLD="Website">...</A>

You can include bound text for an Anchor element by using the anchor in combination with other elements, such as a Span element. Here the symbol for the stock in our example is used as a hyperlink to the company's Web site:

<A DATASRC=#stocklist DATAFLD="Website">
   <SPAN DATASRC=#stocklist DATAFLD="Symbol"></SPAN>
</A>

The Button Element

It is possible to bind the contents of the Button element by including the DATASRC and DATAFLD attributes on the element. The face of the button will display the bound text. The DATAFORMATAS attribute can also be included on the binding to display HTML on the face of the button.

An example of a data-bound Button element is shown here:

<BUTTON DATASRC=#stocklist DATAFLD="Chart" DATAFORMATAS=HTML></BUTTON>

The Label Element

Binding a Label element is similar to binding a Button element. The contents of the Label element are bound, and the binding can contain HTML. One word of caution: Label elements cannot be used within a repeated table. Because a Label element is associated with a control by setting its FOR attribute to the ID of the associated control, it is not possible to uniquely assign a Label element to a single control in a repeated table.

The Object and Applet Elements

You can also bind an arbitrary number of properties of ActiveX controls and Java applets. To bind a property of an Object or Applet element, you include the DATASRC and DATAFLD attributes on the <PARAM> tag that specifies the name of the property to bind. This example shows bindings to the foreground and background colors of the control or applet:

<APPLET CODE=myapplet.class>
   <PARAM NAME="backcolor" VALUE="green"
      DATASRC="#dsc1" DATAFLD="color">
   <PARAM NAME="forecolor" VALUE="yellow"
      DATASRC="#dsc1" DATAFLD="textcolor">
   §
</APPLET>

To bind to Java applets, the Applet element must be implemented according to the JavaBeans specifications for properties—that is, there should be corresponding public get and set methods for the property specified by the NAME attribute of the <PARAM> tag. As with ActiveX controls, the Applet element is not required to implement property change notifications.

Object elements (ActiveX controls) work exactly the same way as Applet elements. An example of a data-bound Object element is shown here:

<OBJECT CLSID="...">
   <PARAM NAME="backcolor" VALUE="blue"
      DATASRC="#dsc1" DATAFLD="color">
   <PARAM NAME="forecolor" VALUE="white"
      DATASRC="#dsc1" DATAFLD="textcolor">
   §
</OBJECT>

An ActiveX control must support a property whose name is specified by the NAME attribute of the <PARAM> tag. Most ActiveX controls fire notifications when the value of a property changes. However, data binding does not require the control to fire these notifications.

ActiveX controls can specify a default property for binding by setting the DefaultBind flag in the type information for the property. Data binding supports binding to this default property by setting the DATASRC and DATAFLD attributes directly on the Object element:

<OBJECT CLSID="..." DATASRC="#dsc1" DATAFLD="text">
   <PARAM NAME="backcolor" VALUE="blue"
      DATASRC="#dsc1" DATAFLD="color">
   <PARAM NAME="forecolor" VALUE="white"
      DATASRC="#dsc1" DATAFLD="textcolor">
   §
</OBJECT>

Notice that you can mix default binding with any number of Param element bindings.

The Frame and IFrame Elements

You can bind the HREF attributes of both Frame and IFrame elements. In both cases, the bound data should supply a URL. The bindings differ in that IFrame elements can exist in any page. An IFrame element can be used like any other element that supports data binding simply by adding the DATASRC and DATAFLD attributes:

<IFRAME DATASRC=#stocklist DATAFLD="Website">

On the other hand, a Frame element must exist within a Frameset element and not within the body of an HTML document. To take advantage of Frame binding, the data source object must be placed within the Head element of the HTML document that contains the Frameset element:

<HTML>
   <HEAD>
      <OBJECT ID="stocklist" WIDTH="0" HEIGHT="0"
            CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
         <PARAM NAME="DataURL" VALUE="stockdata.txt">
         <PARAM NAME="FieldDelim" VALUE="|">
         <PARAM NAME="TextQualifier" VALUE="">
         <PARAM NAME="UseHeader" VALUE="true">
      </OBJECT>
   </HEAD>
   <FRAMESET>
      <FRAME DATASRC=#stocklist DATAFLD="Website">
   </FRAMESET>
</HTML>

Binding to the Frame element is useful when you want to enable the user to view a list of URLs in sequence. A current record binding is used with the Frame element, and as the current record is moved, the Frame element displays data from the new URL supplied by the data source object. Frame elements cannot be used within a repeated table.

The Table Element

The last supported data consumer is the Table element. The Table element is a special data consumer in that it is a container for other bindings rather than a binding itself. A binding on a Table element specifies that the contents of the table, excluding the THead and TFoot elements, is to be repeated over the data set specified by the DATASRC attribute:

<TABLE DATASRC=#stocklist>
   §
</TABLE>

When the contents of the table are repeated, a bound element within the Table element takes its data from the current record and from subsequent records in the data source. For example, the following table displays a list of all the stock symbols—with their last quote, change, and volume—from a data source named stocklist:

<TABLE ID="stocktbl" DATASRC="#stocklist" BORDER=1>
   <THEAD>
      <TR ONCLICK="sort();">
         <TD CLASS=thd><DIV ID=Symbol>Symbol</DIV></TD>
         <TD CLASS=thd><DIV ID=Last>Last</DIV></TD>
         <TD CLASS=thd><DIV ID=Change>Change</DIV></TD>
         <TD CLASS=thd><DIV ID=Volume>Volume</DIV></TD>
      </TR>
   </THEAD>

   <TBODY>
      <TR>
         <TD><A DATAFLD="Website">
            <SPAN DATAFLD="Symbol"></SPAN></A>
         </TD>
         <TD ALIGN=right>
            <DIV DATAFLD="Last"></DIV>
         </TD>
         <TD ALIGN=right>
            <SPAN DATAFLD="ChangeF" DATAFORMATAS=HTML></SPAN>
         </TD>
         <TD ALIGN=right><DIV DATAFLD="Volume"></DIV></TD>
      </TR>
   </TBODY>
</TABLE>

Figure 15-1 shows the resulting table.

Data Consumers: HTML Elements

Figure 15-1. An example of a repeated table.

Table 15-1 lists the data consumers, the data-binding attributes they support, and whether they support data updates.


Tag Bound Attribute DATA-SRC DATA-FLD DATA-FORMATAS DATA-PAGESIZE Data Updates
<DIV> Contents X X X
<SPAN> Contents X X X
<INPUT TYPE=TEXT> VALUE X X X
<INPUT TYPE=RADIO> VALUE X X X
<INPUT TYPE=CHECKBOX> Boolean corresponding to checked state X X X
<INPUT TYPE=HIDDEN> VALUE X X
<INPUT TYPE=PASSWORD> VALUE X X X
<TEXTAREA> Contents X X X
<MARQUEE> Contents X X X
<SELECT> Selected item X X X
<IMG> SRC X X
<A> HREF X X
<BUTTON> Contents X X X
<LABEL> Contents X X X
<OBJECT> or <APPLET> Default property X X X
<PARAM> Property of object or applet X X X
<FRAME> HREF X X
<IFRAME> Selected item X X
<TABLE> Repitition X X

Table 15-1. Summary of data consumers.

Notice in the Table element example that the data-bound elements within the Table element do not specify the DATASRC attribute. Because the Table element is repeated, elements in the table inherit the DATASRC attribute value—namely, #stocklist—from the repeated table.

You can include multiple TBody elements and multiple rows with any combination of ROWSPAN and COLSPAN attributes. When you are creating a repeated table, you should construct the table to display and format the data for a single record from the data source object. The entire contents of the table will then be repeated for each record in the data set. It is possible to limit the number of records repeated in a Table element. See the section "Paged Tables" later in this chapter for details.

[Содержание]