Struts 2 with grid and forms

This is can be a little old-fashioned but there is not much information about it either and maybe someone could find it useful to have a complete example. In this one, we will use a grid to visualize a list of data and a form on the same page that allows filtering the data shown on the screen.

Struts was one of the first MVC frameworks or at least one of the most popular at the beginning of the 21st century. And Struts 2 was an update that simplified its operation, when Spring was already standing out and not only as an MVC framework.

Let’s start with the libraries, next we will indicate which ones we will use for the example:

• struts2-core which contains the core of the MVC framework.
• struts2-convention-plugin that will allow us to use annotations and avoid the XML configuration file.
• struts2-json-plugin to enable the framework to allow JSON calls and responses.
• struts2-jquery-plugin to enable the use of tags associated with JQuery.
• struts2-jquery-grid-plugin to enable the use of grid through associated tags.

The example will be simple as always and step by step we will see how to do it for its correct operation. And to begin with, the first thing to take into account is the configuration of the application to use Struts 2. Normally this configuration has always been done through the web.xml file, but being an application to be deployed in a modern servlet container, such as Tomcat 9 with Servlet API 4.01, we can save it. This will be done with a configuration of the maven-war-plugin plugin. But we will still need to indicate somehow that we are going to use Struts 2. We can do this by creating a filter that will filter all URLs and pass them through the main Struts 2 class.

@WebFilter("/*")
public class Struts2Filter extends StrutsPrepareAndExecuteFilter {
}

And as we have indicated in the use of libraries before, we will try to do it in a more updated way. Making use of annotations and avoiding the use of XML configuration files. So we will also be able to save the XML file of configuration by default of Struts 2.

So, the next step will be to create our main Action that will act as controller. This will contain the following components:

• The @ParentPackage annotation that will allow us to return JSON in one of the methods.
• The attributes searchName and searchAuthor that will compose the form.
  The gridModel attribute that will represent the list to be painted on the screen.
• The search method associated to the URL /searchBook that does nothing and forwards directly to the books.jsp screen.
• The searchJson method associated to the URL /searchBookJson that receives the invocation from the grid and returns a list of objects according to the search parameters of the form.

As you can see this is a dummy example where we create the list manually. Normally we would invoke a web service or the data access layer to get the records that match the search parameters.

Now we will proceed to make the JSP page in which we will show the form and the list. The components of this page include:
The taglibs declarations allow us to generate components easily. We use the own ones of struts, together the struts-jquery plugin and those of the struts-jquery-grid plugin.
The invocation of the taglib sj:head that allows us to use JQuery in the page.
A form composed of two fields and a button that allows us to send the query information.
A grid that shows the content of the list with the searched components. And which is linked to the method searchBookJson of the Action.

The most complex component is the grid, which has several attributes that help to configure its behavior. As they are:

• dataType: Allows to indicate that the information with which the table will be filled will be JSON.
• href: Allows to indicate the URL to invoke to receive the information that fills the list.
• gridModel: Allows to indicate the name of the attribute associated with the list.
• loadonce: Allows to indicate to the component that after the first call the invocations will be made from the client.
• reloadTopics: Allows to be attentive to the event that is indicated so that the list is reloaded when it is triggered.
• formIds: Allows to indicate which attributes of the form to indicate must also be sent to the address indicated in the href attribute.

In this simple way, we will be able to have our own form with a table that shows the records that fulfill its formula inside the same page.

But before finishing, indicate that this solution has a small problem, and it is that it is not the most efficient design. And this is because the screen is reloaded every time the submit button is pressed and a double invocation is performed. On the one hand the method searchBook is invoked that does nothing but reload the page, and once the page is reloaded the method searchBookJson is invoked and this is the one that makes the search and shows the data by screens.

The way to make it theoretically efficient is very similar to the one shown in the example. With the difference that the submit button must be replaced by a link that initiates the reloadGrid event and therefore leads to the reloading of the list through Ajax invocations. No need to reload the screen.

<sj:a value="Search" button="true" onClickTopics="reloadGrid" indicator="indicator" />

Unfortunately, although the theory and the documentation indicate that it should work this way. When doing it this way, an error associated to the invocation and loading of data appears which is not very conclusive about where the origin of the same one can be: Uncaught RangeError: Maximum call stack size exceeded. And because of that, I would like to create a post that indicates an alternative solution to the problem.

I hope that at least this not-so-efficient way is valid for someone who has to perform maintenance or support of Struts 2 projects. As always, you can see all the code here.