6.2 Dynamic HTML


Most iTV applications of ECMA Script are in the context of DHTML behaviors, as it enables converting a static HTML page into an interactive animated iTV application. The DHTML concept includes the possibility of altering the content of a page after it has been loaded into the browser, in broadcast mode, namely without calling for action from the server. DHTML provides full local interactivity; there is no need for any server-side scripts nor is there a need to access any server.

All the elements on a page can then be altered . One can move images, animate them, and apply special effects to them. One can also implement interactivity by adding buttons that, for instance, can reveal or hide a section of a page. One can introduce drop-down navigation menus that open when the mouse pointer hovers over them. Example 6.1 presents a sample HTML page which works with Internet Explorer 6.0.

The key elements of DHTML are client side ECMA scripting and the DOM [DOM]. When ECMA Script is applied to markup content, such as HTML pages, it can introduce a behavior that enhances that element's default behavior. For example, a behavior can be created for an HTML button element that toggles the display property of an element's children on a mouse click (see functions ShowForm() and HideForm() in Example 6.1). Similarly, another behavior can incrementally set the position of the element on the screen (see function MoveText() in Example 6.1); the body attribute

 onload="window.setInterval('MoveText()', 10) 

implies that the MoveNext() function will be called every 10 milliseconds (see MSDN.Microsoft.com for documentation on window.setInterval() ). It is not hard to imagine how interactive games could be implemented using iTV DHTML: When this behavior is applied to an img element, it causes an otherwise statically positioned image to fly across the screen. Grabbing remote-control events on this image would enable one to produce interactive games .

One can access the data entered in a form using the DOM (see function GetInputCreditNum() ) and pass those data to other functions (see the use of alert() inside the HideForm function).

Example 6.1 Form hide/show, input data access, and animation.
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   <html>   <head>   <title>Sample DHTML</title>   <script language='JavaScript'>   function ShowForm() {   tvform.style.display = "inline";   }   function HideForm() {   tvform.style.display = "none";   alert("Input="+GetInputCreditNum());   }   function GetInputCreditNum() {   return requestForm.creditNum.value;   }   function MoveText() {   var now = new Date();   runningText.style.left = 50+now.getMilliseconds()/2;   }   </script>   </head>   <body onload="window.setInterval('MoveText()', 10)">   <form name='requestForm'>   <div align="left">   <button onclick="ShowForm()">Show</button>   <button onclick="HideForm()">Hide</button>   </div>   <div id='tvform' align="center" style="display:inline;">   <INPUT id="creditNum" type="text" value="1234567890123456">   </div>   </form>   <div id='runningText'   style="position:absolute;left:10px;top:75px">   Catch ...   </div>   </body>   </html>  


ITV Handbook. Technologies and Standards
ITV Handbook: Technologies and Standards
ISBN: 0131003127
EAN: 2147483647
Year: 2003
Pages: 170

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