2010年8月アーカイブ

コンテナ内の子コンポーネントを生成するタイミングを自分で制御したい場合には、
creationPolicy プロパティーを "none" にして自前で生成処理を記述する必要があります。
この際に、いくつかポイントがあったので備忘録として残します。
(ViewStack等で重い画面を生成する際に使えそうかな?!)

以下のソースは、親画面に ViewStackコンテナ & クリックすると子コンポーネントを生成するボタンを配置してあります。
ViewStackコンテナ内の子コンポーネントは、別ファイルにして file001.mxml, file002.mxml, file003.mxml を用意しました。
(子画面は画面背景色を各々指定し、画面名を表示しただけのファイル)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:fls = "files.*"
    layout="vertical"
    creationComplete="onCreationCompleteApp()">
    <mx:Script>
        <![CDATA[
        
            private function onCreationCompleteApp():void
            {
                this.appLbl.text = "ApplicationのCreationCompleteが動きました";
            }
            
            private function onCreationCompleteVS():void
            {
                this.vsLbl.text = "ViewStackのCreationCompleteが動きました";
            }
            
            private function onClickHandler(event:MouseEvent):void
            {
                var targetBtn:String = event.target.id;
                
                switch(targetBtn)
                {
                    case "btn1":
                        mainView.createComponentFromDescriptor(mainView.childDescriptors[0],false);
                        mainView.selectedIndex = mainView.getChildIndex(fls001);
                        break;
                    case "btn2":
                        mainView.createComponentFromDescriptor(mainView.childDescriptors[1],false);
                        mainView.selectedIndex = mainView.getChildIndex(fls002);
                        break;            
                    case "btn3":
                        mainView.createComponentFromDescriptor(mainView.childDescriptors[2],false);
                        mainView.selectedIndex = mainView.getChildIndex(fls003);
                        break;
                }
                
                mainView.validateNow();
            }
        ]]>
    </mx:Script>
    
    <mx:Label id="appLbl" fontSize="15" color="#ffffff" />
    <mx:Label id="vsLbl" fontSize="15" color="#ffffff" />
    <mx:HBox>
        <mx:Button label="画面1" id="btn1" click="onClickHandler(event)" />
        <mx:Button label="画面2" id="btn2" click="onClickHandler(event)" />
        <mx:Button label="画面3" id="btn3" click="onClickHandler(event)" />
    </mx:HBox>
    <mx:ViewStack id="mainView" width="400" height="300" creationPolicy="none" creationComplete="onCreationCompleteVS()" >
        <fls:file001 id="fls001" />
        <fls:file002 id="fls002" />
        <fls:file003 id="fls003" />
    </mx:ViewStack>
</mx:Application>
★ポイント1

createComponentFromDescriptor もしくは createComponentFromDescriptors メソッドを使用して子コンポーネントを生成する。

ざっくりとした使い分けとしては以下の通り。(詳細はAPIを参照してください)

createComponentFromDescriptor 引数で指定した1つのオブジェクトを生成する (上記ソースではこちらを採用)
createComponentFromDescriptors コンテナのすべての子を作成する

 

★ポイント2

createComponentFromDescriptor メソッドを使用した場合には、生成後の子オブジェクトを表示リストに追加しない為、
そのままでは画面に表示されません。 なので、生成後に コンテナに対して validateNow() を実行する必要がある。

 

★ポイント3

コンテナのcreationComplete イベントが走るのは、コンテナに対して validateNow() が呼び出されたタイミングになる。
親になるコンテナのcreationcomplete イベントで何か処理をしたい場合には要注意ですね。

 起動時には、ViewStack の creationComplete は動きません。
defaultDisplay.PNG ViewStack 内の子コンポーネントを生成し、validateNow が走ると ViewStack の creationComplete が動きます。
afterCreateDisplay.PNG
少し古いですが、上記の内容がわかりやすく書いてあるFlexテクニカルノートがありました。
http://www.adobe.ca/jp/support/flex/ts/documents/45fc6cf2.htm

もしかしたら当たり前のことなのかもしれませんが、個人的には結構びっくりしたので覚書として記事に残しておきます。

下のサンプルは、ボタンをクリックすると 以下の処理を行います。
① Mathクラスのrandomメソッドを呼び 乱数を取得する
② 乱数値が奇数か偶数かを判別し、奇数ならば Boolean型の変数 oddNumを"true"に、偶数ならば"false"(デフォルト値) とします
③ oddNum 変数の評価を true/false の替わりに 1/0 で行います

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center">
<mx:Script>
    <![CDATA[
    
        private function getNum():void
        {
            var num:int;
            var oddNum:Boolean;
            
            num = Math.random() * 10;
                        
            if(num%2 > 0){
                oddNum = true;
            }
            
            if(oddNum == 0){
                numLabel.text = num + "は偶数です";
            }else if(oddNum == 1){
                numLabel.text = num + "は奇数です";
            }else{
                numLabel.text = "0 にも 1 にも入りませんでした";
            }
	} 
  ]]> 
</mx:Script> 
<mx:Label id="numLabel" text="下のボタンをクリックして数値を取得してください" fontSize="15" 
 color="#FFFFFF" fontWeight="bold"/> 
<mx:Button label="クリックして数値を表示" click="getNum()" width="200" height="30"/> 
</mx:Application>

boolean の評価を true/false ではなく 1/0 でできることにより得られるメリットはこれと言って浮かばないのですが・・
ビルド時にも実行時にも怒られず、型変換の意識もせずにすんなりと動いてしまうのはちょっと恐いかなと。
意図的にはやらないとは思いますが、こんなこともできてしまうのだと気をつけたいと思います。

 今回は、Adobe Illustrator CS5で作成したデザインを、Flash Catalyst CS5を使用してFlashBuilder4にインポートする方法を紹介致します。

初めに、Adobe Illustrator CS5でアプリケーションのデザインを作成します。サンプルでは以下の様なデザインを作成しました。

blog0810-2.png

デザインが完成したら、ファイル(F)>保存(S)から.aiの形式で保存します。

次に、Flash Catalyst CS5を起動し、TOP画面のウィザードの「デザインファイルから新規プロジェクトを作成」からAdobe Illustratorファイル(AI)から・・・を選択し、先ほどAdobe Illustratorで作成した.aiファイルを選択します。

blog0810-4.png

Flash Catalystでは、Adobe Illustrator(CS4以降)で作成したデザインを、簡単にコンポーネントに変換する事が可能です。
先ほど作成したデザイン内の矢印のグループを選択し、ボタンに変換を行います。

blog0810-7.png

ボタンへの変換後、ボタンのステート(up,over,down,disabled)毎にデザインを設定する事が可能です。
ここでは、マウスオーバー時とマウスダウン時にボタンの周りが光るようなフィルタを適用しました。

blog0810-8.png

右上のパネルの「ワイヤーフレームコンポーネント」タブからコンポーネントを追加する事も可能です。

blog0810-9.png

Flash Catalystでの編集中に、元のデザインに修正を加える事も可能です。
右上のパネルの「レイヤー」タブで右クリックし、「Adobe Illustrator CS5で編集(L)」を選択します。

blog0810-10.png

以下のポップアップが表示され、Adobe Illustrator CS5が起動します。

blog0810-11.png

デザインを修正し、完了したら「○完了」ボタンをクリックします。今回は新たにグループを追加しました。

blog0810-12.png

完了ボタンクリック後、デザインは保存され、修正内容は自動的にFlash Catalyst側にも反映されます。既にFlash Catalyst側で設定した内容はそのままなので安心です(再度設定し直す必要はありません)

Flash Catalystではステート変更時のアニメーション(トランジション)を簡単に設定する事が可能です。 先ほど追加したグループをボタンに変換し、「Up→Down」時に3D回転するエフェクトを設定してみました。 エフェクトの追加は「アクションの追加」ボタンから選択を行います。

blog0810-14.png

編集が完了したら、ファイル(F)>保存(S)でFXP形式で保存を行います。

blog0810-15.png

次に、FlashBuilder4を起動します。パッケージエクスプローラーで右クリックし、インポート(I)を選択します。

blog0810-16.png

FlashBuilder>FlashBuilderプロジェクトを選択し、次へ(N)ボタンをクリックします。

blog0810-17.png

プロジェクトを読み込み>ファイル(F)で、Flash Catalystで作成したFXPファイルを選択し、終了(E)ボタンをクリックします。

blog0810-18.png

FXPからFlashBuilderプロジェクトが生成されます。 default packageのMain.mxmlを開くとFlash Catalystで編集したデザイン通りインポートされた事が確認できます。 更に、componentsパッケージではFlash Catalystで変換を行ったコンポーネントのmxmlが生成されている事が確認できます。

blog0810-19.png

ボタンにコンポーネント変換したものは、sparkコンポーネントのボタンに変換がおこなわれます。

blog0810-20.png

componentsパッケージ配下のmxmlで各部品の修正・編集を行う事も可能です。

blog0810-21.png

最後に、プログラムロジックを実装して完成です。 Flash Catalystでボタンに変換した矢印ボタンですが、ボタン内の画像部分のみコンポーネントとして認識されます。(ちゃんと空白部分をくり抜いたコンポーネントとなります) このようにFlash Catalystとの連携を行う事により、より高度なデザインのアプリケーションを作成する事が可能です。

blog0810-22.png

 

<完成したサンプルアプリ>

SAMPLE

※サンプルは別ウインドウで開きます
※サンプルの再生はFlashPlayer10.1が必要となります。

Python、eclipseへのPyDevプラグインのインストールが終わったので、実際にeclipseで簡単なPythonプログラムを作ってみようと思います。

【参考:過去のブログ記事】
Pythonのダウンロード:http://www.brainchild.co.jp/blog/develop/2010/08/python-download.html
Pythonのインストール:http://www.brainchild.co.jp/blog/develop/2010/08/python-install.html
eclipseにPython開発環境(PyDev)を構築する:http://www.brainchild.co.jp/blog/develop/2010/08/python-eclipse1.html

今回は、定番中の定番「Hello world.」をコンソールに出力するプログラムを開発してみたところまでを記述しました。

eclipseでPython開発を行うための設定

1.eclipseのバースペクティブを「PyDev」に切り替える。

p_eclipse_install_9.jpg

p_eclipse_pydev_1.jpg

2.メニュー「ウィンドウ > 設定」をクリックし、設定画面を表示します。

p_eclipse_pydev_2.jpg3.設定画面から、「PyDev > インタープリター - Python」を選択し、[新規(W)...]ボタンをクリックします。

p_eclipse_pydev_3.jpg

4.「インタープリター名」、「Pythonの実行ファイル」 を指定し、[OK]ボタンをクリックします。

p_eclipse_pydev_4.jpg

インタープリター名 (任意) ※1
Interpreter Executable (Pythonインタープリター名) ※2

※1 インタープリター名は、Pythonのバージョンにしておいたほうが無難だと思います。
※2 下記の記事で紹介したPythonの実行ファイル名
Pythonのインストール:http://www.brainchild.co.jp/blog/develop/2010/08/python-install.html

5.選択を確認して、[OK]ボタンをクリックします。

p_eclipse_pydev_5.jpg

6.設定画面に戻ります。Pythonインタープリターが追加されていることを確認し、[OK]ボタンをクリックします。

p_eclipse_pydev_6.jpg

ここまでで、eclipseでPython開発を行うための必要最低限の設定が終了です。
準備が出来たので、簡単なプログラムを作ってみます。

Hello Worldプログラムの開発

1.Pythonプロジェクトを作成します。メニュー「ファイル > 新規 > PyDevプロジェクト」を選択します。

p_eclipse_pydev_7.jpg

2.プロジェクト名、文法バージョン、インタープリター を指定して[完了(F)]ボタンをクリックします。

p_eclipse_pydev_8.jpg

設定項目 Pythonのバージョン
2 3
プロジェクト名 (任意)
文法バージョン 2.x 3.0
インタープリター (Pythonインタープリター名) ※

※Pythonの各バージョンにあったインタープリターを設定していることが前提です。
  (この記事内「eclipseでPython開発を行うための設定 3~6」を参照ください。

3.作成されたプロジェクトの「src」フォルダーを右クリックしてメニューを表示し、「新規 > PyDevモジュール」を選択します。

p_eclipse_pydev_9.jpg

4.「ソースフォルダ」、「パッケージ」、「名前」を入力して[完了(F)]ボタンをクリックします。

p_eclipse_pydev_10.jpg

5.4で作成した「HelloPython.py」に下記プログラムを記述します。

Python2、Python3で標準出力の記法が違いますのでご注意ください。

  • Python2のソース
print "Hello Python world."
  • Python3のソース
print("Hello Python world.")

6.「HelloPython.py」を選択した状態で、メニュー「実行 > 3Python 実行」を選択します。

p_eclipse_pydev_11.jpg※「HelloPython.py」を選択し、右クリックして表示されるメニューでも同じです。

コンソールに実行結果が出力されます。

p_eclipse_pydev_12.jpg
ここまでで、Pythonプログラムを開発をするための下地ができました。
今後は、更にレベルの高いPythonプログラムを開発したいと思っています。

当ブログの過去記事として、Pythonのインストール方法を紹介しています。

【参考:過去のブログ記事】
Pythonのダウンロード:http://www.brainchild.co.jp/blog/develop/2010/08/python-download.html
Pythonのインストール:http://www.brainchild.co.jp/blog/develop/2010/08/python-install.html

しかし、Pythonを動かすだけでしたら上記記事のソフトをインストールしておけば良いのですが、実際にプログラムを開発しようとなると、それだけでは快適な開発環境としてはいまいちです。

開発環境のIDEとして、eclipse上でPythonのプログラムが作成できればかなり快適になると考えています。
そこで、eclipseでPython開発を行うためのプラグイン「PyDev」プラグインを、実際にeclipseにインストールしたときの手順を下記にメモしておきます。

eclipse3.5(GALILEO-ガリレオ)、eclipse3.6(HELIOS-ヘリオス)へのPyDevプラグインのインストール

eclipse3.5(GALILEO-ガリレオ)、eclipse3.6(HELIOS-ヘリオス)へ、PyDevプラグインをインストールする手順は特に違いはありません。
今回は、eclipse3.5の画面で手順を説明していますが、eclipse3.6でも同じ方法でPyDevプラグインをインストールすることができます。

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

p_eclipse_helpmenu.jpg

2.インストール画面が表示されます。「作業対象」コンボボックス右横の、[追加]ボタンをクリックします。

p_eclipse_install_1.jpg

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

 

名前 (任意) ※なんでも構いません。
ロケーション http://pydev.org.updates

 

p_eclipse_install_2.jpg

4.「Eclipse PyDev」を選択して、[次へ(N) >]ボタンをクリックします。

p_eclipse_install_3.jpg

5.[次へ(N) >]ボタンをクリックします。

p_eclipse_install_4.jpg

6.ライセンスのレビュー画面が表示されます。「使用条件の条項に同意します(A)」を選択し[完了(F) >]ボタンをクリックします。

p_eclipse_install_5.jpg

 インストールを実行しているので、しばらく待ちます。 p_eclipse_install_6.jpg

 証明書を信頼しますか?と聞かれたときは、選択して[OK]ボタンをクリックします。 p_eclipse_install_7.jpg

7.確認画面が表示されたら、eclipse を再起動してください。

p_eclipse_install_8.jpg

eclipseにPyDevプラグインがインストールされたことの確認

eclipseが再起動されたら、バースペクティブを開き、「PyDev」が選択できるようになっていることを確認してください。
バースペクティブにPyDevがあればればインストール完了です。
p_eclipse_install_9.jpg

p_eclipse_pydev_1.jpg

ここまでで、eclipse に PyDevプラグインをインストールすることはできました。
しかし、これだけではeclipse上でPythonのプログラム開発を行うことはできません。
こちら↓で、eclipseでのPyDevの設定、簡単なPythonプログラムを作成するまでの手順を記述しています。

eclipseでPython開発を行ってみる:http://www.brainchild.co.jp/blog/develop/2010/08/python-eclipse2.html

メモリーリークの調査をしている中で、<mx:Style>タグ を使用したサブ画面をメイン画面からポップアップ表示すると、サブ画面を閉じてもインスタンスが1つ残るというメモリーリークパターンが見つかったので覚え書きしておきます。

【確認環境】
Flex Builder 3.0.2
Flex SDK 3.5

以下は、問題が起こっているサンプルソースです。

 サブ画面【PopWindow.mxml】 では<mx:Style>タグを記述し、対象コンポーネントの"styleName"プロパティでスタイルを参照しています

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  horizontalAlign="center" verticalAlign="middle" width="400" height="300">
<mx:Style>
    .popLabel{
        color: #ff0000;
        font-size: 13;
        fontWeight: bold;
    }
</mx:Style>
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;
        
        private function onClickCloseBtn():void
        {
            PopUpManager.removePopUp(this);
        }
    ]]>
</mx:Script>
    <mx:Label text="下のボタンを押すとサブ画面が閉じます。" styleName="popLabel" />
    <mx:Button label="close" click="onClickCloseBtn()" />
</mx:TitleWindow>

 

 メイン画面【MainWindow.mxml】 ではサブ画面ポップアップ表示用のボタンを1つ用意します

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;
        
        private function onClickHandler():void
        {
            var popWindow:PopWindow = PopWindow(PopUpManager.createPopUp(this, PopWindow, true));
            PopUpManager.centerPopUp(popWindow);        
        }
    
    ]]>
</mx:Script>
    <mx:Label text="下のボタンを押すとサブ画面をポップアップ表示します。" color="#ff0000" fontSize="13" fontWeight="bold" />
    <mx:Button label="Popup" click="onClickHandler()" />
</mx:Application>

サブ画面のポップアップ表示/閉じる を5回繰り返した後、ガベージコレクションをした結果をプロファイラーで見ると、 PopWindowのインスタンスが1つ残っています。
profile.pngのサムネール画像

ポップアップメモリーリークの解決策

解決策としては、以下の ①・② の2種類が候補に挙がり、結局②を採用しました。

① <mx:Style> に書いていた内容を該当コンポーネントのプロパティに追加する。
   <mx:Label text="下のボタンを押すとサブ画面をポップアップ表示します。" color="#ff0000" fontSize="13" fontWeight="bold" />
② Applicationファイルに外部ファイルとして作成したCSSを読み込ませ、それを参照させる。  

CSSファイル【Sample.css】

.popLabel{
    color: #ff0000;
    font-size: 13;
    fontWeight: bold;
}

メイン画面【MainWindow.mxml】

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
    (略)
</mx:Script>

<mx:Style source="Sample.css"/>
    (略)
</mx:Application>

サブ画面【PopWindow.mxml】

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  horizontalAlign="center" verticalAlign="middle" width="400" height="300">



<mx:Script>

    (略)

</mx:Script>

    <mx:Label text="下のボタンを押すとサブ画面が閉じます。" styleName="popLabel" />

    <mx:Button label="close" click="onClickCloseBtn()" />

</mx:TitleWindow>


 

前回の記事で、Pythonのダウンロードまでをご紹介しました。
今回の記事では、ダウンロードしたPythonをインストールするところまでご紹介いたします。

ダウンロードした、「python-2.x.msi」を実行してます。
以下、実行した画面からの手順になります。

Pythonのインストール

1.Pythonを使用するユーザーを選択して、[Next]ボタンをクリックします。

PythonをインストールするWindowsの、全てのユーザーで利用できるようにするか、インストールを実行している現在のユーザーだけが利用できるようにするかを選択します。

選択する項目 使用できるユーザー
Install for all users 全てのユーザー
Install just for me (not available on Windows Vista) インストールを実行している現在のユーザーだけが利用可能

 

Python_Install_01.JPG

2.インストールするディレクトリーを選択し、[Next]ボタンをクリックします。

Python_Install_02.JPG

 3.インストールするコンポーネントを選択して、[Next]ボタンをクリックします。

Python_Install_03.JPG

    インストールが開始されます
Python_Install_04.JPG

4.インストールが完了したので、[Finish]ボタンをクリックします。

Python_Install_05.JPG

5.環境変数にインストールしたPATHを追加します。

環境変数にインストールしたPATHを追加してください。

Python_Install_06.JPG

 

Pythonの動作確認

1.コマンドプロンプトを起動し、「python」と入力します。

Python_Install_07.JPG

対話型シェルが起動されることを確認します。

2.コマンドを入力して、実行します。

試しに下記のコマンドを実行してみます。

>>> print "Hello python world."

Python_Install_08.JPG

表示されたらOKです。

3.Pythonの対話型シェルを終了します。

シェルを終了するには、Ctrl+Zを押下して、Enterキーを押下します。

Python_Install_09.JPG

このブログを見ていただいていると分かると思いますが、弊社でこのブログに記入している社員は、私も含めてAdobe の Flexに携わっている者ばかりです。
また、我々が携わったFlexの開発では、サーバーサイドをJavaで実装しているケースがほとんどです。

とはいえ、FlexでもサーバーサイドをLL(軽量言語)といった手法でも開発できるので、個人的に興味から、少し勉強を始めてみようと思っています。
まずは環境を整えてみようということで、Pythonの開発環境構築までをやってみることにしたので、私が行った開発環境構築までの手順を順次ご紹介しておきたいと思います。

第1弾は、ダウンロードまでをご紹介します。

今回、私が開発環境を構築するための前提条件は下記の通りになります。

  • OSはWindowsXPにインストールしています
  • Python公式サイトからインストールしているので、今回は日本語開発については意識していません
  • インストールしたPythonは、2.7 です

 

まずは、下記のPython公式サイトから開始します。
http://www.python.org/

1.TOPページ左側のメニューにある、「DOWNLOAD」をクリックします。

Python_Download_01.JPG2.インストールするPythonのバージョンを選択し、それぞれのインストーラーをダウンロードします。

今回は、Windows版のPython2をインストールするので「Python 2.x Windows installer」をクリックしてダウンロードします。

Python_Download_02.JPG【補足】
現在(2010年8月)Pythonのメジャーバージョンが2つ存在しています。
Python2とPython3の互換性については、下記の@ITの記事をご紹介しますので、詳細はそちらを参照ください。
よりPythonicなPythonを目指して

ダウンロードしたファイルで、Pythonのインストール(次の記事)を行います。

このブログについて

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