my thoughts on programming and other nerdy stuff

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.

@if(Application.isAlohaOn()) {
  <span id="message.@key" class="editable">
@if(Application.isAlohaOn()) {

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

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

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



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.

label.featurette1Mute=Google is cool!
If you have read this far, you may as well follow me on Twitter:

Author: poornerd

Tech­nol­o­gist, Entre­pre­neur, Vision­ary, Pro­gram­mer :: Grad­u­ated from USC (Uni­ver­sity of South­ern Cal­i­for­nia) with a degree in Com­puter Sci­ence. After 10+ years of free­lance con­sult­ing and pro­gram­ming, he co-founded Site­Force AG eBusi­ness Solu­tions in 1999 in Munich (München), Ger­many.


  1. This is great, any plans to turn this into a plugin/module?

Leave a Reply

Required fields are marked *.