Skip to main content

Redesigning the BluePrints Solutions Catalog Viewer Application to use a fully declarative model ....

Posted by basler on February 23, 2007 at 12:07 PM PST

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.



Snap shot of the new viewer application's main page src="http://blogs.sun.com/basler/resource/viewer2_0.jpg"
style="width: 600px; height: 503px;">



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 href="http://blogs.sun.com/basler/entry/including_mashups_like_digg_on">"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.

style="color: rgb(51, 51, 255);">    <%-- Only parse bpcatalog.xml once --%>style="color: rgb(51, 51, 255);">    style="color: rgb(51, 51, 255);">    <%@ include file="/WEB-INF/bpcatalog.xml" %>style="color: rgb(51, 51, 255);">    style="color: rgb(51, 51, 255);">style="color: rgb(51, 51, 255);">



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





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.

[prettify]<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>[/prettify]




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

style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> AJAX Programming Modelstyle="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> AJAX uses JavaScript in an HTML page to make asynchronous calls to the style="color: rgb(51, 51, 255);"> 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.style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> Java Persistence API Modelstyle="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> Best Practices for using Java Persistence APIstyle="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> BluePrints AJAX Componentsstyle="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);"> style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);">
style="color: rgb(51, 51, 255);"> A gallery of custom components built using JavaServer Facesstyle="color: rgb(51, 51, 255);"> technology and sample applications to demonstrate them. style="color: rgb(51, 51, 255);">




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 href="https://blueprints.dev.java.net/servlets/ProjectDocumentList?folderID=4144&expandFolder=4144&folderID=4144">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:



Hope this helps - Thanks - Mark






Related Topics >>