Spring Roo: Customizing Web MVC UI Forms
- By Jose Delgado on February 7, 2011
There are many features that I like from Spring Roo:
- The shell is very effective for constructing projects -with a helpful tab completion-
- Round-trip is essential to keep the code in sync
- Code generation without “unnecessary abstractions” is refreshing -although version 1.1.2 might bring some of them back- just to mention a few.
At the top of the list, I am placing, what I consider the jewel-of-the-crown: The Tagx library for JSP(x) views. The article assumes some familiarity with Spring Roo. For more information on Spring Roo visit its website at http://www.springsource.org/roo.
Tagx Library in a Nutshell
The tagx library is installed by the Web MVC add-on. Spring Roo scaffolds controllers and views from entities classes. Views are created with components from the tagx library. Please read reference document at http://static.springsource.org/spring-roo/reference/html/base-web.html for a complete description.
Without further ado. Straight to business.
This article refers to forms implemented in World Almanac by jD website. World Almanac is a member of a group of web apps created to experiment with Spring Roo development. The link of the showcases website is at https://pragmatikroo.org/showcases. The purpose is to implement typical web development requirements beyond the CRUD scope.
This is the problem to work on: I need to customize a list.tagx component to render country flag images. Typically this component renders strings and numbers inside a grid. The form will be paginated for easy navigation, as shown in the image below. This functionality provides a World Almanac galleria view Additionally, I want to attach a click event for navigating to a country detail page.
The form provides two select controls for enabling counties filtering. The form is paginated and navigated the same way a typical list.jspx form is. Typically Roo select buttons are associated with an action button. In this case, I remove them and the filtering action is triggered by a choice select. I didn’t have to start from scratch. I just tweaked Roo generated source code. Roo is great!.
Below is the source code that renders the flag country gallery view. There is a lot of customization here. However you can still see the skeleton of the original scaffold form created by Roo.
Paginated Gallery JSPx code
Next, I show the country detail form navigated after clicking its flag. WorldAlmanac integrates easily Google Maps as well. It renders the country map using its latitude/longitude stored in the database. All elements together create a nice composition.!
Detailed Country JSPx code
That is it!
This article has shown a customization example using code originally started from the scaffold one created by the Spring Roo Web MVC add-on. I found the Jspx notation very expressive and intuitive. The tagx library is ample and easily to extend if needed. Jspx are XML documents, consequently they are validated against wellness. I have to say that this annoyed me in the beginning but after a short time, I got used to and started to like it. Not to mention the benefits of having forms error checking.
Get our Articles via Email. Enter your email address.