The use case for my little example is the following: A user is offline and wants to enter some new books into a book management web application.

OK the first question that arises is: How can a client detect whether it is on- or offline? The answer is it shouldn’t be automatically and you can find a good answer to that here. So the user needs to be aware whether he is online or not and triggers a syncronisation with the web server by himself.

In HTML5 you have a client side storage where you can place stuff. It is a key/value pair storage with a maximum size of 5MB. To persist an object (in my example a book) you best better use JSON. The following code snipplet shows a JavaScript function called preserve that collects all entered details for a book from an input page and places the result in the local storage. The local storage can be accessed with localStorage as you can see in line 15.

function preserve() {

	function getValueById(id) {
		return document.getElementById(id).value;
	}

	var JSONbook = {
		"title" : getValueById("title"),
		"isbn" : getValueById("isbn"),
		"author" : getValueById("author1")
	};

	var bookString = JSON.stringify(JSONbook);

	localStorage.setItem(localStorage.length + 1, bookString);
}

Due to the fact that you can only place strings into the key/value store one has to convert the JSON object into a string. This can be achivied with the help of the following free javascript stringifier/parser which I use here in line 13.

Of course localStorage.length + 1 is not a good way to generate a key, but for this experimental example it suits the needs.

So now when a user is back online and decides he wants to push all the newly created books into the database server a little Javascript like the following could do the job for him. For example by clicking on a button the persistAllBooks gets invoked. This function sequentially reads all book objects from the localStorage and calls the post_to_url function for each book. post_to_url builds up a form, fills it with the books attributes and pushes them to the server.

function persistAllBooks() {
	for (var i = 1; i <= localStorage.length; i++) {
		var item = localStorage.getItem(i);
		var parse = JSON.parse(item);
		post_to_url(parse);
	}

}

function post_to_url(params) {
	var form = document.createElement("form");
	form.setAttribute("method", "post");
	form.setAttribute("action", "/bookmngt/book/save");

	for (var key in params) {
		var hiddenField = document.createElement("input");
		hiddenField.setAttribute("type", "hidden");
		hiddenField.setAttribute("name", key);
		hiddenField.setAttribute("value", params[key]);

		form.appendChild(hiddenField);
	}

	document.body.appendChild(form);
	form.submit();
}

Thats it. Of cource the book creation page needs to be offline available to the client and HTML5 is helping here too.

Thanks to Thomas Asel for brainstorming and talking about HTML5 which led to this post.

HTML5 Resources

The following list contains some good HTML5 resources I found on the net while experimenting a little.

Dive Into HTML 5 – diveintohtml5.org
Browsers with Wings – slideshare.net/remy.sharp/browsers-with-wings
HTML5 on Wikipedia – en.wikipedia.org/wiki/HTML5
“Offline”: What does it mean and why should I care? – www.html5rocks.com/tutorials/offline/whats-offline

Here you can see youself: http://svn.terracotta.org/svn/ehcache/trunk/core/src/main/java/net/sf/ehcache/util/UpdateChecker.java

Fortunately you can disable this behavior by adding an Ehcache configuration to your Grails application. I have tested this with a Grails 1.2.0 application which includes Ehcache 1.7.1.

Simply place an ehcache.xml file in your <app-root>/grails-app/conf folder containing your Ehcache configuration. For this post I am using the configuration that ships with Ehcache as default (ehcache-failsafe.xml) and modify it.

<ehcache xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="ehcache.xsd" updateCheck="false">

    <diskStore path="java.io.tmpdir"/>

    <defaultCache
            maxElementsInMemory="10000"
            eternal="false"
            timeToIdleSeconds="120"
            timeToLiveSeconds="120"
            overflowToDisk="true"
            maxElementsOnDisk="10000000"
            diskPersistent="false"
            diskExpiryThreadIntervalSeconds="120"
            memoryStoreEvictionPolicy="LRU"
            />

</ehcache>

With the attribute updateCheck=”false” in the root tag the haunting is gone.

XML Schema for Ehcache config can be found here: http://ehcache.org/ehcache.xsd

More Information about Ehcache configuration: http://ehcache.org/documentation/configuration.html

for /f "tokens=* delims=" %%i in ('dir /s /b /a:d *svn') do (
rd /s /q "%%i"
)

Just place the above lines into a file called removeSvn.cmd, place it into the polluted folder and then run it. Done.

Another resources on this topic:

• Recursively remove all .svn directories

• Create Domain UML 0.5 created by Al Phillips (Source code)
• Class diagram plugin 0.4.1 created by Trygve Amundsen

The application I used is a small book management app that manages a couple hundred books at my workplace.

Create Domain UML plugin

First I tried the Create Domain UML plugin. This plugin is very easy to install and actually consists only of one custom Grails  script called CreateDomainUml.groovy.

To generate the diagram the yuml.me service is used. The service is totally free according to the faq section. But still his  might be a problem for some people as they cant send any source codes of there program across the internet. Well, you could run your own yuml service by buying the software and run it on an internal server.

To install the plugin into your Grails application simply enter the following command line command.

grails install-plugin create-domain-uml

To generate a class diagram just enter:

grails create-domain-uml

Ok enough texting. Let’s see what the plugin can do for us.

Scroffy Top Down class diagram

Orderly Top Down class diagram

The plugin creates a HTML-File and puts it into the applications root folder. On the page you see four links directing to www.yuml.me. Two of them will generate a Top Down class diagram (scroffy/orderly) as you can see above and the the other two a Right Left version of the class diagram (scroffy/orderly).

Class diagram plugin

Second up to try the Class diagram plugin. This plugin is not that easy to install. First you need to download and install Graphviz. Graphviz is an open source graph visualization software licensed under the Common Public License Version 1.0.

The installation can be triggered by executing the following command line command.

grails install-plugin class-diagram

After some configuring and starting up your Grails application class diagrams can be generated by invoking http://localhost:8080/classDiagram. The result could look like the following.

Class diagram generated by Class Diagram Plugin

The plugin comes with a mass of config possibilities I had not a deep look into. There you can change the diagrams direction (TopDown/RightLeft), appearance and level of detail.

Little downsite of the plugins is that its views depend on JQuery so might look ugly without. But it is still possible to generate the desired diagram.

Conclusion

Create Domain UML is way easier to install and has fancy but not so detailed diagrams.

Class diagram plugin is not so easy to install and has a lot configs. The diagram itself does not look so nice but is more detailed.

For my docs I used Class diagram plugin although it doesn’t look so neat. For me it was more important that the diagram shows all details of the model.

Hopefully we will see some improvements to the Create Domain UML plugin, because it is easy to use and looks nice.

Windows (catalina.bat)

set JAVA_OPTS=%JAVA_OPTS% -server -Xms512M -Xmx768M -XX:MaxPermSize=128m

Grails 1.2 default PermGen memory is set to 96MB. The Sun JVMs default is 64MB. (Java HotSpot VM Options)

yast -> Software -> Software management

Then invoke following command on console.

./jdk-6u14-linux-i586-rpm.bin

Afterwards create file /etc/profile.local and add following line.

export JAVA_HOME=/usr/java/jdk1.6.0_14

That’s it.

But it was not that easy to realize my task due to the lack of good documentation and finding the correct xpath expression.

The following code snippet grabs the text value from a text input field with the id surname and saves it in the ant property xyz.

def testSomething() {
   webtest('Some description') {

      // saving initial value
      storeXPath(xpath: "id('surname')/@value", property: "xyz")

      // restore initial value
      setInputField(name: "surname", value: "#{xyz}")

   }
}

Pretty simple in the end, but it took a while till I got it. Maybe it helps someone.