Converting a JHTML app to JSP and J2EE (Part 2)

Part 1 Part 2 Summary

Part 2 : Converting JHTML Pages to JSP

Overview

These instructions detail some of the key points when moving JHTML pages to JSP.

Getting Started

A good place to start when moving from JHTML to JSP are the page template which ATG 5.6.1. provides. There are page templates for login and logout pages which can be compared side by side with their JHTML counterparts. So that's where I'll start

In the documents view of your new web-app.war click New Document and then select the Login Form (JSP) template

Have a look at the automatically generated code for login.jsp :

<%@ taglib uri="/dspTaglib" prefix="dsp" %>
<dsp:page>

<html>
<head>
  <title>Login Form</title>
</head>

<dsp:importbean bean="/atg/userprofiling/ProfileFormHandler"/>
<dsp:importbean bean="/atg/userprofiling/ProfileErrorMessageForEach"/>
<dsp:importbean bean="/atg/dynamo/droplet/Switch"/>

<!-- This form should not show what the current profile attributes are so we will
     disable the ability to extract default values from the profile. -->
<dsp:setvalue bean="ProfileFormHandler.extractDefaultValuesFromProfile" 
                                  value="false"/>

<body>

  <dsp:droplet name="Switch">
    <dsp:param bean="ProfileFormHandler.profile.transient" name="value"/>
    <dsp:oparam name="false">
      You are currently logged in. If you wish to login as a different user
      please logout first.
    </dsp:oparam>

    <dsp:oparam name="default">
      <dsp:form action="login.jsp" method="post">
        <dsp:input bean="ProfileFormHandler.loginSuccessURL"
                 type="hidden" value="login_success.jsp"/>

        <dsp:droplet name="Switch">
          <dsp:param bean="ProfileFormHandler.formError" name="value"/>
          <dsp:oparam name="true">
            <font color="cc0000"><strong><ul>
              <dsp:droplet name="ProfileErrorMessageForEach">
                <dsp:param bean="ProfileFormHandler.formExceptions" 
                                        name="exceptions"/>
                <dsp:oparam name="output">
                  <li> <dsp:valueof param="message"/>
                </dsp:oparam>
              </dsp:droplet>
            </ul></strong></font>
          </dsp:oparam>
        </dsp:droplet>

        <table width="456" border="0">
          <tr>
            <td valign="middle" align="right">User Name:</td>
            <td><dsp:input bean="ProfileFormHandler.value.login" 
                            maxsize="20" size="20" type="text"/></td>
          </tr>

          <tr>
            <td valign="middle" align="right">Password:</td>
            <td><dsp:input bean="ProfileFormHandler.value.password" 
                        maxsize="35" size="35" type="password"/></td>
          </tr>

          <tr>
            <td valign="middle" align="right"></td>
            <td><dsp:input bean="ProfileFormHandler.login" 
                           type="submit" value="login"/></td>
          </tr>
        </table>

      </dsp:form>
    </dsp:oparam>
  </dsp:droplet>

</body>
</html>

</dsp:page>

What we have is essentially the same as JHTML except that all the JHTML tags have been replaced with tag libary calls to the dsp: tag library. Additionally: the whole page is included inside of a pair of dsp:page tags.

Now, create the logout.jsp page in the same manner.

Creating a shared header file

Currently we have 3 files, index.jsp, logout.jsp and login.jsp, next we'll create the shared header jsp, which will display our menu options to the user and will be included at the top of each page the user sees. In addition the header changes the menu depending on whether or not the user is logged in or not. Here is the JHTML:

<declareparam name="siteSection" class="java.lang.String" description="">
<importbean bean="/atg/userprofiling/Profile">
<!-- Title: Shared Header -->
<B>Dating Online</B>
<hr>

<droplet bean="/atg/dynamo/droplet/Switch">
  <param name="value" value="param:siteSection">
  <oparam name="home">
    <b><a href="index.jhtml">home</a></b>
  </oparam>
  <oparam name="default">
    <a href="index.jhtml">home</a>
  </oparam>
</droplet>

<droplet bean="/atg/dynamo/droplet/Switch">
  <param name="value" value="bean:Profile.transient">
  <oparam name="true">
    <!-- not logged in -->
    <a href="login.jhtml">login</a>
  </oparam>
  <oparam name="false">
    <!-- is logged in -->
    <a href="logout.jhtml">logout</a>  
    <a href="myprofile.jhtml">my profile</a> 
    <a href="mymatches.jhtml">my matches</a> 
    <a href="changepassword.jhtml">password</a> 
    <a href="edit_my_profile.jhtml">edit profile</a> 
    <a href="edit_my_matches.jhtml">edit matches</a> 
  </oparam>
</droplet>
<hr>

To create the same effect in JSP I'd take the following steps:

Create a new empty jsp file called header.jsp using the ACC

Add the dsp:page tags and the taglib import

<%@ taglib uri="/dspTaglib" prefix="dsp" %>
<dsp:page>

<!-- content will go here -->

</dsp:page>

Next I paste in the original JHTML and replace all the JHTML extensions with dsp: prefixed taglib calls, whoa!!! I hear you say, how do I do that??? Well I would go and check out Appendix D of the Page Developers Guide in the Dynamo Documentation. There you'll find a list of all the tags and how to use them.
In addition you'll want to watch out that all the tags are closed correctly XML style and you'll also find that the dsp tag library doesn't include support for some of JHTML features, in this case declareparam. JSP doesn't have this concept so we'll have to drop it. Other than that we can generally just go through pasting 'dsp:' in front of everything which looks like a JHTML tag. Don't forget the closing tags!!
Next I go through to see if any value='bean:xx' attributes need to be converted to bean='xxx', this is often the case for switch droplet calls.
Our last step will be to fix any links pointing to xxx.jhtml to point to xxx.jsp
Once you've done the basic paste paste paste you can preview your page using the preview button in the JSP page editor. You'll probably see some errors:
```
Error getting compiled page
          
JSP tag 'dsp:droplet' at line 10: requires attribute ``name``

JSP tag 'dsp:droplet' at line 10: has an invalid attribute of ``bean`` (not defined in tag library's TLD)

The tag 'dsp:droplet' at line: 18 is an end tag with no corresponding start tag.

JSP tag 'dsp:droplet' at line 20: requires attribute ``name``

JSP tag 'dsp:droplet' at line 20: has an invalid attribute of ``bean`` (not defined in tag library's TLD)

The tag 'dsp:droplet' at line: 35 is an end tag with no corresponding start tag.

The tag 'dsp:page' at line: 37 is an end tag with no corresponding start tag.

the "dsp:param" tag starting at line: 21 does not have a matching close tag

JSP tag 'dsp:param' at line: 11 should have no content.

JSP tag 'dsp:param' at line: 21 should have no content.
```
What do these all mean? Well some tags have different attribute names, for example the dsp:droplet tag has a name attribute instead of bean, and I also forgot to close off the dsp:param tags (forgot the /> at the end).

So Now I'll fix those (4 quick edits) and this is what I ended up with

<%@ taglib uri="/dspTaglib" prefix="dsp" %>
<dsp:page>
<!-- Not supported in JSP
<declareparam name="siteSection" class="java.lang.String" description="">
-->
<dsp:importbean bean="/atg/userprofiling/Profile"/>
<B>Dating Online (JSP)</B>
<hr>

<dsp:droplet name="/atg/dynamo/droplet/Switch">
  <dsp:param name="value" value="<%= request.getParameter("siteSection") %>"/>
  <dsp:oparam name="home">
    <b><a href="index.jsp">home</a></b>
  </dsp:oparam>
  <dsp:oparam name="default">
    <a href="index.jsp">home</a>
  </dsp:oparam>
</dsp:droplet>

<dsp:droplet name="/atg/dynamo/droplet/Switch">
  <dsp:param name="value" bean="Profile.transient"/>
  <dsp:oparam name="true">
    <!-- not logged in -->
    <a href="login.jsp">login</a>
  </dsp:oparam>
  <dsp:oparam name="false">
    <!-- is logged in -->
    <a href="logout.jsp">logout</a>  
    <a href="myprofile.jsp">my profile</a> 
    <a href="mymatches.jsp">my matches</a> 
    <a href="changepassword.jsp">password</a> 
    <a href="edit_my_profile.jsp">edit profile</a> 
    <a href="edit_my_matches.jsp">edit matches</a> 
  </dsp:oparam>
</dsp:droplet>
<hr>
</dsp:page>

We aren't quite out of the woods yet though, JSP doesn't have a code free way of getting at the request parameters, so where in JHTML the page developer can get away with no Java, in JSP they need to know at least some. To access a request parameter in JSP the syntax is:
```
<%=  request.getParameter("param_name") %>
```
In JHTML the equivalent is
```
"param:param_name  default_value"
```
or
```
<valueof param="param_name">default value</valueof>
```
In JSP there is no easy way to specify a default value, one option is
```
<%= (request.getParameter("param_name") == null) ? "default_value"
  : request.getParameter("param_name")%>
```
In our page we access a page parameter called 'siteSection' and use it to highlight the selected menu item
And Finally passing in siteSection=home on the URL we can preview the header fragment successfully:

Including the header file

Including a JSP file into another can be done in several ways, JSP allows both dynamic and static includes and the dsp tag library also provides an include tag. The advantage of dsp:include is that it allows you to pass parameters to the included page without hacking together a complex url string on the page with inline Java.

To include the header file into the index.jsp, login.jsp and logout.jsp, open each document in the JSP editor and position the cursor just after the body tag. Click the insert document button and select the header.jsp

In our index.jsp page we'll want to specify 'home' as the value for siteSection, thus:

<dsp:include page="header.jsp" flush="true">
  <dsp:param name="siteSection" value="home"/>
</dsp:include>

And that's the basics of converting JHTML files to JSP, click here for a summary

Technical Training Advertise your Training Programs for Free! Los Angeles Web Design Shopping Cart Software Form a Corporation