Creating Dynamic User Services Components
In tutorial 12, we discussed ways to present XML data in a Web browser using XSL, XSL Transformations (XSLT), and cascading style sheets (CSS). These technologies allowed us to create user services components that could present users with information located in XML documents. Up to this point, the browser-based user services components we have built were not dynamic¡ªthat is, they did not allow the user to interact with the information being presented in the interface. If we want the user to be able to interact with the browser-based interface, we will need to add script to our user services components that can respond to the user's input and provide information to the user based on this input.
In this tutorial, we'll discuss how to use Dynamic HTML (DHTML) to create dynamic Web-based user services components. DHTML allows you to embed scripts written in either the VBScript or JScript programming languages into an HTML page. Using DHTML, you can create Web pages that contain fully functioning user services components that allow information to be passed back and forth between the user and the system. We'll also use the XML Data Source Object (DSO) in DHTML pages. The XML DSO, which shipped as part of Microsoft Internet Explorer 5, is specifically designed for creating Web-based XML applications. The XML DSO enables you to bind HTML elements to structured XML data using DHTML's data-binding facility. First let's take a look at DHTML.
DHTML has made it possible for Web-based user services components to respond directly to input from users without having to make calls to the Web server. Before developers began to use DHTML, they had to rely on server-side applications to process the information inputted by the user and to send the result back to the client. These applications were often written using Common Gateway Interface (CGI) or, more recently, using Active Server Pages (ASP) or Java Server Pages (JSP). Although these programs transferred information to the client, the data was still being formatted and selected on the server. Each time the client needed new information or a different view of the data, another request had to be sent to the server.
Web-based user services components that respond directly to the user's input without having to go back to the server contain DHTML that is embedded in the HTML page. The DHTML code accesses the objects belonging to the Web browser that is hosting the HTML page. The ability to access the browser's objects is what allows DHTML to read and change the content in the Web page and respond to events created by objects in the page. Thus, DHTML creates dynamic Web-based user services components by accessing the browser's objects.
NOTE
Starting with version 4, Microsoft Internet Explorer included DHTML in its technology to allow developers to create Web-based user services components that could respond to the user's input. Netscape Navigator also included a version of DHTML in its Web browser that gave access to the Netscape objects. In addition to including code within HTML pages, Internet Explorer 4 introduced scriptlets that allow developers to separate the code from the Web page. The scriptlets are Web pages that contain functions or subroutines that can be accessed and used by a Web page.DHTML uses an object model to give developers programmable access to the components in a Web page, from the HTML tags to the document itself. The document object can be accessed through script in the HTML page. The DHTML object model uses collections to contain elements in the HTML document. The elements are contained in a hierarchical fashion. Let's use the following HTML code as an example of using DHTML elements and collections in a DHTML document:
<html> <head> <title> DHTML </title> <script language="vbscript"> Function showTags() dim strTagNames, intCounter strTagNames="" For intCounter=0 to window.document.all.length-1 strTagNames=strTagNames & _ window.document.all(intCounter).tagName & " " Next MsgBox "The tags are: " & strTagNames End Function </script> </head> <body onload="showTags()"> <h1> This page demonstrates DHTML. </h1> <p> This document contains several <br></br><b>tags</b> </p> </body> </html>The function could have also been written in JScript as follows:
<script language = "JScript"> function showTags() { var strTagNames = ""; for (intCounter = 0; intCounter < document.all.length; intCounter++) { strTagNames = strTagNames + window.document.all(intCounter).tagName + " "; } alert ("This document contains the following tags: " + strTagNames); } </script>This DHTML document appears as shown in Figure 13-1.
Figure 13-1. The DHTML page in Internet Explorer 5
The showTags function shown in the above code uses the window object, which is the top level DHTML object. Contained within the window object is the document object. Contained within the document object is the all collection. The all collection contains all the elements within the document. The first item in the all collection has an index of zero. You can access this item by using all(0). The length property of the all collection is the number of items in the collection. Thus, the above code will go through the all collection and get the name of each item in the collection. Notice that the closing br tag that we added to make the document compatible with XHTML was considered another tag. We could have also written just document.all(intCounter) instead of window.document.all(intCounter), as window is the default object.
NOTE
Netscape Navigator does not support the Internet Explorer DHTML object hierarchy. There are some similarities between the two, but currently you can write DHTML for either Netscape Navigator or Internet Explorer or write code that works with the few objects that they both share. We will work with only the Internet Explorer DHTML object model, as it is most similar to the W3C DOM standard.
Another important part of the HTML code sample in the previous section is the use of events. When working with DHTML, events will form the foundation of your programming model. Using events, we can write code that responds to a user's actions. The events that are supported in most current browsers are: onblur, onchange, onclick, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, and onunload.
The events listed in the previous section do not have any parameters. To get access to information such as which key was pressed and which mouse button was selected, you can use the event object. The event object contains a set of properties that can be used with these events. A partial list of the properties associated with the event object are: altKey, button, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, screenX, screenY, shiftKey, srcElement, x, and y.
By using the events associated with DHTML objects and the event object's properties, you can have full control of an Internet Explorer 4 or Internet Explorer 5 Web-based interface.
You can also use the ID attribute when working with HTML element objects. This attribute represents the actual element object and can be used to get access to the element object's properties. You can manipulate the attributes for an element object by using the getAttribute, setAttribute, and removeAttribute methods and the ID attribute, as shown in the following example:
<html> <head> <title> DHTML </title> <script language="vbscript"> Function RealignHeader() If FirstHeader.getAttribute("align")="middle" Then FirstHeader.setAttribute "align", "center" End If MsgBox "The alignment for the h1 element is: " & _ Document.all("FirstHeader").align End Function </script> </head> <body> <h1 align="middle" id="FirstHeader"> This page demonstrates DHTML. </h1> <p> This document contains several <br></br><b>tags</b> <br></br> <button type="button" onclick="RealignHeader"> Click Me </button> </p> </body> </html>This page is shown in Figure 13-2.
Figure 13-2. The DHTML page showing the h1 element's new attribute.
In this code, we used the onclick event of a button to change the alignment of the header. When you click the button, the header content This page demonstrates DHTML will become centered. Thus, we have changed the user interface with an event that was triggered by the user clicking a button.
It's possible to write DHTML that will work in both Netscape Navigator and Internet Explorer 4 and Internet Explorer 5 because both browsers share some common objects in their object hierarchy. The W3C DOM Level 2 specification includes a section on a set of objects used for the manipulation of HTML that essentially includes DHTML. We can hope that when the DOM standard is complete, all future browsers will support the DOM and code can be written to a standard set of objects. Internet Explorer 5 introduced a new feature called DHTML Behaviors, which are based on W3C standards and can be used to handle the events raised by DHTML objects. Let's take a look at DHTML Behaviors.
Internet Explorer 4 introduced DHTML scriptlets¡ªcomponents written in script that are an extension of the DHTML object model. Although scriptlets will still work with Internet Explorer 5, they are being replaced by DHTML Behaviors that offer functionality that scriptlets do not have. DHTML Behaviors allow us to associate behaviors to the events belonging to the HTML elements. Just as we associated DHTML script functions with the HTML element events, we will associate DHTML Behaviors with HTML element events. As is the case with DHTML, you can either include DHTML Behaviors in your HTML code or place them in separate files.
DHTML Behaviors are lightweight components that extend the functionality of the HTML elements and enable encapsulation and code reuse. DHTML Behaviors can be referenced in Internet Explorer 5 by using styles. A behavior can be defined anywhere a style is defined¡ªfor example, in a separate document, in a special section in the head element, or as an attribute of an HTML element. You can implement DHTML Behaviors in script using HTML Components (HTC). Let's look at an example of an HTC containing two behaviors. First create an HTC file called Color.htc using the following code:
<component> <attach event="onmouseover" for="element" handler="MouseOver"/> <attach event="onmouseout" for="element" handler="MouseOut"/> <script language="JScript"> function MouseOver() { element.color="blue"; element.align="center"; } function MouseOut() { element.color="red"; element.align="left"; } </script> </component>This file is written in XML. A The root element of the HTC file is the component element. Next, two attach elements allow us to create two behaviors: one to attach the MouseOut function to the onmouseout event and one to attach the MouseOver function to the onmouseover event. The rest of the HTC file is just regular JScript, which will appear as text content of the script element. The JScript functions define what the behaviors will do. Below is an example that uses the HTC document:
<html> <head> <title>Behaviors</title> <style type="text/css"> .colorchange { behavior:url(color.htc);} </style> </head> <body> <font color="green" class="colorchange"> <h1>Behaviors</h1> </font> </body> </html>When you open this document in a browser, the color of the text in h1 will change to blue as you move your mouse within the h1 text area and to red when you move out of the text area. The two behaviors we have defined have allowed us to change the color of the text in response to the onmouseover and onmouseout events.
Notice that the behavior was also supposed to change the align attribute, but this did not work. The behavior did not work as it was supposed to because we associated the style with the font element that contains the h1 element. The font element allows us to set the color of the content of the h1 element. Since the font element does not have an align attribute, it is just ignored. To fix this problem, change the HTML code so that you add the style to the h1 element as follows:
You will now find that when the mouse cursor is over the h1 text it will jump from being left to center justified, and from center to left justified. The second part of the behavior is working because align is the attribute of the h1 element. We can use behaviors to extend the functionality of any of the elements in the HTML document. We will use HTC to create business services components in Chapter 14.
Now that we've examined how to use DHTML to create dynamic user services components, we'll look at how to use the XML DSO to bind elements in a DHTML page to XML data.
The XML DSO allows you to bring data over to the client as XML and then manipulate the XML data directly on the client. As mentioned earlier in the chapter, the XML DSO is a Microsoft technology available in Internet Explorer 5.
NOTE
The XML DSO does not make or maintain any connection to a data source. Therefore, any changes that are made to the XML data on the client will not be reflected on the server. To update a data store on the server, a special application would have to be written that could read the updated XML data and then update the data source. Writing such an application is very difficult. A better method to update the data is to use Microsoft's Remote Data Services (RDS) control, which is designed for both reading and updating data on the server. The RDS can connect directly to a database using either a SQL string or a stored procedure.The XML DSO allows you to work with XML data that is embedded directly in your HTML code. This embedded XML code creates data islands.
To create a data island, you will use the new HTML xml element. This element is not part of the W3C HTML standard. Only Internet Explorer 5 recognizes the xml element. The DSO will find the data located in the xml element and use it as a data island. The xml element includes an id attribute that will be used to reference the data island. The xml element looks as follows:
You can also reference XML data in an external XML document by using the xml element and the src attribute as follows:
As mentioned above, the XML DSO gives you the ability to read and manipulate XML data islands. You can also bind certain form elements to XML data using the XML DSO, which means that the data in the XML DSO will be displayed in the element. Once an element is bound to XML data using the XML DSO, any manipulation of the data you make using the XML DSO will be reflected in the elements that are bound to the XML Data. This will greatly simplify your coding of Web-based user services components. Let's begin by looking at how to bind HTML elements to XML data using the XML DSO.
Once you have created a reference to an XML data source using the xml element, you can bind this data to some of the HTML elements in a document. With some of the elements, you can display the content that is within the element as either text or as HTML. You would display it as HTML when the content contains HTML elements that you want to be rendered as HTML. The following elements can be bound to XML data using the XML DSO in Internet Explorer 5:
HTML Element Bound Property a href applet* param button** innertext, innerhtml div** innertext, innerhtml frame src iframe src img src input* type=checkbox checked input* type=hidden value input* type=label value Input* type=password value input* type=radio checked input* type=text value label** innertext, innerhtml marquee** innertext, innerhtml object* param select* option span** innertext, innerhtml table ¨C text* value * Content in this element can be updated
** Element can be displayed as HTMLThe table element is the only HTML element that allows tabular data binding. Tabular data binding allows you to bind all the content of an element in an XML document.
In this section, we will create an example that allows a user to view the data stored in a data island in an HTML page using the XML DSO. This example creates a user services component that is contained within Internet Explorer 5 and that performs all the normal movement through records, such as move next, move previous, and so forth. To begin we must create the XML data, a DTD for the XML data, and an HTML page to embed the XML data. We will then need to add DHTML script to the HTML page. The DHTML script works with the DSO and allows the user to move through the records using a Web browser. For this example, you will use the XML data from the BizTalk example in Chapter 12. Create a file called NorthwindPO.xml, and add the following XML data to the file:
Create a DTD for this XML document called NorthwindPO.dtd with the following declarations:
You could also create the following BizTalk schema called NorthwindPO.xsd to validate NorthwindPO.xml:
Notice that the Item element is defined such that it can appear either one time or several times. This is exactly the type of element we want to bind to a table. Once bound to a table, each instance of the Item element will be placed into a row in the table. Let's look at how this can be done.
You can create the following HTML document that uses the XML DSO to render the NorthwindPO.xml XML document in the browser:
<html> <xml src="NorthwindPO.xml" id="NorthwindDSO"></xml> <body> <table border="2" width="100%" datasrc="#NorthwindDSO" cellpadding="5"> <thead> <th>Line Item</th> <th>Part No</th> <th>Quantity</th> <th>UOM</th> <th>Unit Price</th> <th>Discount</th> <th>Total</th> </thead> <tbody> <tr> <td valign="top"><span datafld="line"></span> </td> <td valign="top"><span datafld="partno"></span> </td> <td valign="top"><span datafld="qty"></span> </td> <td valign="top"><span datafld="uom"></span> </td> <td valign="top"><span datafld="unitprice"> </span></td> <td valign="top"><span datafld="discount"> </span></td> <td valign="top"><span datafld="totalAmount"> </span></td> </tr> </tbody> </table> </body> </html>This HTML document will appear as shown in Figure 13-3.
Figure 13-3. NorthwindReturn.htm showing how the XML DSO data binding works.
In this example, you used the xml element to place the XML data in the NorthwindPO.xml XML document into a DSO object called NorthwindDSO. You also bound the table to the NorthwindDSO object using the table element's datasrc attribute. You have accomplished essentially the same task as you did using XSL, except now we are using a technique that currently works with only Internet Explorer 5.
NOTE
Style sheets and other elements could have been included to further improve this example, but they were left out so that you could focus on how the XML DSO data binding works.We would presume that each line item in the previous code represents items that go together. In this particular example, there was only one line item (a line element equal to 1), which included a computer and a monitor that were sold together. What if there were two line items? If we add the following two Item elements to the NorthwindPO.XML document, the page will look as shown in Figure 13-4 in the Web browser. Add the following to the NorthwindPO.XML document:
Figure 13-4. NorthwindReturn.htm with the two new items.
Although this change is acceptable, you might want to create separate sections for each line item by making some minor changes to the XML document and the DTD. First let's make a few changes to the XML document: add a new element called po and make it the root element of the document; replace the POLines element with the POLine element; move the line element out of the Item element's content and place it within the POLine element. The revised NorthwindPO.XML document now looks as follows:
Next we need to make revisions to the DTD to reflect the changes we made to the XML document. Specifically, delete the declaration for the POLines element and declare two new elements: po and POLine; make POLine the child element of po and declare it to occur one or more times; and make the line element a child element of POLine instead of a child element of Item. The new DTD looks as follows:
You can now rewrite NorthwindReturn.htm as follows:
You just created two tables, one nested within the other. The first table uses the element POLine for the repeating element, as this element can occur one or more times. You did not specify the datasrc attribute for the top-level table. The embedded table will need to specify the element that can appear one or more times, which is Item in this example. This document will look as shown in Figure 13-5.
Figure 13-5. NorthwindReturn2.htm with separate line items.
The DSO also presents the XML data it contains as an ADO recordset. A recordset is a table of data in memory. You can use an ADO recordset to programmatically manipulate the data. We will discuss ADO in more detail in Chapter 15. For our purposes in this chapter, we can simply view the ADO recordset as an object that has a set of methods that we will be using. The primary methods we will be looking at are moveFirst, moveLast, movePrevious, moveNext and Fields. After examining how to code these methods, you can easily code additional methods such as delete or addNew. Before we can discuss using these methods, we need to discuss the events associated with the XML DSO.
The XML DSO has events just as HTML elements have events. The events associated with the XML DSO are as follows:
XML DSO Events
Event Description ondataavailable Raised when data comes in from the data source ondatasetcomplete Raised when all the data has arrived from the data source ondatasetchanged Raised when data changes onreadystatechange Raised when the readystate property of the DSO changes onrowenter Raised when a row is entered onrowexit Raised for a recordset before another row is entered onrowsdelete Raised when rows are about to be deleted from the current recordset onrowsinserted Raised after rows are inserted into the current recordset oncellchange Raised when the data in a bound control or table cell has been changed and the focus has been moved away from the cell You can use these events to manage XML data in the DSO object. In addition to these events, new properties associated with the event object can also be used within the DSO events. The following table shows the new properties associated with the event object:
Properties Associated with the Event Object
Property Description bookmarks Returns a collection of bookmarks that identify the records being inserted or deleted. It can also contain cells that have been changed. boundElements Returns a collection of elements in the HTML page that are bound to the DSO and have raised the event. dataFld Returns the name of the column or field in the ADO recordset that was affected by an oncellchanged event. Thus, it can be used in the oncellchanged event to identify which field has been changed. recordset Returns a reference to the ADO recordset that is bound to the DSO that raised the event. Let's look at an example that uses DHTML, XML data located in a data island, and the DSO. We will rewrite the NorthwindPO.XML file as follows:
In the above code, the four items represent one order that includes four items. We will now create the following HTML document:
<html> <head> <xml src="NorthwindPO3.xml" id="NorthwindDSO"></xml> <style type="text/css"> .FieldName {font-family:Arial,sans-serif; font-size:12px; font-weight:normal} .DataButtons {behavior:url (MoveButtons.htc);} </style> <script language="vbscript"> <!-- Sub NorthwindDSO_ondatasetcomplete() End Sub Sub UpdateTextBoxes() txtPartNo.value=NorthwindDSO.recordset.Fields("partno") txtQuantity.value=NorthwindDSO.recordset.Fields("qty") txtUOM.value=NorthwindDSO.recordset.Fields("uom") txtUnitPrice.value=NorthwindDSO.recordset.Fields("unitPrice") txtDiscount.value=NorthwindDSO.recordset.Fields("discount") txtTotal.value=NorthwindDSO.recordset.Fields("totalAmount") End Sub Sub MoveNext() NorthwindDSO.Recordset.MoveNext If NorthwindDSO.Recordset.EOF Then NorthwindDSO.Recordset.MoveFirst End If UpdateTextBoxes End Sub Sub MovePrevious() NorthwindDSO.Recordset.MovePrevious If NorthwindDSO.Recordset.BOF Then NorthwindDSO.Recordset.MoveLast End If UpdateTextBoxes End Sub Sub MoveLast() If (Not NorthwindDSO.Recordset.EOF) And _ (Not NorthwindDSO.Recordset.BOF) Then NorthwindDSO.Recordset.MoveLast End If UpdateTextBoxes End Sub Sub MoveFirst() If (Not NorthwindDSO.Recordset.EOF) And _ (Not NorthwindDSO.Recordset.BOF) Then NorthwindDSO.Recordset.MoveFirst End If UpdateTextBoxes End Sub --> </script> </head> <body> <table cellpadding="5"> <tr> <td> <div class="FieldName">Part No</div> </td> <td> <div class="FieldName"> <input id="txtPartNo" name="txtPartNo"> </div> </td> </tr> <tr> <td> <div class="FieldName">Quantity</div> </td> <td> <div class="FieldName"> <input id="txtQuantity" name="txtQuantity"> </div> </td> </tr> <tr> <td> <div class="FieldName">UOM</div> </td> <td> <div class="FieldName"> <input id="txtUOM" name="txtUOM"></div> </td> </tr> <tr> <td> <div class="FieldName">Unit Price</div> </td> <td> <div class="FieldName"> <input id="txtUnitPrice" name="txtUnitPrice"> </div> </td> </tr> <tr> <td> <div class="FieldName">Discount</div> </td> <td> <div class="FieldName"> <input id="txtDiscount" name="txtDiscount"> </div> </td> </tr> <tr> <td> <div class="FieldName">Total</div> </td> <td> <div class="FieldName"> <input id="txtTotal" name="txtTotal"> </div> </td> </tr> </table> <table> <td><input id="cmdRetrieveData" name="cmdRetrieveData" type="button" value="Retrieve Data" onClick="UpdateTextBoxes" ></input></td> <td><input id="cmdMoveNext" name="cmdMoveNext" type="button" value="Move Next" onClick="MoveNext" ></input></td> <td><input id="cmdMovePrevious" name="cmdMovePrevious" type="button" value="Move Previous" onClick="MovePrevious" ></input></td> <td><input id="cmdMoveFirst" name="cmdMoveFirst" type="button" value="Move First" onClick="MoveFirst" ></input></td> <td><input id="cmdMoveLast" name="cmdMoveLast" type="button" value="Move Last" onClick="MoveLast" ></input></td> </table> </body> </html>Figure 13-6 shows what this document looks like in Internet Explorer 5.
Figure 13-6. A Web-based user services component for viewing data.
As you can see, subroutines written in Visual Basic were added to the code that will use the XML DSO to move the recordset. These subroutines have been associated to the onClick events of the buttons. This is how DHTML code is normally written.
In this example, you did not bind the XML DSO to any of the text boxes. Instead, you used DHTML code and the DSO to fill the text boxes using the UpdateTextBoxes function. The move functions all perform the appropriate move and then call the UpdateTextBoxes to update the text boxes.
Using DHTML and the XML DSO, you can create dynamic Web-based user services components that use XML. Since DHTML runs on the client machine, it can manipulate the user services components without making a trip to the Web server. The DHTML object model provides access to the components of the Web documents. Combined with the events associated with DHTML objects, this access enables Web developers to create Web applications that contain executable scripts and react to user input. DHTML Behaviors make DHTML functionality more accessible and easier to use in a document. You can also use XML DSO to bind XML data to HTML elements so that you can display the elements and attributes contained in the XML data.
In Chapter 14, we will use DHTML and HTCs together to create client-side business services components that can validate user input.
discuss this topic to forum
