Programming Tutorials Browser Tutorials Articles Struts Tutorials Hibernate Tutorials

Search: 

  Tutorial: Personalize your Website with skins - JavaWorld June 2001

Personalize your Website with skins - JavaWorld June 2001

Tutorial Details:

Personalize your Website with skins
Personalize your Website with skins
By: By Brian R.J. Heumann
Let your users control the look and feel of your JSP-based Website
our 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.
Listing 1: ChangeUserProfile.jsp
<%@ page contentType="text/html" language="Java" import="UserProfileBean" %>


<%!
private String isSkinChecked( UserProfileBean userProfile, String skin ) {
String checkmark = (userProfile.getPreferredSkin().equals(skin))? "CHECKED":"" ;
return checkmark;
}
%>

Enter your profile


Enter your profile:

















User ID:
Skin:
> Green Peace

> Blue Ocean

> Red Whip







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 .
After the user submits the form, its values are stored in the JavaBean userProfile and can be processed. Listing 2 shows sample Java code for a user profile bean, which holds a string with the identifier for the skin that the user has chosen to see. This skin identifier is used later to tailor skin server requests to the user's preference.
Listing 2: UserProfileBean.java
// UserProfileBean.java
public class UserProfileBean {
String userId ="Anonymous";
String preferredSkin ="Default" ;
public void setUserId( String id ) {
userId = id ;
}
public String getUserId() {
return userId ;
}
public void setPreferredSkin( String skinName ) {
preferredSkin = skinName ;
}
public String getPreferredSkin() {
return preferredSkin ;
}
} ;
Process the user profile
The form containing the user preferences is submitted to ProcessUserProfile.jsp . Listing 3 shows a sample JSP that you can use to process the user profile information. It does not do anything practical, but you can use it as a starting point for storing the user profile in an LDAP (lightweight directory access protocol) directory or in a database.
Listing 3: ProcessUserProfile.jsp
<%@ page contentType="text/html" %>
<%@ page language="Java" %>
<%@ page import="java.util.*, UserProfileBean" %>


User ID is:

Preferred Skin :

ProcessUserProfile.jsp ultimately forwards the request to a different JSP that makes use of the user profile.
Add personalization to your Website
You have seen how a user can choose a skin and how this information is stored in a JavaBean. Next, you will learn how to use these preferences to display a personalized Website.
Figure 2 shows a portal displaying the sample skin Green Piece. When you reach Figure 3 below, you'll see the same portal with another sample skin, this one called Red Whip. Although the underlying JSP code is identical (see Listing 4), the design is very different.
Figure 2. Example of the Green Piece
skin. Click on thumbnail to view
full-size image. (17 KB)
Changes to your Website
After the user profile is saved, your JSPs can exploit it to personalize a portal or homepage. Using the user profile bean in your JSPs, you can easily access the relevant properties to generate a personalized page. Listing 4 demonstrates how to use the user profile to create a customized look and feel for the user's preferred skin.
Listing 4: PersonalHomepage.jsp
<%@ page contentType="text/html" language="Java" import="UserProfileBean" %>



My Personalized Homepage

&id=css">



& id=logo">

My personalized Homepage!

















Title Bar

Ipsem lorem retequiem latus gratis forticicum adventiris seculem.

Lorventic marbot simplif forticicum lorentus practicum sempre isbit











Title Bar

Ipsem lorem retequiem latus gratis forticicum adventiris
seculem.
Lorventic marbot simplif forticicum lorentus practicum sempre isbit



Figure 3 shows a portal in the skin called Red Whip. The skins in figures 2 and 3 were both generated by the same JSP code (Listing 4), but they feature different looks.
Figure 3. Example of the Red Whip
skin. Click on thumbnail to view
full-size image. (16 KB)
PersonalHomepage.jsp makes use of the preferredSkin property for a user profile bean; the and t


 

Read Tutorial at: Click here to view the tutorial

Rate Tutorial:
Personalize your Website with skins - JavaWorld June 2001

View Tutorial:
Personalize your Website with skins - JavaWorld June 2001

Related Tutorials:

Displaying 1 - 50 of about 1968 Related Tutorials.

Is Your Web Browser Putting You At Risk
flaws. As an example, between April 2001 and June 2004, Microsoft documented... Is Your Web Browser Putting You At Risk Is Your Web Browser Putting You At Risk
 
Creating Website with the use of template in Wicket
Creating Website with the use of template in Wicket Creating Website with the use of template in Wicket... to describe you how you can create a website by creating templates of it. In this section
 
Manual Submission to Search Engines. Hand Submit Website URL Submission to Major Search Engines
Engines ATTENTION: Website owners!  Hand Submissions... to the services provided by Roseindia.net to advertise your websites sites.... The reasons for creating the website is to sell a product, offer a service
 
Your Computer Sick
of targeted visitors to your website or affiliate links... Need MORE TRAFFIC to your website or affiliate links "Turn Words Into Traffic" reveals the secrets for driving Thousands of NEW visitors to your website or affiliate links
 
Ten Steps To A Well Optimized Website - Step 10: The Extras
Ten Steps To A Well Optimized Website - Step 10: The Extras Ten Steps To A Well Optimized Website - Step 10... to optimizing your pages and building quality links we have covered the required
 
Rid Your Computer of ITD - Internet Transmitted Diseases
Rid Your Computer of ITD - Internet Transmitted Diseases Rid Your Computer of ITD - Internet Transmitted... but there are some things you can do to limit your infection by it. Check to see
 
Rid Your Computer of ITD - Internet Transmitted Diseases
Rid Your Computer of ITD - Internet Transmitted Diseases Rid Your Computer of ITD - Internet Transmitted... but there are some things you can do to limit your infection by it. Check to see
 
Definition of Bioinformatics
; About Bioinformatics In February 2001, the human genome was finally... for Biotechnology Information (NCBI 2001) defines bioinformatics as: "... the Computer Programming Languages.    Experiment on your computer
 
I Terribly Wrong In Your Computer
I  Terribly Wrong In Your Computer I  Terribly Wrong In Your Computer  ... Terribly Wrong In Your Computer This really chapped my lips...Spy
 
The Beginners Linux Guide
Dedicated website to Linux containing Online Resource, Links... Hat 9.0 or Mandrake 10 for setting up your server.    ... This section shows you how to test your Fedora Core 4 Donwloaded ISOs  
 
Your suggestions
Your suggestions  ...;   Use the form on this page to tell us your ideas...: Your name
 
Developing Search Engine in Java
develop your own search engine for your website in Java technologies. We... are developing is power full engine that you can use on your website... the pages of your website into the full text index. In the next section we will see
 
Your Bubblez
Your Bubblez Your Bubblez   ...;            Your Bubblez is a personalized homepage featuring AJAX based windows. It is just like your
 
Freelance SEO
will be working with us to promote our article website http://www.huntarticles.com/ and many other client website.  Keyword research ... with sample of your work  Education:   UG - Any Graduate - Any
 
What is Web Hosting
have a company and want web presence than you need a website. With the website any one from the world must be able to view your pages, images etc.  Website is actually a collection of computer files including the images, sound
 
Open Source web Templates
a professionally designed website at a much lower cost. All you need to customize your template... Open Source Web Templates A web site template is a pre-made website... them for you for a fee. If you would like to share your free templates
 
Freelance Content Writer
and develop the content for our article website http://www.huntarticles.com/ and many other client website.  Blog Content... writing.  Apply with samples of your writing  Education
 
Freelance Blog Content Writer
blog writer to write and develop the content for our article website http://www.huntarticles.com/ and many other client  website. ...; Samples of Content writing.  Apply with samples of your
 
JSF outputLink Tag
text holding a link of a page or a website location. This link... navigation from the current page to another page or a website while... to navigate another page of your application by specifying
 
How To Manage Your Username And Password The Easy And Secure Way
How To Manage Your Username And Password The Easy And Secure Way How To Manage Your Username And Password... to Internet. In my article "6 Essential Steps to Protect Your Computer
 
VoIP Keep Your Number
VoIP Keep Your Number VoIP Keep Your Number...;  VoIP Keep Your Existing Phone Number Changing your... your existing phone number. To do this, simply sign up and select the option
 
JS-Sorcerer: JavaScript Development Tool
in JavaScript files in a single step, letting you spend more time improving your website or Ajax application, and less time testing and debugging it. Read about its
 
Get Noticed with Your Resume
Get Noticed with Your Resume Get Noticed with Your... the importance of your resume- they tell you that your resume can make or break your chances to get to the interview. No matter how often repeated, this point
 
Repair and Prevent Errors on Your Computer
Guidance book about your PC security Repair and Prevent Errors on Your Computer...;   MyRegistryCleaner will make your system
 
GPS Terminology
any article in any website related to GPS. These will provide you basic idea..., after you enter the coordinates of your actual destination; GPS calculates... waypoint stored in your GPS receiver. Heading – Heading represents
 
Java Help and Java Glossary
Help online through our website. Browser the topics below to learn more... tool that is committed to eradicate your all sorts of Java related... and Earn Extra Cash You can submit your tutorial preferable in HTML format
 
Ajax Training
development technique used for developing website more interactive. Ajax helps you in making your web application more interactive by retrieving small amount of data from web server and then showing it on your application without refreshing
 
Writing your First WAP Application.
Writing your First WAP Application. function validateForm... your... it's time to mould your Internet Data for the entire
 
Beneficiaries Organizations
job. So stop worrying now and apply today in our website for your students. We will provide a login and password to your students at no cost. Experience... firms will be get benefited due to these trained talents available in our website
 
How to Check If Your computer is infected with Spyware
How to Check If Your computer is infected with Spywares How to Check If Your computer is infected with Spyware... to check your computer for Spyware infections. Spyware can infect your computer
 
Dedicated Servers
their website(s). Fast Internet connectivity is provided to the server, in many..., the website hosted on the Dedicated Server fully uses the server resources... area, e-commerce, live help, chat rooms, and website links. Dedicated server
 
Open Source content Management System
OpenCms is a professional level Open Source Website Content Management System... source CMSs offer a cost effective way to build a "content managed website... Please note that some parts of the TYPO3.org website are still in beta phase
 
Get Your Game on with SuperGamer-1
Get Your Game on with SuperGamer-1 Get Your Game on with SuperGamer-1 Gaming in Linux is much easier than it once... for hardware compatibility before committing the distribution to your hard drive. You
 
Improve Your Assertiveness at Work
Improve Your Assertiveness at Work Improve Your... as anyone else. Affirm these thoughts in your mind. Do you have a tendency to ruminate over your past failures and mistakes? Learn from them and then move on. Do
 
VOIP for Your Business
VOIP for Your Business VOIP for Your Business... where VoIP can help. If your business is expanding and you need a larger... often, or have people working full time or par-time from home. If your
 
Complexity is your enemy
Java: Complexity is your enemy Java: Complexity is your enemy Complexity is to software as Heat is to Chips Much of programming is about reducing software complexity. Entire
 
What would you rate as your greatest weaknesses?
What would you rate as your greatest weaknesses? What would you rate as your greatest weaknesses?  ... weakness, you will be respected for your honesty, but your resume will end up
 
How to Protect Your Computer from Spyware and Adware
How to Protect Your Computer from Spyware and Adware...; In this tutorial I will show you how you can protect your Computer from Spyware... Spyware and Adware are spread and infects your computer. How Spyware Comes
 
Create Your Own Package
Create Your Own Package Create Your Own Package                         
 
Web Hosting Guide. What is Web Hosting Plan?
and receive the emails. In this case you can't put your pages on website... your web site. Web hosting plans include the storage limit, bandwidth, access to server resources, database base access etc. for your web site. Different
 
Spy Scanners ? Don?t Compromise your Privacy
Spy Scanners ? Don?t Compromise your Privacy Spy Scanners ? Don?t Compromise your Privacy.... These are scouts that monitor your web activities. The work undercover to check on your
 
Controlling your program
Controlling your program Controlling your program                         
 
How to Protect Your Computer from Spyware and Adware
How to Protect Your Computer from Spyware and Adware...; In this tutorial I will show you how you can protect your Computer from Spyware... Spyware and Adware are spread and infects your computer. How Spyware Comes
 
The Cheapest Way To Speed Up Your PC
The Cheapest Way To Speed Up Your PC The Cheapest Way To Speed Up Your PC  ...; Matt Feichtenbiner Is your computer
 
What is a blog?
is a website in which you will find lot of stuff posted by people from all over... ?.. Precisely, a blog is a website where you will find lot of entries but in chronological... guides of your interest and become its member or audience. It also possess
 
Watch Out For Spyware Programs That Slows Down Your Computer System
Watch Out For Spyware Programs That Slows Down Your Computer System... Your Computer System     ...; Syd Johnson Spyware is a program that once loaded on your computer
 
Bioinformatics Tutorials, Links, Programs
;  Dedicated website to Bioinformatics containing... BioInformatics Tutorial, or anything else that comes to mind. Post your questions
 
JSF Simple Login Application
provides you a simple but the important thing for protecting your any type of web application that makes your website or application secure. This application... application for protecting the page or the website accessibility. This application
 
Prepare Success Stories for Your Interview
Prepare Success Stories for Your Interview Prepare Success Stories for Your Interview      ... the strategy behind those answers and then give a response in your own words. More
 
VoIP User
User-The Voice of IP telephony This website is an independent information... in the World, your SIP software or hardware phone or Asterisk VoIP PBX, together with free outbound PSTN access from your VoIP phone.      
 
Site navigation
 

 

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright © 2006. All rights reserved.