Web Application development with DWR(direct web remoting) and Spring Boot
DWR is a Java library which allows JavaScript functions to call Java methods and Java methods to call JavaScript functions(reverse ajax). It dynamically generates the JavaScript library of service class or servlet class to allow web browsers to call java code.
DWR has two main parts:
- Java servlet or Java service which is running on the server that accepts requests and sends responses back to the client.
- JavaScript library which is running on the web browser that sends requests to the server and receives the response to update the page.
It provides integration with servlets and popular frameworks such as Spring, Hibernate, Struts and others. It is open source.
Having a basic understanding of DWR, let us move to the code area where we will build web applications using spring boot and DWR.
Following are steps for configuring DWR in spring boot project
- In the first step create a spring boot project with the following dependency.
<dependency><groupId>org.directwebremoting</groupId><artifactId>dwr</artifactId><version>3.0.2-RELEASE</version></dependency>
2. Add spring.xml to the resource folder to configure dwr scanning.
<?xml version=”1.0" encoding=”UTF-8"?><beans xmlns=”http://www.springframework.org/schema/beans"xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance"xmlns:dwr=”http://www.directwebremoting.org/schema/spring-dwr"xsi:schemaLocation=”http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.directwebremoting.org/schema/spring-dwr http://www.directwebremoting.org/schema/spring-dwr-3.0.xsd"><dwr:annotation-config/><dwr:annotation-scan scanRemoteProxy=”false” base-package=”com.dwr.test”/><dwr:configuration/></beans>
3. Configure spring boot startup main class to load spring.xml
@SpringBootApplication@ImportResource(“classpath*:spring.xml”)public class DwrDemo {public static void main(String[] args) {SpringApplication.run(DwrDemo.class, args);}}
4. If the project is based on servlets then dwr.xml is used for configuration but in case of spring boot we need to add configuration with java code.
@Configurationpublic class DwrConfig {/*** Join the DWR servlet, which is equivalent to configuring in xml* @return*/@Beanpublic ServletRegistrationBean servletRegistrationBean() {DwrSpringServlet servlet = new DwrSpringServlet();ServletRegistrationBean registrationBean = new ServletRegistrationBean(servlet, “/dwr/*”);// Set to true to enable DWR to debug and enter the test page.registrationBean.addInitParameter(“debug”, “true”);//pollAndCometEnabled set to true to increase the loadability of the server, although DWR has a mechanism to protect the server from overload.registrationBean.addInitParameter(“pollAndCometEnabled”, “true”);registrationBean.addInitParameter(“activeReverseAjaxEnabled”, “true”);registrationBean.addInitParameter(“maxWaitAfterWrite”, “60”);return registrationBean;}}
5. In the final step we have to create a service class which will be used for writing business logic.
import java.util.LinkedList;import java.util.List;import org.directwebremoting.annotations.RemoteMethod;import org.directwebremoting.annotations.RemoteProxy;import org.springframework.stereotype.Service;@Service@RemoteProxy // The annotation of spring is equivalent to exposing the servicepublic class Message {@RemoteMethodpublic List<String> getOptionList() {List<String> option = new LinkedList<>();for (int i = 0; i < 5; i++)option.add(“field_” + i);return option;}}
6. Final step integration with html
<!DOCTYPE html><html><head><title>DWR test</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><script type='text/javascript' src='/dwr/engine.js'></script><script type='text/javascript' src='/dwr/interface/Message.js'></script><script type="text/javascript" src="/dwr/util.js"></script><script>$(document).ready(function() {dwr.util.useLoadingMessage();update();});function update() {Message.getMessage(function(data) {dwr.util.setValue("divResponse", data);dwr.util.setValue("text", data);});getList();}function getList() {Message.getOptionList(function(data) {fillDropDown(data);fillWithDwrUtil(data);});}function fillDropDown(options) {var select = document.getElementById("optionList");for (var i = 0; i < options.length; i++) {var opt = options[i];var el = document.createElement("option");el.textContent = opt;el.value = opt;select.appendChild(el);}}function fillWithDwrUtil(data) {dwr.util.removeAllOptions("optionList2");dwr.util.addOptions("optionList2", data);}</script></head><body><div class="container"><div class="alert alert-success"><center><strong>Web App demo of DWR</strong></center></div><label for="sel1">Random message number from server</label><div id="divResponse" class="well"></div><div class="form-group"><input id="text" class="form-control"></div><h2>Form control: select</h2><p>The form below contains two dropdown menus (select lists):</p><form><div class="form-group"><label for="sel1">Drop down list using js function</label> <selectclass="form-control" id="optionList"></select> <br> <label for="sel2">Drop down list using dwr util</label> <selectclass="form-control" id="optionList2"></select></div></form></div></body></html>
Final result is below:-
To know more about dwr, Kindly go to this link DWR — Easy Ajax for JAVA.
You can find the full code base at my github repo.
References:-
