Layout of the page, from a graphical mock up.
Assume the graphical department has given you a Photoshop mockup of what the page should look like. At this point in the design, the Use Cases have also been define and Activity Diagrams created and reviewed.
The screen mockup, an early stage of NegotiaNet, is shown below.
We will also tie this in to the use cases defined at an earlier stage.
We can divide the page into the following Sections
Banner – currently, this is only a simple graphic. This could also be a full top banner, complete with clickable links.
Search Box – this will simply be a static drop down listing several search types.
Category List – This section itself contains many items. There are textual information and hot links (privacy policy, etc). These are best represented as pure htm.
A Log in box. This may also be HTML. However, if the user is already logged in, we should recognize this. Therefore, this component is somewhat dynamic
The category list is also a dynamic component, typically begin data driven from a file or database
Main Information Area- In this case, the main area of static text. For a true portal, this section should be database driven, but for simplocity we will keep it static. This takes nothing away from the learning value of this example
Top Menu
From this analysis, we have identified two dynamic components; category list and login box. We therefore, can build the rest of the page as HTML. We will leave two placeholders for the dynamic pieces.
We can now build the structure of our page. Lets decide how to transform the dynamic content.
Categories – this should use an XSL transformation
Login – two options are reasonable here. We could pass a simple value to the JSP pape and implement the decision there. This option is similar to querying the session object directly. For such a small bit of functionality, it is now unreasonable to do this entirely in jsp. The other option is to apply an XSL transformation and display a login box or a sign out box. Since this is an illustrative example, lets illustrate passing simple values and pass a simple value (1 or 0) to the jsp.
We need the following components to implement the home page.
- Implementation class for each dynamic component
- JSP for the page
- XML Configuraiton File
Implementation class – We will create two classes. Our standard puts these in the control package of the application. The names will be similar to the use case.
We therefore create the two java files needed
CategoryList.java
LoginPrompt.java
Here is the CategoryList.java source at this point. The source, only a shell at this point.
package
com.negotianet.control;
import
org.w3c.dom.Document;
import
com.infoblazer.base.*;
/**
*
@author
MoskowiD
*
*
To
change
this
generated
comment
edit
the
template
variable
“typecomment”:
*
Window>Preferences>Java>Templates.
*
To
enable
and
disable
the
creation
of
type
comments
go
to
*
Window>Preferences>Java>Code
Generation.
*/
public
class
CategoryList
implements
BaseFlow{
/**
*
@see
com.infoblazer.base.BaseFlow#deleteData(Document)
*/
public
String
deleteData(Document
document)
{
return
null;
}
/**
*
@see
com.infoblazer.base.BaseFlow#getBean(Document)
*/
public
BaseData
getBean(Document
document)
{
return
null;
}
/**
*
@see
com.infoblazer.base.BaseFlow#getData(Document)
*/
public
String
getData(Document
document)
{
return
null;
}
/**
*
@see
com.infoblazer.base.BaseFlow#listData(Document)
*/
public
String
listData(Document
document)
{
return
null;
}
/**
*
@see
com.infoblazer.base.BaseFlow#setData(Document)
*/
public
String
setData(Document
document)
{
return
null;
}
}
JSP Page
XML Configuration File.
Most of our decision are made to create the file. Here is the starting point.
<?xml version=”1.0″ encoding=”UTF-8″?>
<!– edited with XML Spy v3.5 NT (http://www.xmlspy.com) by David Moskowitz (GE – CIS) –>
<!DOCTYPE Base SYSTEM “http://www.infoblazer.com/dtd/base.dtd”>
<Base usepool=”false“ newthread=”false“>
<Classes>
<Class id=”1“ scope=”application“ applyxsl=”true“ use=”xml“>
<Classname>com.negotianet.control.CategoryList</Classname>
<Method>list</Method>
<Xslfile>categorylist.xsl</Xslfile>
<Timeout>10000000</Timeout>
</Class>
<Class id=”2“ scope=”page“ applyxsl=”false“ use=”xml“>
<Classname>com.negotianet.control.LoginPrompt</Classname>
<Method>get</Method>
</Class>
</Classes>
</Base>
Configuration Details
Lets’ look at some of the more important lines in the file
<Base usepool=”false“ newthread=”false“>
this line turns threading off. Initial development should always be done in a non-threaded manner.
<Class id=”1“ scope=”application“ applyxsl=”true“ use=”xml“>
The CategoryList class can be set to application scope (scope=”application“), since it can be shared among all users of the applications. XSL will be applied (“ applyxsl=”true“) and the return value will be XML (use=”xml“).
<Classname>com.negotianet.control.CategoryList</Classname>
This is the class we just defined.
<Method>list</Method>
Let’s use the list method since this operation is retrieval of a list of records
If an XSL transformation is used, you must define it in the xml. we’ll keep the names consisten.t
<Xslfile>categorylist.xsl</Xslfile>
If caching at the session or application level is employed, specify a refresh period
Timeout>10000000</Timeout>
This value in milliseconds controls the refresh of the page. It would only be necessary to refresh at all if the category lists are changing, maybe based on user input. It may be the case that categories only change during system maintenance windows, so no refresh would then be necessary.
<Class id=”2“ scope=”page“ applyxsl=”false“ use=”xml“>
Make sure a new id is given 9 id=”2“). Scope will be set to page, since we don’t want this value stored, since it may change during user login and logout. We are not applying a transformation
applyxsl=”false“. We are transfering a string value, so we will still indicate xml user (use=”xml“).
That is the initial configuration file settings.
Lets create the home page shell now, using simple output and transformations in the implementation class.
Luckily, the graphics department has also given us a html version of the page, suing whatever wysiwyg program they are use to. Without prettying it up, here is there version. We’ll substitte our template for the dynamic pieces, and make the whole thing into a JSP.
The first figure contains the original HTML. This will be a bit longwinded, as most of it is not very relavant, but it illustrates the tasks we typically must faced when integrating back end functionalty into existing or mock html. The dynamic sections which must be replaced are highlighted.
<html>
<head>
<title>NegotiaNet™</title>
<link rel=”stylesheet” type=”text/css” href=”css/msie.css”>
</head>
<body background=”images/background.gif” bgcolor=”#D1E8FF” topmargin=”0″ leftmargin=”0″ marginwidth=”0″ marginheight=”0″ rightmargin=”0″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<!——————– START HEADER ——————–><tr bgcolor=”#FFFFFF”>
<td colspan=”3″ valign=”top” width=”150″><a href=”http://www.negotianet.com/”><img src=”images/logo.gif” width=”150″ height=”50″ border=”0″></a></td>
<td colspan=”4″ width=”100%”><table border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td>
<form action=”FMPro” method=”post”>
<input type=”hidden” name=”-DB” value=”nnp.fp5″>
<input type=”hidden” name=”-Lay” value=”0″>
<input type=”hidden” name=”-format” value=”srchRed.html”>
<input type=”hidden” name=”-error” value=”error.html”>
<input type=”hidden” name=”-Token” value=””>
<input type=”hidden” name=”-Token.1″ value=””>
<input type=”hidden” name=”-Token.2″ value=””>
<input type=”hidden” name=”-Token.3″ value=””>
<input type=”hidden” name=”-Token.4″ value=””>
<input type=”hidden” name=”-Token.7″ value=””>
<input type=”hidden” name=”-Token.8″ value=””>
<input type=”hidden” name=”-Token.9″ value=””>
<b>Search by</b>
</td>
<td>
<select name=”-Token.6″>
<option value=”prodName”>Product Name
<option value=psdsc>Description
<option value=pman>Manufacturer
</select>
</td>
<td><input type=”text” name=”-Token.5″ value=”” size=”15″></td>
<td><input type=”image” src=”images/buttonFindIt.gif” width=”50″ height=”18″ name=”-View” alt=”Find It” border=”0″></form>
</td>
</tr>
</table></td>
</tr>
<!——————– END HEADER ——————–>
<tr>
<td valign=”top” rowspan=”3″><img src=”images/clear.gif” width=”10″ height=”1″></td>
<td valign=”top” rowspan=”3″ width=”130″><img src=”images/clear.gif” width=”1″ height=”10″><br><!——————– START INDEX ——————–><table bgcolor=”#FFFFFF” cellpadding=”0″ cellspacing=”1″ width=”130″ border=”0″>
<!——————– START CATEGORIES ——————–><tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td><img src=”images/nav/categories.gif” width=”55″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Arts%20%26%20Antiques&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Arts%20%26%20Antiques&-Op=eq&sec=nn&-Find”>Arts & Antiques</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Autos&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Autos&-Op=eq&sec=nn&-Find”>Autos</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Computers&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Computers&-Op=eq&sec=nn&-Find”>Computers</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Furniture&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Furniture&-Op=eq&sec=nn&-Find”>Furniture</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Gift%20Certificates&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Gift%20Certificates&-Op=eq&sec=nn&-Find”>Gift Certificates</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Real%20Estate&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Real%20Estate&-Op=eq&sec=nn&-Find”>Real Estate</a><br><a class=”smallwhite” href=”FMPro?-db=nnp.fp5&-lay=0&-format=res.html&-error=res.html&prodCat0=Test&-max=10&prodStat=1&-Token=&-Token.1=&-Token.2=&-Token.3=Test&-Op=eq&sec=nn&-Find”>Test</a><br>
</td>
</tr>
</table>
</td>
</tr>
<!——————– END CATEGORIES ——————–>
<!——————– START MY ACCOUNT ——————–>
<tr>
<td>
<table bgcolor=”#FF3300″ width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/signIn.gif” width=”34″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<form action=”FMPro” method=”post”>
<input type=”hidden” name=”-db” value=”nnu.fp5″>
<input type=”hidden” name=”-format” value=”login.html”>
<input type=”hidden” name=”-error” value=”login.html”>
<span class=”errormsg”>
</span>
Username<br>
<input type=”hidden” name=”username” value=”==”>
<input type=”text” name=”username” value=”” size=”12″><br>
Password<br>
<input type=”hidden” name=”password” value=”==”>
<input type=”password” name=”password” value=”” size=”12″>
<input type=”hidden” name=”-Op” value=”eq”>
<input type=”hidden” name=”sec” value=”nn”>
<input type=”hidden” name=”-Token.9″ value=”FMPro?-db=nnp.fp5&-format=root.html&-lay=0&-op=eq&sec=nn&-find=”>
<input type=”hidden” name=”-Script” value=”login”>
</td>
</tr>
<tr>
<td align=”center”><input type=”image” src=”images/buttonSignIn.gif” width=”50″ height=”18″ border=”0″ alt=”Sign In” name=”-Find”></form>
</td>
</tr>
</table>
</td>
</tr>
<!——————– END MY ACCOUNT ——————–>
<!——————– START TERMS ——————–><tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/termsOfUse.gif” width=”66″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<a class=”smallwhite” href=”FMPro?-db=nnu.fp5&-Lay=0&-format=userAgree.html&-Token=&-Token.1=&-Token.2=&-Op=eq&sec=nn&-View”>User Agreement</a><br>
<a class=”smallwhite” href=”FMPro?-db=nnu.fp5&-Lay=0&-format=privacy.html&-Token=&-Token.1=&-Token.2=&-Op=eq&sec=nn&-View”>Privacy Policy
</td>
</tr>
</table>
</td>
</tr>
<!——————– END TERMS ——————–>
</table>
<!——————– END INDEX ——————–></td>
<td valign=”top” rowspan=”3″><img src=”images/clear.gif” width=”10″ height=”1″></td>
<td valign=”bottom” width=”225″ class=”smallblue”>Welcome </td>
<td bgcolor=”#FFFFFF” valign=”top” width=”35″><img src=”images/curvy.gif” width=”35″ height=”20″></td>
<td bgcolor=”#FFFFFF” align=”right”><img src=”images/tab_featured.gif” width=”85″ height=”10″ border=”0″ alt=”Featured Items”> <a href=”FMPro?-db=nnu.fp5&-Lay=0&-format=reg.html&-Op=eq&sec=nn&-View”><img src=”images/tab_register.gif” width=”52″ height=”10″ border=”0″ alt=”Register”></a> <img src=”images/tab_help.gif” width=”30″ height=”10″> </td>
<td width=”100%” bgcolor=”#FFFFFF”><img src=”images/clear.gif” width=”10″ height=”1″></td>
</tr>
<tr>
<td colspan=”4″><img src=”images/clear.gif” width=”1″ height=”10″></td>
</tr>
<tr>
<td valign=”top” colspan=”3″ bgcolor=”#FFFFFF”>
<!——————– START DISPLAY ——————–><table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″>
<tr>
<td><img src=”images/spacer_top_left.gif” width=”10″ height=”10″></td>
<td><img src=”images/clear.gif” width=”10″ height=”10″></td>
<td align=”right”><img src=”images/spacer_top_right.gif” width=”10″ height=”10″></td>
</tr>
<tr>
<td colspan=”3″ valign=”top” width=”100%” height=”400″>
<table border=”0″ cellspacing=”1″ cellpadding=”3″ width=”100%” bgcolor=”#FFFFFF”>
<tr>
<td colspan=”3″>
<img src=”images/header_welcome.gif” width=”149″ height=”37″><br>Negotiations are often time consuming, expensive, and frustrating. NegotiaNet<sup>sm</sup> software simplifies the interaction between plaintiffs and defendants – making claims settlement more efficient.<br><br><br>
</td>
</tr>
</table>
<table border=”0″ cellspacing=”1″ cellpadding=”0″ width=”100%” bgcolor=”#FFFFFF”>
<tr bgcolor=”#D1E8FF”>
<td valign=”top”><img src=”images/box_negotiation.gif” width=”198″ height=”100″></td>
<td valign=”top”><img src=”images/box_private.gif” width=”198″ height=”100″></td>
<td rowspan=”2″ bgcolor=”#99CCFF” valign=”top” class=”smallwhiteplain”>
<img src=”images/hot_news.gif” width=”200″ height=”18″><br>
<img src=”images/spacer_white.gif” width=”200″ height=”1″><br>
<table border=”0″ cellspacing=”0″ cellpadding=”3″ width=”100%”>
<tr>
<td class=”smallwhiteplain”>The whole site is new!!! You should check it out.</td>
</tr>
<tr>
<td><img src=”images/spacer_white.gif” width=”194″ height=”1″></td>
</tr>
<tr>
<td class=”smallwhiteplain”>Add your cases now, settlement is just a few clicks away.</td>
</tr>
<tr>
<td><img src=”images/spacer_white.gif” width=”194″ height=”1″></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor=”#D1E8FF”>
<td valign=”top”> </td>
<td valign=”top”><img src=”images/box_account.gif” width=”198″ height=”100″></td>
</tr>
</table>
<table>
</td>
</tr>
<tr>
<td><img src=”images/spacer_bottom_left.gif” width=”10″ height=”10″></td>
<td><img src=”images/clear.gif” width=”10″ height=”10″></td>
<td align=”right”><img src=”images/spacer_bottom_right.gif” width=”10″ height=”10″></td>
</tr>
</table>
<!——————– END DISPLAY ——————–></td>
<td><img src=”images/clear.gif” width=”10″ height=”1″></td>
</tr>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”3″ width=”100%”>
<tr>
<td class=”smallblue” align=”center”>Copyright © 2001-2002 NegotiaNet, Inc.</td>
</tr>
</table>
</body>
</html>
The next shows what was replaced or added to comply with the framework. That’s all there is to modifying the JSP.
<html>
<head>
<title>NegotiaNet™</title>
<link rel=”stylesheet” type=”text/css” href=”css/msie.css”>
</head>
<%@ include file=”common_funct.inc”%>
<body background=”images/background.gif” bgcolor=”#D1E8FF” topmargin=”0″ leftmargin=”0″ marginwidth=”0″ marginheight=”0″ rightmargin=”0″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<!——————– START HEADER ——————–><tr bgcolor=”#FFFFFF”>
<td colspan=”3″ valign=”top” width=”150″><a href=”http://www.negotianet.com/”><img src=”images/logo.gif” width=”150″ height=”50″ border=”0″></a></td>
<td colspan=”4″ width=”100%”><table border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td>
<form action=”FMPro” method=”post”>
<input type=”hidden” name=”-DB” value=”nnp.fp5″>
<input type=”hidden” name=”-Lay” value=”0″>
<input type=”hidden” name=”-format” value=”srchRed.html”>
<input type=”hidden” name=”-error” value=”error.html”>
<input type=”hidden” name=”-Token” value=””>
<input type=”hidden” name=”-Token.1″ value=””>
<input type=”hidden” name=”-Token.2″ value=””>
<input type=”hidden” name=”-Token.3″ value=””>
<input type=”hidden” name=”-Token.4″ value=””>
<input type=”hidden” name=”-Token.7″ value=””>
<input type=”hidden” name=”-Token.8″ value=””>
<input type=”hidden” name=”-Token.9″ value=””>
<b>Search by</b>
</td>
<td>
<select name=”-Token.6″>
<option value=”prodName”>Product Name
<option value=psdsc>Description
<option value=pman>Manufacturer
</select>
</td>
<td><input type=”text” name=”-Token.5″ value=”” size=”15″></td>
<td><input type=”image” src=”images/buttonFindIt.gif” width=”50″ height=”18″ name=”-View” alt=”Find It” border=”0″></form>
</td>
</tr>
</table></td>
</tr>
<!——————– END HEADER ——————–>
<tr>
<td valign=”top” rowspan=”3″><img src=”images/clear.gif” width=”10″ height=”1″></td>
<td valign=”top” rowspan=”3″ width=”130″><img src=”images/clear.gif” width=”1″ height=”10″><br><!——————– START INDEX ——————–><table bgcolor=”#FFFFFF” cellpadding=”0″ cellspacing=”1″ width=”130″ border=”0″>
<!——————– START CATEGORIES ——————–>
<tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td><img src=”images/nav/categories.gif” width=”55″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<%= doOutput(request,1)%>
</td>
</tr>
<!——————– END CATEGORIES ——————–>
<!——————– START MY ACCOUNT ——————–>
<tr>
<td>
<table bgcolor=”#FF3300″ width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/signIn.gif” width=”34″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<%= doOutput(request,2)%> </td>
</tr>
<!——————– END MY ACCOUNT ——————–>
<!——————– START TERMS ——————–><tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/termsOfUse.gif” width=”66″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<a class=”smallwhite” href=”FMPro?-db=nnu.fp5&-Lay=0&-format=userAgree.html&-Token=&-Token.1=&-Token.2=&-Op=eq&sec=nn&-View”>User Agreement</a><br>
<a class=”smallwhite” href=”FMPro?-db=nnu.fp5&-Lay=0&-format=privacy.html&-Token=&-Token.1=&-Token.2=&-Op=eq&sec=nn&-View”>Privacy Policy
</td>
</tr>
</table>
</td>
</tr>
<!——————– END TERMS ——————–>
</table>
<!——————– END INDEX ——————–></td>
<td valign=”top” rowspan=”3″><img src=”images/clear.gif” width=”10″ height=”1″></td>
<td valign=”bottom” width=”225″ class=”smallblue”>Welcome </td>
<td bgcolor=”#FFFFFF” valign=”top” width=”35″><img src=”images/curvy.gif” width=”35″ height=”20″></td>
<td bgcolor=”#FFFFFF” align=”right”><img src=”images/tab_featured.gif” width=”85″ height=”10″ border=”0″ alt=”Featured Items”> <a href=”FMPro?-db=nnu.fp5&-Lay=0&-format=reg.html&-Op=eq&sec=nn&-View”><img src=”images/tab_register.gif” width=”52″ height=”10″ border=”0″ alt=”Register”></a> <img src=”images/tab_help.gif” width=”30″ height=”10″> </td>
<td width=”100%” bgcolor=”#FFFFFF”><img src=”images/clear.gif” width=”10″ height=”1″></td>
</tr>
<tr>
<td colspan=”4″><img src=”images/clear.gif” width=”1″ height=”10″></td>
</tr>
<tr>
<td valign=”top” colspan=”3″ bgcolor=”#FFFFFF”>
<!——————– START DISPLAY ——————–><table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″>
<tr>
<td><img src=”images/spacer_top_left.gif” width=”10″ height=”10″></td>
<td><img src=”images/clear.gif” width=”10″ height=”10″></td>
<td align=”right”><img src=”images/spacer_top_right.gif” width=”10″ height=”10″></td>
</tr>
<tr>
<td colspan=”3″ valign=”top” width=”100%” height=”400″>
<table border=”0″ cellspacing=”1″ cellpadding=”3″ width=”100%” bgcolor=”#FFFFFF”>
<tr>
<td colspan=”3″>
<img src=”images/header_welcome.gif” width=”149″ height=”37″><br>Negotiations are often time consuming, expensive, and frustrating. NegotiaNet<sup>sm</sup> software simplifies the interaction between plaintiffs and defendants – making claims settlement more efficient.<br><br><br>
</td>
</tr>
</table>
<table border=”0″ cellspacing=”1″ cellpadding=”0″ width=”100%” bgcolor=”#FFFFFF”>
<tr bgcolor=”#D1E8FF”>
<td valign=”top”><img src=”images/box_negotiation.gif” width=”198″ height=”100″></td>
<td valign=”top”><img src=”images/box_private.gif” width=”198″ height=”100″></td>
<td rowspan=”2″ bgcolor=”#99CCFF” valign=”top” class=”smallwhiteplain”>
<img src=”images/hot_news.gif” width=”200″ height=”18″><br>
<img src=”images/spacer_white.gif” width=”200″ height=”1″><br>
<table border=”0″ cellspacing=”0″ cellpadding=”3″ width=”100%”>
<tr>
<td class=”smallwhiteplain”>The whole site is new!!! You should check it out.</td>
</tr>
<tr>
<td><img src=”images/spacer_white.gif” width=”194″ height=”1″></td>
</tr>
<tr>
<td class=”smallwhiteplain”>Add your cases now, settlement is just a few clicks away.</td>
</tr>
<tr>
<td><img src=”images/spacer_white.gif” width=”194″ height=”1″></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor=”#D1E8FF”>
<td valign=”top”> </td>
<td valign=”top”><img src=”images/box_account.gif” width=”198″ height=”100″></td>
</tr>
</table>
<table>
</td>
</tr>
<tr>
<td><img src=”images/spacer_bottom_left.gif” width=”10″ height=”10″></td>
<td><img src=”images/clear.gif” width=”10″ height=”10″></td>
<td align=”right”><img src=”images/spacer_bottom_right.gif” width=”10″ height=”10″></td>
</tr>
</table>
<!——————– END DISPLAY ——————–></td>
<td><img src=”images/clear.gif” width=”10″ height=”1″></td>
</tr>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”3″ width=”100%”>
<tr>
<td class=”smallblue” align=”center”>Copyright © 2001-2002 NegotiaNet, Inc.</td>
</tr>
</table>
</body>
</html>
We are essentially replacing existing the static block with a custom tag. This tag will be expanded ar runtime to provde the necessary HTML.
In many cases, as we will see, there is little HTML in the actual page. Banners and footers are best moved to include files.
The next piece needed is the web.xml deployment descriptor file. We now have two servlets that need to be defined. Here is the file
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE web-app PUBLIC “-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN” “http://java.sun.com/j2ee/dtds/web-app_2_2.dtd”>
<web-app>
<display-name>Negotianet</display-name>
<servlet>
<servlet-name>home</servlet-name>
<display-name>home</display-name>
<servlet-class>com.infoblazer.base.Base</servlet-class>
<init-param>
<param-name>jsp</param-name>
<param-value>home.jsp</param-value>
</init-param>
<init-param>
<param-name>configFile</param-name>
<param-value>home.xml</param-value>
</init-param>
<init-param>
<param-name>poolcheck</param-name>
<param-value>0</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>home</servlet-name>
<url-pattern>home</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<env-entry>
<env-entry-name>xmlpath</env-entry-name>
<env-entry-value>C:\SPD\negotianet\WebApplication\WEB-INF\xml\</env-entry-value>
<env-entry-type>java.lang.String</env-entry-type>
</env-entry>
<env-entry>
<env-entry-name>maxthreads</env-entry-name>
<env-entry-value>2</env-entry-value>
<env-entry-type>java.lang.String</env-entry-type>
</env-entry>
<env-entry>
<env-entry-name>devel</env-entry-name>
<env-entry-value>true</env-entry-value>
<env-entry-type>java.lang.String</env-entry-type>
</env-entry>
</web-app>
Several things to note.
We define a single servlet to implement the Home functionality (<servlet-name>home</servlet-name>
). That servlet is implement by the XX framework (<servlet-class>com.infoblazer.base.Base</servlet-class>), not by our custom classes. The remainding init parameters point to the XX configuration files.
The JSP parameter (<param-name>jsp</param-name>) is simply the jsp file from above.
The only missing component in the framework at this point is the xml/xsl transformation. OK, at this point this example really doesn’t do anything useful. But it will.
Remember, there are two dynamic components to implelement. Lets tackle these by rpoviding the simplest output possible.
Category List
This will be an XML transformation, so we need an XML Document and an XSL stylsheet. Lets take the simplest document possible
<Test/>
Now lets take a simple XSL Sylesheet that transforms the test document
<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet version=”1.0“ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform“ xmlns:fo=”http://www.w3.org/1999/XSL/Format“>
<xsl:template match=”Test“>
Category List
</xsl:template>
</xsl:stylesheet>
We can use a testing environment, such as XML Spy to test the transformation. If we have done everything correctly, you will see the resulting text
Category List
Now lets modify the implementation class for the category list use case.
Change the ListData method to return some XML
/**
*
@see
com.infoblazer.base.BaseFlow#listData(Document)
*/
public
String
listData(Document
document)
{
XMLUtility
xUtil
=
new
XMLUtility();
return
(“<Test/>”);
}
Lets make the LoginPrompt class even simpler. Change the getData methood to return a simple string value
/**
*
@see
com.infoblazer.base.BaseFlow#getData(Document)
*/
public
String
getData(Document
document)
{
return
(“1”);
}
All the pieces are now in play. We can run the application now. The Home page now looks like this.
Notice the two two place holders for our dynamic components in the home page. The complete implementation will simply fill in the desired HTML for these portions.
Completed the Category List
Create the XML Document
The first step is to design an appropriate xml document. The document may have used outside of this transformation, so care should be taken in its design. Here is a good possibility
<?xml version=”1.0″ encoding=”UTF-8″?>
<Categories>
<Category id=”1“>Arts & Antiques</Category>
<Category id=”2“>autos</Category>
<Category id=”3“>Computers</Category>
<Category id=”4“>Furniture</Category>
<Category id=”5“>Real Estate</Category>
<Category id=”6“>Furniture</Category>
<Category id=”7“>Test</Category>
</Categories>
We’ve added an “id” attribute to represent the primary key (assuming we are doing a typical relational design)
Lets also create a transformation. We’ll display the results in a simple table of hyperlinks. The formatting will match the original HTML
Using a tool like XML Spy, we can design and test the XMl and XSL documents in the gui. This will speed up development and isolate the transformation development tasks.
Here is the XSL document we’ve come up with.
<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet version=”1.0“ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform“ xmlns:fo=”http://www.w3.org/1999/XSL/Format“>
<xsl:template match=”/Categories“>
<table bgcolor=”#99CCFF“ width=”100%“ cellpadding=”4“ cellspacing=”0“>
<xsl:apply-templates select=”./Category“/>
</table>
</xsl:template>
<xsl:template match=”Category“>
<tr>
<td class=”smallwhite“ width=”100%“>
<a class=”smallwhite“>
<xsl:attribute name=”href“>Put real URL Here</xsl:attribute><xsl:value-of select=”.“/>
</a>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
The next step is to integrate this into the java implementation classes. Since the category display will most like ly access the dabase, we’ll use the Category List entity class to return this data. We haven’t talked about this class yet, but lets assume that this standard data access layer class has been identitied and defined.
Remember , the implementation detail of the data access layer should be hidden from the control layer. Lets create a simple data access implementation, simply reading the xml from a URI. The control class will call the services of the entity class, which returns XML. In this example, the control class doesn’t do much expect request data from the entity layer.
Note, the entity layer’s operation is hidden from the control class and is not yet well defined in our example. The operations of the entity class could be complex, involving session and entity beans or other access methodolgy. The point is that these details are hidden from other layers. Here the control layer just calls a simple Get method.
Here is the control class. Modify the list method (don’t forget to import the new entity class)
public
String
listData(Document
document)
{
Category
category
=
new
Category();
return(category.listData());
}
Here is the simple entity class implementaton
package
com.negotianet.entity;
import
com.ge.corporate.gts.xml.*;
import
org.w3c.dom.*;
/**
*
@author
MoskowiD
*
*
To
change
this
generated
comment
edit
the
template
variable
“typecomment”:
*
Window>Preferences>Java>Templates.
*
To
enable
and
disable
the
creation
of
type
comments
go
to
*
Window>Preferences>Java>Code
Generation.
*/
public
class
Category
{
public
String
listData(){
XMLUtility
xUtil
=
new
XMLUtility();
Document
document
=
xUtil.buildDocumentFromURL(“C:\\SPD\\negotianet\\WebApplication\\WEB-INF\\xml\\categorylistdata.xml”);
return(xUtil.getDocumentAsString(document)) ;
}
}
If the category list is maintained as a static xml file, this is a perfectly acceptable way to implement this functionality. If you wish this to be viewed from a database, just modify the implementation.
Login prompt.
One option is topass a simple 0/1 value back to the jsp and have the jsp decide on the appropriate html display. As you can see, we are already passing a “1” to the jsp. Assuming some back end logic to implement the correct value, 0 or 1, we could put something like this in the jsp
<% loggedIn= doOutput(request,2);
if (loggedIn.equals(“1”){
// Print log out html
}
else
{
//print log in html
}
%>
Since we are not caching the HTML, we can perform the logic in the JSP. If we were using Caching, we would need to perform the logic in the implementation class, since that is where the caching occures. The results of the implementation class, cached or non-caches, are passed to the JSP.
But we prefer xsl. Even this bit of code is hard to maintain. We could use an include file to break this piece out, but that still is unsatisfactory. Lets implement this as an xsl transform.
Now take a look at the full logged in screen. Since the user is logged in, there is no login box displayed. We have a few options in implementation here.
We have two implementation options.
The first is to perform a conditional test , as above, in the jsp. If the user is logged in, capture the additional data from the back end. Note, these would already need to be calculated.
The other options is to just display all the data elements, noting that some may be blank. If we do this, we need to be sure that most of the html formatting occurs in the xsl transformation. This is really a matter of preference. The second option, displaying everything seems cleaner and puts more logic in the xsl and back end as opposed to the display.
we have seceral additional elemtns here.
My Account
My Listings.
Since these are simply html links we’ll hard code them and use the first conditional option here.
Many more elements on this page could be database driven, and hence come from the backend. For simplicity sake, we’ll assume that things like “search by” values are fixes.
So we can add the login prompt as follows
<% loggedIn= doOutput(request,2);
if (loggedIn.equals(“1”){
<!——————– START MY ACCOUNT ——————–>
<tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/myAccount.gif” width=”60″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<a class=”smallwhite” HREF=”FMPro?-db=nnb.fp5&-lay=0&-format=bask.html&-error=bask.html&-max=all&-lop=and&-op=neq&prodStat=-1&-op=neq&prodStat=2&-op=eq&sess=9991441595105792m5387s3229&-Token=9991441595105792m5387s3229&-Token.1=900000&-Token.2=Dylan&-Token.3=&-Token.4=&-Token.5=&-Token.6=&-Token.7=&-Token.8=&-Op=eq&sec=nn&-Find”>Current Selections</a><BR>
<a class=”smallwhite” HREF=”FMPro?-DB=nnb.fp5&-lay=0&-format=purHist.html&-error=purHist.html&-Max=all&userNo=900000&-Token=9991441595105792m5387s3229&-Token.1=900000&-Token.2=Dylan&-Token.3=&-Token.4=&-Token.5=&-Token.6=&-Token.7=&-Token.8=&prodStat=2&-Op=eq&sec=nn&-Find”>Past Purchases</a><br>
<a class=”smallwhite” HREF=”FMPro?-DB=nnu.fp5&-lay=0&-format=prof.html&-error=error.html&sess=9991441595105792m5387s3229&userNo=900000&-Token=9991441595105792m5387s3229&-Token.1=900000&-Token.2=Dylan&-Token.3=&-Token.4=&-Token.5=&-Token.6=&-Token.7=&-Token.8=&-Op=eq&sec=nn&-Find”>Update Profile</a><br>
<a class=”smallwhite” href=”default.html”>Sign Out</a>
</td>
</tr>
</table>
</td>
</tr>
<!——————– END MY ACCOUNT ——————–>
<!——————– START MY LISTINGS ——————–><tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/myListings.gif” width=”58″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<A class=”smallwhite” HREF=”FMPro?-DB=nnp.fp5&-Lay=0&-format=myProd.html&-Max=10&-error=myProd.html&sess=9991441595105792m5387s3229&userNo=900000&-Token=9991441595105792m5387s3229&-Token.1=900000&-Token.2=Dylan&-Op=eq&sec=nn&-Find”>Current Listings</A><BR>
<A class=”smallwhite” HREF=”FMPro?-DB=nnu.fp5&-format=myProdAdd.html&-Max=all&-error=myProdAdd.html&-Token=9991441595105792m5387s3229&-Token.1=900000&-Token.2=Dylan&-Op=eq&sec=nn&-Find”>List Products</A>
</td>
</tr>
</table>
</td>
</tr>
<!——————– END MY LISTINGS ——————–>
<!——————– START HELP ——————–><tr>
<td>
<table bgcolor=”#70BAFF” width=”100%” cellpadding=”4″ cellspacing=”0″ border=”0″>
<tr>
<td class=”smallwhite”><img src=”images/nav/help.gif” width=”22″ height=”10″></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
Contact Us<br>
Frequently Asked Questions
</td>
</tr>
</table>
</td>
</tr>
<!——————– END HELP ——————–>
}
else
{
<tr>
<td>
<table bgcolor=”#99CCFF” width=”100%” cellpadding=”4″ cellspacing=”0″>
<tr>
<td class=”smallwhite” width”100%”>
<form action=”FMPro” method=”post”>
<input type=”hidden” name=”-db” value=”nnu.fp5″>
<input type=”hidden” name=”-format” value=”login.html”>
<input type=”hidden” name=”-error” value=”login.html”>
<span class=”errormsg”>
</span>
Username<br>
<input type=”hidden” name=”username” value=”==”>
<input type=”text” name=”username” value=”” size=”12″><br>
Password<br>
<input type=”hidden” name=”password” value=”==”>
<input type=”password” name=”password” value=”” size=”12″>
<input type=”hidden” name=”-Op” value=”eq”>
<input type=”hidden” name=”sec” value=”nn”>
<input type=”hidden” name=”-Token.9″ value=”FMPro?-db=nnp.fp5&-format=root.html&-lay=0&-op=eq&sec=nn&-find=”>
<input type=”hidden” name=”-Script” value=”login”>
</td>
</tr>
<tr>
<td align=”center”><input type=”image” src=”images/buttonSignIn.gif” width=”50″ height=”18″ border=”0″ alt=”Sign In” name=”-Find”></form>
</td>
</tr>
</table>
</td>
</tr>
}
%>
this implementation keeps with the goal of putting minimal (java based) logic in the jsp page, leaving it mainly for html display. Since the text we just added is mainly xml, we can put up with a few lines of java. This will generally be the extent of the java, a few conditional statements. This embedded logic is worth the tradeoff of putting these in xsl files and transforming html. We can further enhance the organization of this jsp page by separating the independent static portions into separate files and including them in the main jsp.
The final jsp page is as follows.
[insert jsp here]
Connecting to the database
We can modify the implementation of the category list display without modifying it’s interface. This is on keeping with oo principle of encapsulations.
We will locate all database processing in an entity class, in this case Category.
We could further subdivide the Category entity model into a control portion and an entity/ data object portion (see chapter XXX). In this case, we’ll use a simple service model that makes a request and gets back an xml response.