Apollo改めAIRプログラミング入門（2）
AIRとSQLiteで学ぶ ローカルDB操作の基本

クラスメソッド
杉浦篤史
2007/8/17

「UPDATE」文でデータを更新

　ここまでで、データを入力して表示するまでができるようにりました。

　こうなると、すでに入力したデータを更新したい場合が出てくると思います。

　そこで、データグリッド上のデータを直接操作し、変更が行われたら即座にUPDATE処理を行いDBを更新するようにしてみましょう（画面4）。

 

画面4　データグリッドを直接操作して更新（性別・出身地はitemRendererを利用してコンボボックスを表示）
画面4　データグリッドを直接操作して更新（性別・出身地はitemRendererを利用してコンボボックスを表示）

　下記のように、MXMLと処理を記述します。

<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{dp}"
     editable="true" itemEditBeginning="dgItemEditBeginning(event)"
     itemEditEnd="dgItemEditEnd(event)">
    <mx:columns>
      <mx:DataGridColumn width="50" dataField="no" headerText="No" />
      <mx:DataGridColumn width="100" dataField="id" headerText="ID" />
      <mx:DataGridColumn dataField="mail"
                         headerText="メールアドレス" />

      <mx:DataGridColumn width="50" dataField="sex" headerText="性別"
                         editorDataField="value">
        <mx:itemEditor>
          <mx:Component>
            <mx:ComboBox dataProvider="{SQLiteSample.sexComboData}" />
          </mx:Component>
        </mx:itemEditor>
      </mx:DataGridColumn>

      <mx:DataGridColumn width="100" dataField="home"
                         headerText="出身地" editorDataField="value">
        <mx:itemEditor>
          <mx:Component>
            <mx:ComboBox dataProvider="{SQLiteSample.homeComboData}"
                         rowCount="7" />
            </mx:Component>
          </mx:itemEditor>
      </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

//データグリッドを編集しようとした際の処理
private function dgItemEditBeginning(event:DataGridEvent):void {

    //noを編集しようとした場合は編集させないようにする
    if (event.dataField == "no") {
        event.preventDefault();
    }
}

//UPDATE処理
private function dgItemEditEnd(event:DataGridEvent):void {
    if (event.reason == DataGridEventReason.CANCELLED) {
        return;
    }

    var dg:DataGrid = event.currentTarget as DataGrid;
    var item:Object = event.itemRenderer.data;
    var dataField:String = event.dataField;
    var itemEditor:Object = dg.itemEditorInstance;

    if (itemEditor.text == item[dataField]) {
        return;
    }

    stmt = new SQLStatement();
    stmt.sqlConnection = connection;
    stmt.text = "UPDATE user SET " + dataField +" = :"+ dataField +
                " WHERE no = :no";

    stmt.parameters[":no"] = item.no;
    stmt.parameters[":"+dataField] = itemEditor.text;

    stmt.addEventListener(SQLEvent.RESULT, stmtUpdateResult);
    stmt.addEventListener(SQLErrorEvent.ERROR, stmtErrorHandler);

    stmt.execute();
}

　今回の例では、SQLSatementクラスのparametersプロパティも利用しています。

    stmt.text = "UPDATE user SET " + dataField +" = :"+ dataField +
                " WHERE no = :no";

    stmt.parameters[":no"] = item.no;
    stmt.parameters[":"+dataField] = itemEditor.text;

　parametersプロパティを利用することで、SQL文内で“:”の付いた変数名がparametersで設定した内容に置き換えられて、SQLが実行されます。これを利用することで、SQL文はあらかじめ用意しておき、parametersで必要な値を入れるといった利用ができます。

　こうしたActionScriptの記述については、「SQL support in local databases」に解説されています。

「DELETE」文でデータの削除

　最後は、削除処理を行います。先ほどの画面4を使って、データグリッド上で選択したデータを削除します。ここまでやってきたとおり、下記のようにSQLを記述し、削除ボタンが押下されたら実行されるようにします。

private function deleteBtnClickHandler(event:Event):void {
    var item:Object = dg.selectedItem;
    var no:int = item.no;

    stmt = new SQLStatement();
    stmt.sqlConnection = connection;
    stmt.text="DELETE FROM user WHERE no=" + no;

    stmt.addEventListener(SQLEvent.RESULT, stmtDeleteResult);
    stmt.addEventListener(SQLErrorEvent.ERROR, stmtErrorHandler);

    stmt.execute();
}

AIRでのローカルDBの利用はとっても手軽で簡単！

　ここまでで、DBの作成とINSERT／SELECT／UPDATE／DELETEといった基本的なDB操作が行えるようになりました。サンプルソースがダウンロードできるようになっていますので、後は実際に動作をさせて確認してください。

　以上のように、今回は簡単なDB操作を行を行うアプリケーションを作成しましたが、操作も簡単でSQLさえ知っているならすぐに使うことができます。

■では、具体的にAIRでのDBの使いどころは？

　このようにAIRでローカルDBを利用できるわけですが、その用途は多く比較的大容量のデータをSQLを使用して利用できるのは魅力的な機能です。

　例えば、オフラインの場合はローカルのDBを利用して、オンラインになったらWeb上のDBサーバと同期するといった利用方法も考えられますし、同様にSQLiteを採用しているGoogle Gearsとの連携も注目されます。

　また、DBサーバなどが必要なく導入が簡単なので基本的なSQLの学習用途としても便利です、いままでSQLを触ったことがないという方も、ぜひ挑戦してほしいと思います。

■＠IT関連記事


行く先はMAX 2007？ バスツアーがOn“AIR”中！
連載：Flash観測所（5）　いま米で進行中のOn AIR Busツアー。停車する各地でAIR・Flexなどに関する技術セッションが行われている。そこでできたAIRアプリなども紹介しよう
「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/1
AIRとGearsの連携で注目のオフラインWebアプリ集
連載：Flash観測所（4）　Apolloが正式名AIRとなってGoogle Gearsと連携できるようになり、オフラインWebアプリがいま注目だ。Flashでも面白いものがあるので紹介しよう
「リッチクライアント ＆ 帳票」フ ォーラム 2007/7/3

プロフィール：杉浦　篤史（すぎうら　あつし）
クラスメソッド株式会社 エンタープライズサービス部門 Flexエンジニア

FlexやAIRを用いたRIAシステム開発に携わる。業務に特化したカスタムコンポー ネント開発を得意としています。 FlexやAIRの開発依頼はコチラ

1-2-3 全記事一覧へ

　INDEX
Apollo改めAIRプログラミング入門（2）
  Page1
いまさら聞けない、SQLiteとは？
AIRからローカルDBを使ってみよう
SQLiteのDBを作成して接続
  Page2
「CREATE」文でテーブル作成
「INSERT」文でテーブルにデータを挿入
「SELECT」文でテーブルの参照・閲覧
Page3
「UPDATE」文でデータを更新
「DELETE」文でデータの削除
AIRでのローカルDBの利用はとっても手軽で簡単！




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT