TechVideos
  Home     About           Free Videos           FAQ     Contact  
Stay Informed Tell A Friend Bookmark this site
Copyright 2001

IMPLEMENTING BROWSER CONSTRAINTS USING DYNAMIC HTML

ABSTRACT

Dynamic HTML (DHTML) is a combination of technologies that make Web pages capable of functioning like miniature software applications. With DHTML a Web page can respond immediately to actions from the user without having to connect to a server to handle the request. While this technology can help reduce the amount of traffic on the network, developing DHTML applications can be a very time consuming and difficult process. To speed up the development process, this paper describes a constraint solver that is currently being developed that will allow relationships between objects to be defined once and then be automatically maintained by the system, much like a spreadsheet.

KEYWORDS

Dynamic HTML, DHTML, constraints, document object model, cascading style sheets, JavaScript, Java applets, and cross-browser applications.

INTRODUCTION

DHTML is a group of technologies that enable a web page to be more dynamic. It allows a browser to change the look of a page after it has been downloaded without making additional requests to the server. While this technology can help reduce the amount of traffic on the network, developing DHTML applications can be a very time consuming and difficult process. To speed up the development process, this paper describes a constraint solver that is currently being developed that will allow relationships between objects to be defined once and then be automatically maintained by the system, much like a spreadsheet. By using constraints, graphical user interfaces will be able to automatically perform operations such as specifying the graphical layout of objects, re-computing formulas, and maintaining consistency between multiple views. This constraint solver will free DHTML developers from the tedious and error-prone task of maintaining these relationships.

Prior to the introduction of DHTML, the main method used for having a browser process actions within a page itself was to use an applet. The most common types of applets used on Web pages are Java applets. The main disadvantage of using Java applets is that the user must wait until an entire application is downloaded before they can begin viewing the material. Depending on the size of the applet, the user may spend a considerable amount of time waiting for those elements to load. On the other hand, when using DHTML the user does not have to wait until an entire application is downloaded before they can begin viewing the material. Instead the text and graphics are displayed first and then the code loads in the background. Using DHTML the user can start reading and clicking while the potentially large source code loads in the background. However like Java applets, DHTML will help reduce the number of actual connections made to the Web server. This should drastically help speed up Web applications since a lot of the time required to process an action is spent simply establishing a connection to the server.

MOTIVATIONS AND EXAMPLES OF BROWSER CONSTRAINTS

Specify graphical layout.
Constraints can be used to specify the alignment, placement, and size of graphical objects. For example, in Figure 1 constraints are used to left align the text. If the left value of the text First Name is changed, then the remaining text is automatically repositioned to maintain this constraint.

Figure 1: Using constraints to specify the graphical layout of objects.

Re-compute formulas.
Constraints, like formulas in a spreadsheet application, will force values to be recomputed automatically when the values of entries change. For example in Figure 2, the value of Total is automatically recomputed whenever the values of housing, tuition, books, entertainment, or miscellaneous are changed.

Maintain consistency between multiple views of data.
Graphical interfaces often provide multiple views of the same data. When the user modifies the data by manipulating the graphical objects in one of the views, the other views must be updated to reflect the changed data. For example, in Figure 3 constraints are used to maintain consistency between the views of ice cream flavors. If the value of the labeled box chocolate is changed, then the bar chart is automatically changed.

Figure 2: Using constraints to re-compute formulas automatically.

Figure 3: Using constraints to maintain multiple views of the same data.

DHTML SPECIFICATIONS

DHTML is HTML plus (1) Document Object Model (DOM), (2) Cascading Style Sheets (CSS), and (3) a programming language like JavaScript. DOM is a specification that allows elements of a Web page such as text and graphics to be manipulated by a programming language like JavaScript. DOM makes it possible for each character in a document to be its own individual object. The individual objects can then be assigned separate attributes such as a font color, font size, location, and even a stacking order that determines which object is visible if objects are placed on top of one another. The <layer> tag is used to create a DOM for Netscape browsers and the <div> tag is used to create a DOM in Internet Explorer. Fortunately, Netscape also treats an absolutely positioned <div> tag the same as a layer, thus allowing a cross-browser DHTML document to be created.

Cascading style sheets allow the style and location of page elements (such as text and graphics) to be specified separately from the content of the document. This separation of style and content allows a document to be more easily managed and modified. Shown in Figure 4 is an example of a DHTML document that uses a cascading style sheet.

  1  <html>
  2
  3  <head>
  4  <title>DHTML Example</title>
  5  <STYLE TYPE="text/css">
  6  h2 {font-size: 40pt; font-color: red; font-style: italic}
  7  #object1 {position:absolute; background-color: #ffff00; left:70; top:80;}
  8  </STYLE>
  9
  10  <script language="javascript">
  11  function start() {
  12  if (navigator.appName == "Netscape") {  // USING NETSCAPE
  13    if (document.object1.left < 600) {
  14      document.object1.left = document.object1.left + 5; }
  15      setTimeout(start, 20);   
  16    }
  17   else {   // USING Internet Explorer
  18     if (object1.style.pixelLeft < 600) {
  19       object1.style.pixelLeft = object1.style.pixelLeft + 5;}
  20       setTimeout(start, 20);
  21     }
  22  }
  23  </script>
  24  </head>
  25
  26  <body onload="start()">
  27  <h2>Redefined Level Two Heading Tag</h2>
  28  <DIV id="object1">Example of a Layer</DIV>
  29  </body>
  30  </html>

Figure 4: The source code for a DHTML example.

In the DHTML document shown in Figure 4, line 6 redefines a level-two heading tag so that it now uses a font size of 40, red text, and is in italic. It also defines a DOM (i.e. object1) that is originally positioned 70 pixels from the left and 80 pixels from the top margin and has a background color of yellow. When the document is loaded into the browser, the ONLOAD event handler on line 26 calls the function start on line 11 which moves object1 to the right margin five pixels at a time waiting 20 milliseconds between moves.

When creating DHTML documents, the programming portion for most applications typically has to be written twice to make it cross-browser friendly. This is typically achieved by determining the browser and then writing the appropriate code for that specific browser. Even in the simple example shown in Figure 4, notice how the horizontal position of an object is specified using the left attribute in Netscape, whereas Internet Explorer uses the attribute pixelLeft to specify the horizontal position of an object. Since code typically has to be written multiple times to make it cross-browser friendly, this may explain the slow adoption of DHTML.

To help speed up the process of creating DHTML, our constraint solver when finished will convert a constraint into a cross-browser implementation. Shown in boldface below is an example of how a DOM object will be modified to specify a constraint for our new system. In this example, it specifies that the left of object2 is constrained to the left of object1.

   1  <div id="object2" 
   2   style="position:absolute" 
   3   constraint="left:formula(object1.left)">
   4   <img src="image2.gif" width=100 height=100>
   5  </div>
The attribute constraint is a special attribute that is not recognized by browsers. Therefore, it will only be recognized by our new constraint solver. When our constraint solver parses this line, it will produce the necessary code to create a cross-browser application. Shown below is the code that might be produced to satisfy the constraint mentioned above.
  if (navigator.appName == "Netscape") {
    document.layers["object2"].left = document.layers["object1"].left
  elseif (  // Using Internet Explorer 
    object2.style.pixelLeft = object1.style.pixelLeft
  }

RUNTIME IMPLEMENTATION

When objects are created or modified they will be examined to see if they contain a "constraint" attribute. If so, the constraint is analyzed and a link list of constrained objects will be maintained. For example if the following constraints were specified:
object2.left = object1.left
object2.top = object1.top + 50
object3.left = object1.left + 100
Then the constraint structure for object1 would appear as shown in Figure 5.

Figure 5: A link list showing the constraints for object1.

Now if the left attribute of object1 is modified, then the left attribute of object2 and object3 would be marked invalid. The constraint solver would then automatically re-compute the left values for object2 and object3. To prevent the constraint solver from entering an infinite loop, a valid flag will be used to marked constraints once they have been solved. For example, if the constraint (object1.top = object2.top 50) was added to the list of constraints above, then the constraint solver could enter an infinite loop if a flag was not used to mark constraints that were already solved.

CONCLUSIONS

Developing cross-browser web-based applications using DHTML can be a very time consuming and difficult process. To speed up the development process, a constraint solver is currently being developed to simplify this process. This system will allow constraints to be defined once between DOM objects and then be automatically maintained by the system regardless of the browser that is being used. This constraint solver will make it much easier to perform such operations as specifying the graphical layout of DOM objects, re- computing formulas in HTML forms, and maintaining consistency between multiple views of data displayed in Web documents.

Related Work: As of this writing, there is no other known work being done on implementing browser constraints using DHTML.


Powered by Sphider