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 Object Model
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.
Events Associated with DHTML Objects
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.
NOTE
We will not have a detailed discussion of the events and objects in the DHTML object model as it goes beyond the scope of an XML book. Many excellent references on DHTML are available, such as Dynamic HTML Reference and Software Development Kit, published by Microsoft Press, 1999.
The Event Object
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.
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. All the example files discussed in this chapter are available on the companion CD. 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:
<h1 class="colorchange"> |
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.
EAN: 2147483647
Pages: 115