maxheapsize.com » Web

Spring 3 MVC, Ajax and jQuery Magic (or better: simplicity)

Oliver Wehrens — Tue, 20 Jul 2010 04:00:09 +0000

I’m playing around with some web frameworks lately and to see what’s in store with Spring 3 MVC (never did too much with it) I gave it a try to see how it handles Ajax. According to ajax simplification announcement it should be possible to get up and running in (almost) no time.

We will do a simple web application which will show the current time via Ajax.

The directory layout (using maven) should look like this:

Directory Layout



	Spring3MVC
	
		index.jsp
	

	
		spring
		
			org.springframework.web.servlet.DispatcherServlet
		
		1
	
	
		spring
		*.html

The web.xml holds no secrets. The Dispatcher servlet is defined and it should react on everything *.html.

Since we named our Servlet ’spring’ we need to add a servlet configuration for that. It goes in WEB-INF as well.

It uses the component scanning feature of spring and instructs spring to check the package ‘com.maxheapsize.springmvc3.controller’ for controllers. Furthermore a url based view resolver is defined which uses Jstl and looks into /WEB-INF/jsp for jsp with the ending ‘.jsp’.

In WEB-INF/jsp/hello.jsp we define a jQuery snippet for the Ajax request and provide a button which we should push if we want to know the time.




  Spring MVC Ajax Demo
  
  


${message}

How does Spring now know which classes or methods to call? Here comes the nice part about it.

package com.maxheapsize.springmvc3.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Date;

@Controller
public class HelloWorldController {

  @RequestMapping("/hello")
  public ModelAndView helloWorld() {
    return new ModelAndView("hello", "message", "Spring MVC Demo");
  }

  @RequestMapping(value = "/time", method = RequestMethod.GET)
  public @ResponseBody String getTime(@RequestParam String name) {
    String result = "Time for " + name + " is " + new Date().toString();
    return result;
  }
}

The RequestMappings define the Url’s which can be called to reach that code. So the helloWorld method is available with ‘hello.html’ in the web app. Why hello.html and not just hello ? Because we said so in the web.xml. I included a sample message which will be shown at the web page when this method is called.

If you now push the button on the webpage, ‘time.html’ with a parameter ‘name’ is called. This will go directly to the second method. Spring will also check if a string parameter ‘name’ (@RequestParam) is present in the original request. The @ResponseBody annotation indicates that a method return value should be bound to the web response body.

The result will be returned and shown in the webpage.

Ajax Result

Overall this is a pretty nice integration. I tend to use Spring for many projects and this makes it even easier to write some nice web apps in it. If you have a single page application and all you do is sending ajax request back and forth this might be a solution.

JSON response Update

To get a JSON response from your Controller you need to:

Make sure the jackson mapper is present in your classpath. Maven users use:

    
      org.codehaus.jackson
      jackson-mapper-asl
      1.5.3

in their pom.xml.

MySimpleDataObject is a Pojo

The method you are calling has a signature like:

@RequestMapping(value = "/demo", method= RequestMethod.GET)
public @ResponseBody MySimpleDataObject doSomething(@RequestParam name, @RequestParam email)

You are returning MySimpleDataObject at the end

Your calling javascript looks like this:

jQuery.getJSON("demo.html", {name: name, email: email}, function (data) {
        alert(data.someValueInMySimpleDataObject);
      });

How to detect if your server is down when making jQuery Ajax calls

Oliver Wehrens — Mon, 26 Apr 2010 19:19:33 +0000

If you developed an ajax rich web application, maybe even a single page interface, you want to make sure that the user gets notified if the server is not reachable anymore. This happens either if the it goes down or the client loses its network connection.
Depending on your code the application can run for a while and the user is confused about missing interactivity.

So how do you detect this? jQuery offers an error callback if something with the call goes wrong.

window.setInterval(function() {
$.ajax({
   type: 'GET',
   url: 'http://www.myapp.com/heartbeat',
   success: function(data, textStatus, XMLHttpRequest) {},
   error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert('Failure');
    }
  });
}, 2000);

Unfortunately this does not work for a server which is down and if you are using a debugger like Firebug you will see that these calls have the status aborted. It turns out that if the server goes away jQuery will still execute the success callback. So how do you know that the server died?

I changed the response of the heartbeat query to contain some simple string like ‘alive’. In the success callback I just check if the data contains this string. If it does not, I know that I do have a problem and I need to make sure that the user can’t do anything anymore.

I use the jQuery plugin uiBlock to block every interaction and show a nice little message. Check out the uiBlock demos.

var uiBlocked = false;

window.setInterval(function() {
    $.ajax({
      cache: false,
      type: 'GET',
      url: '/mywebapp/alive.txt',
      timeout: 1000,
      success: function(data, textStatus, XMLHttpRequest) {
        if (data != 'alive') {
          if (uiBlocked == false) {
            uiBlocked = true;
            $.blockUI({
              message: "I'm trying to connect to the server.",
              css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
              } });
          }
        } else {
          if (uiBlocked == true) {
            uiBlocked = false;
            $.unblockUI();
          }
        }
      }
    })

  }, 2000);

This code will check the server every 2 seconds and will block the UI when the server is not reachable and will come back up if the connection is alive again. Depending on your scenario (intranet/internet) you can change the interval for checking the connection.

This took me a couple of hours to get to this point and I thought it might be worth sharing. It seems a bit hacky but it works. What do you think?

Lightweight Web Prototyping for the Framework loving (Java) Developer

Oliver Wehrens — Tue, 20 Apr 2010 13:00:53 +0000

A couple of month ago I had an idea for a small web app. But what does it take to do it ? Do you start with the back end or the front end (read server or client side) ? Typically I would start at the back end, get the domain right and then see how I can fit the UI in. If a programmer starts this way you end with the typical ‘the programmer did the GUI’ scenario. That’s not really what I wanted. Don’t think too much about the domain, just see what the needs of the end user are and get the UI done (right).

Trying frameworks …

But there you go, being a framework loving web developer, how do you do the UI, or better, in what technology? Among other I tried JSF 2 and I thought it’s cool. After a couple of hours I realized that this will slow me down. Fiddling with different ideas and concepts I just could not do that with JSF right away. I would have to write my own components. This is supposed to be very easy but still too much waste when I’m not sure if I even will use this.

Trying paper…

Next I started very basic and did some drawings. While this is all nice (I did it on my white board, I strongly recommend to do this on something you can erase) it turns out I had no idea on how to realize that in Html. I knew this must be possible somehow today but I had no idea what does it take to implement things like drag and drop, box scrolling, reordering and more. Nice thing I build on paper…but can I do it ?

The solution

What if I now combine those two approaches ? I needed some lightweight web framework, easy to learn (maybe one I already know) with quick turn around. After looking around for a couple of hours I came up with Html and jQuery.

I have some knowledge in Html and Css but I never did anything in Javascript or jQuery. So there is something new to learn. Since this was on my agenda anyway and I already bought Mannings jQuery in Action book in December I went this route. I hoped that adding jQuery into the page would give me some interactivity to the otherwise static Html page.

It turns out, it was the best choice. I came up with at least three completely different designs in a matter of evenings, got them to a working stage and could ‘feel’ how they would work (or not). After experiencing this I decided to do some substantial changes to the UI. Dragging and dropping is all nice and dandy, but it’s too much clicking and dragging for the app. On paper this really looked cool but in practice it was not.

It’s amazing what you can do with jQuery. You can save state on elements using Html 5 attribute, can load other Html snippets as Ajax responses and use a dozen jQuery plugins for menus, zooming, dragging and so on. Not to mention the power of jQuery itself. You can append action, animations or anything to any element. Without programming one line server side I got a fully working prototype running including adding and removing items, saving, loading and dynamic generated forms.

Some more iterations later (still not 100% happy) I started to implement it for real. Since I wanted to stay with that design (and very much Ajax oriented) I went the route of Direct Web Remoting and Freemarker. Freemarker will render my templates and DWR talks to my Spring beans. Whenever I needed to design another page I first did the standalone Html version, got it to a working state and then integrated it in the app.

Conclusion

Even if I would not have decided to use jQuery and pure Html for the final implementation (totally depends on the use case) I would strongly consider going the same route for doing the prototype again. It was so easy and the feedback was right there. I could throw away not working ideas and make new ones very easily. There was a learning curve using jQuery (and I needed to refresh my CSS) but it was time well invested.

How do you your prototypes? Fully integrated with your existing frameworks or on paper?

Using Selenium2 for web testing (and not Selenium IDE)

Oliver Wehrens — Mon, 04 Jan 2010 05:38:15 +0000

Selenium IDE

Selenium is well know for automatic testing web pages. It does support many browsers, operating systems and languages . A Selenium IDE exists to aid you creating automated tests.

Selenium IDE

It is possible to write extensions in JavaScript to have data driven tests. If you organize your selenium tests in a way that you split the pages and forms in components, you can load up new data for the tests (written in xml) to fill out forms differently for each use case. The Selenium IDE will be of a great help here since you start develop the tests in the IDE and later ‘just’ parametrize the pages. With a couple of more javascript magic you can run these as well in Selenium Remote Control (Selenium RC for short). This even works for running the tests in continuous integration systems like Hudson or Teamcity.

Great Stuff.

The problem.

The drawback coding up your tests with the Selenium IDE is: HTML.

You will end up with some test suites including many test scenarios. It will be one big ball of


  type
  accountnumber:Value
  82892892811


  type
  accountAmount:Value
  2345.33

You will build components and you will end up with GotoIf and Label statements. Back to Basic programming from the 80ties. Without more javascript extensions you also can’t reuse combinations of scenarios.

While this works pretty ok: I’m a programmer and do have a problem with the quality of the produced code. It’s easy to mess up. It’s not safe for refactoring. To extend functionality you need to have javascript knowledge. Depending on your company profile (e.g. java shop) , this might be a problem. Having a dedicated tester on the team certainly helps to overcome these obstacles, but if everybody in the team just once in a while looks into the Selenium IDE tests, the quality and the reliability of the code will not improve. Not to mention all the copy and paste. Been there, done that.

Selenium 2

A much nicer approach for me would be something like this:

WebDriver driver  = new FirefoxDriver();
AppWebTest test = new AppWebTest(driver, "http://myapp.com/login");
LoggedInUser user = test.login("user", "password");
Account account = user.createNewAccount("DemoAccount");
account.addPerson(PersonFactory.createPersonWithNoIncome());
...
account.verify();

This would log in a user, creates an account and assigns a person to it. Everybody could read and understand it. Furthermore you can easily reuse components and logic. I would imagine that creating a DSL, matchers and finders is everything one would need to have a very nice test scenario.

All that is already possible with Selenium 1 and the language bindings (more or less).

Just with the release of the first alpha of Selenium 2 mid december 2009 it became just a little bit easier.

Selenium 2 is the combined effort of Google’s Webdriver and Selenium. Webdriver tries to tackle Seleniums problems with Javascript and the security model as well as the complex Selenium RC API.

Selenium is written in JavaScript which causes a significant weakness: browsers impose a pretty strict security model on any JavaScript that they execute in order to protect a user from malicious scripts.
…
Additionally, being a mature product, the API for Selenium RC has grown over time, and as it has done so it has become harder to understand how best to use it. For example, it’s not immediately obvious whether you should be using “type” instead of “typeKeys” to enter text into a form control. Although it’s a question of aesthetics, some find the large API intimidating and difficult to navigate.

Webdriver does not use JavaScript to control the web browser but uses native controls, e.g. an extension for Firefox or the native automation extensions of IE. Furthermore it introduces an object based API instead of following Seleniums directory based approach.

So given the above example the login method would look something like this:

 public LoggedInUser login(String userName, String password) {
    driver.get(url);
    driver.findElement(By.id("user")).sendKeys(userName);
    driver.findElement(By.id("password")).sendKeys(password);
    driver.findElement(By.id("login")).click();

    LoggedInUser user = new LoggedInUser(driver);

    WebElement startPage = driver.findElement(By.id("startPage"));

    assertThat(startPage().getText()).isEqualTo("Start");
    return user;
  }

You can take this to any level. It took me just a few hours to model the above use case with componentized input elements.

With a bit more abstraction addPerson looks something like the following code. Whatever is needed to add a person to an account will be replayed. This is what Selenium IDE would normally do.

public void addPerson(Person person) {
    jumpToAccountOverView();
    clickOnLink("menu:Overview");
    clickOnLink("table_personTable:link_newPerson");

    inputGuiElement(person.getTitle());
    inputGuiElement(person.getLastName());
...
    clickSave();

And now for the best part. You don’t really need a real web browser. Selenium 2 supports 4 WebDriver:

Firefox
Chrome
Internet Explorer (on Windows)
HtmlUnit

HtmlUnit

With enabled JavaScript on HtmlUnit (it uses Rhino, so not all JavaScript tricks might work, could be a drawback depending on your scenario) I can run my test as TestNG or JUnit test case. No need for a Selenium RC anymore. No browsers running locally or on remote machine listing to ports to execute tests and transmitting results back.

It is very useful to have the Selenium RC take screen shots during it’s run. Selenium 2 can’t do this right now (and with HtmlUnit never can). But by simply integrating some logging in the components and elements and you know right away where things went wrong.
Developing with the Selenium IDE might seem like a must, but during the work on my prototype all I needed was Firebug and a XPath Searcher. I did not miss it at all. To do integration tests you could test all components independently and one at a time. Once these work, chain them together and let them run as unit tests. Did I mention HtmlUnit is fast ?

Conclusion

I barely dug into the webdriver code, I played around with it for a couple of hours and I’m sure there more is stuff (and bugs) to find. Given that Selenium 2 is in alpha 1 stage right now I expect very nice things coming out of it. It certainly looks like the way to go.

Another strong contender is Canoo WebTest. I will have a look at this one in another post.

Update Ajax and HtmlUnit 1/5/2010

It does not seem to work. You need a real browser to get dynamically content re-rendered through Ajax.

A method waiting for an id to be rendered (or timeout after x seconds) could look like this:

  public void waitForElementOrTimeout(String idToWaitFor, int timeout) {
    long end = System.currentTimeMillis() + timeout * 1000;
    RenderedWebElement resultsDiv = null;
    while (System.currentTimeMillis() < end) {
      try {
        resultsDiv = (RenderedWebElement) driver.findElement(By.id(idToWaitFor));
      }
      catch (NoSuchElementException e) {
        //
      }
      if (resultsDiv != null && resultsDiv.isDisplayed()) {
        break;
      }
    }
    assertThat(resultsDiv).isNotNull();
  }

This will either find the element specified or throw an assertion (updated example from the selenium 2 page).

Getting started with JSF 2 (and Maven)

Oliver Wehrens — Fri, 03 Jul 2009 21:21:39 +0000

I use Apache Trinidad at work and since JSF 2 is now final I decided to play with it a bit.

Of course this is going to be the classic Hello World example (as there are many other like this around the web).

First you need to setup a simple Maven project.

The file layout should be something like that.

Directory Layout for JSF 2 Ajax Demo

After that change your pom.xml to include the servlet and jsf2 libs.


  4.0.0
  com.maxheapsize
  jsf2demo
  war
  1.0-SNAPSHOT
  jsf2demo Maven Webapp
  http://maven.apache.org
  
    
      com.sun.faces
      jsf-api
      2.0.0-b13
      compile
    

    
      com.sun.faces
      jsf-impl
      2.0.0-b13
      compile
    

    
      javax.servlet
      jstl
      1.2
    

    
      javax.servlet
      servlet-api
      2.5
    

  
  
    jsf2demo
  

  
    
      maven2-repository.dev.java.net
      Java.net Repository for Maven
      http://download.java.net/maven/2

First we are going to create the managed bean to hold the name we are going to enter.

package com.maxheapsize.jsf2demo;

import javax.faces.bean.*;
import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloWorldBean implements Serializable {

  private String name = "";

  @ManagedProperty(value = "#{demoService}")
  private Service service;

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public void setService(Service service) {
    this.service = service;
  }

  public String getReverseName() {
    return service.reverse(name);
  }
}

To demonstrate the dependency injection with JSF 2 I use a service to reverse the name. Simply add the @ManagedProperty with the name of the service and it will get injected. Of course we need the service. Here it is:

package com.maxheapsize.jsf2demo;

import javax.faces.bean.*;

@ManagedBean(name="demoService")
@ApplicationScoped
public class Service {

  public String reverse(String name) {
    return new StringBuffer(name).reverse().toString().toLowerCase();
  }
}

Very simple…isn’t it ?

The only thing what’s missing is the web.xml and the webpage itself.

The web.xml is pretty straight forward and should not show any surprises.



  Web Application

  
    Faces Servlet
    javax.faces.webapp.FacesServlet
    1
  

  
    Faces Servlet
    *.xhtml
  

  
    javax.faces.PROJECT_STAGE
    Development

The index.xhtml has some differences from earlier versions of JSF. First, JSF now supports Ajax out of the box. To have this enabled you need to load the jsf.js javascript library. The inputText tag binds to our managed bean and includes an f:ajax tag. This tag determines which part should be rerendered (in this case the element with the id reverseName). F:ajax will execute on value holding components always with an ‘onchange’ event and on action components (like commandButtons) with an ‘onclick’ event.
The output will trigger the injected service in our managed bean and return the reversed input string.






  JSF Demo


  

  Ajax JSF 2 Demo

JSF 2 Ajax Demo

And that’s it. Sure it’s a simple example, but so far I do like the minimal configuration and the ajax integration.

Getting the Browsers GeoLocation with HTML 5

Oliver Wehrens — Sat, 11 Apr 2009 08:00:23 +0000

Until now it was almost impossible to get the GeoLocation of a user browsing your site. You could try to use several services to more or less guess the current position. Most of the time they where using the IP address to tackle the problem. This was not very reliable when it came to mobile devices.

Ever since the iPhone hit the market mobile adoption of the web grew exponentially. Google threw in Android and I’m sure some Windows Mobile phones do have GPS as well. According to some talks at re:publica 09 the big telco carriers such as T-Mobile and Vodafone see their future in the mobile (geolocation aware) web.

Even though these devices had the capabilities to get the current location, website developers are still facing the problem that they can not access the positioning hardware of the phone. There was almost no way for (mobile) web developers to get the location of the user. There are some solution out there but you needed to install extra software which is not always possible on a phone.

Fortunately W3C is working on the HTML 5 standard which includes JavaScript access to the browsers location (at least I hope it will be included). The latest beta of Firefox 3.1 (beta3) already supports that API. If you don’t have a GPS system in your computer you can install an addon to set your location. Rumors has it that Apple will release the upcoming iPhone 3.0 OS with a location aware browser and Google will do the same with one of the next updates of Android.

To test that I wrote a small geolocation aware demo webpage with some JavaScript to pull out the information. If you are accessing it with Firefox 3.1b3+ (plugin installed and configured with your position) you will be prompted for unveiling your location to the website. If you do so it will show you your current position on the map and print out the address.

Allow access to the browsers GeoLocation

Showing the GeoLocation of the Browser

To access this information all you need to do is:

    function showMap(position) {
      // Show a map centered at
      // (position.coords.latitude, position.coords.longitude).
    }
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);

Once this feature is widely available in mobile browsers (I do hope for this summer) my bet is that we will see a whole bunch of websites doing all sort of crazy things with these information. I’m a big Location Based Services (LBS) fan and I can’t wait to see people taking advantage of this.

Update Firefox 3.5.x uses Google’s Geolocation service if no other way can be used. This is halfway accurate. It gathers information about nearby wireless access points and your computer’s IP address. No more plugin needed.

IE7 caches rendered elements?

Oliver Wehrens — Mon, 30 Mar 2009 20:19:57 +0000

I’m tasked with some css tweaking to our current product. We need to implement a ‘Print Preview’ screen so the customer can see how this looks before printing. Css supports exactly this use case with the @media notation.

So far so good.

Now Internet Explorer gives me some headache. Basically it looks like that if I render a page and then render the same page again with a slightly different style sheet, the lovely IE (7) will cache the width/text-align of the element. That means formerly right aligned text now looks like center aligned. Using FireBug under Firefox confirms the correct right aligned styled text. Even using the IE Developer Toolbar shows the correct style sheet information and element. Still, it renders sort of centered. By accident the right border of the text is exactly as far away from the left border as in the previous rendering. If I add any attribute to the text cell (or delete an attribute) all of the sudden the text will be rendered right aligned exactly how it should have been in the first place.

My guess is that IE remembers the width and alignment of the text cell from the previous page (why else the centered text appears to be the size). Deleting/adding an element via the developer tools forces a refresh and voila it renders how it should be.

I hate it.

First rendering of the text cell

Rendering with almost the same style sheet

Identifying the cell with the IE developer toolbar

Deleting the 'id' attribute with the Developer Toolbar

Voila, just after deleting the attribute, the cell renders how it should have been

I guess there is a solution for this, I just don’t know it. In any case….this is unexpected behavior.

On top of that: using css and Apache Trindad with a print preview on screen makes it hard to manipulate the css for the printout since I just don’t know the names of the css classes nor the imported Trinidad css file name (and I do have pre compiled/packaged css file where I have to restart the server every time if I do some changes).

*rant off*