Creating Cascading Style Sheets – styles.jsp
Let's try one final, more realistic example. JSP pages are good for generating much more than just
HTML, and some of the trickiest browser-specific problems relate to Cascading Style Sheets (CSS). Our
last example looks at using the browser tags to generate browser-specific style sheets. Although the
changes we'll make to the style sheet are fairly minor, the principles can be extended much more
broadly as the style sheet requirements become more complex.
We'll start with the style sheet itself, which is generated by styles.jsp. We start by overriding the
default content-type for the page (by default, a JSP page generates the content-type text/html) and
importing the Browser Tag Library:
<%@ page contentType="text/css" %>
<%@ taglib uri="http://www.wrox.com/taglib/browser" prefix="browser" %>
The first block of styles is uncontroversial and common to all browsers:
BODY {
background-color: #FFFFCC;
}
P {
color: black;
font: 12pt sans-serif;
}
PRE {
font: 8pt monospace;
border: double #CC0000;
}
For the <H1> tag, we will change the text color and the font depending on the user's browser. Users
with IE 6.0 or higher will get maroon headings in a 36 point serif font, while those without will have
blue headings in a 24 point cursive font:
H1 {
<browser:is name="browser" browser="ie" majorVer="6" minorVer="0">
color: maroon;
font: bold 36pt serif;
</browser:is>
<browser:isNot name="browser" browser="ie" majorVer="6" minorVer="0">
color: blue;
font: bold italic 24pt cursive;
</browser:isNot>
}
Similarly, people using Opera will have the default style for the <EM> tag overridden so that white text
is used, on a black background:
<browser:is name="browser" browser="opera">
EM {
font-style: normal;
font-weight: normal;
background-color: black;
color: white;
}
</browser:is>
The page that references the stylesheet is stylesheet.jsp, which is a conventional HTML-producing
JSP page:
<html>
<head>
<title>Dynamic Stylesheet</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.jsp">
<body>
<h1>Dynamic Stylesheet</h1>
<p>This page uses a stylesheet that is generated
<em>dynamically</em> depending on which browser you
are using.</p>
To help us see what's going on, we also display the stylesheet within <pre> tags, invoking it using the
<jsp:include> action:
<p>Here is the stylesheet:</p>
<pre>
<jsp:include page="styles.jsp"/>
</pre>
</body>
</html>
So, here's the resulting page – first in Internet Explorer 6.0:
Then in Opera 5.0:
Summary
Managing the caches and the browser isn't easy, but are important aspects of designing a web
application. We've looked at techniques for:
-
Managing client-side caching by setting appropriate HTTP response headers, both manually
and by using both ready-made and custom tag libraries, and the new Servlet 2.3 filter
capability
-
Caching expensive-to-recreate data on the server using the OSCache tags and filter
-
Identifying the browser using the USER-AGENT HTTP request header
-
Building a database of recognized browser types and their properties, leveraging the
browscap.ini browser capabilities file commonly used by other dynamic web content
creation tools
-
Creating and deploying a filter and tag library to use our browser database, allowing page
designers easily to build browser-compatible pages.
In the next chapter, we'll look at one of the hardest web design tasks of all, managing frames. In doing
so we'll be making use of some of the tools we've built in this chapter.
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
| 
