WebSphere Studio Application Developer Version 5 Programming Guide part 36 doc

324 WebSphere Studio Application Developer Version 5 Programming Guide
 Compare your code with the sample code in:
\sg246957\sampcode\dev-struts\solution\jsp\index.jsp
The listAccounts.jsp, accountDetails.jsp, and listTransactions.jsp files
are all implemented using the same method. However, listAccounts.jsp and
listTransactions.jsp require an additional Struts tag library, the logic library.
 Implement these pages in the same way as you did with index.jsp.
 When you reach the second page of the New JSP File dialog (see
Figure 10-20 on page 317), click the
Add Tag Library
button.
 On the Select a Tag Library page, select the /WEB-INF/struts-logic.tld tag
library and enter logic as its prefix. Then click
OK
(Figure 10-25).
Figure 10-25 Add Struts logic tag library
Note: The rendering of the Struts tags can be customized using the
Window
-> Preferences -> Web tools -> Struts tools -> Page Designer Struts Support

dialog. The options available are self-explanatory so we do not cover them
here.
Chapter 10. Developing Struts applications 325
Implementing the listAccounts JSP
Here are short instructions for the listAccounts JSP:
 Start the wizard, add the logic tag library, and proceed to the form fields.
 Select the customerInfoForm.
 Select the validateKey, accountNumber, and customerName properties.
– accountNumbers—Field type: radio, label:
<bean:message key="prompt.account" />
– validateKey—Field type: hidden, no label, initial value 2

– customerName—Field type: hidden, no label
 Create the JSP and the editor opens.
 Find the <jsp:useBean> tag for the customerInfoForm and replace the line
with the following:
<bean:define id="customerInfoForm" name="customerInfoForm"
type="itso.strutsweb.forms.CustomerInfoForm" />
 Change the title:
<TITLE><bean:message key="text.pageTitle"/></TITLE>
 Create a heading with the customer’s name:
<H2><bean:message key="text.customersAccounts"
arg0="<%=customerInfoForm.getCustomerName()%>" /></H2>
 Display error messages after the heading:
<html:errors/>
 Note the <logic:iterate> loop that was created for the accountNumbers
array:
<logic:iterate id="accountNumbers_id" name="customerInfoForm"
property="accountNumbers">
<TR>
<TD><html:radio property='accountNumbers_id.accountNumbers' />
</TD>
</TR>
</logic:iterate>
The property points to the accountNumbers array. The iteration loops through
the array and creates an object with the ID accountNumbers_id. For each
iteration a radio button is created. However, the property reference that is
generated is wrong (we want to store the selected account in the
accountNumber attribute), and a radio button must have a value attribute.
 Change the generated loop by including the type (String[]) of the array. For
the radio buttons we set the property to accountNumber, the value to the
326 WebSphere Studio Application Developer Version 5 Programming Guide

account number (accountNumbers_id), and the text after the button also to the
account number, but retrieved using the <bean:write> tag. Note that the
<bean:write> tag cannot be used inside the value attribute.
<logic:iterate id="accountNumbers_id" name="customerInfoForm"
property="accountNumbers" type="java.lang.String">
<TR>
<TD><html:radio property='accountNumber'
value='<%= accountNumbers_id %>' />
<bean:write name="accountNumbers_id" />
</TD>
</TR>
</logic:iterate>
 Add a value to the customerName hidden field:
<html:hidden property='customerName'
value='<%= customerInfoForm.getCustomerName()%>' />
 Change the
Submit
and
Reset
buttons to:
<TD><html:submit><bean:message key="text.submit"/></html:submit></TD>
<TD><html:cancel><bean:message key="text.cancel"/></html:cancel></TD>
 Add the standard heading and footing.
 Compare your code with the sample code in:
\sg246957\sampcode\dev-struts\solution\jsp\listAccounts.jsp
Implementing the accountDetails JSP
Here are short instructions for the accountDetails JSP:
 Start the wizard, no logic tag library is required, and proceed to the form
fields.
 Select the transactionForm.

 Select all properties except transactions, and order them in this sequence
(use the arrows to resequence the properties):
– action—Field type: radio, initial value: ListTransactions,
label: <bean:message key="prompt.transaction" />
– amount—Field type: text, size: 20,
label: <bean:message key="prompt.amount" />
– destinationAccount—Field type: text, size: 20,
label: <bean:message key="prompt.destinationAccount" />
– accountID—hidden, no label, initial value:
<%= transactionForm.getAccountID() %>
– accountBalance—hidden, no label, value:
<%= transactionForm.getAccountBalance() %>
Chapter 10. Developing Struts applications 327
The two hidden fields save the ID and balance values.
 Create the JSP and the editor opens.
 Define the transactionForm as a <bean:define> tag at the top (
JSP -> Insert
Bean
):
<bean:define id="transactionForm" name="transactionForm"
type="itso.strutsweb.forms.TransactionForm" />
This is not done automatically (as with the previous JSPs) because the
transactionForm is not attached to the accountDetails action.
 Add an import for the AmountConverter bean to the <%@ page> tag:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" session="true"
import="itso.bank.util.AmountConverter" %>
Note: The import could have been specified in the create JSP wizard, but the
wizard fails at code generation when an import is added.
 Change the title:

<TITLE><bean:message key="text.pageTitle"/></TITLE>
 Create a heading with the account number:
<H2><bean:message key="text.accountMaintenance"
arg0='<%= transactionForm.getAccountID() %>'/>
</H2>
 Display the balance after the heading:
<P><B><bean:message key="text.currentBalance" />
<%=AmountConverter.fromDecimal( AmountConverter.fromString
( transactionForm.getAccountBalance() ) )%></B></P>
 Display error messages after the heading:
<html:errors/>
 Change the first table row to include all the radio buttons for the actions (only
the first one was generated), and add the texts after the buttons:
<TH><bean:message key="prompt.transaction"/></TH>
<TD>
<html:radio property='action' value='ListTransactions'/>
<bean:message key="text.listTransactions" /><br>
<html:radio property='action' value='Deposit'/>
<bean:message key="text.deposit" /><br>
<html:radio property='action' value='Withdraw'/>
<bean:message key="text.withdraw" /><br>
<html:radio property='action' value='Transfer'/>
<bean:message key="text.transfer" />
</TD>
328 WebSphere Studio Application Developer Version 5 Programming Guide
 Remove the value='' from the following two lines (the Struts tags
automatically add this if the property requested has a value that should be
used to prefill a field):
<TD><html:text property='amount' size='20' value='' /></TD>

<TD><html:text property='destinationAccount' size='20' value='' /></TD>
 Change the
Submit
and
Reset
buttons to:
<TD><html:submit><bean:message key="text.submit"/></html:submit></TD>
<TD><html:cancel><bean:message key="text.cancel"/></html:cancel></TD>
 Add the standard heading and footing.
 Compare your code with the sample code in:
\sg246957\sampcode\dev-struts\solution\jsp\accountDetails.jsp
Implementing the listTransactions JSP
Here are short instructions for the listTransactions JSP:
 Start the wizard, add the logic tag library, and proceed to the form fields.
 Select the transactionForm.
 Select only the transactions property (it is an array of TransRecord beans)
and set the label to blank.
 Expand the transactions property (Figure 10-26), select each of the three
attributes (check box), set the type to
static text
(pull-down) and the label to:
– <bean:message key="text.type" /> for type
– <bean:message key="text.amount" /> for amount
– <bean:message key="text.date" /> for date
Figure 10-26 Selecting attributes of the transactions array
Note:
The sequence of the
attributes cannot be
changed using the
arrow buttons

Chapter 10. Developing Struts applications 329
 Create the JSP and the editor opens.
 Find the <jsp:useBean> tag for the transactionForm and replace the line with
the following:
<bean:define id="transactionForm" name="transactionForm"
type="itso.strutsweb.forms.TransactionForm" />
 Add an import for the TransRecord and the AmountConverter beanto the <%@
page> tag:
<%@ page
import="itso.bank.model.TransRecord, itso.bank.util.AmountConverter"
%>
 Change the title:
<TITLE><bean:message key="text.pageTitle"/></TITLE>
 Create a heading and a title for the table:
<H2><bean:message key="text.accountNo"/>
<bean:write name="transactionForm" property="accountID"/></H2>
<P><bean:message key="text.transactionsSorted"/>
 Display error messages after the heading:
<html:errors/>
 The result table that is generated is functional and could be left as is. Here are
some possible improvements:
– Remove the outer table (leave the generated buttons).
– Set a border for the inner table.
– Add a column with the transaction number. This requires an indexID in the
<logic.iterate> tag.
– Center the type and right justify the amount. Add a $ sign to the amount.
– Change the
Submit
button into a
Back

button after the inner table:
<html:submit><bean:message key="text.back"/></html:submit>
– Remove the
Reset
button.
The table code should look like this (changes are in bold face):
<TABLE border="1">
<TBODY>
<TR>
<TR>
<TH><bean:message key="text.transactionId"/></TH>
<TH><bean:message key="text.type" /></TH>
<TH><bean:message key="text.amount" /></TH>
<TH><bean:message key="text.date" /></TH>
</TR>
330 WebSphere Studio Application Developer Version 5 Programming Guide
<logic:iterate id="transactions_id" name="transactionForm"
property="transactions" indexId="index">
<TR>
<TD align="center"><%= index.intValue()+1 %></TD>
<TD align="center"><bean:write name='transactions_id'
property='transType' /></TD>
<TD align="right">$<bean:write name='transactions_id'
property='transAmt' /></TD>
<TD><bean:write name='transactions_id'
property='timeStamp' /></TD>
</TR>
</logic:iterate>
</TBODY>
</TABLE>

<P><html:submit><bean:message key="text.back"/></html:submit></P>
 Add the standard heading and footing.
 Compare your code with the sample code in:
\sg246957\sampcode\dev-struts\solution\jsp\listTransactions.jsp
Struts logic tag
The Struts logic tag is used to perform functions like iterating over collections
(<logic:iterate>), checking if a form bean is present (<logic:present>),
making conditional statements (<logic:equal>, <logic:lessThan>,
<logic:greaterThan>) and performing string comparisons (<logic:match>).
The tool generates the tag for collections to iterate over the results in two of our
Web pages. For example:
<logic:iterate id="transactions_id" name="transactionForm"
property="transactions" indexId="index"
type="itso.bank.model.TransRecord">
The <logic:iterate> tag takes a number of parameters:
 The name parameter (transactionForm) is used to select the form bean that
holds the collection to iterate over.
 The property parameter (transactions) is the attribute that retrieves the
collection from the form bean.
 The collection to iterate over can be an array, a java.util.Vector, or a
java.util.Collection (a Set is a special collection).
 The type parameter is used to define the type of the elements in the
collection. The <logic:iterate> tag will then cast the elements it retrieves to
this type. We could add type=”itso.bank.model.TransRecord" to the tag, but
it is not required for our code.
Chapter 10. Developing Struts applications 331
 The element is stored in a bean specified by the id parameter
(transactions_id). We can then use this bean name to retrieve the
information we need.
Inside the iterate clause we use the <bean:write> tag to display the

properties of the bean instance from the collection.
<bean:write name="transactions_id" property="timeStamp"/>
 The optional indexID parameter defines a variable that gives access the
iteration number:
<%= index.intValue()+1 %>
Although the Struts tag libraries do a good job of keeping your JSPs free from
Java scriptlets and Java code there are times when you still need to resort to
simple Java code snippets.
 Finally the logic clause is closed with the </logic:iterate> tag.
When all JSPs are implemented you should have the Web diagram shown in
Figure 10-27.
Figure 10-27 Web diagram with JSPs implemented
To complete the application, we also need the three actions, as described in the
following sections.
332 WebSphere Studio Application Developer Version 5 Programming Guide
Developing the actions
Action classes are implemented using the same method as other artifacts.
 Double-click the listAccounts action in the Web diagram. This opens the
New Action Mapping wizard (Figure 10-28).
This page is used to provide the required information in the
struts-config.xml file about this action. However, because we have already
supplied all necessary information the wizard needs in the Web diagram, all
fields are already filled in for us. Therefore simply click
Next
.
Figure 10-28 Specify Action mapping information
Chapter 10. Developing Struts applications 333
 The next page (Figure 10-29) is used to generate the action class itself. The
wizard has proposed a name which is based on the name of the action we
gave it in the Web diagram. This is fine so just click

Finish
to let the wizard
generate the class.
Figure 10-29 Generate action class
The ListAccountsAction class opens in the Java editor. The Struts wizard
has provided us with skeleton code for normal action behavior. The main
method of a Struts action is the execute method. This is the method that
Struts calls to invoke this action and this is where we provide our logic.
 Add a few import statements:
import javax.servlet.http.HttpSession;
Note: Struts 1.0 uses the perform method instead of execute.