Dynamic Screen Generation With XSL Portland OR

provided by: 
Originally published at Internet.com

Introduction

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: 1. Describe the business problem we would like to solve; that is, creating dynamic pop-up surveys. 2. Design an XML file representing the survey and its questions. 3. Build a stylesheet to be able to publish or dynamically generate surveys. 4. 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.

Survey XML

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? < AnswerType type =" select "> < Option > Daily < Option &ggt; Weekly < Option > Monthly < Question name =" q2 " seq =" 2" > < Text > How do you rate our site? < AnswerType type =" radio "> < Option > Fair < Option > Good < Option > Excellent < Question name =" q3 " seq =" 3 "> < Text > What ideas do you have to improve our site? < AnswerType type =" text_area "/> < Question name =" q4 " seq =" 4 "> < Text > What is your e-mail address? < AnswerType type =" text_field "/> < Question name ="

The root template builds the shell of the HTML document we are generating. It includes the survey name in the title element of the page. The HTML body includes a form which will be used to submit all of the questions. The form will be posted to Survey.jsp to record the survey results. Note that all of the Question elements are selected via the //Question XPath expression. These nodes are sorted by the seq attribute before matching templates are applied.

Let's take a look at the templates that may match these Question nodes.



< xsl:template match =" Question[../@layout = 'label_side'] "> < tr > < td > < xsl:value-of select =" Text "/> < td > < xsl:apply-templates select =" AnswerType "/> < xsl:template match =" Question[../@layout = 'label_top'] "> < tr > < td > < xsl:value-of select =" Text "/> < tr > < td > < xsl:apply-templates select =" AnswerType "/>

One of the two templates matching on Question nodes will be invoked depending on whether a label_side or label_top has been specified in the layout attribute of the source document. The Questiion[../@layout = 'label_side'] XPath expression can be expressed in English as: match this template on Question elements where the parent element (Survey) has a layout attribute equal to label_side.

The Question templates contain the HTML shell of each question. When a label side layout is requested, a single table row will be generated. When a label top layout is requested, two table rows are generated. The Text element is placed inside the table cell representing the question. Templates are applied to AnswerType elements to generate the appropriate widget in its cell.

Now, let's look at the various AnswerType and Option templates. < xsl:template match =" AnswerType[@type = 'text_field'] "> < input type =" text " size =" 40 " name =" {../@name} "/> < xsl:template match =" AnswerType[@type = 'text_area'] "> < textarea name =" {../@name} " cols =" 40 " rows =" 4 "/> < xsl:template match =" AnswerType[@type = 'select'] "> < select name =" {../@name} "> < xsl:copy-of select =" Option" /> < xsl:template match =" AnswerType[@type = 'radio'] "> < xsl:apply-templates select =" Option "/> < xsl:template match ="