Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > CLIENT SIDE CODING > JAVASCRIPT TUTORIALS > CREATE RICH CLIENT APPS WITH THE DOM


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

Create rich client apps with the DOM
By Mike Padilla - 2004-03-24 Page:  1 2 3 4 5 6 7 8 9

Rich client: Under the hood

  • Elements: The "nouns" in the HTML code; things like tables (<table>), rows (<tr>), and links (<a>)
  • Events: Triggers that are set off by user or system initiated actions
  • Attributes/Properties: The "adjectives" of the elements
  • Styles: Similar to attributes/properties, with some overlap; styles are more extensively defined to cover greater detail with CSS

When working with these four pieces, you can dictate that when a specific event occurs, an attribute of a particular object must change. You can do this for everything on the page.

Listing 1. Figurative example code


<baby id="babyJoe" 
      onCry="checkCry(this)" 
      style="personality:cute"> I am cute </baby>

function checkCry(babyFocus) {
     if  (babyFocus.wetDiaper) {
           changeDiaper(babyFocus);
            babyFocus.style.personality = "happy";
     }
}

Not only can you reference existing HTML elements, you can also insert new nodes into the document. You can seamlessly remove nodes as well. Need an extra row in that table? Just add one on the client side: tbody.insertRow(0). Need to remove a row? Rip it out: table.deleteRow(0). No trips to the server are needed and the user is in complete, instantaneous control.



View Create rich client apps with the DOM Discussion

Page:  1 2 3 4 5 6 7 8 9 Next Page: Clean and extensible implementations

First published by IBM developerWorks


Copyright 2004-2024 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.