poornerd

my thoughts on programming and other nerdy stuff

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

| 2 Comments

As a fol­lowup to my recent exper­i­ments to inline edit­ing of con­tent blocks while devel­op­ing Play! Frame­work tem­plates, I decided to focus on Mes­sages this week.  Mes­sages are basi­cally Resource Bun­dles with Texts to be used in the Application.

This is what I wanted to accomplish:

  1. No changes required to the Play! Frame­work Scala Templates
  2. Use an inline HTML5 edi­tor to edit the mes­sages directly in the ren­dered tem­plate in the browser
  3. Save (update) the mes­sage file directly in the conf direc­tory of the application

I mod­i­fied my play-aloha project on github (https://​github​.com/​p​o​o​r​n​e​r​d​/​p​l​a​y​-​a​l​oha ) for the first require­ment, by adding a Mes­sages tem­plate, so that the typ­i­cal @Messages("label.title") tags used in the tem­plates would be ren­dered by my tag instead.  If the play-aloha.admin=true is set in the application.conf, then the Messages.scala.html tem­plate ren­ders a <span> around the mes­sage with an id that con­tains "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 Edi­tor which I already inte­grated into the project would auto­mat­i­cally make the <span> editable.

So for exam­ple this code in the tem­plate would make the mes­sages with the given keys editable:

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

message-editing

 

In the con­troller method which han­dles sav­ing the edited con­tent from the Aloha Edi­tor 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 mes­sage) key, to lookup and save the new mes­sage in the mes­sages file.

#test
label.featurette1Mute=Google is cool!
label.featurette1=Chrome
If you have read this far, you may as well fol­low me on Twit­ter:

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.

2 Comments

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

Leave a Reply

Required fields are marked *.