連載一覧へ

作って学ぶAIRウィジェットの基礎→応用（4）

SQLiteのDB操作を追加してAIRウィジェットを完成

クラスメソッド株式会社
福田寅成
2008/4/21

- PR -

データの新規作成

■ 新規RSSウィンドウの作成

　ウィジェット画面左のRSS情報一覧の下部には「＋」と「－」のボタンがあります。この「＋」でダイアログを開いて、RSS情報を追加する処理を追加します。

　まずは、新規RSSウィンドウの画面を作成します。画面イメージは図6のようになります。

図6　新規RSSウィンドウの画面イメージ

　「src」フォルダ直下に「AddRSSWindow」という名前で「MXMLコンポーネント」を追加します。AddRSSWindowの見た目に関するコードは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>

      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"

        title="Add a new RSS" 
        styleName="Panel02"
        >

          <mx:Script>

            <![CDATA[

              ]]>

                </mx:Script>

                  <mx:Form width="100%" height="100%" color="0xFFFFFF">

                      <mx:FormItem width="100%" label="Name">

                          <mx:TextInput id="rssName" width="100%" editable="true" 

                              color="0x000000" tabIndex="1"/>

                            </mx:FormItem>

                              <mx:FormItem width="100%" label="URL">

                                  <mx:TextInput id="rssUrl" width="100%" editable="true" 

                                      color="0x000000" tabIndex="2"/>

                                    </mx:FormItem>

                                    </mx:Form>

                                      <mx:ControlBar>

                                          <mx:Button label="Add" />

                                            <mx:Button label="Cancel" />

                                            </mx:ControlBar>

                                            </mx:Panel>

　<Form>タグはHTMLのフォームのように左側にコンポーネントの説明、右側にコンポーネントという配置でコンポーネントが縦に列挙されるタイプのコンポーネントです。この画面をRSSReaderの「＋」ボタンから呼び出すようにしましょう。「RSSReaderLogic」クラスの「showAddFeedWindow」メソッドに処理を追加していきます。

/** 新規RSSウィンドウへの参照 */

      private var addRSSWidndow:AddRSSWidndow;

      

      /**

        * 新規RSSウィンドウの表示

        */

      public function showAddFeedWindow():void {

          trace("showAddFeedWindow");

            addRSSWidndow = PopUpManager.createPopUp(view, AddRSSWidndow

                , true) as AddRSSWidndow;

                addRSSWidndow.addEventListener(Event.REMOVED_FROM_STAGE,     addRSSWidndowRemoveFromStageHandler);

              }

　AIR／Flexでは、ポップアップ画面に関する処理は「PopUpManager」クラスを通して行います。ここでは、「PopUpManager.createPopUp」メソッドを用いてAddRSSWindowをポップアップさせています。また、ポップアップ画面の参照を取得しておき、ポップアップを閉じた際にポップアップ画面を破棄する処理を行える仕掛けの準備もしています（addRssWindow変数は例外的にこの位置に記述しておきましょう）。

　「addRSSWidndowRemoveFromStageHandler」メソッドがないので、作成しておきましょう。

/**

      * 新規RSSウィンドウの閉じる処理の後処理

      */

        private function addRSSWidndowRemoveFromStageHandler(event:Event):void {

            addRSSWidndow = null;

          }

■ 新規RSSウィンドウへの処理の追加

　新規RSSウィンドウに以下の処理を追加していきます。

初期表示処理（表示位置の修正、名前テキストインプットへのフォーカスあて）
Addボタンの処理（データ新規作成）
Cancelボタンの処理（ウィンドウを閉じる）

　初期表示処理は新規「AddRSSWindow.mxml」の一番外側の<Panel>タグに下記を記述します。

creationComplete="onCreationCompleteHandler()"

　次に、内容を実装します。

import mx.managers.PopUpManager;

                

                /**

                  * onCreationCompleteHandler

                  */

      private function onCreationCompleteHandler():void {

          PopUpManager.centerPopUp(this);

            focusManager.setFocus(rssName);

          }

　今回の記事の最初で画面とロジックを分離していましたが、この新規RSSウィンドウに関してはコードが少ないので、MXML内の<Script>タグに処理を記述していきます。初期化処理では、最初に「PopUpManager.centerPopUp」メソッドを用いて、ウィジェット中央に画面を表示させています。次に、RSS名入力フィールドであるrssNameにフォーカスを当てています。

　また、簡単なCancelボタンの処理を記述しておきましょう。

<mx:Button label="Cancel" click="cancelButtonClickHandler(event)" />

/**

      * Cancelボタンクリックイベントハンドラ

      */

        private function cancelButtonClickHandler(event:MouseEvent):void {

            PopUpManager.removePopUp(this);

          }

　ポップアップを閉じる処理は「PopUpManager.removePopUp」メソッドになります。この段階まで実装したら、実行しておきましょう。「＋」ボタンを押してポップアップ画面がウィジェット中央に表示され、Nameの横のテキストインプットにフォーカスが当たっていたら成功です。また、Cancelボタンでポップアップウィンドウが閉じることを確認します。

　最後に、Addボタンの処理を記述していきます。

<mx:Button label="Add" click="addButtonClickHandler(event)" />

/**

      * Addボタンクリックイベントハンドラ

      */

        private function addButtonClickHandler(event:MouseEvent):void {

            var rssInfo:RSSInfo = new RSSInfo();

              rssInfo.name = this.rssName.text;

                rssInfo.url = this.rssUrl.text;

                  RSSReader(parentDocument).rssReaderLogic.insertRSSInfo(rssInfo);

                    PopUpManager.removePopUp(this);

                  }

　「addButtonClickHandler」メソッドではRSSInfoオブジェクトを作成、そのデータをRSS_INFOテーブルに挿入する処理を呼び、自画面を閉じています。RSS_INFOテーブルへの挿入処理は呼び出し元のロジッククラスに記述することにします。

 /**

      * INSERT処理

      */

      public function insertRSSInfo(rssInfo:RSSInfo):void {

          view.statement = new SQLStatement();

            view.statement.sqlConnection =  view.connection;

              view.statement.text = "INSERT INTO RSS_INFO(name, url) VALUES("

                    + "'" + rssInfo.name + "'," + "'" + rssInfo.url + "')";

              

                  //イベント登録

                    view.statement.addEventListener(SQLEvent.RESULT,

                          insertRSSInfoResultHandler);

                        view.statement.addEventListener(SQLErrorEvent.ERROR, 

                              statementErrorHandler);

                            //実行

                              view.statement.execute();

                            }

                            /**

                              * INSERT処理結果

                              */

                            private function insertRSSInfoResultHandler(event:SQLEvent):void {

                                // 成功時はそのまま再検索処理

                                  selectRSSInfo();

                                }

　「insertRSSInfo」メソッドは「selectRSSInfoResultHandler」メソッドの直下に記述します。処理の内容はほかのSQL処理と同様で、SQLがINSERT文になっています。メソッド引数でRSSInfoオブジェクトを取得し、その内容を基にSQL文を作成しています。

　挿入処理が成功したときの処理としてはテーブルを再度検索して、RSS情報を取得し直しています。この段階まで実装したら、実行しておきましょう。新規RSSウィンドウでNameに「＠IT」、URLに「http://rss.rssad.jp/rss/itmatmarkit/rss.xml」を入力してAddボタンをクリックしてみましょう。RSS一覧に3つ目のRSSが表示され、クリックすると記事一覧が表示されます。

　この追加処理では値のチェックなどは行っていませんが、必須チェックなどを実装してみるのもいいでしょう。

データの削除

　最後に、RSS削除機能を実装していきます。「－」ボタンを押したときのイベントハンドラは作成済みなので、その中身を実装していきます。

 /**

      * RSS削除処理

      */

      public function removeFeed():void {

          trace("removeFeed");

            var myItem:RSSInfo = RSSInfo(view.rssList.selectedItem);

          

              // 選択されたアイテムが存在する場合、削除処理実行

                if(myItem != null) {

                      Alert.show("「" + myItem.name + "」のRSS情報を削除します", 

                            "RSS情報削除の確認", Alert.YES|Alert.NO, view, 

                              removeAlertHandler, null, Alert.YES);

                        }

                      }

                      /**

                        * 削除確認処理

                        */

                      private function removeAlertHandler(event:CloseEvent):void {

                          // YESが押されたら、削除処理を実行

                            if(event.detail == Alert.YES) {

                                  deleteRSSInfo(RSSInfo(view.rssList.selectedItem));

                                }

                              }

　RSS一覧で何かが選択されていた場合に、Alertを表示し、本当に削除するかの確認を行っています。「Alert.show」メソッドの第5引数で、Alertボタンが閉じる際の処理（「removeAlertHandler」メソッド）を指定しています。

　「removeAlertHandler」メソッドでは、Alert画面で「はい」がクリックされていた場合に、DB上のデータの削除処理を呼んでいます。データ削除処理は下記のようになります。

 /**

      * DELETE処理

      */

      public function deleteRSSInfo(rssInfo:RSSInfo):void {

          view.statement = new SQLStatement();

            view.statement.sqlConnection =  view.connection;

              view.statement.text = "DELETE FROM RSS_INFO WHERE ID = " 

                    + rssInfo.id;

              

                  //イベント登録

                    view.statement.addEventListener(SQLEvent.RESULT,

                          deleteRSSInfoResultHandler);

                        view.statement.addEventListener(SQLErrorEvent.ERROR, 

                              statementErrorHandler);

                            //実行

                              view.statement.execute();

                            }

                            /**

                              * DELETE処理結果

                              */

                            private function deleteRSSInfoResultHandler(event:SQLEvent):void {

                                // 成功時はそのまま再検索処理

                                  selectRSSInfo();

                                }

　DELETE処理はINSERT処理とほとんど同じです。SQL文がDELETE文になっているのが異なります。INSERT処理同様に削除成功の場合は再検索処理を行っています。この段階まで実装したら、実行しておきましょう。先ほど重複して追加していた3つ目の＠ITのRSSの情報を削除してみましょう。

図7　RSSの削除（画像をクリックすると拡大します）

　これで、RSSリーダーウィジェットの全機能の実装が完了しました！完成版のソースコードはここからダウンロードできます。

次世代サービスを構築するのは読者の皆さんかも

　本連載でAIRウィジェット開発の際に必要な主要技術要素をお伝えできたと思います。この後は、皆さん自身でAIR／Flexに用意されているさまざまなコンポーネントを深く調査して行ったり、サーバアプリケーションとの連携を行ってみたり、SQLiteにより多くのデータを格納したりしてみてください。

　AIRに関しては、Web上にかなり多くのサンプルがオープンな形で公開されています。また、FlexUGのようなコミュニティを通して、技術的な質問をしたり、セミナーで生の声を聞いたりすることもできます。大手ポータルサイトや大企業が続々とAIR／Flexベースのサービスを公開し始めています。いままでにまったく見たことのないようなサービスも登場しており、次の次世代サービスを構築するのは読者の皆さんかもしれません。

　今回で「作って学ぶAIRウィジェットの基礎→応用」の連載は終わりになります。それではまたどこかでお会いしましょう。

■＠IT関連記事

いまさら聞けないFlex、そして、いまこそ入門のとき!?
Flex 3正式版リリース！ Flexの過去・現在・未来　先日ついに正式リリースされたFlashベースのRIA技術Flex 3。いまが入門に最適なFlexの過去・現在・未来を一挙に解説

「リッチクライアント＆帳票」フォーラム 2008/3/31

Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

さらに関連記事へ

プロフィール：福田　寅成（ふくだ　ともなり）
クラスメソッド株式会社　エンタープライズサービス部門システムエンジニア
大手SIerでの長いJava開発経験を経てクラスメソッドに。 Java、JavaScript/Ajax、Flex、AIR、C#など、さまざまな分野に関する技術調査研究、および業務アプリケーション開発に携わる。 FlexやAIRの開発依頼はコチラ

1-2-3-4

INDEX
作って学ぶAIRウィジェットの基礎→応用（4） SQLiteのDB操作を追加してAIRウィジェットを完成
	Page1 AIRウィジェットを作ってコンテストに応募してみよう今回はSQLiteでRSS情報の更新／削除機能を追加画面（.mxml）とロジック（.as）をファイルで分離
	Page2 SQLiteデータベースを使ったデータ操作
	Page3 DB（ファイル）の新規作成と接続の確立テーブルの新規作成データの検索／参照
	Page4 データの新規作成データの削除次世代サービスを構築するのは読者の皆さんかも

作って学ぶAIRウィジェットの基礎→応用バックナンバー

第1回いまさら聞けないAdobe AIR「超」入門
第2回 Flex／AIRウィジェットのデザインをCSSでカッコよく
第3回 Flex Builder 3でサクっとActionScriptコーディング！
最終回 SQLiteのDB操作を追加してAIRウィジェットを完成

リッチクライアント＆帳票全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）