|
JavaScript Library ExampleThis final part of the final tutorial demonstrates the XML generator library code. We'll use the same information for our fictitious financial web site, from the closures tutorial, only this time we'll try to make the output a little more professional. This is not a lesson in using CSS, it is a simple exercise in using the XML generating library.
Using the CodeNow we can execute the example test code, provided in the Scripts/XmlExample.js file, which is shown in segments below:
// Create a short cut to the normal output device
if (!syger.exists(this, "puts")) {
var puts = function (str) {
document.write(str);
};
}
The omnipresent puts function.
// Create references for Yahoo! Inc. financial services
var systemTickers = {
"Yahoo! Inc" : "YHOO",
"Google Inc" : "GOOG",
"Microsoft Corp" : "MSFT",
"Sun Microsystems Inc" : "JAVA"
};
var tickerRefs = app.createFinancialLinks("http://finance.yahoo.com/q/bc",
["s", "t"], systemTickers);
Here we create our list of tickers and hyperlink references, exactly as before in the closures tutorial.
// Fake the financial information (Correct as of 12 October 2007)
var stockInfo = {
"YHOO" : { trade: "28.48", min52: "22.27", max52: "33.61" },
"GOOG" : { trade: "637.39", min52: "416.70", max52: "641.41" },
"MSFT" : { trade: "30.17", min52: "26.60", max52: "31.84" },
"JAVA" : { trade: "6.23", min52: "4.50", max52: "6.78" }
}
This is a set of data for the tickers. In a real application, we would get the latest data, probably via http, but for this demonstration a static set is adequate.
/**
Utility function to generate the ticker list.
@param layout the layout to use; one of "data-table" or
"unordered-list".
@returns the XML element (an Array).
*/
function generateTickers(layout) {
var result = null;
var idx = null;
switch (layout) {
case "data-table":
result = ["tbody"];
for (var idx in systemTickers) {
if (systemTickers.hasOwnProperty(idx)) {
var item = ["tr"];
var ticker = systemTickers[idx];
var quoteAttrs = { "style" :
"text-align: right; padding-right: 0.20cm;" };
result.push(item);
item.push(["td", idx]);
item.push(["td",
["a", { "href" :
tickerRefs["linkTo" + idx]("5d") },
ticker
]
]);
item.push(["td", quoteAttrs, stockInfo[ticker].trade]);
item.push(["td", quoteAttrs, stockInfo[ticker].min52]);
item.push(["td", quoteAttrs, stockInfo[ticker].max52]);
}
}
var tableAttrs = { "style" :
"background-color: #e8f8e8; margin-bottom: 0.40cm;",
"align" : "center" };
var hdrAttrs = { "style" :
"border-bottom: 1px solid #000; padding: 0.20cm;" };
result = ["table", tableAttrs,
["thead",
["tr",
["th", hdrAttrs, "Company"],
["th", hdrAttrs, "Ticker"],
["th", hdrAttrs, "Current"],
["th", hdrAttrs, "Min 52 wk"],
["th", hdrAttrs, "Max 52 wk"]
]
],
result
];
break;
default:
result = ["ul"];
for (var idx in systemTickers) {
if (systemTickers.hasOwnProperty(idx)) {
var item = ["li"];
result.push(item);
item.push(["a", { "href" : tickerRefs["linkTo" + idx]("5d") },
idx, " (", systemTickers[idx], ")"]);
}
}
break;
}
return result;
}
The generateTickers() function produces JavaScript elements for two layouts, a new table based layout, which also adds ticker data, and the old original unordered list layout.
// ASP padding
var padding = " ";
// Create and print the XML
var fragment = ["div", { "class" : "Code" },
["p", "Links for stock tickers in ",
["a", { "href" :
tickerRefs["linkToYahoo! Inc"]("5d") },
"Yahoo! Inc"
],
" financial services:"
],
generateTickers("unordered-list"),
generateTickers("data-table"),
["p",
["span", { "style" :
"font-style: italic; font-weight: bold;" },
"Note:"
],
" Values correct as of 12 October 2007."
]
];
puts(app.toXML(fragment, padding, " "));
puts(app.toXML(["br"], padding, " "));
fragment = ["div", { "class" : "Code" },
["p", 'The "data-table" output in XML:'],
["pre", {"style" : "font-size: 8pt;" },
app.escape(app.toXML(generateTickers("data-table"), ""))
],
["p", "End of XML excerpt."]
];
puts(app.toXML(fragment, padding, " "));
The padding variable ensures that the generated XML lines up correctly with the surrounding XHTML in the ASP page. You won't see this in the client side version. The first fragment creates the original unordered list output, and the new table based layout. The second fragment adds a spacer, then the third fragment displays the XML so that you can see the alignment at work.
Now we can run the example code, which gives the following results:
Note: if you don't see two big bordered boxes above this line, you probably have JavaScript disabled in your browser. This is a live demonstration, so you'll need to enable JavaScript!
This concludes the JavaScript tutorials, I hope you found something to spark your imagination.
All the scripts in these tutorials are available for download as two compressed archives; Scripts.zip and AspScripts.zip, both distributed under the GNU Lesser General Public License.
ContactsSyger can be contacted for consultancy work on any of the topics mentioned in this article, by sending an email to info@syger.it.
|
Tag cloud: |
|
|
