Using XML and XSLT to Personalize a Web Site Part 4: Dynamic Style Sheets and User Customized Layout
␡
- The Project
- New Content
- Changes to the Style Sheet
- Allowing Users to Choose Modules and Layout
- Saving User Choices
- Building the Final Style Sheet Using DOM
- Creating the Template in ASP
- Style Sheet Parameters
- Results
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Allowing Users to Choose Modules and Layout
First, we need to allow the users to actually make their choices. To do that, we'll expand the preferences page that we created in Part 3 to include not only the overall layout, but also the pieces and their locations. Open prefs.html, and add the code in bold below:
<html>
<head><title>Set preferences</title></head>
<body>
<form action="prefs_action.asp" method="post">
<h2 style="text-align:center">Choose page layout</h2>
<input type="radio" name="choice" value="style1.xsl" checked="checked" />
<img src="images/style1.GIF" alt="Layout 1" />
<input type="radio" name="choice" value="style2.xsl" />
<img src="images/style2.GIF" alt="Layout 2" />
<h3 style="text-align:center">Choose portal items</h3>
<p>
News position:
<select name="news">
<option value="none">Do not display</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
</select>
</p>
<p>
TV listings position:
<select name="tvlistings">
<option value="none">Do not display</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</p>
<p>
Weather position:
<select name="weather">
<option value="none">Do not display</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
Default location:
<select name="weatherlocation">
<option value="Saskatoon, Canada">Saskatoon, Canada</option>
<option value="Tampa, FL">Tampa, FL</option>
<option value="Atlanta, GA">Atlanta, GA</option>
<option value="London, England">London, England</option>
<option value="Dublin, Ireland">Dublin, Ireland</option>
<option value="Paris, France">Paris, France</option>
</select>
</p>
<p style="text-align:center">
<input type="submit" value="Save Changes" />
</p>
</form>
</body>
</html>
To accommodate the extra material, we increased the size of the popup window as part of the style sheet. Save the file, and point your browser to http://localhost/main.asp, http://localhost/examples/servlet/main or to the appropriate URL if you have your main page in a different location.
Clicking the "Change Layout" link should show a window like that shown in Figure 3.
){kind=link}
Figure 3 The user may choose portal items and layout.