maxheapsize.com » jquery

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?