Play Frameworkに挑戦（Java編 その５） ～JSON／ jQuery／CoffeeScriptを使用する
前回の続き
前回ではモデルの登録処理を実装した。
今回は登録したエンティティを取得し画面に表示する処理である。イントロダクション動画では13:00～終わりまで。
Introduction to Play Framework for Java developers on Vimeo
JSONでデータを返す
最近ではAjaxなどのデータ転送に使われるデータフォーマットととして、XML形式に代わってJSON形式が使用されることが多いようだ。
データベースに保存した全エンティティを取得しJSON形式で取得するために次のようにコードを追加する。
conf/routes に下記追加
GET /bars controllers.Application.getBars()
controllers/Application.java に下記追加。
import java.util.List; import play.db.ebean.Model; import static play.libs.Json.toJson;
public static Result getBars() { List<Bar> bars = new Model.Finder(String.class, Bar.class).all(); return ok(toJson(bars)); }
ブラウザから localhost:9000/bars にアクセスしてみると、下記のようにJSON形式のデータが返されていることが分かる。
CoffeeScriptでjQueryを使う
いまさら言うまでもないことであるが、ブラウザで動作するプログラミング言語いわゆるクライアントサイドスクリプトとしての絶対的地位にあり、AjaxやHTML5により益々重要度の増しているのがJavaScript(ECMAScript)であり、最新のプログラミング言語ランキング*1では、Javaを抜いて１位だという調査結果もあるほどである。
しかし、重要ではあるが皆が皆JavaScriptという言語を気に入っているというわけではないようである。JavaScriptへの変換を前提とした言語が複数生み出されており、その一つがCoffeeScriptという言語だそうだ。
views/index.scala.html を下記のように変更。
@(message: String)
@main("Welcome to Play") {
<script src='@routes.Assets.at("javascripts/index.js")'></script>
<ul id="bars"></ul>
<form action="@routes.Application.addBar()" method="post">
<input name="name">
<input type="submit">
</form>
}
<ul>タグの部分は、jQueryで操作することになるHTML要素だ。
javascripts/index.js は次のCoffeeScriptのソースファイルが変換されたJavaScriptファイルだ。
assets/javascripts/index.coffee
# -> $.get "/bars", (data) -> $.each data, (index, bar) -> $("#bars").append $("<li>").text bar.name
さて、今一度ブラウザから localhost:9000/ のページをリフレッシュすると
入力フォームの上部に、登録した名前の一覧が表示される。
念のためHTMLソースも確認。
記述したCoffeeScriptはこのようにJavaScriptへ変換されたようだ。
