Auction Demo Architecture: XML Object Model

The following examples show how the XML object model is used from script to extract the XML data that is received from the server. The showProduct function is called when the user selects an item from the list of items being auctioned. This method looks up the XML for that item and passes it over to the XML DSO in the products frame.

function showProduct(index)
{
	// Get the XML node for selected item
	currentIndex = index;
	var root = xmldso.getDocument().root;
	var item = root.children.item(index);

	// Create new single item auction block tree
	var newRoot = xmldso.getDocument().createElement(0,"AUCTIONBLOCK");
	newRoot.addChild(item,0,0);

	// Hand new tree over to product frame
	parent.products.xmldso2.setRoot(newRoot);

	// Tell product frame to update
	parent.products.UpdateXML();
}

This is the function that builds the main list showing the TITLE and highest bid for each item, and color codes it to highlight the items for which the current user owns the recent bid.

function LoadItems()
{
    lastTimeStamp = getLastTimeStamp();
    var root = xmldso.getDocument().root;
    var items = root.children.item("ITEM");
    var numRows = parent.utilities.itemLength(items);
    var bidder = parent.products.getBidder();
    var i;
    for (i=0; i < numRows; i++)
    {
        // Find the DHTML elements to update
        var currentItem = document.all("current-item-"+i);
        var currentPrice = document.all("current-price-"+i);

        // Find the XML data we need
        var thisItem = parent.utilities.getItem(items, i);
        var bids = thisItem.children.item("BIDS");
        var bid = parent.utilities.getItem(bids.children.item("BID", 0));
        var itemTimeStamp = bid.children.item("TIMESTAMP").text;
        var price = bid.children.item("PRICE");
        var thisBidder = bid.children.item("BIDDER").text;

        // Update the DHTML elements
        currentItem.innerText = thisItem.children.item("TITLE").text;
        currentPrice.innerText = "$" + price.text;

        // Apply the correct colors
        var target;
        if (thisBidder == bidder) {
            currentItem.style.color = "#FFFF00";
            currentPrice.style.color = "#FFFF00";
        } else {
            currentItem.style.color = "#FFFFFF";
            currentPrice.style.color = "#FFFFFF";
        }
	        
        / See if this price has changed, if so, initiate fading on it
        if (itemTimeStamp > lastTimeStamp ) {
            currentItem.style.backgroundColor = "#000000";
            currentPrice.style.backgroundColor = "#000000";
            parent.fader.fadeElement(currentPrice,agingColor);
            parent.fader.fadeElement(currentItem,agingColor);
        }
    }
}

This function calculates the highest timestamp from all the items in the entire XML. This timestamp is then used as a URL query parameter for the UPDATE.ASP script.

function getLastTimeStamp()
{
    // Find most recent timestamp by walking thru the
    // items to find the maximum timestamp value.
    var doc = xmldso.getDocument();
    var root = doc.root;
    var items = root.children.item("ITEM");
    var lastTimeStamp = 0;
    var i = 0;
    for (i = 0; i < items.length; col++) {            
        var item = items.item(i);
        var ts = item.children.item("TIMESTAMP").text;
        var t = parseFloat(ts);
        if (t > lastTimeStamp)
            lastTimeStamp = t;
    }    
    return lastTimeStamp;
}

HomeBack to the XML Auction Demo overview.

© 1997 Microsoft Corporation. All rights reserved. Terms of use.