DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Managing Data Residency, the Demo
  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • Structured Logging
  • What Is mTLS? How To Implement It With Istio

Trending

  • Managing Data Residency, the Demo
  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • Structured Logging
  • What Is mTLS? How To Implement It With Istio
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Ext JS Forms Integration with Struts2

Ext JS Forms Integration with Struts2

Davinder Singla user avatar by
Davinder Singla
·
Mar. 16, 13 · Interview
Like (0)
Save
Tweet
Share
12.01K Views

Join the DZone community and get the full member experience.

Join For Free

This article provides the steps to integrate a form created using Ext JS with Struts2
back-end.

A little about Ext JS

Ext JS is a cross-browser JavaScript library for building rich internet applications. Ext JS is available under commercial as well as open source license.

1.  Ext JS provides a whole lot of built-in GUI components. These components come in handy while developing a new application from scratch. There is always a component available for almost all kind of RIA GUI.

2.  Ext JS follows component design model. One can easily extend any of the core components to meet their specific requirements.

3.  Whether it’s IE or latest chrome browser, Ext JS applications look and behave the same no matter where they run. Ext JS utilizes HTML5 features on modern browsers and falls back to alternatives on older browsers.

4.  Ext JS uses AJAX to interact with web server. This enhances the RIA experience. 

Integrating Ext JS with Struts 2

Ext JS forms are submitted using AJAX by default and it expects a JSON/XML response from the server. The response must have a ‘success’ property which determines whether errors are returned from server or not. In case of error response the ‘errors’ property of response is used to set the error messages. We will discuss more in this in later section.

Struts 2 can handle the request from Ext JS like any other request and no special arrangements are needed for that. But to generate json response we need to use json plugin. The procedure to use this json plugin is mentioned in later section.

Now we have got the basic idea about Ext JS and struts 2 integration, let us create a sample example to see how it works.

Ext JS Form

First create a simple form in Ext JS. For simplicity we have created a form with 3 fields and a submit button. The form field labels are First Name, Last Name and Age.

Ext JS uses form field names as parameter names while submitting the request to server. Hence we need to provide the names for each field whose value we want to send to the server.

{
    xtype: 'textfield',
    padding: 10,
    width: 303,
    name: 'firstName',
    fieldLabel: 'First Name'
},
{
    xtype: 'textfield',
    padding: 10,
    width: 302,
    name: 'lastName',
    fieldLabel: 'Last Name'
},
{
    xtype: 'numberfield',
    padding: 10,
    width: 186,
    name: 'age',
    fieldLabel: 'Age'
}

To enable struts action to read the form data correctly, we need to make sure we have the attributes in the action class with same names as the names mentioned above in Ext JS form. We should also define the action attributes with correct data types to allow auto conversion by struts. One important point to keep in mind is that we should have public get/set method for each of the attribute defined to capture submitted form field data. Please check the form action code in below section for more details on this.

Submit button handler

When submit button is clicked, the JS function associated with the button handler would be invoked. This function sets the form URL and invoke submit() method of the form defined in Ext JS. The simplest form of button handler could be as shown below:

var form = button.up('form').getForm();
form.url='registerUser';
//form.submit();

form.submit({
    success: function(form, action) {
        Ext.Msg.alert('Success', 'The form is submitted successfully.');
    },
    
    failure: function(form, action) {
        Ext.Msg.alert('Failed', 'There is some error returned from the server.');
    }
});

There are two ways in which a form can be submitted using Ext JS’s form. If we do not want to process the response from server after submitting the form then we can simply call ‘submit()’ method without any arguments. This way is commented in above code sample.

Ext JS provides a way to process the response after submit. The ‘submit()’  method can have two callback methods configure – success and failure.

success is invoked when the response has success property set to true.

failure is invoked if the success property is missing in response or it is set to false.

Struts 2 Action

Now we have looked into the client side of code. Let us now focus on the server side of code for handling the submitted form data. The below code provides the details of our action class.

public class Registration {

	private boolean success;
	private String firstName;
	private String lastName;
	private int age;
	
	public String registerUser() {
		
		System.out.println("Got following user details: " );
		System.out.println("First Name: " + getFirstName());
		System.out.println("Last Name: " + getLastName());
		System.out.println("Age: " + getAge());
		success = true;
		return Action.SUCCESS;
	}

	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
	
}

For the sake of simplicity we are just printing the submitted data to the console. We have mapped  registerUser method of this class with our form submit action. We will see this in struts.xml file later.

 If you observe this action class is like any other Struts 2 action class. The beauty of struts json plugin is that we no need to make any changes to the action class to return json response. That part is handled by configuring result type to json in struts.xml.

Configuring json plugin with Struts

First you need to download the JSON plugin, if you already don’t have this in your struts download.

To configure json plugin follow the following steps:

  1. Keep the json plugin jar file in the WEB-INF/lib directory of the web project.
  2. In struts.xml, create a new package that extends json-default. If you want to use an existing package then add the json-default as comma separated in the existing package’s extends property.
  3. Define the actions which have to return json response inside the above defined package.
  4. Put the result type as json for the actions to return json response.
After following the above steps the struts.xml would look like the following

<struts>
<package name="default" extends="json-default" namespace="/">					<action name="registerUser" class="sampleapp.action.Registration" method="registerUser">
			<result type="json"/>
		</action>
	</package>
</struts>

Now we are ready to run and test our integration example. When we run the example, the form displayed in first screen shot will come up. Add certain details and hit the ‘Submit’ button, you will see your entered details on the server console.

Handling server side errors

The server side validation can be handled in the similar way as we do for any other struts 2 application. To display validation error against a field of form add the error message in the struts error map. Make sure that the error is added using the field name that is used in Ext JS form panel. Set ‘success’ property in action to false. This makes Ext JS to interpret the response as failure. That is all, nothing else is need to link the error with corresponding form fields. When the above json is returned to the Ext JS form, it will display the error messages against the fields.


Ext JS Form (document) Integration

Opinions expressed by DZone contributors are their own.

Trending

  • Managing Data Residency, the Demo
  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • Structured Logging
  • What Is mTLS? How To Implement It With Istio

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: