November 23, 2014
Hot Topics:

Dynamic Screen Generation With XSL

  • November 13, 2002
  • By Jeff Ryan
  • Send Email »
  • More Articles »


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>
    <td>
      <xsl:apply-templates select="AnswerType"/>
    </td>
  </tr>
</xsl:template>

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

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 Question[../@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>

<xsl:template match="AnswerType[@type = 'text_area']">
  <textarea name="{../@name}" cols="40" rows="4"/>
</xsl:template>

<xsl:template match="AnswerType[@type = 'select']">
  <select name="{../@name}">
    <xsl:copy-of select="Option"/>
  </select>
</xsl:template>

<xsl:template match="AnswerType[@type = 'radio']">
  <xsl:apply-templates select="Option"/>
</xsl:template>

<xsl:template match="AnswerType[@type = 'radio']/Option">
  <input type="radio" name="{../../@name}" value="{.}"/>
  <xsl:value-of select="."/>
</xsl:template>

<xsl:template match="AnswerType[@type = 'check_box']">
  <xsl:apply-templates select="Option"/>
</xsl:template>

<xsl:template match="AnswerType[@type = 'check_box']/Option">
  <input type="checkbox" name="{../../@name}" value="{.}"/>
  <xsl:value-of select="."/>
</xsl:template>

</xsl:stylesheet>

Each AnswerType template matches a certain type attribute. These templates generate the various HTML widgets required by our business customer.

Let's look at some of the interesting points of these templates. First of all, when selecting values from the source document into the output document, the <xsl:value-of> element is commonly used. However, when trying to select data into output attributes, this technique does not work. The curly bracket syntax, name="{../@name}", is used to extract data from the source document into the output document. Another approach, not used here, is to use <xsl:attribute>.

Notice how the Option elements in the source document are rendered differently for select, radio, and check box elements. There are three different templates that may be invoked for Option nodes.

  • For select widgets, the Option nodes are simply copied from the source document to the output document intact with the <xsl:copy-of select="Option"/> statement.
  • For radio widgets, each Option node becomes a radio button followed by text.
  • For check_box widgets, each Option node becomes a check box followed by text.

Sample Survey Output

When we run our stylesheet against our sample XML stream, we get the following output:

By changing the layout attribute of the Survey tag to be label_top, the output would change as follows:

You can continue to play with our Survey stylesheet capabilities by changing the source XML document as follows:

  • Changing the sequence of the questions by modifying the seq attribute of Question elements
  • Changing the AnswerType type attribute to produce various widget types
  • Adding new Question elements

Summary

XSL can be used to dynamically generate screens. In fact, a single stylesheet can be used to generate a multitude of screens. This radically simplifies development and maintenance. However, it might put you out of a job! Or more likely, this frees up your time to move on to bigger and better things.

We designed the user interface portion of a survey application. First, we designed an XML stream to capture the data for a survey. Then, we built a single stylesheet that can be used to generate a multitude of surveys. We looked at some output variations by tweaking the Survey XML. This could be the start of your own survey application. But the rest is up to you.

Code Examples

To download the example XML stream and stylesheet, click here.

About the Author

Jeff Ryan is an architect for Hartford Financial Services. He has eighteen years of experience designing and developing automated solutions to business problems. His current focus is on Java, XML, and Web Services technology. He may be reached at jryan@thehartford.com.
Other Articles Written by Jeff Ryan




Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.


Rocket Fuel