- Dynamic Titles
- Dynamic Tables
- Dynamic Forms
- A Configurable Home Page
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
A Configurable Home Page
Configurable Web pages are 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.
Listing 4 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, and change the background color. The navigation menu, main content section, and footer are included HTML files using the JSP directive @lt;jsp:include@gt; 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 4 configurableHomePage.jsp
1: @lt;HTML@gt;@lt;HEAD@gt;@lt;TITLE@gt;A Configurable Home Page@lt;/TITLE@gt;@lt;/HEAD@gt;
2: @lt;% 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){
7: if(change.equals("footer")){
8: if(footerState.equals("on")) footerState = "off";
9: else footerState = "on";
10: }
11: if(change.equals("nav"))
12: 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+
22: "&bgColor="+bgColorState;
23: %@gt;
24: @lt;BODY BGCOLOR=@lt;%=bgColorState%@gt;@gt;
25: @lt;TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0@gt;
26: @lt;% String leftPercent, rightPercent;
27: if(navState.equals("left")){
28: leftPercent="30%"; rightPercent="70%";
29: } else {
30: leftPercent="70%"; rightPercent="30%";
31: }
32: %@gt;
33: @lt;TR@gt;@lt;TD WIDTH=@lt;%=leftPercent%@gt;@gt;
34: @lt;% if(navState.equals("left")){ %@gt;
35: @lt;jsp:include page="nav.html" flush="true"/@gt;
36: @lt;% } else { %@gt;
37: @lt;jsp:include page="content.html" flush="true"/@gt;
38: @lt;% } %@gt;
39: @lt;/TD@gt;
40: @lt;TD WIDTH=@lt;%=rightPercent%@gt;@gt;
41: @lt;% if(navState.equals("left")){ %@gt;
42: @lt;jsp:include page="content.html" flush="true"/@gt;
43: @lt;% } else { %@gt;
44: @lt;jsp:include page="nav.html" flush="true"/@gt;
45: @lt;% } %@gt;
46: @lt;/TD@gt;@lt;/TR@gt;
47: @lt;/TABLE@gt;
48: @lt;% if(footerState.equals("on")) { %@gt;
49: @lt;jsp:include page="footer.html" flush="true"/@gt;@lt;/TD@gt;
50: @lt;% } %@gt;
51: @lt;HR@gt;
52: @lt;TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1@gt;
53: @lt;TR@gt;@lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=footer@lt;%=state%@gt;"@gt;
54: @lt;IMAGE SRC="images/footerToggle.gif"@gt;@lt;/A@gt;@lt;BR@gt;footer@lt;BR@gt;on/off@lt;/TD@gt;
55: @lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=nav@lt;%=state%@gt;"@gt;
56: @lt;IMAGE SRC="images/navToggle.gif"@gt;@lt;/A@gt;@lt;BR@gt;nav bar@lt;BR@gt;left/right@lt;/TD@gt;
57: @lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=colorblue@lt;%=state%@gt;"@gt;
58: @lt;IMAGE SRC="images/bgColorBlue.gif"@gt;@lt;/A@gt;@lt;BR@gt;bg color@lt;BR@gt;to blue@lt;/TD@gt;
59: @lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=coloryellow@lt;%=state%@gt;"@gt;
60: @lt;IMAGE SRC="images/bgColorYellow.gif"@gt;@lt;/A@gt;@lt;BR@gt;bg color@lt;BR@gt;to yellow@lt;/TD@gt;
61: @lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=colorgreen@lt;%=state%@gt;"@gt;
62: @lt;IMAGE SRC="images/bgColorGreen.gif"@gt;@lt;/A@gt;@lt;BR@gt;bg color@lt;BR@gt;to green@lt;/TD@gt;
63: @lt;TD@gt;@lt;A HREF="configurableHomePage.jsp?change=colororange@lt;%=state%@gt;"@gt;
64: @lt;IMAGE SRC="images/bgColorOrange.gif"@gt;@lt;/A@gt;@lt;BR@gt;bg color@lt;BR@gt;to orange@lt;/TD@gt;
65: @lt;/TR@gt;
66: @lt;/TABLE@gt;
67: @lt;/CENTER@gt;
68: @lt;/BODY@gt;@lt;/HTML@gt;
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 the 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 will be on the right. Lines 27 through 46 set the percentages and contents of two columns. One contains the navigation bar, and the other contains 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 4 shows the Web page at several stages of interaction with the user.
Figure 4
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.
){kind=link}
){kind=link}
){kind=link}