Play 2.0 with Scala and Scaml, Part 3: The web stuff

First of all I’d like to reference to an excellent series of posts I found that cover similar stuff. It can be found here and covers a lot more topics than I did here.
In this part I’m going to show how to actually create the little blogging app I intend to write. I canceled my original intention of using LESS when I found the wonderful Bootstrap framework made by the Twitter guys. My intention was integrating technologies in Play 2 I’d like to have at hand when developing a web application, but LESS is integral part of it anyway, so I decided to play a little with Bootstrap. It’s amazingly easy to create at least considerably good looking pages, you’ll see.
If you have the need to use LESS, what makes definitly sense for bigger projects, you can do that as well as described here.

Creating some HTML

First thing I’ve done was creating some basic webpage to show the content initiated in the Global object. The nicely concise Scaml snippet could look like this:

-@ val posts: List[models.helwich.Post]
    %title My kewl blogging application
        -for(post <- posts)
                %h2 post.title
                %textarea(readonly="readonly") post.content

Together with an Action for the index of the page as shown in the Snippet below, the content is shown correctly as plain HTML.

def index = Action {
    Ok( Scalate("main-blog.scaml").render('posts -> Post.findAll()))

But plain HTML is not the design we expect for a modern web application. To get some sexyness regarding design and layout we must add some CSS. As I’ve mentioned in the beginning I found Bootstrap to be the perfect solution to create a good looking website not being a web-designer. To make it happen just download the Bootstrap framework here and copy the CSS files in your /public/stylesheets folder of your app.
To get a consistent look in the whole application, you should define a default.scaml in /views/layouts. This is the Scalate way and you can use this feature exactly as described in the very good documentation. I’ve put all the CSS, JavaScript loading as well as the html, title and the body tag in the default.scaml.
To apply the styles on our page you must add some classes and ids on the HTML elements. The resulting Scamls look like this.


-@ var body:String
-@ var title: String = "The new Blog"

%link(rel="stylesheet" type="text/css" href="/assets/stylesheets/bootstrap.min.css")
    body {
        padding-top: 50px;
        padding-bottom: 40px;
%link(rel="stylesheet" type="text/css" href="/assets/stylesheets/bootstrap-responsive.min.css")

    %title #{title}

-#load js at the end to have the page displayed first thus quicker
%script(type="text/javascript" src="assets/javascripts/jquery-1.7.1.min.js")

I haven’t found a way to get the Play convenience methods for accessing Assets working in the Scamls. If anyone knows how to do this, please let me know.


            %a.brand Here comes the Blog
    -for(post <- posts)
            %h2 post.title
            %textarea.input-block-level(readonly="readonly") post.content

In Scaml/Haml, CSS as well as in CoffeeScript (as you’ll see later) the . is used to define classes and the # is used to define IDs. This consistent syntax in all web related languages is really nice, I think. The used classes here like .navbar.navbar-fixed-top, input-block-level, row, well and so forth are references to the styles defined by Bootstrap.
Here I defined the standard layout with a fixed navigation bar at the top, where only a short header “Here comes the blog” is shown. Below that the blogs are shown in rows where the content is in a read-only textarea with the applied style input-block-level.

Creating some AJAX magic

My next step was to get some AJAX magic happen. The good thing is that Play 2.0 comes fully equipped with jQuery and CoffeeScript. If you’re experienced with these frameworks you can start coding immediately. I wasn’t, so I wanted to start slowly and in small steps. The first task easy enough for was “load the content in the background via an GET request using jQuery”.

$.get "/listposts", (data) ->
    $.each data, (index, post) ->
      $("#blogarea").append (
          "<div class=\"row well\">" +
            "<h2>" + post.title + "</h2>" +
            "<textarea readonly=\"readonly\" class=\"input-block-level\">" + post.content + "</textarea>" +

This CoffeeScript file sends a get request /listposts and adds for each returned line a html-snippet to the first element with the ID blogarea. If you want to use it like this, you have to delete the lines in the main-blog.scaml where the blogs are added of course.
Furthermore there are two things to do. First add a correspoding route to the routes file of the application like this:

GET     /listposts                  controllers.Application.listPosts

Second add the listPosts method to the Application object. Its important to add generate .. as(JSON) here as this JSON is what jQuery understands.

  def listPosts = Action {
    Ok( generate(Post.findAll())).as(JSON)

Thats it. But just loading data in the background for this kind of page doesn’t really make sense, does it?

Adding posts via AJAX

But if posts could be added it would be really nice to avoid the complete page reload. To accomplish there are three things to do:

  • add a form for to enter title and content
  • create a post request to send data from the client to the server
  • clear the old posts and reload the actual data from the server

To create a small example of how to modularize Scamls, I planed creating a form that could be reused somewhere else. Scalate offers different ways of structuring and reusing code. The most simple and straight forward is the render mechanism. You can create a file with some Scaml code and use -render(“yourfilename.scaml”) anywhere in a Scaml to render that file there.
In the given example this looks like this.


    %form#blog-form(name="blog" action="")
        %label(for="title") Title
        %input.input-block-level(type="text" name="title")
        %label(for="content") Content
        %button#button.btn Send

And the main.scaml changes to:

            %a.brand Here comes the Blog

Hiding a button like I used to know it didn’t work here. That is why the reset button has no attribute hidden but uses the hide class of Bootstrap instead.
In some examples I found there were inputs used for the buttons. When the .btn class of Bootstrap is applied to a html element more or less everything will look like a button. I use the button tag for the send button here anyway. This has the advantage that we can use the tab key to get the focus on it.
There is not action defined for this form. This is because the post will be performed in the background via AJAX like this:

readAllPosts =  ->
  $.get "/listposts", (data) ->
    $.each data, (index, post) ->
      $("#blogarea").append (
          "<div class=\"row well\">" +
            "<h2>" + post.title + "</h2>" +
            "<textarea readonly=\"readonly\" class=\"input-block-level\">" + post.content + "</textarea>" +

$(document).ready ->

  $('#button').click ->
    dataString = $("#blog-form").serialize()
      type: 'POST'
      url: '/submit-new-blog'
      data: dataString
      success: ->
      error: (jqXHR, textStatus, errorThrown) ->

So, what happens here? First thing to mention is the clearing of the blog data in the first function readAllPosts. This is needed as we want to reload all posts when a new one is added. Otherwise not only the new post would be added, but the complete set of posts would be added to the already shown ones with ugly duplications.
Then there is the $(document).ready stuff. This is the jQuery place for functions that shall be activated on certain events on objects of the document. I also added the initialization here – loading all posts from the server. After that I used jQuery to define a function for the element of the document with the ID button. If the button is clicked the function will be executed.
This jQuery function serializes the content of the form and makes an AJAX post to /submit-new-blog delivering the dataString to the server. In case of a success, the form is reseted and the posts are reloaded by executing the readAllPosts function. In case of an error it shows it to you. Quite important is to return false here. Otherwise the form will be submitted normally, thus there will be a normal request with the content of the form in the query. Very ugly.

This is it. We have a small application with some AJAX magic, with amazingly few lines of code, but very clear in its intention. No hidden side effects as you tend to have ’em in most component based frameworks. I am very enthused about Play 2 in conjunction with Anorm, Scaml and CoffeeScript. It is very promising regarding concisness, maintainability, development speed and quality of the solutions. I hope beeing able to develop some real worl stuff soon.

You can get the complete source code here. For more stuff on Play 2 and related technologies I’d like to hint to the series of blogs of Matt Raible again.

Play 2.0 with Scala and Scaml, Part 2: Setup example data at startup and integrating Scalate

In this part I’ll show how to set up the web part. Especially setting up Scalate for the use of Scaml needs some extra effort as it is not part of the Play core. I’ll first show how to create some example data so we have something to see on the website later on. As a prerequisite for the integration of Scalate I’ll shortly describe how to add the needed dependency and get it all correctly setup in IntelliJ. Then I’ll show how to get Scalate with Scaml running within Play.

Setting up a global object for creation of example data

To get some example data in my (still in memory!!!) database, you’ll need some means to get something running exactly once per server startup. In Play this can be done in the global object. The global object is per convention the object with the name Global. If you want an Object named differently to be the global object, you can configure it in the application.config (look for the global object).

Here is how Global might look to set up some very simple data.

object Global extends GlobalSettings {

  override def onStart(app: play.api.Application) {
    val u1 = User.create(new User("u1", "pwd", "name1"))
    val u2 = User.create(new User("u2", "pwd", "name2"))

    Post.create( new Post("title1", new DateTime().toDate, "content number 1", u1))
    Post.create( new Post("title2", new DateTime().toDate, "content number 2", u2))

One thing I am still wondering about is that when having the server run, the DB in the test cases also contains the entities set up on startup. If anyone knows why and how to avoid, please let me know.

Adding Scalate to the project and getting IntelliJ working

Adding the Scalate dependency to my project puzzled me a while, so I’ll describe a solution here hoping I can save some time of yours. I am using IntelliJ and for me it’s really important to have the IDE as working aid. The basic workflow for adding dependencies when using IntelliJ is as follows:

  1. Add the dependency to Build.scala
  2. Enter reload in the console
  3. Enter idea in the console

It’s important that there are no compilation errors when adding the dependency. So if you add code for which you need a certain new dependency you’ll have to comment this code out until you have added the dependency successfully.

So to add Scalate just add “org.fusesource.scalate” % “scalate-core” % “1.5.3” to appDependencies in your Build.scala and proceed as described above.

Getting Scalate to work

I have set up the Scalate templating engine in my company recently and am astonished how clean and DRY scaml is. For me as non-weby as well as for our webbies it became a pleasure to delve into our new mobile-page-code written in scaml. Structure and intention really pops out.

As mentioned above, there is no Scalate plugin for 2.0. After some research I found this 1.x example to integrate Scalate in Play. It’s more or less ready to go. You have to change the package for play.Play to play.api.Play and change the call in the controller to something like

Ok( Scalate("first.scaml").render('posts -> Post.findAll())).as(HTML)

But this sucks right? I don’t want to add as(HTML) when I trigger the rendering. But without the as(HTML) the content type is set to text and thus not rendered by the browser. To change this we have to define a Writable – that encodes the content – and a ContentType. Both are defined as implicits and need a type on which they work. I’ve defined a simple ScalateContent that wraps the rendered output and enables the correct application of the implicits.

Scalate format

I have changed the original code so that the format used can be defined in the application.config via¬†scalate.format. Right now this is only important for the default layout, as I explicitly state the format of the template to render in the controller as you can see above. I personally prefer it this way as it seems more explicit what exactly is meant. You can easily extend the apply method if you prefer calls like Scalate(“first”).render.

Default layout

Scalate uses default templates for stuff that layouts all pages. To enable this I added the default layout strategy. The default template can now be used as documented. In the Play project the path is app/views/layouts/default.{format}.

So after all this the code for the Scalate object looked like this:

package controllers

import play.api._
import http.{Writeable, ContentTypeOf, ContentTypes}
import mvc.Codec
import play.api.Play.current
import org.fusesource.scalate.layout.DefaultLayoutStrategy

object Scalate {

  import org.fusesource.scalate._
  import org.fusesource.scalate.util._

  var format = Play.configuration.getString("scalate.format") match {
    case Some(configuredFormat) => configuredFormat
    case _ => "test"

  lazy val scalateEngine = {
    val engine = new TemplateEngine
    engine.resourceLoader = new FileResourceLoader(Some(Play.getFile("/app/views")))
    engine.layoutStrategy = new DefaultLayoutStrategy(engine, Play.getFile("/app/views/layouts/default." + format).getAbsolutePath)
    engine.classpath = Play.getFile("/tmp/classes").getAbsolutePath
    engine.workingDirectory = Play.getFile("tmp")
    engine.combinedClassPath = true
    engine.classLoader = Play.classloader

  def apply(template: String) = Template(template)

  case class Template(name: String) {

    def render(args: (Symbol, Any)*) = {
        scalateEngine.layout(name, {
          case (k, v) => -> v
        } toMap)


  case class ScalateContent(val cont: String)

  implicit def writeableOf_ScalateContent(implicit codec: Codec): Writeable[ScalateContent] = {
    Writeable[ScalateContent](scalate => codec.encode(scalate.cont))

  implicit def contentTypeOf_ScalateContent(implicit codec: Codec): ContentTypeOf[ScalateContent] = {


Next time

From here on you should be able to use Scalate in Play 2.0, making your web development more fun and of course more efficient. Next time I’ll show how to set up the pages with Scaml, adding some sexieness with Less and some client side logic with¬†CoffeeScript.