play framework, showing gravatars

Gravatar enables you to show a picture of a person, as long as you have their email-address, and they are registered at gravatar. But you have to do some work :)

So this post is about showing gravatars in play and how we did it when we had a lot of them.
So our stack for this example is jquery and the play! framework v1.1 (using grails templating).

So first the hashing method for getting the gravatar hash. We kept it on the model, but you can also put it in your controller if you have usage beyond the domain.

public static String gravatarhash(String gravatarId){
    if(gravatarId != null)
        return Codec.hexMD5(gravatarId.toLowerCase().trim());
     return null;
}

You call it from the html-file like this;

${models.Person.gravatarhash(person?.email).raw()}

where person in this case is a person with an email attribute populated from a controller.

So that's the hash that gravatar needs. If you have an email registered in gravatar and hash it using the method previosly specified, you ought to get a nice picture out with an img-tag

<img src="http://www.gravatar.com/avatar/${models.Person.gravatarhash(person.email).raw()}"/>

(If there is no email registered at gravatar, it will use a defaulted image. A default you can tweak, just check out their website).

So first off, if you have hundreds of gravatars; you don't put your gravatar url in a img-tag. The general browser will look at that as a resource it has to get on page load. Even with http caching, you don't want to load more resources than the user needs.

So in our case we had a button, and on the push of that button we want to show some pictures. We don't want it to take a long time to get in to the page initially, so what do we do? We load the images with javascript, and don't do it before the user pushes the button.

So we did something like this;

<a href="javascript" onclick="$('people').html('#{list items:people, as:'person' }<img src= quot;http://www.gravatar.com/avatar/${models.Person.gravatarhash(person.email).raw()}quot; alt=quot;${person.name}quot;/>#{/list}');$('people').toggle();">show me a hundred pictures!</a>

<div id="people" style="display:none"></div>

So now go out and add some pictures to your website!

play framework, adding ical

So here's my really quick guide to making ical available in your playapp. This is what you need;

Add ical4j's jars. Or just add the dependency to your pom.xml if you use that
The repo is;

<repository>
      <id>modularity-releases</id>
      <name>Modularity Releases Repository</name>
      <url>http://m2.modularity.net.au/releases</url>
      <releases>
        <enabled>true</enabled>
      </releases>
      <snapshots>
        <enabled>false</enabled>
      </snapshots>
    </repository>

the dependency:

<dependency>
      <groupId>net.fortuna.ical4j</groupId>
      <artifactId>ical4j</artifactId>
      <version>1.0-rc1</version>
    </dependency>

Then install it with play mvn:up if you use the maven plugin. if not, then just download the jar and put it in the lib-directory.
Then you need to write some code to create a calendar instance. here's what I wrote for now;

public static Calendar createCalendar(Event event) throws SocketException {
        TimeZoneRegistry registry = TimeZoneRegistryFactory.getInstance().createRegistry();
        TimeZone timezone = registry.getTimeZone("Europe/Oslo");
        VTimeZone tz = timezone.getVTimeZone();
        // Create the event
        VEvent meeting = new VEvent(new DateTime(event.date), new DateTime(event.date), "javaBin: " + event.title);
        // Add timezone info..
        meeting.getProperties().add(tz.getTimeZoneId());
        UidGenerator ug = new UidGenerator(event.title);
        Uid uid = ug.generateUid();
        meeting.getProperties().add(uid);

        // Create a calendar
        net.fortuna.ical4j.model.Calendar icsCalendar = new net.fortuna.ical4j.model.Calendar();
        icsCalendar.getProperties().add(new ProdId("-//Events Calendar//iCal4j 1.0//EN"));
        icsCalendar.getProperties().add(CalScale.GREGORIAN);
        icsCalendar.getProperties().add(Version.VERSION_2_0);
        icsCalendar.getComponents().add(meeting);
        return icsCalendar;
}

Where as you can see the calendar is based on an event, and it's title.
Don't worry about any of the different types as "VEvent", as they are part of ical4j.

Then you need to render the file to the user, right?

Well, first go to iconfinder.net and find a nice icon for your ical-link.
In your html, write a link like this;

<a href="@{Application.ical(event?.id)}"><img src="/public/images/ical.png" alt="calendar"/></a>

then you write the rendering code in your controller;

public static void ical(Long id){
        try {
            Event event = Event.findById(id);
            Calendar calendar = ICalUtil.createCalendar(event);
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            CalendarOutputter outputter = new CalendarOutputter();
            outputter.output(calendar, bos);
            response.setHeader("Content-Type", "application/ics");
            InputStream is = new ByteArrayInputStream(bos.toByteArray());
            renderBinary(is,"javaBin.ics");
            bos.close();
            is.close();
        } catch (IOException e) {
            Logger.error("Io feil ved ical", e);
        } catch (ValidationException e) {
            Logger.error("Feil ved generering av ical", e);
        }
    }

Out of it you get an ical-calendar-item that people can use and enjoy ;) That's it.