This chapter is from the book
This chapter is from the book
This chapter is from the book
Cascading Stylesheets
Cascading stylesheets (CSS) are not exactly a full blown publishing framework. Instead, they are used in conjunction with XML documents to associate stylistic behavior with elements of the document. Instead of hard-coding a font element in an HTML or XHTML document, you can instead reference a stylesheet component via a style attribute that contains the font information. The following XML fragment demonstrates how you can point your XML document to a CSS:
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="wml.css">
So, if this is all you can do with stylesheets, why am I even discussing them here? The answer is that stylesheets are an essential component in supporting even more loose coupling of content and presentation. For example, if you reserve the style issues to a CSS, the Java developer doesn't have to worry about whether a font is to be red or green. Instead, the developer focuses on, for example, setting the style reference, a selector, that references style information in the stylesheet.
In CSS, a selector represents one or more style declarations. For example,
title { font-family: "Garamond"; font-size: 18; font-color: red }
Without going into great detail here, CSS selectors have the capability to reach far into the hierarchical organization of an XML document to apply specific style rules, such as "second level paragraphs inside a Level 2 heading."
Let's leverage the anticipated ShowFloor application and come up with an administrative table that tracks which booths are occupied and which are not. Listing 3.4 is an HTML file that is ready for compilation by the XMLC compiler. I've used font color to indicate if the booth has been assigned or not. Red represents the fact that the booth is still available. Black represents that it has been assigned.
Listing 3.4 Using Cascading Stylesheets to Remove Presentation Information from HTML
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.unassigned { font-family: Arial, Helvetica, sans-serif; _ font-size: 12px; color: red}
.assigned { font-family: Arial, Helvetica, sans-serif; _ font-size: 12px; color: black}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr><th>Booth Status</th></tr>
<tr>
<td id=boothNumber class="boothStatus">123</td>
</tr>
</table>
</body>
</html>
In this listing, two stylesheet directives are embedded in the HTML document, though they easily could be removed and stored in an associated file and referred to by a link, as illustrated earlier. Deeper in the HTML, I've identified the targeted table cell in which to insert dynamic content reflecting the actual booth number and its status. boothStatus will be overwritten during runtime with the stylesheet selector name assigned or unassigned.
Listing 3.5 Java Presentation Logic for Updating the HTML Page with Current Data
public void run(HttpPresentationComms comms)
throws HttpPresentationException, IOException {
BoothStatusHTML boothStatus;
// A couple of hardcoded values to be replaced later during development.
String boothNumber = "437";
boolean boothOccupied = true;
boothStatusPage = _(boothStatusPageHTML)comms.xmlcFactory.create(BoothStatusHTML.class);
// Use xmlc generated method to update the cell's _text node with correct booth #.
boothStatusPage.setTextBoothNumber(boothNumber);
// Use another xmlc generated method to fetch the child node
// inside the current element.
HTMLTableCellElement address = boothStatusPage.getElementBoothNumber();
if (boothOccupied == true) {
cell.getAttributeNode("class").setValue("assigned");
} else {
cell.getAttributeNode("class").setValue("unassigned");
}
comms.response.writeDOM(boothStatusPage);
}
Listing 3.5 shows a partial, hard-coded example of possible presentation logic manipulating of the HTML page. The HTML page is represented as a template object, BoothStatusHTML, as generated by the XMLC compilation. It represents the DOM class and convenience methods that might be used to manipulate the DOM. First, the example updates the cell's content with the "real" booth number, hard-coded for this example. Second, the status of the booth is determined and the class attribute is set to point to the correct CSS selector. The generated HTML will include the fragment
<td id=boothNumber class="assigned">437</td>
When leveraged with any number of presentation technologies, including XMLC and JSP, the use of CSS grants more control to the designer and removes more "decisions" and hard-coding of stylistic information, such as fonts, from the server-side code.