Using XTP for Style Changes

Matching Tags with Attributes

Suppose you want to keep track of several different counts within the system and the Web designer wants to use those counts on the Web page. You could create new tags for each of the counts, or you could just create one tag and allow different attribute keys. Let's start the process by creating a JSP home page that will initialize two application variables called user and total. The user variable will increment each time the JSP page is executed, and the total variable will always be 1. The page will include a link to an XTP page called allcounts.xtp. The JSP code is:

 <%     Integer count;     count = (Integer) application.getAttribute("user");     if (count == null)       count = new Integer(1);     else       count = new Integer(count.intValue() + 1);     application.setAttribute("user", count);     count = (Integer) application.getAttribute("total");     if (count == null)       count = new Integer(1);     application.setAttribute("total", count); %> <a href="allcounts.xtp">Count Em</a>

When a user clicks the Count Em link, the system browses to the allcounts.xtp page:

 <?xml-stylesheet href='count.xsl'?> <HTML> <BODY> Current User Count: <count /><BR> Total Count: <count /> <BR> <a href="index.jsp">Home</a> </BODY> </HTML>

The page includes a reference to the count.xsl stylesheet. The XTP page includes two new tags called <count>. The tags allow a single attribute called id. The id attribute is used to determine which count variable from the Application object should be displayed. The XSL file matches against the <count> element as well as the attribute. The XSL file is as follows:

 <xsl:output disable-output-escaping='true'/> <xsl:template match='* | @* ' >   <xsl:copy>     <xsl:apply-templates select='node()|@*'/>   </xsl:copy> </xsl:template> <xsl:template match='count[@id]'>   <jsp:expression>      <xsl:text>application.getAttribute("</xsl:text>      <xsl:value-of select='@id'/>      <xsl:text>")</xsl:text>   </jsp:expression> </xsl:template>

As you can see, we have the code which will pass selected text directly to the output in the XSL as well as an <xsl:template> tag matching against count[@id]. The [@id] represents the id attribute within the <count> tag. When this code is executed, the system outputs a JSP expression that looks like this:

 application.getAttribute("user")

The value in the getAttribute() method call is based on the value of the id attribute in the <count> tag. The <xsl:value-of> tag is used to obtain the value of the id attribute using the @id key. The directory structure for all three files looks like this:

 /users/allcounts.xtp /users/index.jsp /users/WEB-INF/xsl/count.xsl

Note that we placed a <web-app> element in the resin.conf file for the new application directory. The full element looks like:

 <web-app id='/users' />

Browse to the index.jsp file using the URL

 http://localhost:8080/users/index.jsp

You'll see the output shown in Figure 5.2.

click to expand
Figure 5.2: The index.jsp file's output.

The index.jsp file initializes or updates the application variables and displays a link to the allcount.xtp file. When the user clicks the Count Em link, the output shown in Figure 5.3 is displayed.

click to expand
Figure 5.3: The allcounts.xtp file's output.

Once at the allcounts.xtp page, the user only has to click Home to return to the indexjsp file. This action causes the various application variables to be updated, as shown in Figure 5.4.

click to expand
Figure 5.4: The updated allcounts.xtp output