jQuery, TimeAgo and Label

Vaadin 6 / 7 / 8
1

Good morning,

I managed including the jQuery plugin
timeago
 into Vaadin using an extension of the Label component. It’s simple way of doing so, no
AbstractJavaScriptComponent
 involved. The constructor requires an
joda-time
 DateTime instance:

@JavaScript({ 
  "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
  "http://timeago.yarp.com/jquery.timeago.js"
})
public class TimeAgoLabel extends Label {

  public static final String JQUERY_TIMEAGO_SCRIPT = "jQuery('time.timeago').timeago();";

  static DateTimeFormatter isoFormatter = ISODateTimeFormat.dateTime();
  static DateTimeFormatter localFormatter = DateTimeFormat.forPattern("dd.MM.yyyy hh:mm");

  public TimeAgoLabel(DateTime datetime) {
    String iso = isoFormatter.print(datetime);
    String loc = localFormatter.print(datetime);
    setValue(format("<time class='timeago' datetime='%s'>%s</time>", iso, loc));
    setContentMode(HTML);
  }
}

The usage in an UI class could look like this:

protected void init(VaadinRequest request) {
  setContent(new TimeAgoLabel(new DateTime()));
  JavaScript.eval(TimeAgoLabel.JQUERY_TIMEAGO_SCRIPT);
}

So, after an instance of TimeAgoLabel was added to the DOM, we have to trigger the jQuery script that converts the instant in time to its readable form. This also applies to after TimeAgoLabels are inserted by
@Push
 handlers.

Is there a better, more robust, more Vaadin 7 way to include timeago? How is the “Latest post” text in this forum (not the scrolling effect) achieved?

Have fun,
Christian