Dynamic Screen Generation With XSL
One of the capabilities of XSL (eXtensible Stylesheet Language) is to dynamically generate screens from meta data. Rather than code HTML over and over again, a single stylesheet can be used to generate an infinite number of data capture screens. Maintenance of these screens also becomes easier because a change to the common stylesheet will be reflected on all pages.
To demonstrate this concept, we'll build the user interface for a dynamic survey application together. This will provide a real working component that can be extended for your application. The following outline is a roadmap for how we'll cover the topic:
- Describe the business problem we would like to solve; that is, creating dynamic pop-up surveys.
- Design an XML file representing the survey and its questions.
- Build a stylesheet to be able to publish or dynamically generate surveys.
- Wrap up by summarizing what we've learned.
The Business Problem
Our business customer would like to add dynamic pop-up surveys to portions of the company site to gain feedback from end users. The customer wants the ability to dynamically present short, frequent surveys, targeted toward certain users as well as some general surveys that apply to all users.
Our customer would like the survey application to support various types of questions whose answers might be captured by any of the following widget types:
- Drop-down boxes
- Radio groups
- Check box groups
- Text Fields
- Text Areas
Our customer would like the option of having the question text appear above the question, or to the left of the question. Once a survey has been created, it may be necessary to re-order the questions, or even to insert new questions as the survey results begin to come in.
As our customer is describing the functionality they would like, we realize that XSL can help make generation of the survey screens a snap.
Let's design an XML stream to capture the data we are going to need to present a survey and its questions.
A Survey will contain a number of Question nodes. Each Question will contain a Text node representing the question wording and an AnswerType node representing which type of data capture widget will be used to gather the answer. AnswerType nodes may have multiple Option nodes representing the options the user is allowed to choose from in answering a given question.
Now let's compose a sample XML stream to flesh out the details:
<Survey name="Site Survey" layout="label_side"> <Question name="q1" seq="1"> <Text>How often do you visit our site?</Text> <AnswerType type="select"> <Option>Daily</Option> <Option>Weekly</Option> <Option>Monthly</Option> </AnswerType> </Question> <Question name="q2" seq="2"> <Text>How do you rate our site?</Text> <AnswerType type="radio"> <Option>Fair</Option> <Option>Good</Option> <Option>Excellent</Option> </AnswerType> </Question> <Question name="q3" seq="3"> <Text>What ideas do you have to improve our site?</Text> <AnswerType type="text_area"/> </Question> <Question name="q4" seq="4"> <Text>What is your e-mail address?</Text> <AnswerType type="text_field"/> </Question> <Question name="q5" seq="5"> <Text>I use the following languages:</Text> <AnswerType type="check_box"> <Option>Java</Option> <Option>C#</Option> <Option>XSL</Option> </AnswerType> </Question> </Survey>
We begin with our Survey element. Its name attribute represents the survey title. We'll also specify whether the question text will appear above or below the widget through the layout attribute.
Our Survey element will contain from 1 to n Question elements. Each Question will have a mandatory name attribute. This will be the name used in the generated HTML widgets. It will also have a seq attribute that will determine the sequence of questions on the generated screen.
All Question elements will have a Text element representing the text that will appear to the user. The AnswerType element will represent all of the widget types that our customer has asked us for: select, radio, checkbox, text_field, text_area.
The select, radio, and checkbox AnswerType elements can contain from 1 to n Option elements describing the options. Multiple options can be chosen from check box widgets, while only a single option can be chosen from drop-down and radio widgets.
Survey Style Sheet
We've now designed a XML stream that can be used to represent a multitude of surveys. Now, let's build a stylesheet that can present any of these surveys. We'll take a look at the templates in this stylesheet bit by bit beginning with our root template.
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html" indent="yes"/> <xsl:template match="/"> <html> <head> <title><xsl:value-of select="Survey/@name"/></title> </head> <body> <form action="Survey.jsp"> <table> <xsl:apply-templates select="//Question"> <xsl:sort select="@seq"/> </xsl:apply-templates> </table> </input type="submit" value="Submit Survey" name="submit"/> </form> </body> </html> </xsl:template>