The Document Object Model: Processing Structured Documents in Java

Encoder ECC200 in Java The Document Object Model: Processing Structured Documents

oTarget = evtcurrentTarget; documentgetElementById("hoverCell")stylebackgroundColor = oTargetstylebackgroundColor; }

The createColorTable() function creates a <TABLE> node and populates it with 12 rows of 18 cells, each representing a web-safe color Each table row is generated in 3 groups of 6 cells at a time As each cell is created, a new color value is computed and assigned to the cell When it is finished, the table contains 216 colors Let s examine the code to see how it works

The createColorTable() function begins by creating the TABLE, THEAD, and TBODY nodes that will hold the table structure:

var tableNode = documentcreateElement("TABLE"); var oTableHead = documentcreateElement("THEAD"); var oTableBody = documentcreateElement("TBODY");

Next, some local variables are declared, including an array of 6 base hexadecimal numbers that will be used to create the RGB colors:

var colorArray = new Array("00","33","66","99","CC","FF");

The THEAD and TBODY are appended to the TABLE element, and some common table settings are initialized and set as attributes on the table:

tableNodeappendChild(oTableHead); tableNodeappendChild(oTableBody); tableNodesetAttribute("border","1"); tableNodesetAttribute("width","400"); tableNodesetAttribute("id","colorTable");

Now the color cells are generated In order to achieve a certain continuous tone and look to the table, the cells are generated in a particular pattern There are 12 rows of colors divided into two groups, consisting of 6 rows each Within the row groups, there are three groups of cells, each consisting of 6 cells

For each row group, a TR node is created first, followed by the TDs for the TR When each TD is created, it is assigned a color by the function createColorCell() The function takes a single argument, the RGB background color for the cell, and returns a newly created TD node whose background color matches the argument:

function createColorCell(colorStr) { oTD = documentcreateElement("TD"); oTDstylebackgroundColor=colorStr; addClickHandler(oTD,selectColor); addMouseOverHandler(oTD,hoverColor); oTDinnerHTML = " "; return oTD; }

The   entity is required in Netscape 6 so that the table cell will render properly In addition to setting the background color of the cell, the createColorCell() function assigns click and mouse-over handlers to the TD node These event handlers allow the user to select a color and display the color that the mouse is hovering over

The selectColor() method is called in response to a mouse click It extracts the background color from the cell s style and sets the color of the TD with ID colorCell in the color selection table to match the selected color:

function selectColor(evt) { var oTarget; if (typeof(windowevent) != "undefined") oTarget = windoweventsrcElement; else oTarget = evtcurrentTarget; documentgetElementById("colorCell")stylebackgroundColor = oTargetstylebackgroundColor; }

The hoverColor() method performs a similar function, except that it displays the color that the mouse is currently hovering over in the TD with ID hoverCell in the color selection table:

function hoverColor(evt) { var oTarget; if (typeof(windowevent) != "undefined") oTarget = windoweventsrcElement; else oTarget = evtcurrentTarget;

documentgetElementById("hoverCell")stylebackgroundColor = oTargetstylebackgroundColor; }

Lists are common in web pages common enough that the HTML language provides several different list types, such as definition lists, ordered (numbered) lists, and unordered (bulleted) lists Lists are great for displaying information in a columnar form, especially information that lends itself to list format, such as sorted information Unfortunately, HTML contains no built-in way for a user to dynamically edit the content of a list For example, a to-do list application needs to let the user add and delete list items, as well as edit the text description of each item In addition, the application might allow the user to specify the priority of each to-do item and its required completion date You can achieve most of these requirements using standard form controls in DHTML, such as a standard <SELECT> list, along with buttons to add and delete items and an edit field to change the item s content These types of lists, however, don t have very many formatting options, and they certainly can t display more than one column of information In addition, indenting subitems is not automatic the way it is with HTML lists, and it requires a bit of a hack to work correctly (each item in the select list needs to be prepended with some spaces to indent them in the list)

The end result is a dynamically generated color picker that can be used to allow the user to select a color This example doesn t make use of the color that the user selects, but doing so would simply require changing the selectColor() method to perform whatever function was desired for the newly selected color