Play! JavaでTwitter BootStrap3を使う

この記事はPlay framework 2.x Java Advent Calendar 2013の12/19分です。
昨日は@s_kozakeさんのPlay framework1系をWindowsサービスで動かす方法でした。

Play! Javaでは、Bootstrap2を使うためのライブラリは準備されていますが、Bootstrap3はありません。 例えばフォームでデフォルトのhelperを使おうとしても、ラベルと入力エリアのscaffoldの幅指定を分けられなかったりして、form-holizotalがうまく使えず、困ってしまいます。

とはいえ、全部HTMLタグのみでゴリゴリ書くのもしんどいので、bootstrap3用のhelperを準備してあげると幸せになります。

viewsディレクトリにbootstrap3ディレクトリを作成して、そこに標準テンプレートを作ります。inputタグの場合は以下のような感じです。

@(field: Field, inputType: String = "", label: String = "", placeholder: String = "", help: String = "")

<div class="form-group @if(field.hasErrors) {has-error}">
  <label class="col-sm-2 control-label">@label</label>
  <div class="col-sm-10">
    <input type="@inputType" 
    class="form-control" 
    id="@field.id" 
    name="@field.name" 
    value="@field.value.getOrElse("")"
    placeholder="@placeholder" />
    @if(field.hasErrors) {
    <span class="help-block">@help</span>
    }
  </div>
</div>

実際のView側は、bootstrap3をimportすることでテンプレートが使えるようになります。以下のような感じです。

@(requestForm: Form[Request])

@import helper.form
@import bootstrap3._

@main {
  <div class="row">
    <div class="col-xs-6">
      @if(requestForm.hasErrors) {
      <p class="error alert alert-danger">
        @Messages("error.form")
      </p>
      }
      @helper.form(action = routes.Requests.create, 'class -> "form-horizontal") {

      @input(requestForm("title"),
      inputType = "text",
      label = "タイトル",
      placeholder = "タイトルを入力してください",
      help = Messages("error.title")
      )
      
        <input type="submit" class="btn btn-primary active" value="保存">
      }
    </div>
  </div>
}

このやり方はBootstrap3に限った話ではなく、よく使う構成とかがあれば、同じようにテンプレートを作っておくと再利用が可能なコンポーネントのような扱いができます。

この方法はplay-example-formを参考にしました。 いろいろ応用を考えてみると面白そうです。

明日のAdventCalendarは@yubaさんです。

追記

作りかけのまま放置されてますが、参考用のリポジトリのリンクを貼っておきます。

taise/workflow · GitHub