Struts2 UI tags are used to generate HTML form elements in result pages. Earlier we looked into Struts2 Data Tags and Struts2 Control tags and how we can use OGNL expressions with Struts2 tags. This tutorial is aimed to provide details about the most commonly used Struts2 UI tags with a simple project.

Struts 2 UI Tags

Struts 2 UI tags provides following functionalities out of the box:

  1. Generating HTML markup language
  2. Binding HTML form data to Action classes properties
  3. Tie into Struts2 framework type conversion from String to Objects and vice versa
  4. Tie into Struts2 framework Validation and i18n support

Struts 2 UI Tags Examples

Some of the important Struts2 UI tags are:

  1. form tag: We can create HTML form with form tag, this tag not only generates the HTML markup but also generates form id, method and action with servlet context URI. For example if we use Struts2 form tag as below

    The corresponding HTML getting generated is:

    Notice that in action, it automatically includes the web application servlet context and action prefix for Struts2 invocation. It also creates a table with specific class that we can use for having our own CSS styling.
  2. textfield tag: One of the most widely used Struts2 UI tags to create input element for user input in form. When we use this tag, it generates a table row with two columns, one for the label and another for the user input with type as text. For example;

    Generated html is:
  3. password tag:Same as textfield tag except that fields are not shown and input type is password.

    generated html snippet is
  4. textarea tag: Used to create textarea html element in the form. We can specify the textarea size with cols and rows attribute.

    generated html code is
  5. checkbox tag: Used to generate checkbox element in the html form.

    generated html code is
  6. select tag: Used to generate select box in the html page. We can use multiple attribute to allow multiple selections.

    generated html code is
  7. checkboxlist tag: Similar to select box, only difference is in the rendering of the checkboxes.

    generated html snippet is
  8. radio tag: We can use this tag to generate radio buttons in the html page.

    generated html is
  9. doubleselect tag: We can use this tag to link together two select boxes so that changing the value in first box changes the choices in the second select box. For example

    Generated html code is

    Notice that it automatically creates the javascript code that otherwise we would have to write on our own.
  10. submit tag: Used to create submit button in the html page to submit the form.

    generated html code is

Let’s create a simple Struts2 project where we can see the UI tags usage. Our final project will look like below image.

Configuration Files

web.xml

Deployment descriptor has configuration to use Struts2 framework.

pom.xml

Maven project configuration with struts2-core dependency.

struts.xml

Simple package and action mapping with result pages.

Java Bean

A simple java bean with getter and setter methods for properties. Some of the variables are array where we are expecting multiple values in the form.

Action Class

Simple action class that is basically forwarding the request to another result page to generate the response.

Result Pages

home.jsp

This is the result page where Struts2 UI tags are getting used to generate HTML response page for client. User can fill in the details and submit the form to action class.

When home action is invoked, the generated HTML page looks like below image.

The generated HTML response by the result page code is:

welcome.jsp

A simple JSP page that is showing the values entered by the used in the form. The response html page looks like below image.

Did you noticed the hidden tag, we can use this tag to generate hidden element in the html page. The name attribute corresponds to the java bean property of the action class.

That’s all for Struts2 UI tags example project, you can download the project from below link and play around with different attributes available for different UI tags.

By admin

Leave a Reply

%d bloggers like this: