In the post #3 I described the steps for DWR-enabling the Spring services that I created in post #2. This post will cover the implementation of the front-end. Now the whole point of DWR is to enable server-side logic to be accessible via javascript, and that makes DWR very well suited for AJAX applications.
The front-end will be implemented in a single HTML page (index.html) with some javascript libraries from DWR, custom javascript, css and HTML.
The first thing to point out is the javascript files originate from the DWR servlet.
8: <script type="text/javascript" src="dwr/interface/bookmark.js"></script>
9: <script type="text/javascript" src="dwr/engine.js"></script>
10: <script type="text/javascript" src="dwr/util.js"></script>
The first library (bookmark.js) is custom generated from DWR, and it contains javascript functions corresponding to the services that I DWR-enabled in post #3. The engine.js library contains the DWR marshalling logic that bookmark.js is dependent on, and the util.js library contains utility functions to assist a web developer leveraging DWR.
The following function is my own custom application function that calls a function from the bookmark.js library that subsequently calls a server-side operation. The parameter (addBookmarks) specifies the callback handler for the server request. In other words the loadBookmarksOperation will be executed asynchronously, and the addBookmarks function will called when the operation completes.
12: function loadBookmarks() {
13: bookmark.loadBookmarksOperation(addBookmarks);
14: }
The addBookmarks function is responsible for populating an HTML table using the data returned by loadBookmarksOperation. The data is returned in JSON format, and the conversion from JAVA to JSON is handled by DWR. Several utility functions (
dwr.util.*) from DWR utility library (util.js) are used for populating the table. This implementation was modeled after a DWR example (
Dynamically Editing a Table).
16: function addBookmarks(bookmarks) {
17: dwr.util.removeAllRows("bookmarkTableBody", {
18: filter: function(tr) {
19: return (tr.id != "pattern");
20: }
21: });
22: for (var i = 0; i < bookmarks.length; i++) {
23: bmk = bookmarks[i];
24: id = bmk.id;
25: dwr.util.cloneNode("pattern", {idSuffix: id});
26: dwr.util.setValue("tableURL" + id, "<a href='" + bmk.url + "'>"" + bmk.url + "</a>", {
27: escapeHtml: false
28: });
29: dwr.util.setValue("tableTitle" + id, bmk.title);
30: dwr.util.setValue("tableDescription" + id, bmk.description);
31: $("pattern" + id).style.display = "";
32: bookmarkCache[id] = bmk;
33: }
34: clearForm();
The saveBookmark function calling the operation for persisting a new Bookmark. This is accomplished by converting the bookmark form values into JSON (once again using DWR utility functions) and passing the data to the saveBookmarkOperation.
48: function saveBookmark() {
49: var bmk = {};
50: bmk.id = dwr.util.getValue("id");
51: bmk.url = dwr.util.getValue("url");
52: bmk.title = dwr.util.getValue("title");
53: bmk.description = dwr.util.getValue("description");
54: bookmark.saveBookmarkOperation(bmk, loadBookmarks);
55: }
An onload attribute is added to the body tag to kick-off the AJAX application.
64: <body onload="loadBookmarks()">
The remainder of the application is basic HTML and javascript.
Over a series of posts I've shown creating a Spring application and services from scratch....in a greatly accelerated manner using Spring code generation from
Skyway Builder. I've also shown how to DWR-enable the Spring services to make the operations available to AJAX front-ends and implementing the front-end.
0
