Struts 2 UI Tags
are simple and easy to use. You need not write any HTML code, the UI tags will
automatically generate them for you based on the theme you select. By default
the XHTML theme is used. The XHTML theme uses tables to position the form
elements.
In this example you
wil see how to create a registration page using Struts 2 UI tags. You will also
learn how to pre populate the form fields, set default values to it and to
retrive the values back in the jsp page.
The register.jsp looks like this
The register.jsp looks like this
The following code
is used to create the register.jsp page
<%@ page language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 01 Transitional//EN" "http://www.worg/TR/html4/loose.dtd">
<%@taglib
uri="/struts-tags" prefix="s"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Register
Page</title>
</head>
<body>
<s:form action="Register">
<s:textfield name="userName" label="User Name" />
<s:password name="password" label="Password" />
<s:radio name="gender" label="Gender" list="{'Male','Female'}" />
<s:select name="country" list="countryList" listKey="countryId"listValue="countryName" headerKey="0" headerValue="Country"label="Select a country" />
<s:textarea name="about" label="About You" />
<s:checkboxlist list="communityList" name="community" label="Community" />
<s:checkbox name="mailingList"
label="Would you like to join our mailing
list?" />
<s:submit />
</s:form>
</body>
</html>
If you view the
source of this page you can see the HTML codes generated based on the XHTML
theme.
Struts 2 ValueStack
Now lets understand how the UI tags
work. In Struts 2 ValueStack is the place where the data associated with processing of the request is
stored. So all the form properties will be stored on theValueStack. The name attribute of the UI tag is the one which links the property on the ValueStack.
The next important attribute of the
UI tag that you need to understand is the value attribute. If you like to populate some default value for a specific
field then you need to set that value attribute to that value.
The following code will by default
set the value of the textfield to "Eswar"
<s:textfield name="userName" label="User Name" value="Eswar"/>
Here we directly specify the value in
the jsp page, instead if you want to set it throught Action then, you can have
a property like defaultName and set its value
to the desired name. In this case the code will look like this.
<s:textfield name="userName" label="User Name" value="defaultName"/>
The property defaultName is stored on the ValueStack so its value will be set to the textfield.
If you think you don't need a seperate form property to do this, then you can
set the userName property itself to the desired value. In this case you need not specify
the value attribute seperately. In this example
we populate the community in this way.
The value set in the label attribute of the UI tags will be used to render the label for that
particular field while generating the HTML code.
Now lets see the
flow of the example. First the index.jsp page will be invoked by the framework.
index.jsp
~~~~~~~~~
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=populateRegister.action">
Here we forward the request to the populateRegister URL. Based on the mapping done in thestruts.xml file the populate() method in the RegisterAction class will be called. Here the mapping is done using the dynamic method
invocation feature of Struts The
struts.xml file contains the following mapping.
<!DOCTYPE struts PUBLIC
"-//Apache Software
Foundation//DTD Struts Configuration 0//EN"
<struts>
<package name="default" extends="struts-default">
<action name="*Register" method="{1}"class="vaannila.RegisterAction">
<result name="populate">/register.jsp</result>
<result name="input">/register.jsp</result>
<result name="success">/success.jsp</result>
</action>
</package>
</struts>
The register action class contains
the form properties and the corresponding getter and setter methods. It also
contains the execute() and populate() methods. In the populate method we first populate the values and then
set the default values for the form fields. The RegisterAction class contains the following code.
0package vaannila;
0
0import java.util.ArrayList;
0
0import com.opensymphony.xworkActionSupport;
0
0public class RegisterAction extends ActionSupport {
0
0private String
userName;
0
0private String
password;
0
0private String gender;
0
0private String about;
0
0private String country;
0
0private ArrayList<Country>
countryList;
0
0private String[]
community;
0
0private ArrayList<String>
communityList;
0
0private Boolean
mailingList;
0
0public String
populate() {
0
0countryList = new ArrayList<Country>();
0countryList.add(new Country(1, "India"));
0countryList.add(new Country(2, "USA"));
0countryList.add(new Country(3, "France"));
0
0communityList = new ArrayList<String>();
0communityList.add("Java");
0communityList.add(".Net");
0communityList.add("SOA");
0
0community = new String[]{"Java",".Net"};
0mailingList = true;
0
0return "populate";
0}
0
0public String
execute() {
0return SUCCESS;
0}
0
0public String
getUserName() {
0return userName;
0}
0
0public void setUserName(String userName) {
0this.userName = userName;
0}
0
0public String
getPassword() {
0return password;
0}
0
0public void setPassword(String password) {
0this.password = password;
0}
0
0public String
getGender() {
0return gender;
0}
0
0public void setGender(String gender) {
0this.gender = gender;
07}
07
07public String
getAbout() {
07return about;
07}
07
07public void setAbout(String about) {
07this.about = about;
07}
08
08public String
getCountry() {
08return country;
08}
08
08public void setCountry(String country) {
08this.country = country;
08}
08
08public ArrayList<Country>
getCountryList() {
09return countryList;
09}
09
09public void setCountryList(ArrayList<Country>
countryList) {
09this.countryList =
countryList;
09}
09
09public String[]
getCommunity() {
09return community;
09}
10
1public void setCommunity(String[] community) {
1this.community =
community;
1}
1
1public ArrayList<String>
getCommunityList() {
1return communityList;
1}
1
1public void setCommunityList(ArrayList<String>
communityList) {
1this.communityList =
communityList;
1}
1
1public Boolean
getMailingList() {
1return mailingList;
1}
1
1public void setMailingList(Boolean mailingList) {
1this.mailingList =
mailingList;
1}
1
1}
Textfield and
Password Tags
Now lets see each UI tag in detail.
The textfiled tag is used to create a textfield and password tag is used to create a password field. These tags are simple and uses
only the common attributes discussed before.
<s:textfield name="userName" label="User Name" />
<s:password name="password" label="Password" />
Radio Tag
To create radio buttons we use radio tag. The list attribute of the radio tag is used to specify the option values. The value of the list attribute can be a Collection, Map, Array or Iterator. Here we use
Array.
<s:radio name="gender" label="Gender" list="{'Male','Female'}" />
Select Tag
We dispaly the country dropdown using
the select tag. Here we specify the option
values using thecountryList property of the RegisterAction class. The countryList is of type ArrayList and contain values of type Country. The Country class has countryId and countryName attribute. ThecountryName holds the country value to be display in the frontend and the countryId holds the id value to store it in the backend. Here countryId is the key and the countryName is the value. We specify this in the select tag using the listKey and listValue attribute. The first value can be specified using theheaderValue attribute and the corresponding key value is specified using the headerKey attribute.
<s:select name="country" list="countryList" listKey="countryId"listValue="countryName" headerKey="0" headerValue="Country"
label="Select a country" />
Textarea Tag
The textarea tag is used to create a textarea.
<s:textarea name="about" label="About You" />
Checkboxlist Tag
The checkboxlist tag is similar to that of the select tag, the only difference is that it displays boxes for each option
instead of a dropdown. It returns an array of String values.
<s:checkboxlist list="communityList" name="community" label="Community"/>
Checkbox Tag
The checkbox tag returns a boolean value. If the checkbox is checked then true is
returned else false is returned.
<s:checkbox name="mailingList" label="Would you like to join our mailing
list?" />
Submit Tag
The submit tag is used to create the Submit button
<s:submit />
Now lets enter the details and submit
the form. The execute() method in the RegisterAction class will be invoked this time and the user will be forwarded to the success.jsp page.
success.jsp
-----------
<%@ page language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 01 Transitional//EN" "http://www.worg/TR/html4/loose.dtd">
<%@taglib
uri="/struts-tags" prefix="s"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Details Page</title>
</head>
<body>
User Name: <s:property value="userName" />
Gender: <s:property value="gender" />
Country: <s:property value="country" />
About You: <s:property value="about" />
Community: <s:property value="community" />
Mailing List: <s:property value="mailingList" />
</body>
</html>
Now lets enter the
following details and submit the form.
The following
registration details will be displayed to the user.
No comments:
Post a Comment