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 記事ランキング

本日 月間