Playframeworkのデモを試してみるその5 - モデルの操作、追加

Playframework Java

タスクが空っぽの状態ではつまらないので追加をできるように

Taskの追加機能

注意(HSQLなんで、再起動によりデータは消える)

デモではサラサラと操作しているけど、
いったんやめたりどうにかなったりすると思われ。
Eclipse で Play のサーバをいったん停止したりすると
以降のデータ追加作業はクリアされちゃいます。

まぁ今大事なデータでないので問題ないが
「なぜさっき追加したタスクがないんだ？」なんてことに
なってもあせらずあせらず。

Eclilpse で Play のサーバは

ここで停止する。

不恰好でもとにかく追加してみる

デモでは jQuery を使用して画面遷移せずにサーバへリクエストしている
jQuery については割愛、知らなくても雰囲気で使える(自分の事)
app/views/Application/index.html を編集する

ファイル末尾に追加。 html でタスク追加用のアンカーを定義している。

<p>
    <a id="createTask" href="#">Create a new task</a>
</p>

更に末尾に追加。先のアンカーがクリックされた時に
createTask アクションに非同期でリクエストしている。

<script type="text/javascript" charset="utf-8">
    // Create a task
    $('#createTask').click(function() {
        $.post('@{createTask()}', {title: prompt('Task title ?')}, function(task) {
            alert("id: "+task.id+", title: "+task.title+", done: "+task.done);
        }, 'json')
    })
</script>

デモムービーのソースはこうなっている

<script type="text/javascript" charset="utf-8">
    // Create a task
    $('#createTask').click(function() {
        $.post('@{createTask()}', {title: prompt('Task title ?')})
    })
</script>

しかし今回ブラウザに依存しないようにするために前者のコードで進める
デモではレスポンスをブラウザから参照している。

でもって、 http://localhost:9000/ をブラウザで確認する
実行すると No route found というメッセージとともにエラー。
先のソースで @{createTask()} って場所は Application.createTask アクションを
呼び出そうとしている文なのだが、 Application.java には createTask アクションが
存在しないためこのエラーは発生している。

よって、 createTask アクションを追加する
app/controllers/Application.java

package controllers;

import java.util.*;
import play.mvc.*;

import models.Task;

public class Application extends Controller {

    public static void index() {
        List tasks = Task.find("order by id desc").fetch();
        render(tasks);
    }

    public static void createTask(String title) {
        Task task = new Task(title).save();
        renderJSON(task);
    }
}

public static void なメソッドの createTask を追加している。

今後はちゃんとページが表示されるはず。
Create a new task のハイパーリンク押下、ダイアログが
表示されるはず。ここでデモに習い



My first task
と、タイプすると、


id: 1, title: My first task, done: false
なんてダイアログが更に表示されるはず、成功。
更にF5でブラウザの表示を最新の状態に更新すると、
１件だけ新しいタスクが表示されているはず。

ちなみにダイアログでキャンセルすると残念な結果になるので注意
null って名前のタスクが登録されてしまいます。

F5押さないと追加したタスク見えないの？

creaetTask アクションでリクエストした後、受け取るデータ形式は JSON と
呼ばれる形式。これを直接使用して
レスポンスを受け取った時点で即 <li> 要素を追加してみる。

app/views/Application/index.html の javascript 部分を更に編集する

<script type="text/javascript" charset="utf-8">
    // Create a task
    $('#createTask').click(function() {
        $.post('@{createTask()}', {title: prompt('Task title ?')}, function(task) {
            // alert("id: "+task.id+", title: "+task.title+", done: "+task.done);
            $('ul').prepend(
                    '<li><input type="checkbox" id="'+task.id+'">'+task.title+'</li>'
            )
        }, 'json')
    })
</script>

これで改めてブラウザで http://localhost:9000/ を確認する
javascript なんで、ブラウザで開きっぱなの場合はそのまま
操作せずに F5 で更新してから操作する。

Create a new task のハイパーリンク押下、ダイアログに



My second task
と入力。

ブラウザ画面で画面切り替えが生じずにタスクが１つ追加されれば成功！