"The secret of change is to focus all of your energy, not on fighting the old, but on building the new."
– Socrates
In today's world, Ajax plays an essential role in web application development. Google Web Toolkit (GWT) offers internationalization, cross-browser compatibility, Java coding, hosted mode for unit testing the client component in isolation from the server-side component, and so many things, for free. Unit testing the client-side business logic and building a JUnit safety net around the GWT code is very important for code quality and code maintenance. GWT code works with different Document Object Model (DOM) widgets and events; business logic gets tied up with the DOM widgets and events and makes it impossible to write unit test for the business logic. Mockito plays a key role in isolating the DOM widgets and events from the logic.
This chapter provides an overview of Ajax/GWT, explains the Model View Presenter (MVP) pattern and loose coupling, and provides examples and strategies to mock GWT widgets using Mockito. The following topics are covered in this chapter:
- AJAX/GWT overview
- Developing a small GWT application with the MVP pattern
- Unit testing MVP with Mockito
AJAX stands for Asynchronous JavaScript and XML. Ajax allows content on web pages to update immediately when a user performs any action, unlike an HTTP request, where users must wait for a whole new page to load and be rendered by the web browser. Conventional web applications transmit information to and from the server using synchronous requests. Users fill out a form, hit submit, and get directed to a new page with new information from the server. The user cannot do anything with the web page until the response is back from the server; this means the user is blocked while the request is being processed. In Ajax, JavaScript makes a request to the server, interprets the response, and updates the current screen. The user never gets to know that anything was even transmitted to the server, as the user can continue to use the application while the JavaScript requests information from the server in the background.
Ajax combines numerous tools, such as JavaScript, Dynamic HTML (DHTML), XML, Cascading Style Sheets (CSS), JSON, the DOM, and the Microsoft object, XMLHttpRequest.
The following JavaScript snippet explains an Ajax call and how to handle the result in a JavaScript callback method:
function ajaxFunction() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4) {
// 200 is a successful return
if(xmlhttp.status == 200){
alert(xmlhttp.responseText);
}else{
alert('Error: '+ xmlhttp.status);
}
}
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}The xmlhttp.responseText object contains the server response. It could be an document, a simple text, or JSON data. The client-side JavaScript has to process the data as per requirement. To know more about Ajax, visit the following URL:
https://developer.mozilla.org/en/docs/AJAX
GWT is a development toolkit for building and optimizing complex browser-based RPC applications. The goal of GWT is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.
The preceding Ajax example checks the browser version, creates the request object, and makes an asynchronous call. The callback checks the status of the response and processes the response to bind the data to the appropriate DOM object. Ajax response processing needs special care as it handles lots of potential error cases due to network and asynchrony (plus browser incompatibilities), and adds complexity. Maintaining JavaScript code is very difficult as it is dynamic in nature, and because there is no modularization; even the inheritance system using prototype inheritance is both weak and poorly understood. There is no encapsulation, due to which, writing unit tests for JavaScript is not easy. Also, JavaScripts are browser sensitive as each browser doesn't support the same set of JavaScript APIs. GWT provides cross-browser support; we build the application in Java and the GWT compiler translates the Java code into JavaScript that runs on all common browsers. As the code is written in Java, we can write unit tests, refactor code, reuse our existing Java skills, share code with other Java codebases, use Java tools, and gain the things that the Java language is good at, such as static typing and strong OO designs, and build a maintainable software in Java using GWT.
The following are the main advantages of GWT:
- As it is written in Java, it gets Java tool supports such as refactoring, unit testing, seamless integration with continuous integration tools, and Java documentation
- The GWT compiler generates optimized JavaScript code that helps in faster client-side JavaScript execution and performance
- GWT provides cross-browser support; so if your code runs fine in one browser, it will run fine in other common browsers as well
- Maintainable application can be developed using GWT, for example, MVP, MVC, and event bus
- Decent library support and third-party widgets for complex UI development
- Java code can be debugged; the GWT-hosted mode allows us to debug client-side code and also helps us to unit test JavaScript code in isolation from the server code
Visit http://www.gwtproject.org/ for more information. The next section will explore the MVP pattern.