About this Tutorial
This tutorial will show you how to create master/detail screens with Struts 2. The list (master) screen will have the ability to sort columns, as well as page 25 records at a time. The form (detail) screen will use an elegant CSS form layout (courtesy of Wufoo). You will also configure client and server-side validation to improve your users' experience.
Table of Contents
- Introduction to Struts 2
- Create a PersonActionTest
- Create a PersonAction that will fetch people
- Create personList.jsp to show search results
- Modify PersonActionTest and PersonAction for edit(), save() and delete() methods
- Create personForm.jsp to edit a person
- Configure Validation
- Create a Canoo WebTest to test browser-like actions
- Add link to menu
Introduction to Struts 2
Struts 2 (formerly WebWork) is a web framework designed with simplicity in mind. It's built on top of XWork, which is a generic command framework. XWork also has an IoC container, but it isn't as full-featured as Spring and won't be covered in this section. Struts 2 controllers are called Actions, mainly because they must implement the Action interface. The ActionSupport class implements this interface, and it is most common parent class for Struts 2 actions.
The figure below shows how Struts 2 fits into a web application's architecture.
Struts 2 actions typically contain methods for accessing model properties and methods for returning strings. These strings are matched with "result" names in a struts.xml configuration file. Actions typically have a single execute() method, but you can easily add multiple methods and control execution using URLs and button names.
Struts 2 uses interceptors to intercept the request and response process. This is much like Servlet Filters, except you can talk directly to the action. Struts 2 uses interceptors in the framework itself. A number of them initialize the Action, prepare it for population, set parameters on it and handle any conversion errors.
Create a PersonActionTest
Testing is an important part of any application, and testing a Struts application is easier than most. The generic command pattern provided by XWork doesn't depend on the Servlet API at all. This makes it easy to use JUnit to test your Actions.
PersonActionTest.java class in src/test/java/**/webapp/action.
This class won't compile yet; you must first create the
Create a PersonAction that will fetch people
PersonAction.java class (that extends AppFuse's BaseAction) in src/main/java/**/webapp/action:
Struts 2 actions are typically both the controller and the model. In this example, the
list() method acts as the controller, and the
getPersons() method retrieves data from the model. This simplification of the MVC paradigm makes this web framework very easy to program with.
PersonActionTest using your IDE or mvn test -Dtest=PersonActionTest.
Create personList.jsp to show search results
Create a src/main/webapp/WEB-INF/pages/personList.jsp page to display the list of people:
The most important line in this file is just above the <display:table> tag. This is the
<s:set> tag. This tag calls
PersonAction.getPersons() and sets the resulting List into the request scope, where the <display:table> tag can grab it. This is necessary because the Display Tag doesn't have any knowledge of the ValueStack used by Struts 2.
struts.xml file in the src/main/resources directory. Define an <action> (at the bottom of this file) and set its class attribute to match the fully-qualified class name of the PersonAction class.
The default result type is "dispatcher" and its name is "success". This configured result type simply forwards you to the
personList.jsp file when "success" is returned from
PersonAction.list(). Other result types include redirect and chain. Redirect performs a client-side redirect and chain forwards you to another action. For a full list of result types, see Struts 2's Result Types documentation.
The "method" attribute of this action has a
list attribute, which calls the
list() method when the "persons.html" URL is invoked. If you exclude the method attribute, it calls the
Open src/main/resources/ApplicationResources.properties and add i18n keys/values for the various "person" properties:
Run mvn jetty:run-war and open http://localhost:8080/persons.html in your browser. Login with admin/admin and you should see a screen similar to the figure below.
Security settings for AppFuse specify that all *.html url-patterns should be protected (except for /signup.html and /passwordHint.html). This guarantees that clients must go through an Action to get to a JSP (or at least the ones in WEB-INF/pages).
Modify PersonActionTest and PersonAction for edit(), save() and delete() method
To create the detail screen, add
delete() methods to the PersonAction class. Before doing this, create tests for these methods.
Open src/test/java/**/webapp/action/PersonActionTest.java and add test methods for edit, save, and delete operations:
This class will not compile yet because you need to update your src/main/java/**/action/PersonAction.java class. The cancel and delete properties capture the click of the Cancel and Delete buttons. The
execute() method routes the different actions on the form to the appropriate method.
If you look at your
PersonActionTest, all the tests depend on having a record with id=1 in the database (and testRemove depends on id=2), so let's add those records to our sample data file (src/test/resources/sample-data.xml). Adding it at the bottom should work - order is not important since it (currently) does not relate to any other tables. If you already have this table, make sure the 2nd record exists so
testRemove() doesn't fail.
DbUnit loads this file before you run any tests, so this record will be available to your Action test.
Save all your files and run the tests in
PersonActionTest using the command mvn test -Dtest=PersonActionTest.
Total time: 31 seconds
Create personForm.jsp to edit a person's information
Create a src/main/webapp/WEB-INF/pages/personForm.jsp page to display the form:
Struts reduces the amount of HTML you have to write for a form. The <s:form> tag writes the <form> and structure tags for you. The <s:textfield> tag writes the whole row, including the <ul> and <li> tags to hold the input field's label.
Next, update the src/main/resources/struts.xml file to include the "editPerson" and "savePerson" actions.
Run mvn jetty:run-war, open your browser to http://localhost:8080/persons.html, and click on the Add button.
Fill in the first name and last name fields and click the Save button. This should route you to the list screen, where a success message flashes and the new person displays in the list.
Struts 2 allows two types of validation: per-action and model-based. Since you likely want the same rules applied for the person object across different actions, this tutorial will use model-based.
Create a new file named Person-validation.xml in the src/main/resources/**/model directory (you'll need to create this directory). It should contain the following XML:
The "errors.message" key in ApplicationResources*.properties (listed below) will use the field's "name" attribute to do internationalization. You can also give the <message> element a body if you don't need i18n.
Now you need to configure
PersonAction to know about visitor validation. To do this, create a
PersonAction-validation.xml file in src/main/resources/**/webapp/action (you'll need to create this directory). Fill it with the following XML:
Struts' validation interceptor is enabled by default, so you don't need to configure anything for validation to work.
After saving all your files and running mvn jetty:run-war, validation should kick in when you try to save this form. To test, go to http://localhost:8080/editPerson.html?id=1. If you erase the values in the firstName and lastName fields and click the Save button, you should see the following:
AppFuse is configured so that methods cancel, execute, delete, edit, list, and start are not validated. This allows you to go back from a form with errors on (like above) by pressing the Cancel button.
Create a Canoo WebTest to test browser-like actions
The next (optional) step in this tutorial is to create a Canoo WebTest to test the JSPs. This step is optional, because you can run the same tests manually through your browser. Regardless, it's a good idea to automate as much of your testing as possible.
You can use the following URLs to test the different actions for adding, editing and saving a user.
- Add - http://localhost:8080/editPerson.html.
- Edit - http://localhost:8080/editPerson.html?id=1.
- Delete - Use the edit link above and click on the Delete button.
- Save - Click edit and then click the Save button.
Canoo tests are pretty slick in that they're simply configured in an XML file. To add tests for add, edit, save and delete, open src/test/resources/web-tests.xml and add the following XML. You'll notice that this fragment has a target named ''PersonTests'' that runs all the related tests.
After adding this, you should be able to run mvn integration-test -Dtest=PersonTests and have these tests execute. If this command results in "BUILD SUCCESSFUL" - nice work!
To include the PersonTests when all Canoo tests are run, add it as a dependency to the "run-all-tests" target in src/test/resources/web-test.xml.
Add link to menu
The last step is to make the list, add, edit and delete functions visible to the user. The simplest way is to add a new link to the list of links in src/main/webapp/WEB-INF/pages/mainMenu.jsp. Since this file doesn't exist in your project, you can copy it from target/projectname-version/WEB-INF/pages/mainMenu.jsp to your project with the following command:
Then add the following link:
menu.viewPeople is an entry in src/main/resources/ApplicationResources.properties.
The other (more likely) alternative is that you'll want to add it to the menu. To do this, add the following to src/main/webapp/WEB-INF/menu-config.xml:
Make sure the above XML is inside the <Menus> tag, but not within another <Menu>. Then create src/main/webapp/common/menu.jsp and add the following code to it:
Now if you run mvn jetty:run-war and go to http://localhost:8080/mainMenu.html, you should see something like the screenshot below.
Notice that there is a new link in your main screen (from mainMenu.jsp) and on the top in your menu bar (from menu.jsp).
You've completed the full lifecycle of developing a set of master-detail pages with AppFuse and Struts 2 - Congratulations! Now the real test is if you can run all the tests in your app without failure. To test, run mvn integration-test. This will run all the unit and integration tests within your project.
Total time: 1 minute 30 seconds