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. . 324 WebSphere Studio Application Developer Version 5 Programming Guide  Compare your code with the sample code in: sg246 957 sampcodedev-strutssolutionjspindex.jsp The. 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. <bean:message key="text.transfer" /> </TD> 328 WebSphere Studio Application Developer Version 5 Programming Guide  Remove the value='' from the following two lines