However, you can provide your users with a way to customize your Web
site to their individual tastes without obstructing the underlying
code. With skins, you can create different professional visual designs
for your site and give your users a choice of which look and feel they
would like to see. And you can do it all without disrupting your
JavaServer Pages (JSP) or HTML code!
This article will show how you can use a skin server to add some
personalization to your Web site. You can use the JSPs in Resources as
a starting point for integrating user preferences in your enrollment
procedures or your customer self-management features, for example.
Factor out visual elements
A Web site's design can be broken into a set of key visual elements
that are independent of the underlying HTML or JSP code. A file
represents each visual element. For example, GIF or JPEG files
symbolize logos or icons; other styles or preferences can be stored in
cascading style sheets (CSS) and represented by CSS files. Make sure
that you identify and factor out generic visual elements that are
loosely coupled with the inner logic, content, or tone of your Web
site. A skin consists of a set of these visual elements, or files, and
can be easily exchanged without disrupting your HTML or JSP code.
Exchanging a skin simply means exchanging the relevant files.
With only a few changes to your Web site's code, you can request visual
elements for a particular skin from a skin server instead of referring
to specific underlying files. For example, if you factored out the logo
element for your site, the skin server could provide a version of the
logo that would change depending on the user's preferences. Internally,
the skin server maps the request to a file. For example, if a user who
has chosen the Blue Ocean skin wants to download the site logo, the
request is mapped to the file data/blue_ocean_logo.gif. In this way,
you can easily add new skins without changing your JSP or HTML code.
Add user preferences
Every customizable Web site needs to process and store individual user
preferences. A user's collection of preferences is often called a user
profile. A user profile might store the visual design the user prefers -
- the Blue Ocean design, for example. The sample code in this article
uses a JavaBean to store and process a user profile.
Listing 1 contains the code for a form where users enter their
preferences for a user ID and a skin. I designed this simple form to
highlight the use of personalization; in a real-world Web site, the
user profile could hold more information about the user's preferences.
Listing 1: ChangeUserProfile.jsp
<.%@ page contentType="text/html" language="Java"
import="UserProfileBean" %>
<.jsp:useBean id="userProfile" class="UserProfileBean"
scope="session" />
<.jsp:setProperty name="userProfile" property="*" />
<.%!
private String isSkinChecked( UserProfileBean userProfile, String
skin ) {
String checkmark = (userProfile.getPreferredSkin().equals
(skin))? "CHECKED":"" ;
return checkmark;
}
%>
<.head>
<.title>Enter your profile<./title>
<.meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<./head>
<.H1>Enter your profile:<./H1>
<.BR>
<.form method="post"
action="http://localhost:8080/skins/jsp/ProcessUserProfile.jsp">
<.TABLE>
<.TR valign="middle">
<.TD>User ID: <./TD>
<.TD><.INPUT TYPE='text' NAME='userId'
value='<.jsp:getProperty name="userProfile"
property="userId" />'><./TD>
<./TR>
<.TR>
<.TD colspan="2"> <./TD>
<./TR>
<.TR valign="top">
<.TD>Skin: <./TD>
<.TD>
<.INPUT TYPE="radio" NAME="preferredSkin"
VALUE="green_piece" <.%= isSkinChecked
(userProfile, "Green Piece") %>> Green Peace <.BR>
<.INPUT TYPE="radio" NAME="preferredSkin"
VALUE="blue_ocean" <.%= isSkinChecked(userProfile, "Blue
Ocean") %>> Blue Ocean<.BR>
<.INPUT TYPE="radio" NAME="preferredSkin" VALUE="red_whip"
<.%= isSkinChecked(userProfile, "Red Whip") %>> Red Whip<.BR>
<./TD>
<./TR>
<./TABLE>
<.DIV ALIGN="center">
<.input type="submit" name="Submit" value="Submit">
<.input type="reset" name="Submit2" value="Reset">
<./DIV>
<./form>
ChangeUserProfile.jsp contains a set of radio buttons with which the
user can select a skin. The radio buttons' names map to the property
preferredSkin of the userProfile bean. When the user submits the form,
the bean's property is set to the value of the selected radio button.
For example, if the user selected the Blue Ocean radio button, the
bean's property preferredSkin would then hold the value blue_ocean.
Next Week: Personalize Your Web site with Skins, Part 2
