Dynamic HTML Fundamentals

The inherent limitation of HTML, the closing of data streams, triggered the development of Dynamic HTML. Dynamic HTML allows the HTML in a Web page to be altered by VBScript code after the data stream is closed. This is accomplished by treating every tag in the document as an object with properties. These properties are available to VBScript code throughout the life of the Web page.

Dynamic HTML builds on the foundation of VBScript by providing an expanded Internet Explorer object model along with new events. Dynamic HTML, like scripting in general, follows an event-driven programming paradigm. Code that you write is executed in response to user interaction with the Web page. The difference is that under Dynamic HTML, every element of the page is capable of supporting user interaction.

Listing 4-2 produces a simple Dynamic HTML page that changes the text's font color from black to red when the mouse passes over the text. The program is a good example of dynamically changing the HTML content of a page even after the input stream is closed. Notice that the fade effect is produced by the SetTimeout method of the Window object.

Listing 4-2. Fading text.


 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Fading Text</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Public intTimeout     Public lngColor     Sub htmlFade_OnMouseOver()         lngColor = 0         intTimeout = SetTimeout("FadeText(-1)", 50)     End Sub     Sub htmlFade_OnMouseOut()         lngColor = &HFF0000         intTimeout = SetTimeout("FadeText(0)", 50)     End Sub     Sub FadeText(blnDirection)         ' Call this routine periodically to fade          ' the text over time         If blnDirection = 0 Then             lngColor = lngColor - &H110000             If lngColor < 0 Then                 lngColor = 0             Else                 intTimeout = SetTimeout("FadeText(0)", 50)             End If         Else             lngColor = lngColor + &H110000 If lngColor > &HFF0000 Then                 lngColor = &HFF0000             Else                 intTimeout = SetTimeout("FadeText(-1)", 50)             End If         End If         htmlFade.Color = Hex(lngColor)     End Sub --> </SCRIPT> </HEAD> <BODY> <B><FONT FACE="ARIAL" SIZE=6 COLOR="000000" ID="htmlFade"> Fading Text </FONT></B> </BODY> </HTML> 

The key to dynamically changing HTML content lies in treating each tag as a separate object. To that end, you need to give your tags names so that they can be addressed in code. In the fading text example, a name is given to the <FONT> tag to allow you to change attributes of the tag at run time. The name of the tag is designated by the ID attribute as follows:

<FONT...ID="htmlFade"> 

Once the ID is defined, you can map events that occur on the tag to code that you write in VBScript. Dynamic HTML supports a wide variety of events, including familiar ones such as Click, DblClick, and KeyPress. In this example, you use the OnMouseOver and OnMouseOut events, which detect when the mouse is passing over or has left the text that is contained in the <FONT> tags. When the appropriate event is trapped, an animation loop is established using the SetTimeout method to fade the text to red or black.

Dynamic HTML processes events at many levels, allowing containing elements to receive notification when tags within them fire events. This process of notifying containers about events occurring inside them is known as event bubbling. Event bubbling allows you to specify in a single location an event handler for the majority of tags in a Web page and also to specify particular behavior for any individual tag. Bubbling occurs automatically and can be trapped by each object in a hierarchy. When a tag receives an event, the Document object automatically receives that event when the tag is finished handling it. Listing 4-3 provides a simple example of event bubbling. The page consists of three pieces of text contained in <FONT> tags. The tags specify various attributes for the contained text.

Listing 4-3. Event bubbling.


 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Event Bubbling</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Sub Document_OnClick()         ' Color any font tag when the mouse clicks on it         Dim objElement         Set objElement = Window.Event.SrcElement         If objElement.TagName = "FONT" Then             objElement.Color = "Red"         End If     End Sub     Sub fntCancel_OnClick()         ' Handle the Click event and cancel the bubble          ' to the Document object              fntCancel.Size = "6"         Window.Event.CancelBubble = True     End Sub --> </SCRIPT> </HEAD> <BODY> <!-- Bubble the Click event for these tags --> <FONT FACE="ARIAL" SIZE=5>Bubble the Click event!</FONT><P> <FONT FACE="ARIAL" SIZE=5>Bubble this one too!</FONT><P> <!-- Handle this event separately --> <FONT FACE="TIMES NEW ROMAN" SIZE=4 COLOR="BLUE" ID="fntCancel"> Cancel this bubble. </FONT><P> </BODY> </HTML> 

When text is clicked, the event is normally received at the document level because most of the tags in the page do not have VBScript event handlers written for their respective OnClick events. Once inside the event handler, your program checks to make sure that the tag clicked is a <FONT> tag; the code then alters the attributes of the tag to reflect the click. In this case, the color changes.

Identifying the actual tag that is clicked is the domain of the Event object. The Event object, accessed through the Window object, has properties that allow you to identify which element is involved in an event and to handle event bubbling. For each event that occurs in Dynamic HTML, you can access properties of the fired event through the Event object.

To identify the element that is clicked, you use the SrcElement property of the Event object. SrcElement can be stored in a variable, thus giving you access to all the attributes of the tag. When you assign an object reference to a variable in VBScript, the language requires use of the Set keyword. Use the following code:

Dim objElement Set objElement = Window.Event.SrcElement 

Once the element is identified, make sure it is a <FONT> tag by checking the TagName property of the Element object. If the TagName property has the value FONT, you can easily change the color of the clicked font. This happens for every <FONT> tag in the Document object, with one exception. The <FONT> tag identified as fntCancel has a separate event handler for the OnClick event. In this case, you change the size of the font, as opposed to the color, and then set the CancelBubble property of the Event object to True (-1) to prevent the Document_OnClick event handler from being executed.



Programming Active Server Pages
Programming Active Server Pages (Microsoft Programming Series)
ISBN: 1572317000
EAN: 2147483647
Year: 1996
Pages: 84

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net