Modern Web Apps with Play Framework

preso.md

Modern Web Apps with Play Framework

Create an app:

play new foo
cd foo

Add dependencies to project/Build.scala:

val appDependencies = Seq(
  jdbc,
  "org.sorm-framework" % "sorm" % "0.3.8",
  "org.webjars" %% "webjars-play" % "2.1.0-2",
  "org.webjars" % "bootstrap" % "2.1.1"
)

Bump the Scala version in project/Build.scala:

val main = play.Project(appName, appVersion, appDependencies).settings(  
  scalaVersion := "2.10.1"
)

Open in IntelliJ:

play idea

Run in DEV mode:

play ~run

Open the app: http://localhost:9000

Create a model in app/models/Bar.scala:

package models

import sorm._
import play.api.libs.json.{JsValue, Writes, Json}

case class Bar(name: String)

object Bar {
  implicit val writes = Json.writes[Bar]
  implicit val reads = Json.reads[Bar]
}


object DB extends Instance(Set(Entity[Bar]()), "jdbc:h2:mem:test")

Add to the app/controllers/Application.scala controller:

  def bars = Action {
    val bars = DB.query[Bar].fetch()
    Ok(Json.toJson(bars))
  }

  def addBar = Action(parse.json) { request =>
    val bar = DB.save(request.body.as[Bar])
    Ok(Json.toJson(bar))
  }

Setup new contoller routes:

GET     /bars                       controllers.Application.bars
POST    /bars                       controllers.Application.addBar

Add the HTML UI in app/views/index.scala.html:

    <ul id="bars"></ul>
    <form id="barForm" method="post" action="/bars">
        <label for="barName">Name</label>
        <input id="barName" required>
        <button>Add Bar</button>
    </form>

Create the UI logic in app/assets/javascripts/index.coffee:

getBars = () ->
  $.get "/bars", (bars) ->
    $("#bars").empty()
    $.each bars, (index, bar) ->
      $("#bars").append $("<li>").text bar.name

$ ->
  getBars()
  $("#barForm").submit (event) ->
    event.preventDefault()
    $.ajax
      url: event.target.action
      type: event.target.method
      contentType: "application/json"
      data: JSON.stringify({name: $("#barName").val()})
      success: () ->
        getBars()
        $("#barName").val("")

Load the JavaScript in app/views/main.scala.html:

<script src="@routes.Assets.at("javascripts/index.min.js")" type="text/javascript"></script>

Setup WebJars route in conf/routes:

GET     /webjars/*file                    controllers.WebJarAssets.at(file)

Load the WebJars in app/views/main.scala.html:

<link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("bootstrap.min.css"))'>
<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>

Make it pretty with Bootstrap in app/views/main.scala.html:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a id="titleLink" class="brand" href="/">@title</a>
            </div>
        </div>
    </div>
    <div class="container">
        @content
    </div>

Add padding to the UI in public/stylesheets/main.css:

body {
    padding-top: 50px;
}