<mx:DataGrid>のデータが変更された場合(dataProviderが変更された場合)に処理を行うとします。
その際、changeイベントをリスニングしていませんか?
変更と言うとchangeイベントを思い浮かべる方多いようです。

ですが、AdobeFlexBuilderのヘルプを参照すると、changeイベントは
selectedIndex またはselectedItem プロパティの値が変更された場合に送出されるイベントと記載されています

0926-1.jpg

実際に検証してみます。

サンプルでは、コンボボックス変更時のイベントハンドラで
  データグリッドのdataProviderの値を変更し、
データグリッドがchangeイベントを送出した際にアラートを表示するサンプルです。

0926-2.jpg

サンプルコードは以下の通り。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationcomplete="init(event)" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            protected function init(event:Event):void
            {
                // コンボボックスのデータを設定
                dataChooser.dataProvider = new ArrayCollection([    
                                                                {data:"1",label:"データ1"},
                                                                {data:"2",label:"データ2"}
                                                                ]);
            }
            
            protected function combo_changeHandler(event:Event):void
            {
                // コンボボックスの選択状態によってデータグリッドの値を変更
                switch(dataChooser.selectedIndex)
                {
                    case 0:
                    {
                        resultDg.dataProvider = new ArrayCollection([
                                                                    {name:"プラズマTV-20型",price:"10,000"},
                                                                    {name:"プラズマTV-27型",price:"50,000"},
                                                                    {name:"プラズマTV-32型",price:"70,000"},
                                                                    {name:"プラズマTV-37型",price:"75,000"}
                                                                    ]);
                        break;
                    }
                    case 1:
                    {
                        resultDg.dataProvider = new ArrayCollection([
                                                                    {name:"ミニ掃除機",price:"8,000"},
                                                                    {name:"サイクロン式掃除機",price:"56,800"},
                                                                    {name:"スーパーサイクロン式掃除機",price:"98,000"},
                                                                    {name:"ロケット式掃除機",price:"888,000"}
                                                                    ]);
                        break;
                    }
                    default:
                    {
                        resultDg.dataProvider = null;
                        break;
                    }
                }
            }
            
            protected function datagrid_changeHandler(event:Event):void
            {
                Alert.show("データグリッドchangeイベント","DataGrid");
            }
            
            
            
        ]]>
    </mx:Script>


    <mx:Panel x="0" y="0" width="100%" height="100%" layout="absolute" title="データグリッド変更">
        <mx:VBox x="0" y="0" width="100%" height="100%">
            <mx:Form width="100%" height="50%">
                <mx:FormItem label="データ選択">
                    <mx:ComboBox id="dataChooser" change="combo_changeHandler(event)" prompt="▼選択してください"/>
                </mx:FormItem>
            </mx:Form>
            <mx:DataGrid width="100%" height="100%" id="resultDg" change="datagrid_changeHandler(event)">
                <mx:columns>
                    <mx:DataGridColumn headerText="商品名" dataField="name"/>
                    <mx:DataGridColumn headerText="金額" dataField="price"/>
                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
    </mx:Panel>
</mx:Application>

サンプルを実行し、コンボボックスの値を変更した際
DataGridのchangeイベントハンドラで実装したアラートは表示されません。

データグリッドの値が変更されたタイミングで処理を実行したい場合、changeイベントではなく
valueCommitを指定する必要があります。

0926-3.jpg

<mx:DataGrid width="100%" height="100%" id="resultDg" valueCommit="datagrid_changeHandler(event)">

<実行結果>

0926-4.jpg

普通にテストを行っていれば、UTで発見できるとは思いますが、
うっかりテストで気が付けな買った場合、コード上は問題ないように見えてしまうので注意が必要です

前回までで、Ruby開発環境(RadRails)を構築しました。

 【前回までの記事】
 第1回:Rubyのダウンロード
 第2回:Rubyのインストール
 第3回:eclipseにRuby開発環境(RadRails)を構築する

今回は、動作確認も兼ねて実際にeclipseでRubyスクリプトを作成します。
定番の「Hello World」を表示してみましょう!

 

1.Eclipseのパースペクティブから「その他」をクリックします。

Ruby-04-01.jpg

 

2.「Ruby」を選択して「OK」ボタンをクリックします。

Ruby-04-02.jpg

 

3.Eclipeseのメニューから「ファイル→新規→Rubyプロジェクト」をクリックします。

Ruby-04-03.jpg

 

4.任意のプロジェクト名を入力して「完了」ボタンをクリックします。

Ruby-04-04.jpg

 

5.作成したプロジェクトを右クリックして「新規→Rubyファイル」をクリックします。

Ruby-04-05.jpg

 

6.任意のファイル名(拡張子「rb」)を入力して「完了」ボタンをクリックします。

Ruby-04-06.jpg

 

7.作成したファイルを開いて「puts "Hello World!!」を入力します。

Ruby-04-07.jpg

 

8.ファイルを右クリックして「実行→1 Perlローカル」をクリックします。

Ruby-04-08.jpg

 

9.コンソールビューに「Hello World!!」が表示されれば成功です。

Ruby-04-09.jpg

 

簡単でしたが、以上でRubyプログラムの作成は終了です。

前回までで、Perl開発環境(EPIC)を構築しました。

 【前回までの記事】
 第1回:ActivePerlのダウンロード
 第2回:ActivePerlのインストール
 第3回:eclipseにPerl開発環境(EPIC)を構築する

今回は、動作確認も兼ねて実際にeclipseでPerlスクリプトを作成します。
定番の「Hello World」を表示してみましょう!

 

1.Eclipseのパースペクティブから「その他」をクリックします。

ActivePerl_04_01.jpg

 

2.「Perl」を選択して「OK」ボタンをクリックします。

ActivePerl_04_02.jpg

 

3.Eclipeseのメニューから「ファイル→新規→Perlプロジェクト」をクリックします。

ActivePerl_04_03.jpg

 

4.任意のプロジェクト名を入力して「完了」ボタンをクリックします。

ActivePerl_04_04.jpg

 

5.作成したプロジェクトを右クリックして「新規→Perlファイル」をクリックします。

ActivePerl_04_05.jpg

 

6.任意のファイル名(拡張子「pl」)を入力して「完了」ボタンをクリックします。

ActivePerl_04_06.jpg

 

7.作成したファイルを開いて「print "Hello World!!」を入力します。

ActivePerl_04_07.jpg

 

8.ファイルを右クリックして「実行→1 Perlローカル」をクリックします。

ActivePerl_04_08.jpg

 

9.コンソールビューに「Hello World!!」が表示されれば成功です。

ActivePerl_04_09.jpg

 

簡単でしたが、以上でPerlプログラムの作成は終了です。

前回までで、Rubyのインストールが完了しました。

 【前回までの記事】
 第1回:Rubyのダウンロード
 第2回:Rubyのインストール

今回は、eclipseにRuby開発環境を構築していきます。
※eclipseは予めインストールされている必要があります。
 私の環境ではeclipse3.6(HELIOS)がインストールされています。

そこで必要となるのがRadRailsプラグインです。
RadRailsプラグインは、Ruby と Ruby on Rails の開発環境です。

それでは早速始めていきます。

1.Eclipseのメニューから「ヘルプ→新規ソフトウェアのインストール」をクリックします。

Ruby-03-01.jpg

 

2.「追加」ボタンをクリックします。

Ruby-03-02.jpg

 

3.下記の情報を入力して「OK」ボタンをクリックします。

名前:任意の名前を入力します。
ロケーション:「http://download.aptana.com/tools/radrails/plugin/install/radrails-bundle」を入力します。

Ruby-03-03.jpg

 

4.「Rails」を選択して「次へ」ボタンをクリックします。

Ruby-03-04.jpg

 

5.「次へ」ボタンをクリックします。

Ruby-03-05.jpg

 

6.「使用条件の条項に同意します」を選択して「完了」ボタンをクリックします。

Ruby-03-06.jpg

 

インストールが開始します。

Ruby-03-07.jpg

 

途中で以下の警告が表示された場合は「OK」ボタンをクリックします。

Ruby-03-08.jpg

 

インストールが完了したらeclipseを再起動します。

Ruby-03-09.jpg

 

7.インストールの確認

eclipseのパースベクティブから「その他」をクリックします。

Ruby-03-10.jpg

 

「Ruby」が表示されていればRadRailsプラグインのインストールは完了です。

Ruby-03-11.jpg

 

以上で、Ruby開発環境(RadRails)の構築は終了です。

前回までの記事で、GAE用Pythonのアプリケーションをローカルで動作させるところまでを記述しました。
最終回として今回は、Google App Engineに実際にデプロイし、GAE上で動作するところまで行ってみたのでご紹介したいと思います。

 

Google App Engineアプリケーションの登録

1.Google App Engine のアプリケーション登録のために、下記URLにアクセスします

http://appengine.google.com/

Python_GAE_Upload1.jpg

この際、Googleアカウントが必要になります。
Googleアカウントを持っていない場合は、アカウントを作成するため、画面上の「アカウントを作成」をクリックします。
Googleアカウント作成については、下記に詳細が記されています。
http://www.google.com/support/accounts/bin/topic.py?hl=jp&topic=14123

アカウントをお持ちの場合は、ログイン情報を入力してログインします。

2.「Create an Application」ボタンをクリックします

Python_GAE_Upload2.jpg

SMS認証の画面が表示されます。

3.必要項目を入力して「Send」ボタンをクリックします

Python_GAE_Upload3A.jpg

Country and Carrier: 国と通信事業者を選択します
Mobile Number: 電話番号、またはメールアドレス(@以降は入力してはいけません)を入力します

Country and Carrier は、「Japan」を選択すると下記のように日本の携帯事業者が選択できるようになります。

Python_GAE_Upload3B.jpg

「Send」ボタンクリック後、Googleから下記内容のメールが携帯に送信されてきます。

Google App Engine Code: xxxxxxx

※xxxxxxxの部分に数字7桁のコードがあります。


GAE登録時 Mobile Number 入力時に起きた問題

Movile Number には電話番号ではなく、メールアドレス(ドメインなし)を入力したほうが良い(らしい)

Mobile Number には電話番号を入力するかと思いきや、電話番号を入力したときに下記のように怒られました。

Python_GAE_Upload4.jpg

私の携帯はDocomoなのですが、Googleの下記のページにも書いてあるように DocomoとKDDIには問題があるらしいです。

アプリケーション作成のための SMS 検証

http://code.google.com/intl/ja/appengine/kb/sms.html

ソフトバンクであれば、電話番号の先頭に"+81"を付ければ良いみたいですが、ソフトバンク携帯を持っていないためこちらは未検証です。

4.「Enter Account Code」に 3の手順後Googleから送られてきたコードを入力して、「Send」ボタンをクリックします

Python_GAE_Upload5.jpg

5.アプリケーション作成に必要な情報を入力します

Python_GAE_Upload6.jpg

Application Identifier アプリケーションIDを入力します
※アプリケーションIDは全世界でユニークでなければなりません
 使用可能であるかは「Check Availability」ボタンを押すことで確認できます
Application Title: アプリケーションタイトルを入力します
アプリケーションタイトルは任意で大丈夫です

 

6.「I accept theese terms.」チェックボックスにチェックし、[Create Application]ボタンをクリックします

Python_GAE_Upload8.jpg

アプリケーション作成が成功した場合、下記の画面が表示されます。

Python_GAE_Upload9.jpg

 

アプリケーションのアップロード

実際に作成したアプリケーションをアップロードします。
ここでアップロードするファイルは、前回の記事で作成した「Hello world」アプリケーションです。

1.app.yaml ファイルを編集します

application設定値を上記「Google App Engineアプリケーションの登録」の「5.アプリケーション作成に必要な情報を入力します」で設定したApplication Identifierの値にします。

application: gae-python
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  script: helloworld.py

2.下記コマンドを入力して、アップロードを行います

> appcfg.py update helloworld/

helloworld/ の部分は、実際に開発を行っている appl.yaml(1の手順で編集したファイル)、helloworld.py が存在するフォルダー名を指定します。
 私の環境はWindowsで、eclipseのworkspace をCドライブ直下に作成していますので「C:\workspace\HelloWorld\src」でした。
 この場合のコマンドは appcfg.py update C:\workspace\HelloWorld\src となりました。

コマンド実行後、コマンド プロンプト には下記のようなメッセージが出力されます。

Application: gae-python; version: 1.
Server: appengine.google.com.
****************************************************************
There is a new release of the SDK available.
-----------
Latest SDK:
api_versions: ['1']
release: 1.3.7
timestamp: 1282688496

-----------
Your SDK:
api_versions: ['1']
release: 1.3.6
timestamp: 1278528410

-----------
Please visit http://code.google.com/appengine for the latest SDK
****************************************************************
Scanning files on local disk.
Initiating update.
Email: <Googleアカウントのメールアドレスを入力します>
Password for xxx@brainchild.co.jp:<Googleアカウントのパスワードを入力します>
Cloning 1 application file.
Deploying new version.
Checking if new version is ready to serve.
Will check again in 1 seconds.
Checking if new version is ready to serve.
Will check again in 2 seconds.
Checking if new version is ready to serve.
Will check again in 4 seconds.
Checking if new version is ready to serve.
Will check again in 8 seconds.
Checking if new version is ready to serve.
Will check again in 16 seconds.
Checking if new version is ready to serve.
Closing update: new version is ready to start serving.

途中で、GoogleアカウントのユーザーID(メールアドレス)、パスワード入力を求められる(<Googleアカウントのメールアドレスを入力します>、<Googleアカウントのパスワードを入力します>となっている部分)ので入力します。
アップロードが正常に終了すると、GAEにアプリケーションが登録されます。
実際に今回の手順で、私が作成したGAEのHelloWorldアプリケーションは下記になります。
http://gae-python.appspot.com/

<<前のページ 1234567891011

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント