Creating a User Interface with Struts Step 25

This post is about creating the flow of your User Interface. In the prior step, I showed you how to create a drop down menu for our application. In this post we will create the flow so we can start developing our JSP pages. We are going to add JSP functionality to add a user, to add a book, to add a book category, and to add a view a report.

First, create four JSP pages under your jsp folder called addbook.jsp, addcategory.jsp, adduser.jsp, viewreport.jsp. You should rename the user.jsp page to be called home.jsp. That will now become our home page. You can rename a page in eclipse by selecting refactoring. Select the right mouse button on the user.jsp page and select refactor and then select rename. Change the page to be called home.jsp. You can remove the prior code from that page too because we aren't going to need it anymore.

Replace your header with this code. I added the struts links in the menu so the user can move between the pages.

<!-- TJK_keyBoardDropDown.js is required so the menu works in Internet Explorer-->
<div style="z-index: 10000;" id="base"><!-- Begin Base div-->
<!-- Begin Page Level Navigation -->
<ul id="TJK_dropDownMenu">
<li diamondmenu="yes" class="trigger" id="AB"><a alt="admin" title="admin" href="#">Admin</a>
<ul>
<li diamondmenu="yes"><a href="UserAction.do?action=addUser" >Add User</a>
</li>
</ul>
</li>
<li diamondmenu="yes" class="trigger" id="CF"><a title="Books" href="#">Books</a>
<ul>
<li diamondmenu="yes"><a href="UserAction.do?action=addCategory">Add Category</a>
</li>
<li diamondmenu="yes"><a href="UserAction.do?action=addBook">Add Book</a>
</li>
</ul>
</li>
<li diamondmenu="yes" class="trigger" id="CF"><a title="Report" href="#">Reports</a>
<ul>
<li diamondmenu="yes"><a href="UserAction.do?action=viewReport">View Report</a>
</li>
</ul>
</li>
</ul>
</div>

In your struts.xml file, you need to replace the UserAction with the following code.
This code adds the actions for each item from the menu.


<action path="/UserAction" name="userForm" type="com.action.UserAction" parameter="action" scope="session">
<forward name="success" path="tile.userpage" />
<forward name="addbook" path="tile.addbook" />
<forward name="adduser" path="tile.adduser" />
<forward name="addcategory" path="tile.addcategory" />
<forward name="viewreport" path="tile.viewreport" />
</action>

In your tiles you need to add the following definitions (remove the original tile.userpage):


<definition name="tile.userpage" extends="mainLayout">
<put name="body" value="/WEB-INF/jsp/home.jsp"/>
</definition>
<definition name="tile.viewreport" extends="mainLayout">
<put name="body" value="/WEB-INF/jsp/viewreport.jsp"/>
</definition>
<definition name="tile.addcategory" extends="mainLayout">
<put name="body" value="/WEB-INF/jsp/addcategory.jsp"/>
</definition>
<definition name="tile.adduser" extends="mainLayout">
<put name="body" value="/WEB-INF/jsp/adduser.jsp"/>
</definition>
<definition name="tile.addbook" extends="mainLayout">
<put name="body" value="/WEB-INF/jsp/addbook.jsp"/>
</definition>



You will need to add the following to your action class:


public ActionForward addBook(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
System.out.println("in addBook");
return mapping.findForward("addbook");
}
public ActionForward viewReport(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
System.out.println("in viewreport");
return mapping.findForward("viewreport");
}
public ActionForward addUser(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
System.out.println("in addUser");
return mapping.findForward("adduser");
}
public ActionForward addCategory(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
System.out.println("in addCategory");
return mapping.findForward("addcategory");
}


Now we established a User Interface mechanism to flow through your application.

Go To Step 26