Developing XML Solutions (DV-MPS General) - page 88

[Previous] [Next]

Summary

For XML that does not contain elements that define the presentation of the XML documents, you can use CSS, XSL, or XSLT documents to transform the document. XSL provides a powerful tool to transform XML documents in virtually any way that is necessary. Currently XSL focuses on the transformation of XML into XHTML. It is likely that XSL will provide more powerful transformations in the future.

CSS, XSL, and XSLT allow us to transform XML into user services components that present XML data in a manner that would provide users with the information they require. 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 to allow users to input information, select the information they want to view, and interact with the interface, we need to add code to our user services components that will perform these functions and update the user interface. We'll discuss how to create the dynamic user services components in Chapter 13.

[Previous] [Next] Chapter 13

Creating Dynamic User Services Components

In Chapter 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 chapter, 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.

[Previous] [Next]

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>
<scriptlanguage="vbscript">
FunctionshowTags()
dimstrTagNames,intCounter
strTagNames=""
ForintCounter=0towindow.document.all.length-1
        strTagNames=strTagNames&_
                  window.document.all(intCounter).tagName&""
      Next
      MsgBox"Thetagsare:"&strTagNames
   EndFunction
   </script>
</head>
<bodyonload="showTags()">
  <h1>
 ThispagedemonstratesDHTML.
  </h1>
    <p>
 Thisdocumentcontainsseveral<br></br><b>tags</b>
  </p>
</body>
</html>

The function could have also been written in JScript as follows :

<scriptlanguage="JScript">
functionshowTags()
{
varstrTagNames="";
for(intCounter=0;intCounter<document.all.length;
intCounter++)
{
strTagNames=strTagNames+
window.document.all(intCounter).tagName+"";
}
alert("Thisdocumentcontainsthefollowingtags:"+
strTagNames);
   }
</script>

This DHTML document appears as shown in Figure 13-1.

click to view at full size.

Figure 13-1. The DHTML page in Internet Explorer 5

The s howTags 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>
<scriptlanguage="vbscript">
FunctionRealignHeader()
IfFirstHeader.getAttribute("align")="middle"Then
FirstHeader.setAttribute"align","center"
EndIf
MsgBox"Thealignmentfortheh1elementis:"&_
Document.all("FirstHeader").align
EndFunction
</script>
</head>
<body>
<h1align="middle"id="FirstHeader">
ThispagedemonstratesDHTML.
</h1>
<p>
Thisdocumentcontainsseveral<br></br><b>tags</b>
<br></br>
            <buttontype="button"onclick="RealignHeader">
            ClickMe</button>
</p>
</body>
</html>

This page is shown in Figure 13-2.

click to view at full size.

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>
<attachevent="onmouseover"for="element"
handler="MouseOver"/>
<attachevent="onmouseout"for="element"handler="MouseOut"/>
    <scriptlanguage="JScript">
functionMouseOver()
{
element.color="blue";
element.align="center";
}

functionMouseOut()
{
element.color="red";
element.align="left";
}
</script>
</component>

{% if main.adsdop %}{% include 'adsenceinline.tpl' %}{% endif %}

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>
 <styletype="text/css">
.colorchange{behavior:url(color.htc);}
 </style>
</head>
<body>
<fontcolor="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:

<h1class="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.

Flylib.com

Category list

Similar pages