How to Edit Messages in the Browser While Developing Play! Framework Templates

As a followup to my recent experiments to inline editing of content blocks while developing Play! Framework templates, I decided to focus on Messages this week.  Messages are basically Resource Bundles with Texts to be used in the Application.

This is what I wanted to accomplish:

1. No changes required to the Play! Framework Scala Templates
2. Use an inline HTML5 editor to edit the messages directly in the rendered template in the browser
3. Save (update) the message file directly in the conf directory of the application

I modified my play-aloha project on github (https://github.com/poornerd/play-aloha ) for the first requirement, by adding a Messages template, so that the typical @Messages("label.title") tags used in the templates would be rendered by my tag instead.  If the play-aloha.admin=true is set in the application.conf, then the Messages.scala.html template renders a <span> around the message with an id that contains "message." + the key of the message.

@(key:String)
@if(Application.isAlohaOn()) {
  <span id="message.@key" class="editable">
}
  @play.api.i18n.Messages(key)
@if(Application.isAlohaOn()) {
  </span>
}

I also added the class="editable" so that the Aloha Editor which I already integrated into the project would automatically make the editable.

So for example this code in the template would make the messages with the given keys editable:

<h2 class="featurette-heading">
  @Messages("label.featurette1") 
  <span class="muted">@Messages("label.featurette1Mute")</span>
</h2>

In the controller method which handles saving the edited content from the Aloha Editor via an AJAX Request, I check the id to see if it starts with "message.".

if (contentId.startsWith("message.")) {
            // save as message
            saveMessages(contentId.substring(8), content);
        } else {
            // save in Template
            if (templateFilename != null) {
                saveToTemplate(fullTemplateFilename, pageId, contentId, content);
            }
        }

If it does, then I use the rest of the id (which is the message) key, to lookup and save the new message in the messages file.

#test
label.featurette1Mute=Google is cool!
label.featurette1=Chrome