It certainly has been an extremely fun year here at Mystic! Lots to come in the new year, and we wish all of you a safe and happy rest of the year.

To our success!

Since comments were added many months ago, we’ve been meaning to make them a little more … pretty. So last night one of our guys spent a little time creating a custom component to represent a Gravatar. If you have a Gravatar go check out MysticPaste.com and play with the functionality. It’s simple, but fun.

if you don’t have a Gravatar, Signup for one here.

If you’d like to see the Wicket code that supports this, check it out on WicketByExample.com.

The comment system that was added to mysticpaste.com several months ago was pretty bare, boring. It consisted of capturing name, email, and the comment of which we show name and comment only. Since we’re avid blog posters and readers, the thought of implementing a custom Wicket component for a Gravatar immediately came to mind.

First things first, extend our new GravatarImage component from WebComponent. We don’t need the image to hold any nested components, etc:

1
public class GravatarImage extends WebComponent {

We also override onComponentTag so we can populate the “src” attribute for our image with the Gravatar generated URL:

1
2
3
4
5
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        checkComponentTag(tag, "img");
        tag.put("src", getDefaultModelObjectAsString());
    }

Next we provide our own Model implementation which performs the MD5 magic on our email address to give its special Gravatar URL pointing to our image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    private class GravatarModel extends AbstractReadOnlyModel<string> {
        private static final String GRAVATAR_URL = "http://www.gravatar.com/avatar/";

        String email;
        String gravatarKey;
        int hsize;

        public GravatarModel(IModel<string> model, int hsize) {
            email = model.getObject();
            gravatarKey = MD5Util.md5Hex(email);
            this.hsize = hsize;
        }

        public String getObject() {
            StringBuilder sb = new StringBuilder();
            sb.append(GRAVATAR_URL);
            sb.append(gravatarKey);
            sb.append("?s=");
            sb.append(hsize);
            return sb.toString();
        }
    }

And that’s it! Just follow the example given in the javadoc and voila! You should have Gravatar pictures for the entered email address. To take a look at the full implementation: Download GravatarImage.java.

Next steps

A couple of items can be added to this component to make it more “full-featured” to the Gravatar API. Gravatar supports a default Gravatar image which may be passed, along with a number of flags one of which is implemented “s” or size.

Hope you enjoyed this, and use this in your next project!