LanguagesJSP: Creating a Configurable Home Page

JSP: Creating a Configurable Home Page content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Dynamic Home Pages

One of the main advantages of JavaServer Pages is the ability to generate dynamic content. JSPs generate dynamic HTML pages by using Java control structures like for loops and if statements. As a result, forms can be generated dynamically following some specified logical layout.

Generating dynamic content in Web applications is important when the content must reflect the most current and available data and personalized information. In this article, Stephanie and Jose show you how to create a configurable Home Page using

Creating A Configurable Home Page

Configurable Web pages is currently one of the very hot features Web sites are rushing to provide. They usually keep track of your personal preferences whenever you visit the Web site and allow you to configure your personal version of the Web site.

The following code shows the implementation of a simple configurable Web page that allows users to toggle the position of the navigation menu left and right, turn the footer on or off, andchange the background color. The navigation menu, main content section, and footer are included HTML files using the JSP directive <jsp:include> so that you can change these files to customize this example to your own particular implementation. 

The example uses URL rewriting to store the state of the page in the URL of the hyperlinks it generates. The state consists of several parameters that keep track of the layout of the page, such as the background color, the position of the navigation menu, and whether the footer is on or off. 

Listing 1: configurableHomePage.jsp

1: <HTML><HEAD><TITLE>A Configurable Home Page</TITLE></HEAD>
2: <% String change = request.getParameter("change");
3:     String bgColorState = request.getParameter("bgColor");
4:     String navState = request.getParameter("nav");
5:     String footerState = request.getParameter("footer");
6:     if(change!=null){
if(footerState.equals("on")) footerState = "off";
9:             else footerState = "on";
10:        }
11:        if(change.equals("nav"))
if(navState.equals("left")) navState = "right";
13:            else navState = "left";
14:        if(change.startsWith("color"))
15:             bgColorState = change.substring(5);
16:    } else {
17:        bgColorState="yellow";
18:        navState="left";
19:        footerState="on";
20:    }
21:    String state = "&footer="+footerState+"&nav="+navState+
23: %>
24: <BODY BGCOLOR=<%=bgColorState%>>
26: <% String leftPercent, rightPercent;
27:     if(navState.equals("left")){
28:         leftPercent="30%"; rightPercent="70%";
29:     } else {
30:         leftPercent="70%"; rightPercent="30%";
31:     }
32: %>
33:     <TR><TD WIDTH=<%=leftPercent%>>
34:         <% if(navState.equals("left")){ %>
35:             <jsp:include page="nav.html" flush="true"/>
36:         <% } else { %>
<jsp:include page="content.html" flush="true"/>
38:         <% } %>
39:         </TD>
40:         <TD WIDTH=<%=rightPercent%>>
41:         <% if(navState.equals("left")){ %>
42:             <jsp:include page="content.html" flush="true"/>
43:         <% } else { %>
44:             <jsp:include page="nav.html" flush="true"/>
45:         <% } %>
46:     </TD></TR>
47: </TABLE>
48: <% if(footerState.equals("on")) { %>
49:         <jsp:include page="footer.html" flush="true"/></TD>
50: <% } %>
51: <HR>
53: <TR><TD><A HREF="configurableHomePage.jsp?change=footer<%=state%>">
54:         <IMAGE SRC="images/footerToggle.gif"></A><BR>footer<BR>on/off</TD>
55:     <TD><A HREF="configurableHomePage.jsp?change=nav<%=state%>">
56:     <IMAGE SRC="images/navToggle.gif"></A><BR>nav bar<BR>left/right</TD>
57:     <TD><A HREF="configurableHomePage.jsp?change=colorblue<%=state%>">
58:     <IMAGE SRC="images/bgColorBlue.gif"></A><BR>bg color<BR>to blue</TD>
59:     <TD><A HREF="configurableHomePage.jsp?change=coloryellow<%=state%>">
60:     <IMAGE SRC="images/bgColorYellow.gif"></A><BR>bg color<BR>to yellow</TD>
61:     <TD><A HREF="configurableHomePage.jsp?change=colorgreen<%=state%>">
62:     <IMAGE SRC="images/bgColorGreen.gif"></A><BR>bg color<BR>to green</TD>
63:     <TD><A HREF="configurableHomePage.jsp?change=colororange<%=state%>">
64:     <IMAGE SRC="images/bgColorOrange.gif"></A><BR>bg color<BR>to orange</TD>
65: </TR>
66: </TABLE>
67: </CENTER>
68: </BODY></HTML>

Lines 2 through 5 retrieve the values of parameters change, bgColor, nav, and footer and store them in state variables bgColorState, navState, and footerState. These parameters are kept in the query string to remember the state of the page from request to request. The change parameter is used to determine whether the user has changed the color of the background, toggled the position of the navigation bar, or toggled the footer on or off. If the change is not null in line 6, then the JSP determines what type of change. 

If it was footer, then lines 8 and 9 toggle the state of the footer depending on what it was in the previous request. If the change is to the navigation bar, then in lines 12 and 13 the position is toggled between left and right. If the change is to the color of the background, then the color is set in line 15 to whatever color the user chose. If the change is null, then the default values for the state variables are chosen in lines 17 through 19. Line 21 generates a state variable that contains the concatenation of all the state variables names and their values separated by &.

The state variable will be used as part of the query string in hyperlinks to the JSP itself. This way the state of the current page will be preserved in subsequent requests and the page can be generated as stipulated in the query string. Line 24 declares the BODY tag with the background color set to the bgColorState. A table is used in line 25 to lay out the different parts of the Web page. If navState is left, the navigation bar will be on the left and the content of the page on the right. Lines 27 through 46 set the percentages and contents of two columns. One contains the navigation bar and the other the content of the page. JSP includes are used in lines 35, 37, 42, and 44 to include other HTML pages that make up the navigation bar and content. Lines 48 through 50 check to see if the footer should be included as well.

Lines 52 through 66 declare a table with several hyperlinks. Each hyperlink points to the JSP itself. Note that the query string of each URL in the hyperlinks contains a change parameter followed by the state variable. The hyperlinks use icons and some text to describe their purpose. Figure 1 shows the Web page at several stages of interaction with the user. 
Figure 1

The configurable Web page at several stages of its life: (a) shows all the components of the page in their default state; (b) shows the Web page with the navigation menu toggled to the
left; and (c) shows the Web page with the footer toggled off.

 Figure a:

 Figure b:

Figure c:


There are many ways to use JSPs to generate dynamic content. This article showed you how to configure a Web page according to a user’s preference.

About the Authors:

Jose Annunziato received his Master’s and Doctor of Science degrees in computer science from the University of Massachusetts. Lowell. Dr. Annunziato works for BEA Systems where he develops courseware products such as WebLogic Server, WebLogic Commerce Server, and WebLogic Enterprise.

Stephanie Fesler Kaminaris has written hundreds of pages of course materials on Web development, such as HTML, JavaScript, Active Server Pages, VBScript, and CGI programming. She has also written course materials for BEA’s WebLogic Server courses, such as WebLogic as a Web Server, Java Server Pages, Servlets, and Web Applications.

This article is based on techniques presented in Sams Teach Yourself JavaServer Pages in 24 Hours (0672320231) – a book by Jose Annunziato and Stephanie Fesler Kaminaris, with Sams Publishing.

&copy Copyright Sams
, All Rights Reserved

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories