AJAX In Action [29]
url(images/min.png) top left no-repeat;
}
span.titleButton#max{
background: transparent
url(images/max.png) top left no-repeat;
}
span.titleButton#close{
background: transparent
url(images/close.png) top left no-repeat;
}
div.contents {
background-color: #e0e4e8;
overflow: auto;
padding: 2px;
height:240px;
}
div.item{
position : relative;
height : 64px;
width: 56px;
float: left;
color : #004488;
font-size: 18;
padding: 0px;
margin: 4px;
}
div.item div.itemName {
margin-top: 48px; e
Text placement
font: 10px verdana, arial, helvetica;
text-align: center;
}
div.folder{
background: transparent
url(images/folder.png) top left no-repeat;
}
Licensed to jonathan zheng Organizing the view using the DOM 45 div.file{ background: transparent url(images/file.png) top left no-repeat; } div.special{ background: transparent url(images/folder_important.png) top left no-repeat; } We’ve already looked at a number of the tricks that we’ve employed in this stylesheet to tune the look and feel of individual elements. We’ve highlighted a few more here, to demonstrate the breadth of concerns to which CSS can be applied: on-screen placement b, texturing elements c, assisting in layout of elements d, and placing text relative to accompanying graphics e. CSS is an important part of the web developer’s basic toolkit. As we’ve demonstrated here, it can be applied just as easily to the types of interfaces that an Ajax application requires as to the more design-oriented approach of a static brochure-style site. 2.4 Organizing the view using the DOM The Document Object Model (DOM) exposes a document (a web page) to the JavaScript engine. Using the DOM, the document structure, as seen in figure 2.3, can be manipulated programmatically. This is a particularly useful ability to have at our disposal when writing an Ajax application. In a classic web application, we are regularly refreshing the entire page with new streams of HTML from the server, and we can redefine the interface largely through serving up new HTML. In an Ajax application, the majority of changes to the user interface will be made using the DOM. HTML tags in a web page are organized in a tree structure. The root of the tree is the tag, which represents the document. Within this, the A DOM representation of a web page is also structured as a tree, composed of elements or nodes, which may contain child nodes within them, and so on recursively. The JavaScript engine exposes the root node of the current web page through the global variable document, which serves as the starting point for all our DOM manipulations. The DOM element is well defined by the W3C specification. Licensed to jonathan zheng 46 CHAPTER 2 First steps with Ajax It has a single parent element, zero or more child elements, and any number of attributes, which are stored as an associative array (that is, by a textual key such as width or style rather than a numerical index). Figure 2.3 illustrates the abstract structure of the document shown in listing 2.2, as seen using the Mozilla DOM Inspector tool (see appendix A for more details). The relationship between the elements in the DOM can be seen to mirror that of the HTML listing. The relationship is two-way. Modifying the DOM will alter the HTML markup and hence the presentation of the page. This provides a top-level view of what the DOM looks like. In the following section, we’ll see how the DOM is exposed to the JavaScript interpreter and how to work with it. Figure 2.3 The DOM presents an HTML document as a tree structure, with each element representing a tag in the HTML markup. Licensed to jonathan zheng Organizing the view using the DOM 47 2.4.1 Working with the DOM using JavaScript In any application, we want to modify the