Aptana JaxerでサーバサイドJavaScriptを始めてみよう!

第4回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの編集・削除/入力値チェックの共有-

この記事を読むのに必要な時間:およそ 6 分

タスクの編集・削除

前回からJaxerのアプリケーション作成に着手し,タスク管理アプリのタスクの登録ができるようになりました。

今回は,タスクの編集・削除と,Jaxerのウリの一つである「サーバサイドとクライアントサイドでの入力値チェックの共有」というところを実装します。

まず,タスクの編集・削除を実際にDBに対して実行する関数を以下のように定義しましょう。 定義する場所は,getAllTask(),add()が定義してあるrunat属性がserver-proxyのscriptタグの中です。

function update(id,text){
    try{
        text = decodeURIComponent(text);
        Jaxer.DB.execute("UPDATE memo set
contents = ? where id = ? ",[text,id]);
        return true;
    }catch(e){
        return false;
    }
}
function del(id){
    try{
        Jaxer.DB.execute("DELETE FROM memo
where id = ? ",id);
        return true;
    }catch(e){
        return false;
    }
}

update(id,text)は,引数で渡したidのタスクの内容をtextに更新し,del(id)は,引数で渡したidのタスクを削除しています。

削除の関数名をdeleteとしていないのは,deleteがjavaScriptの予約語だからです(※今回のサンプルアプリでは,delete文発行のため,終了したタスクはDBから削除する仕様にしていますが,タスクに「未実施」「実施済」などのステータスを持たせ,そのステータスを更新する方が自然です)。

これらの関数はserver-proxy属性のscriptに書かれていますので,クライアントサイドでも利用することができます。 それでは,タスク名の前の「×」をクリックしたときに,del(id)が実行されるようにしましょう。

×をクリックしたときに,そのタスクのidが分かるように,getAllTask()内の,

 html += '<div><span class="del_memo">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';

の部分を,

html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';

に修正します。

×を囲んでいるspanタグをクリックしたときにdel()を実行するため,init()の中に以下のコードを加えます。

$('span.del_memo').click(
    function(){
        del(this.id.split('_')[1]);
        $(this).parent().fadeOut();
    }
);

削除のキーとなるidは,spanタグのid属性の値を"_"で分割して取得するという方法を取りました。 また,del()はDB上のデータを削除するだけですので,画面上からタスクを削除するために,$(this).parent().fadeOut();というコードを書いています。

では,Jaxerを起動し,プレビュータブで削除できるか試してみましょう。

タスクが登録されている以下のような画面で,

01.png

「タスクを追加」の前の「×」をクリックすると,文言がフェードアウトし,以下のように画面から消えます。

02.png

DBから削除されているので,画面をリロードしても,表示されません。

次に,タスクの文字の部分をクリックすると,テキストボックスになって編集可能になり,Enterキーで編集内容が保存されるというコードを書きます。 先ほどと同様に,タスクの内容を囲むspanタグでidを取得できるように,getAllTask()内の,

html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';

の部分を,

html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" id="memo_'+rs.rowsAsArrays[i][0]+'">'+ rs.rowsAsArrays[i][1]+'</span></div>';

に修正します。

また,タスクの内容をクリックしたときの動作を,init()の中に以下のように定義します。

$('span.memo').click(
    function(){
       if($('form',this).length > 0) return;
        var id = this.id.split('_')[1];
        var rewrite = '<form name="rewriteForm" id="rwForm"><input name="content" type="text" value="'+$(this).text()+'"></form>';
        $(this).html(rewrite);
        $('#rwForm').submit(
            function(){
                update(id,encodeURIComponent($(':text',this).val()));
                $(this).parent().text($(':text',this).val());
                return false;
            }
        );
    }
);

if($('form',this).length > 0) return;の部分で,一度クリックして入力フォーム状態になっていたとき,これ以降のコードが実行されないようにしています。 spanタグをクリックすると,spanタグで囲まれたテキストをテキストボックスの値にセットし,入力フォームを生成します。

生成した入力フォームのsubmitイベントで,update(id,text)を実行し,入力フォームを消して元のspanタグの状態に戻すという処理です。

それでは,再度プレビュータブで動作を確認しましょう。 以下のような画面で,「原稿を書く」をクリックします。

03.png

すると,以下のようにテキストボックスが表示されます。

04.png

内容を編集し,Enterキーを押下します。

05.png

以下のように編集内容が反映されます。

06.png

DBもしっかり更新されていることを確認するために,ページをリロードして確認しましょう。

著者プロフィール

栗栖義臣(くりすよしおみ)

TIS株式会社 主任。鹿児島県出身。大阪大学大学院工学研究科にて原子力工学を専攻。卒業後,TISで主にJavaの開発案件に携わる。 SUN × Recruit主催のmash up award 2ndにて「サグール賞」「きざし賞」「特別賞」を受賞(asso-ball.networdarium.net)。iGoogleガジェットコンテストで「特別賞」を受賞(U.T.)。ブログは「でぃべろっぱーず・さいど」。

URLhttp://dev.chrisryu.com/

コメント

コメントの記入