Generating Dynamic Table Content

The second version of StockQuotes.html adds a table to display a list of customer stock quotes. Since the number of displayed rows depends on the number of stocks held by the customer, generating this dynamic table requires more DOM manipulation than simply setting text. The added TABLE contains a TR element with an ID attribute "plRow" and three SPAN tags with ID attributes, "stockSymbol," "companyName" and "stockPrice":

<TABLE 
  ALIGN="CENTER"
  WIDTH="80%"
  SUMMARY="Stock Table">
  <TR>
    <TH ALIGN="left" width="20%">Symbol</TH>
    <TH ALIGN="left" width="55%">Company Name</TH>
    <TH ALIGN="right" width="25%">Price</TH>
  </TR>
  <TR id="plRow">
    <TD><SPAN id="stockSymbol"> </SPAN></TD>
    <TD><SPAN id="companyName"> </SPAN></TD>
    <TD ALIGN="right"><SPAN id="stockPrice"> </SPAN></TD>
  </TR>
</TABLE>

To generate an updated "StockQuotes.class" file, the new version of StockQuotes.html is again fed to XMLC. A second version of DynStockQuotes reflects the use of the new StockQuotes class. Two domain classes, Stock and Customer, and two scaffolding classes, DataStore and Driver, round out the example code. I stick to explaining the XMLC aspects of DynStockQuotes and relegate explanation of the domain and scaffolding classes to code comments.

The method "createHtml(Customer)" still sets the customer name and current report time as before, though now the method receives a Customer object as a parameter. It also manages the addition of a table row for each customer stock by iteratively using the method addStockTableRow(Stock). The code strategy is to set the appropriate text in the template row, clone the row, and then add the cloned row to the table.

private void addStockTableRow( Stock stock )
{
  stockQuotes.setTextStockSymbol( stock.getSymbol() );
  stockQuotes.setTextCompanyName( stock.getCompanyName() );
  stockQuotes.setTextStockPrice( "$" + stock.getPrice() );

  HTMLTableRowElement plRow = stockQuotes.getElementplRow();
  Node clonedRow = plRow.cloneNode( true );

  Node stockTable = plRow.getParentNode();
  stockTable.appendChild( clonedRow );
}

XMLC convenience methods are used to set the text for stock symbol, company name and stock price. Recall these text elements belong to the template row. Next, the XMLC generated convenience method getElementTmplRow() is used to retrieve the "tmplRow" element in the DOM. The element is then cloned, which effectively copies the newly set text as well as all other element attributes. Finally, the cloned row is added to the stock table itself.

	Figure 2 | Customer "Bugs Bunny"

There is one hitch to adding cloned table rows. The DOM specification requires unique ID attributes. Since the template row contains ID attributes for easy text manipulation and template row access, to prevent duplication these attributes need to be removed before the element is cloned. The method "prepStockTable()," which is called before adding table rows, accomplishes this task.

The final task in the method "createHtml(Customer)" is to delete the template table row. Having created a clone of the template row with text properly set for each customer stock, the template row itself is no longer needed. Were it not properly deleted, the template row would appear as the first row in the table and would contain the text of the last row in the table.

The dynamic Web page for customer "Bugs Bunny" is shown to the right.

Generating Dynamic Text Content

Adding Mock-up Content

In this Article
Introduction	Generating Dynamic Table Content
Generating Dynamic Text Content	Adding Mock-up Content