Integrating DWR and JAWR with Ext js

Readers : This blog can be a reference to users who are familiar with Ext Js concepts.

Overview

DWR (Direct Web Remoting)

DWR is termed to be easy AJAX for java, it makes Java and JavaScript communication much easier than it was before.

Advantages of DWR over AJAX

1. Since DWR exposes methods of Server Side Java objects to Javascript Code, with DWR we can eliminate the “Ajax request-response cycle from your application code”.
2. With XMlHttpRequest object directly or with the server’s response the “Client-Side Code has never to be deal with.
3. You don’t have to write object serialization code or user hird party tool to turn your objects into XML.

JAWR

Jawr is tunable packaging solution for both Javascript and CSS. It minifies and compresses the file, resulting in reduced page load times.

My demonstration includes a simple Ext-Js and DWR integration along with JAWR.

Advantages of using DWR and JAWR:

• The response time of the server from a client using a regular browser would be minimal.
• Effective and Easy communication between java and JavaScript.
• JAWR provides immense advantage over maintaining JavaScript and CSS files throughout the application.
• It helps you manage your size of your resource. Additionally you can enable or disable the debugging option.

Objective

1. To minify the Javascript and CSS files and keep it as a separate bundle.
2. Showcase the difference in response time with and without the files being bundled

Illustration

Since DWR is an RPC library, the communication over Java functions from Javascript and Javascript functions from java is made easy.

From the figure above, we can infer that  DWR can alter the contents by the Javascript Events at any point of time.

Things to know before starting off with the steps to implement the demonstration

• Folder Structure
• Required libraries
• DWR configuration
• JAWR configuration

Folder Structure

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Required Libraries

DWR Configurations

Steps Involved

• Create a xml file, place it inside WEB-INF

Dwr.xml

• Add the required jar files to the lib folder (If the lib folder is not there, add a lib folder)
• To be functional, DWR uses Servlet
• Since DWR do not understand the process, we must do certain changes in xml so as to help DWR understand that it is a servlet. (Refer the screenshot below)

Testing the DWR configurations:

• You can test the configurations by accessing the following URL

http://localhost:8090/z_ExtJs_01/dwr

Refer below for the URL pattern

“http://yourapp:port/dwr”

JAWR Configuration (Property File):

• We need to have an instance that handles both the “Javascript and CSS StyleSheets”.
• Add the “jawr.web.servlet.JawrServlet” to the instance that we have created for the Javascript and CSS in the web.xml(Refer the screenshot below).

Now create the Jawr Configuration file and add this file to the Application classpath in the runtime.

Now that we have DWR and JAWR is setup, we can create the application and test the response time of the application in the local browser.

Steps for creating an application(Refer the screenshot for the folder structure)

1. Create multiple .js files in the page folder. Make sure you create more than 10 files.
2. Now in the WebContent folder, create multiple JSP’s, make sure you include those .js files on to these JSP’s internally.
3. Navigate to jawr.properties file, set debug.on to false or true according to your requirement.
4. Deploy the home page to the server(Home.jsp in my demo), open the browser on Debug mode. Checck for the response time with the respect to the scenarios (Refer the screenshot below).

Response time-1 (Resources are not bundled)

Response time-2 (The resources are bundled)

References

1. http://directwebremoting.org/dwr/index.html
2. https://jawr.java.net/features.html
3. http://docs.sencha.com/ext/6.0.2-classic/