[TECH]: GWT button with background images

I love google web toolkit but some times it needs to be extended to do some fancy stuff.

One of the things I’ve been working on recently is revamping our software for better look and feel, higher user engagement and better user experience.

Consumers now are accustomed to nice web2.0 like buttons with solid background colors and white text on top… visit any of your favorite websites and you’ll see what I mean.

gwt out of the box doesn’t support this with the basic button class.

Here is a link to SuperButton.java class that I downloaded online and modified to fit my personal needs.

The original class supported widgetized buttons which allowed me to add widget (Such as a small absolute panel with a label and an icon added to it).

The original buttons like this:

Screen shot 2011-06-06 at 8.30.40 AMThe code to create this button looks something like this:

Screen shot 2011-06-06 at 8.33.49 AM

To explain this simple:

  • Create a super button
  • Size it correctly
  • Create a new panel
  • Add any text or images you want to said panel
  • Add your panel to the button

This is the ‘out of the box’ superbutton class.

I have further extended it to create buttons that use a single as the buttons background image, including all the CSS modifications required to undo the typical button shading and borders and paddings that would interfere with this. You can also set a second image as your alternate image for when the button is disabled.

Here’s what the new buttons look like:

button-mockups6And here’s what the code to create these buttons looks like:

Screen shot 2011-06-06 at 8.37.47 AM

As you can see , when creating these buttons, I’m passing in either one or two image URL’s.

Buttons that need to show that they are ‘disabled’ or greyed out have 2 images associated with them.

Standard buttons that will always be enabled only need 1 image to create them.

For comparison sake, here’s what the old (and frankly dated) widgetized buttons look like (this image is from my Gimp mockups… it’s always faster to mockup your ideas in Gimp or photoshop BEFORE doing any coding… coding takes time to debug … you want make all style decisions rapidly on mockups, and only after you’ve finalized your fonts, styles, colors, ideas should you move to executing them… always separate the creative from the constructive otherwise you’ll bog down your creative in troubleshooting and coding and debugging).


Hope this helps someone…

Bookmark and Share

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Spam protection by WP Captcha-Free