About this Tutorial
This tutorial will show you how to create master/detail screens with Wicket. 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 a responsive CSS form layout (courtesy of Bootstrap). You will also configure client and server-side validation to improve your users' experience.
Table of Contents
- Introduction to Wicket
- Create a PersonListTest
- Create a PersonList class that will fetch people
- Create PersonList.html to show search results
- Create a PersonFormTest and PersonForm for edit(), save() and delete() methods
- Create PersonForm.html to edit a person
- Add a link in PersonList.html
- Configure Validation
- Create a Canoo WebTest to test browser-like actions
- Add link to menu
Introduction to Wicket
Wicket is a component-based framework for developing web applications. With proper mark-up/logic separation, a POJO data model, and a refreshing lack of XML, Apache Wicket makes developing web-apps simple and enjoyable again. Swap the boilerplate, complex debugging and brittle code for powerful, reusable components written with plain Java and HTML.
Create a PersonListTest
This tutorial shows you how to create a Wicket application using test-first development. You will use JUnit and a BasePageTest that instantiates page classes for you.
PersonListTest.java class in src/test/java/**/webapp/pages:
This class will not compile until you create the
Create a PersonList that will fetch people
PersonList.java file in src/main/java/**/webapp/pages:
SortablePersonDataProvider class in the same directory. Populate it with code to allow sorting of your domain objects.
You'll also need to create a
PersonModel class to allow your domain object to be passed around by Wicket.
Since Wicket requires your template exists before tests will pass, please continue to the next step before running your test.
Create PersonList.html to show search results
Create a src/main/java/**/webapp/pages/PersonList.html page to display the list of people.
Now if you run mvn test -Dtest=PersonListTest, your test should pass.
Total time: 5.847 s
Open src/main/resources/ApplicationResources.properties and add i18n keys/values for the various "person" properties:
Run mvn jetty:run and open http://localhost:8080/persons in your browser. Login with admin/admin and you should see a screen similar to the figure below.
Security settings for AppFuse specify that most url-patterns should be protected (except for /signup and /passwordhint). This guarantees that clients must go through Wicket's
WicketFilter to get to view pages.
Create a PersonFormTest and PersonForm for edit(), save() and delete() methods
To start creating the detail screen, create a
PersonFormTest.java class in src/test/java/**/webapp/pages:
Nothing will compile at this point; you need to create the
PersonForm that you're referring to in this test.
In src/main/java/**/webapp/pages, create a
PersonForm.java class and populate it with the following code:
You might notice a number of keys in this file - "person.deleted", "person.added" and "person.updated". These are all keys that need to be in your i18n bundle (
ApplicationResources.properties). You should've added these at the beginning of this tutorial.
Create PersonForm.html to edit a person
Create a src/main/java/**/webapp/pages/PersonForm.tml page to display the form:
Run mvn jetty:run, open your browser to http://localhost:8080/persons, 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.
Save all your files and run the tests in
PersonFormTest using the command mvn test -Dtest=PersonFormTest.
Total time: 5.803 s
Add a link in PersonList.html
To allow users to click on the list screen to get to the edit screen, you need to add a link to the table row. In
PersonList.java, replace the following:
... with the following code block that adds a link.
Then add this "edit-link" component to PersonList.html, replacing the existing "person.id" column.
To enable server-side validation, you simply need to change the form elements from being
TextField<String> components to
RequiredTextField<String> on line .
After saving all your files and running mvn jetty:run, validation should kick in when you try to save this form. To test, go to http://localhost:8080/personform and try to add a new user with no first or last name. You should see the following validation errors:
To fix your
PersonFormTest so it passed with these new validation rules, change its
shouldDisplayErrorMessagesOnAddEmptyPerson() method to look for required field errors.
Create a Canoo WebTest to test browser-like actions
The next (optional) step in this tutorial is to create a Canoo WebTest to test your UI. 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/personform.
- Edit - Go to http://localhost:8080/persons and click on an existing record.
- Delete - Use the edit link above and click on the Delete button.
- Save - Use the edit link above and 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.
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.
If you look at your
PersonFormTest, all the tests depend on having a record with id=1 in the database (and DeletePerson 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 DeletePerson doesn't fail.
DbUnit loads this file before you run any tests, so these records will be available when you run WebTest.
You should now be able to run mvn verify -Pitest and have these tests execute. If this command results in "BUILD SUCCESSFUL" - nice work!
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/java/**/webapp/pages/Home.html.
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 open src/main/webapp/common/menu.jsp and add the following code to it:
Now if you run mvn jetty:run and go to http://localhost:8080/home, you should see something like the screenshot below.
Notice that there is a new link in your main screen (from Home.html) 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 Wicket - Congratulations!
Because it's so much fun to watch tests fly by and success happen, run all your tests again using mvn install -Pitest.
Happy Day!BUILD SUCCESS
Total time: 1:18.704s