selfcontained[web development]

Articles tagged with "java" (2)

Teaching an old Framework new tricks!

Friday August 29, 2008
By Brad Harris

In summary, I want to discuss an alternative approach for developing a rich, dynamic UI using Struts1. The basic approach is:

  • Java Object to JSON string
  • JSON String consumed by Javascript
  • Manipulate UI, update Javascript model
  • On submit of form serialize Javascript model to JSON string
  • Set value of hidden input to JSON string
  • JSON string to Java Object on server side

Modern web development frameworks have come a long way, in almost every language. Many of the current popular frameworks have integrated widgets or processes for building rich ajax powered UI's with little hand-rolled code. This makes developing those applications faster and easier. Unfortunately, we can't always use the latest and greatest new frameworks as developers.

While working on a J2EE web application that was started over 5 years ago, I've learned a lot about how frameworks have evolved since then. When this project was started, Struts 1 was very popular, and a proven framework, so was naturally adopted for the front end. Over time, many things were built to integrate with Struts 1 and provide custom functionality that was required. This makes it very difficult, and highly improbable that a new front end framework can be swapped in due to the time and money that would have to be invested. At some point that may be a necessity, but until then, you have to work with what you have.

Building a rich UI using ajax in Struts 1 is ... interesting. Sruts1 is very form centric, and all of your form inputs in your UI map directly back to some field on your Java form object in one way or another. This makes it tricky to provide a flexible data structure for a rich UI that may be adding or removing elements. Try adding/removing elements to your page dynamically, and having them map back to your Struts1 Form in a clean way and you'll see what I'm talking about. A recent approach I took to tackling this situation was to depend very little on the framework.

Lets say I have a Java object graph I want to load into some front end javascript model to work with in the UI. I can fetch this asynchronously as the page loads as a JSON payload, or just dump it to the page into the appropriate place so my javascript consumes it. Either way, I need to make sure its painless to convert this data structure to a JSON string, or create it from a JSON string. This will make passing it back and forth from the server side to the client side much easier.

I can then use this as my front end data model to display, change, remove and add data. When I'm ready to commit my changes, I then have to get that back to my server side Java action. Obviously I could also make the persistence portion asynchronous as well, but sometimes thats problematic, as you may have a lot that goes on in the backend and the rendering of a new page (security, alerts, etc.) that you would have to replicate if you were to do this asynchronously. To keep everything working as normal, one approach is to take your javascript data graph, and serialize it into a json string and set it into an html hidden input. This input can be mapped back to your Struts form, so back in your action you have a json string you decode and create the appropriate Java objects from. I've found this to be a very useful approach when trying to build a very rich UI on top of an older framework. In summary, here are the steps followed:

  • Build your data as Java objects that can be serialized into JSON, and created from a JSON string.
  • Consume the JSON data into your javascript and work with it as needed in the front end.
  • On submit of the form, serialize the Javascript object into a JSON string and set it onto the value of a hidden input
  • Get the value of the hidden input on the server side as your framework supports, and convert the JSON string back to your Java objects

Combine your JS and CSS files with pack:tag

Friday February 29, 2008
By Brad Harris

Recently I needed to combine a whole heap of javascript files into a few files for performance reasons. On this particular project, we have a very large number of custom widgets we've written to extend the awesome YUI library. Keeping our javascript in small, modularized files is great for development and maintenance, and debugging. It does however cause issues when the client has to download close to 100 small < 1kb files. Enter pack:tag, an open source jsp tag library for combining javascript and css written by Daniel Galán y Martins. Its as simple as including a jar, adding the tld and properties files, then using it on your pages.

pack:tag is a JSP-Taglib that minifies, compresses and combines resources (like JavaScript and CSS) and caches them in memory or in a generated file. It works transparent to the user/developer and the compressing-algorithms are pluggable.

So far its worked great, and the reduction in the number of files, along with filesize by using the built in minify option has been a huge benefit. When I need to debug, its as simple as setting an enable flag to false, and I now have all the individual files at my disposal. If you're developing in Java-land, and need to combine your js/css files, I strongly recommend checking out this great open source tag library.

pack:tag