msawady’s engineering-note

なにも分からないエンジニアです。

【Play Framework】Play Framework に Bootstrap を導入する

Play Framework Scala

UIを綺麗にするため、Bootstrapを導入する

  • 前回の記事でとりあえず画面に一覧を表示することは出来たものの、とにかく見た目がダサいので Bootstrap を導入する

  • webJars-playを利用する。基本的にドキュメント通りで行けました。

公式ドキュメント: WebJars - Documentation

ソース

build.sbt

  • libraryDependencies に以下の2つの依存を追加する
libraryDependencies += "org.webjars" %% "webjars-play" % "2.6.1"
libraryDependencies += "org.webjars" % "bootstrap" % "4.0.0-alpha.6-1"

conf/routes

  • webJars への route を追加する。
# WebJars
->          /webjars                webjars.Routes

html

  • ファイルの先頭でimport
@this(webJarsUtil: org.webjars.play.WebJarsUtil)
  • <head> の中でcssの読み込み
<head>
    <title>todoList</title>
    @Html(webJarsUtil.css("bootstrap.min.css"))
</head>
  • Bootstrap の class を追加
<h1>Todo List</h1>
<table class="table table-clickable table-hover">
    <thead class="thead-inverse">
    <tr>
        <th>TODO_ID</th>
        <th>STATUS</th>
        <th>TITLE</th>
    </tr>
    </thead>
    @for(todo <- todo_list) {
    <tr>
        <td> @todo.getId</td>
        <td> @todo.getStatus</td>
        <td> @todo.getTitle</td>
    </tr>
    }
</table>

結果

  • ちょっと綺麗になりました f:id:msawady:20170806203307p:plain