Checkboxes in Stripes and Spring MVC

When building dynamic web sites with lots of javascript UI components being created on the client, understanding how the web framework you’re using will process the request and what must be done to update fields accordingly is even more important.

Specifically, checkboxes have always been a pain to deal with. The gotcha with checkboxes are if a checkbox isn’t checked, the request doesn’t send the parameter so it requires some additional checks to detect that the user deselected something that was there to update the field accordingly. I’ve been playing around with the Stripes framework and ran into this issue.

With Stripes, you can render a checkbox using their JSP tag:

<stripes:checkbox checked="true" name="property1" value="yes"/>
<stripes:checkbox checked="true" name="property2" value="no"/>

When the “checked” value is equal to “value” value, Stripes will render the checkbox as checked. So with the code shown, two checkboxes will be shown with the first checked and the second unchecked.

If a user reverses this by unchecking the first, checking the second, and submit the form, the HTTP request will only see that property2=no. Before the form was submitted, “property1” had a value of “yes”. Now, “property1” won’t even appear in the request parameters, so we have to do special handling to check for the absent of the parameter to update “property1” to whatever value it should be when it is not checked.

In Spring MVC with form binding, checkboxes are dealt with a little differently. Using Spring MVC’s form JSP tag, you can do:

  <form:checkbox path="property1" value="yes"/>
  <form:checkbox path="property2" value="no"/>

Assuming your command bean is named “person”, this will generate the following HTML:

        <input name="person.property1" type="checkbox" value="yes"/>
        <input type="hidden" value="1" name="_person.property1"/>
        <input name="person.property2" type="checkbox" value="no"/>
        <input type="hidden" value="1" name="_person.property2"/>

As noted by the docs,

What you might not expect to see is the additional hidden field after each checkbox. When a checkbox in an HTML page is not checked, its value will not be sent to the server as part of the HTTP request parameters once the form is submitted, so we need a workaround for this quirk in HTML in order for Spring form data binding to work. The checkbox tag follows the existing Spring convention of including a hidden parameter prefixed by an underscore (“_”) for each checkbox. By doing this, you are effectively telling Spring that “the checkbox was visible in the form and I want my object to which the form data will be bound to reflect the state of the checkbox no matter what”.

Spring MVC also provides a “checkboxes” tag which allows you to render a list of checkbox boxes without having to wrap the “checkbox” tag around a JSTL forEach.

Hopefully, that gives you some insight into how to work with checkboxes in Stripes and Spring MVC.

Checkboxes in Stripes and Spring MVC

Picasa vs Flickr

Pat got me a new camera for my birthday this past October so I have been trying to take more pictures lately. One of my new years resolutions is to take more pictures! As a result, I’ve been trying out Yahoo’s Flickr and Google’s Picasa over the past couple of weeks. With Picasa recently added support on the Mac and Apple announcing iPhoto out-of-the-box Flickr integration, the feature sets from the desktop are pretty much identical. Both support (or will support) face recognition, tagging, and exporting.

For the web galleries, I really liked Picasa’s layout over Flickr’s. The web site is a lot more simplistic and easy to navigate. Maybe it’s becase I’m so familiar with other Google services. Flickr’s slideshow is so awesome though. Viewing your photostream through Cooliris is such beautiful eye candy.

cooliris

I started with the free accounts. Google gives you a gig of space for the free account and you can create as many albums as you want. Flickr’s free account gives you 100 mb of upload per month and limits you to three sets.

For me, it really came down to pricing. In order to get more disk space for Picasa, you have to purchase more storage. Starting purchase goes for $20/yr for 10gigs up to $500/yr for 400GB. This storage is actually not specific to Picasa but is shared by all other Google services that need to use extra space. Flickr offers a Pro account, which gives you unlimited storage space for your videos and photos and allows you to create any number of sets and collections, for $24.95.

Given the number of photos I want to upload and my budget, I went with Flickr. Today, storage is so cheap. For $25 bucks, I should be able to get unlimited storage for a service like photo sharing. I’ve started to upload some photos I’ve had for awhile and never really shared them with those who would most enjoy them. It’s been really fun going through old pictures. My photostream can be found here.

Picasa vs Flickr

tiny URLs? HA! diminutive URLs for the win!

Inspired by a discussion of URL shortening, I took a weekend and implemented one of my own. When thinking about tiny URLs, a quote always came to mind.

Don’t use a big word where a diminutive one will suffice.

So after finding out the domain was available, diminutiveurl.com was born. Yes, it’s poking a little fun at the idea of a tiny url but it was fun to hack on. It’s very minimilistic at this point but I hope to add some interesting features.

diminutiveurl.com

For no other reason than to build something, I hope you enjoy it! I am glad to present diminitiveurl.com! Please let me know what you think.

tiny URLs? HA! diminutive URLs for the win!

2 ways to fix transparent PNG files in IE6

I fired up Photoshop for the first time in a long time. I created a transparent PNG for an image that would be used as a CSS background-image. It keeps displaying with a gray background even though the page background color was something else.

This is a pretty well documented bug. Luckily, there are a couple of ways to fix this.

Here are my two favorites:

The first solution is well documented:

Download iepngfix.zip. The development version 2.0 Alpha 3 has support for background position and repeat. Extract the zip and copy iepngfix.htc and blank.gif somewhere. I put in under stylesheets.

Add the following snippet to your CSS stylesheet:

img { 
	behavior: url(/stylesheets/iepngfix.htc); 
}

And you’re done! Hit refresh in IE6 and transparent PNG images should render correctly now.

You can add apply this fix to other elements that may be using PNG images as CSS background images as such:

img, #logo { 
	behavior: url(/stylesheets/iepngfix.htc); 
}

where logo is a div that has a background-image that is a transparent PNG.

Note: If you are using v2.0 and want to take advantage of background-repeat and position support, copy iepngfix_tilebg.js to your javascripts folder and include the js file in the HTML files you need it for.

The second way to fix this is to get everyone off IE6 but I guess that’s just wishful thinking…

2 ways to fix transparent PNG files in IE6