The BluePrints Solutions Catalog Viewer application pulls numerous articles and their samples, that comprise the particular version of the catalog, together for easy viewing by the end user.  The original viewer was an application created by Mark Roth, whose structure and content was mostly determined by an XML file.  As the original viewer's requirements evolved, some pages used the frame paradigm to show the articles with their sample applications.

In redesigning the Viewer, the legacy requirements still had to be fulfilled and a more robust user experience was desired.  The main goal for the redesign of the Viewer was to give the user a better, more modern experience and move the catalog's creation back to a fully declarative model to facilitate the multiple versions of the BluePrints Solutions Catalog that are going to be released to target specific audiences.  Another requirement was that the sample applications had to work as an independent unit as well as look like a cohesive part of the new viewer.  The goals were attained by first altering the declarative XML file to meet the viewers current needs.  Secondly, by dynamically creating a template that only contained the solutions that were to be bundled with the particular release of the catalog and shown to the target audience. 

To update the viewer's look and feel, I chose to use the open source components readily available from Dojo.  I chose to use the Dojo's accordion and tab widgets that were fairly robust in the 0.4.1 version of Dojo and they had the user experience I was looking for.  With a little CSS and Javascript coding, I achieved a look that was pleasing, informative and easy to navigate that is depicted below.



I also linked the articles to the Digg.com site via a delegated mashup, so users could easily make comments and bookmark the on-line versions of the articles.  An overview of creating this Delegated Mashup is detailed in a previous blog entitled "Adding Mashups like Digg to your page"

Coding Details:

To get to the coding details, the main viewer page is created using the JSTL XML libraries with XPath, which made it easy to pull items from the declarative XML file and populate the page. Once the XML file was made available from a variable in the JSP page, looping through the contents using Xpath allowed the creation of the different areas of the page.  In this case, before the JSP page can use the XML file it first has to be read into a variable.  The code below is stored in a custom tag that reads in the viewers XML file that dictates the viewer's display.

<c:if test="${empty bpcatalogXmlCached}">
    <%-- Only parse bpcatalog.xml once --%>
    <x:parse var="bpcatalogXmlCached" scope="application">
    <%@ include file="/WEB-INF/bpcatalog.xml" %>
    </x:parse>
</c:if>
<c:set var="result" value="${bpcatalogXmlCached}" />

The code above is executed when the index.jsp page calls the tag as follows:

<tags:parsebpcatalogxml var="bpcatalogxml"/>

After the tag is executed the "bpcatalogxml" variable contains a copy of the bpcatalog.xml file for the current version of the catalog you are running.  This variable can then be used throughout your page in conjunction with other taglib functions to loop through and render your markup facilitated by XPath notation.  The code below uses the JSTL XML extensions to loop through the categories to be shown, selected using XPath notation.

<table width="100%" cellspacing="10">
 <x:forEach var="category" select="$bpcatalogxml/bpcatalog/category"> 
 <c:set var="catid">
 <x:out select="@id"/>
 </c:set>
 <c:set var="catname">
 <x:out select="$category/category-name"/>
 </c:set>
 <tr>
 <td valign="top" width="100%">
 <big>
 <b>
 <a href="javascript:openAccordion('${catid}')">${catname}</a>
 </b>
 </big>
 <br/>
 <div class="pad6"></div>
 <x:out select="$category/description"/>
 </td>
 </tr>
 </x:forEach>
</table>

The code above creates the Dojo's accordion's pages from the bpcatalog.xml fragment below:

<bpcatalog>
 <!-- 
 *********************************************
 Categories 
 *********************************************
 -->
 <category id="Ajax" innetbeans="true">
 <category-name>
 AJAX Programming Model
 </category-name>
 <description>
 AJAX uses JavaScript in an HTML page to make asynchronous calls to the server from which the page loaded and fetch an XML document from a server-side component asynchronously. Upon completion of a request JavaScript may update or modify the Document Object Model (DOM) of the HTML page based on the resulting XML document. Only the affected portions of the HTML DOM are are re-rendered in the HTML page. The term Asynchronous JavaScript and XML has emerged recently to describe this interaction model.
 </description>
 </category>
 <category id="JavaPersistence" innetbeans="true">
 <category-name>
 Java Persistence API Model
 </category-name>
 <description>
 Best Practices for using Java Persistence API
 </description>
 </category>
 <category id="AjaxComponents" innetbeans="true">
 <category-name>
 BluePrints AJAX Components
 </category-name>
 <description>
 A gallery of custom components built using JavaServer Faces
 technology and sample applications to demonstrate them. 
 </description>
 </category>

 ... 

</bpcatalog>

The rendered HTML markup from the code and the source XML fragment above is as follows:

<table width="100%" cellspacing="10">
 <tr>
 <td valign="top" width="100%">
 <big>
 <b>
 <a href="javascript:openAccordion('Ajax')">AJAX Programming Model</a>
 </b>

 </big>
 <br/>
 <div class="pad6"></div>
 AJAX uses JavaScript in an HTML page to make asynchronous calls to the 
 server from which the page loaded and fetch an XML document from a server-side component asynchronously. Upon completion of a request JavaScript may update or modify the Document Object Model (DOM) of the HTML page based on the resulting XML document. Only the affected portions of the HTML DOM are are re-rendered in the HTML page. The term Asynchronous JavaScript and XML has emerged recently to describe this interaction model.
 </td>
 </tr>
 <tr>
 <td valign="top" width="100%">
 <big>
 <b>
 <a href="javascript:openAccordion('JavaPersistence')">Java Persistence API Model</a>
 </b>
 </big>
 <br/>
 <div class="pad6"></div>
 Best Practices for using Java Persistence API
 </td>
 </tr>
 <tr>
 <td valign="top" width="100%">
 <big>
 <b>
 <a href="javascript:openAccordion('AjaxComponents')">BluePrints AJAX Components</a>
 </b>
 </big>
 <br/>

 <div class="pad6"></div>
 A gallery of custom components built using JavaServer Faces
 technology and sample applications to demonstrate them. 
 </td>
 </tr>
</table>

As you can see this is a very powerful way to make you page dynamic using XML.  Also the XML source doesn't have to come from a static file, it can be generated on the fly to further enhance the user experience and create custom views.  There is a second part to the new viewer and that is the bundler that puts only the pertinent samples and documents together based on a defining template, but that will be explained in another blog.  If you want to take a look at the source of the viewer you can download the BluePrints Solutions Catalog for Java EE 5 and look in the INSTALL/tools/bpcatalog directory.  The bpcatalog source is Netbeans enabled and can be easily transversed using the IDE.

Further Reading:

• 
• Mark's blog on blogs.sun.com
  
• BluePrints Solutions Catalog for Java EE 5 (Download)
• Glassfish Application Server
• JSTL for XML
  
• XPath Specification
• Netbeans IDE

Hope this helps - Thanks - Mark