Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Enterprise Edition >

Personalize your Website with skins

Let your users control the look and feel of your JSP-based Website

By Brian R.j. Heumann, JavaWorld.com, 06/29/01

  • Print
  • Feedback
. What's this?
Your Website's appearance says loads about your organization's core values. However, it's almost impossible to find a visual design that pleases everybody -- and rolling out a professional design and keeping it consistent throughout the Website is hard work. You cannot make major changes to the visual design without disrupting other elements, such as the layout or the HTML code.

However, you can provide your users with a way to customize your Website 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 Website. 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 Website'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 Website. 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 Website'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 Website 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.

Figure 1 shows a Web form from which the user can choose a skin by selecting any one of four radio buttons.

Figure 1. Change user profile.
Click on thumbnail to view
full-size image. (11 KB)



Listing 1 contains the code for the form shown in Figure 1, 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 Website, the user profile could hold more information about the user's preferences.

  • Print
  • Feedback
What is Tech Briefcase?
TechBriefcase is a new, free service where IT Professionals can Search, Store and Share IT white papers and content like this. Learn more
Bookmark content
Speed up your research efforts with content across the web.
Search and Store
Find the white papers you need. Create folders for any topic.
View Anywhere
Open your briefcase on your iPhone, tablet or desktop. Share with colleagues.
Don't have an account yet?

Resources