Adobe AIR Archive

Adobe Developer Connection に投稿しました。



http://www.adobe.com/jp/devnet/air/articles/adb_howto_develop_ria.html
連載1) RIA開発どうやって進める？

住友信託銀行、63営業店舗の業務システムを強化


大規模なAdobe AIR案件。しかも金融系。すごいぜ！！

AIRの起動中にもう一回exeをキックすると

起動中のAIRアプリの invokeイベントが呼ばれるそうです。


ちゃんとコマンドライン引数も渡ってくるそうです。



という豆知識は、某 北大阪AIR 案件の忘年会でのお話し。

FP 9.0.16

このバージョンでFlashのサイトを閲覧すると、最初の Event.ADDED_TO_STAGE が無視されるそう。

なのでもし、ADDED_TO_STAGE をトリガーにして処理を書いているプログラムは、表示されません。



こわいね

年賀状作成アプリ　　プリントマジック(http://www.print-magic.net/)

Adobe AIR製。よく出来てる〜

うちもこれで作りました。

Fleverlight勉強会お疲れ様でした。

他のコミュニティさんとやるといろんな刺激があって楽しいですね。やっぱ。

ぼくの発表内容です。(Winだとフォント変わります。。）



ソースは右クリ。（Tweener使ったけど含んでない。ご自身でTweenerを足して動かしてくだされ）

以下発表内容

• カスタムコンポーネントとSkin。
• １）MXML(XMLファイル)で画面を作ります。
• ２）画面の要素（TextInputやComboBoxなど）はコンポーネントと呼びます。
• ３）コンポーネントはFlex SDKにあらかじめ用意されています。
• ４）コンポーネントはスタイルを設定して見た目を変更できます。
• ５）コンポーネントはSkinを変更する事もできます。
• ６）コンポーネントは自作することもできます。
• ７）ふつうはFlex SDK のコンポーネントを継承して作ります。
• 慣れると簡単に作れるのでぜひ一度作ってみてください。 以上。

他の方の発表資料は SilverlightSquareさんところに集まるっぽい。 しっかしライブコーディングがヤヴァかった。お二人とも。

Book Release: The Essential Guide to Open Source Flash Development

なにかとお世話になっているOpen Source Flash。からの本。

Skin を指定できるようになった Label に対して borderSkin を作って指定してみる。


Using TextFields and Bitmaps in a programmatic skin ( n-kawaiさんのblog )


こちらで文字付き Skin の作り方が紹介されてたので
同じようなのを違ったアプローチで作る。


ソースは右クリ。

Skin が使える Label に Skin を作って適用してみました。
もっとFlexっぽくいくなら、HaloBorder ベースで作ったほうがいいかもですね。

mx.controls.Label や
mx.controls.Text に

backgroundColor や borderStyle , borderSkin を。

Canvas と TextInput のソースから移植して実現。




ソースはこちら

source

Flex SDK の defaults.css で global に borderStyle : "inset" が設定されてるので本来の素のデフォルトは枠線がつきます。
なのでそれが嫌な場合は、css で borderStyle : "none" を書いてやって下さい。

さて、スタイルでいろいろ装飾できるので便利やけど
ただでさえ重いFlexなだけに、単純に文字だけでいい場合はこういうの使わない方がいいと思う。

TextInput のカスタムコンポーネントを作りました。




概要
・テキストがどう編集されたのかがわかる。
・でもInsertキーを無効にしておく必要がある。


source

基本的には、TextEvent.TEXT_INPUTのイベントハンドラにてDispatch。
BackSpaceキーとDeleteキーの場合は、KeyboardEvent.KEY_DOWN。
という KEY_DOWN と TEXT_INPUT の両イベントの組み合わせ。

まあ、ニッチですわな。

TextInput のカスタムコンポーネントを作りました。




概要
・入力項目名(かまたは入力書式など)を内包してるので、レイアウトスペースが節約できるかもしれない。
・何を入力したらよいのかすぐわかるかもしれない。
・focusIn で消す。
・focusOut で未入力なら再表示。


source


exampleTextColor というスタイルで色指定できるようにしたんやけど、
updateDisplayList で exampleTextField の色を設定してるのが自分で気になってる。
ほんとは createChildren で一回だけ色指定したいんですがー。


DataGrid のレンダラーとしては試してないからどうなるかわからない。

Insertキーを無効にする。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="_creationCompleteHandler();" > <mx:Script> <![CDATA[ private function _creationCompleteHandler():void { systemManager.addEventListener(KeyboardEvent.KEY_DOWN, _systemManager_keyDownHandler); } private function _systemManager_keyDownHandler(event:KeyboardEvent):void { if (event.keyCode == Keyboard.INSERT) event.preventDefault(); } ]]> </mx:Script> </mx:WindowedApplication>

ニッチな要件だと我ながら思う。

stage, systemManager, root, applicationの実験の続き。

実験2




上からベースアプリ、ModuleLoaderでロードしたモジュール、SWFLoaderでロードした別アプリ。

それぞれのtoolTIpで各プロパティの値がわかる。


ベースアプリの情報
■ stage :
[object Stage]
■ systemManager :
[object _BlogSample2_mx_managers_SystemManager]
■ root :
[object _BlogSample2_mx_managers_SystemManager]
■ Application.application :
BlogSample2_0

 Moduleの情報
 ■ stage :
[object Stage]
 ■ systemManager :
[object _BlogSample2_mx_managers_SystemManager]
 ■ root :
[object _BlogSample2_mx_managers_SystemManager]
 ■ Application.application :
BlogSample2_0


 ロードした別アプリの情報
 ■ stage :
[object Stage]
 ■ systemManager :
[object _BlogSample2_OtherApplication_mx_managers_SystemManager]
 ■ root :
[object _BlogSample2_OtherApplication_mx_managers_SystemManager]
 ■ Application.application :
BlogSample2_0



なんか予想を裏切られたなー

stage
みんな同じ


systemManager
ベースアプリとモジュールは同じ。別アプリは別アプリのsystemManager


root
ベースアプリとモジュールは同じ。別アプリは別アプリのroot(systemManager)


Application.application
みんな同じ(BlogSample2_0 : ベースアプリのApplication.mxmlのこと)



うーん。。。


実験ソースはこちら
ベースアプリのプロジェクト(Module含む)
ロードされる別アプリ




ところで全然関係ないけどModuleLoaderってswfファイルからの相対パスじゃなくてURLの相対パス入れないと駄目なのね

stage, systemManager, root, application

表示のルートっぽいプロパティがいっぱいでどれを使えばいいのかを悩むことが多い。


stage

言わずと知れた最上位。
他のアプリケーションからロードされた場合、ロードした側のアプリでもロードされた側のサブアプリでも stage は同一を指す。
stage プロパティは、自分自身が表示リスト上に addChild() されるまでは nullになっている。
前回のApplication(またはWindowedApplication)のcreationComplete()でstageがnullになってるのは、Application自身が表示リスト上にまだAddChild()されていないから。

systemManager

systemManager プロパティは、他からロードされた場合、ロードされた側のサブアプリでは、そのサブアプリ内での SystemManager インスタンスを指す。
ちなみにApplication (AIRではWindowedApplication)は、SystemManager によってインスタンス化される。

root

SWFファイル内での最上位を指す。
FlexアプリケーションのSWFでのrootはSystemManagerになる。
Bitmapオブジェクトのみを持つSWFファイルなら、rootはbitmapオブジェクトを指す。
但し、stage の root は stage 自身を指す。
Moduleの場合、SWFファイルは別になるけどrootは親SWFと同一。

application
Application.application

メインのMXMLインスタンス(ApplicationクラスまたはWindowedApplicationクラス)を指す。
ロードされた場合も、そのサブアプリ内のメインのMXMLインスタンスを指す。
Moduleの場合、SWFファイルは別になるけどrootは親SWFと同一。


実験1

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="_preinitializeHandler();" initialize="_initializeHandler();" creationComplete="_creationCompleteHandler();" applicationComplete="_applicationCompleteHandler();" > <mx:Script> <![CDATA[ import mx.core.Application; private function _preinitializeHandler():void { trace(stage); // null trace(systemManager); // [object _Sample_mx_managers_SystemManager] trace(systemManager.stage); // [object Stage] trace(root); // null trace(Application.application); // Sample0 つまり自分自身 trace(application); // Sample0 つまり自分自身 } private function _initializeHandler():void { trace(stage); // null trace(systemManager); // [object _Sample_mx_managers_SystemManager] trace(systemManager.stage); // [object Stage] trace(root); // null trace(Application.application); // Sample0 つまり自分自身 trace(application); // Sample0 つまり自分自身 } private function _creationCompleteHandler():void { trace(stage); // null trace(systemManager); // [object _Sample_mx_managers_SystemManager] trace(systemManager.stage); // [object Stage] trace(root); // null trace(Application.application); // Sample0 つまり自分自身 trace(application); // Sample0 つまり自分自身 } private function _applicationCompleteHandler():void { trace(stage); // [object Stage] trace(systemManager); // [object _Sample_mx_managers_SystemManager] trace(systemManager.stage); // [object Stage] trace(root); // [object _Sample_mx_managers_SystemManager] trace(Application.application); // Sample0 つまり自分自身 trace(application); // Sample0 つまり自分自身 } ]]> </mx:Script> </mx:WindowedApplication>

やっぱややこしいってば。

アプリの初期化時に stage プロパティにアクセスしたいときは多々ある。
でもApplication（メインのMXML）の creationComplete() ではまだ null で困る。

で

preinitialize()〜creationComplete() の時点でstageを利用できる方法を思いついたので書いてみる。


<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="_preinitializeHandler();" initialize="_initializeHandler();" creationComplete="_creationCompleteHandler();" applicationComplete="_applicationCompleteHandler();" > <mx:Script> <![CDATA[ import mx.core.Application; private function _preinitializeHandler():void { trace(stage); // null trace(systemManager.stage); // [object Stage] } private function _initializeHandler():void { trace(stage); // null trace(systemManager.stage); // [object Stage] } private function _creationCompleteHandler():void { trace(stage); // null trace(systemManager.stage); // [object Stage] } private function _applicationCompleteHandler():void { trace(stage); // [object Stage] trace(systemManager.stage); // [object Stage] } ]]> </mx:Script> </mx:WindowedApplication>
結論
systemManager.stage としてアクセスすれば良い

発見！

メソッド名読めます？


イベントの伝播を止める

public function preventDefault():void

イベントに関連付けられたデフォルトの動作をキャンセルする。
但し、Event オブジェクトの cancelable プロパティが true のものだけ有効。

public function isDefaultPrevented():Boolean

既にデフォルトの動作がキャンセルされているかどうか。
戻り値が true なら既に preventDefault() が呼ばれている。

public function stopPropagation():void

そのメソッドを呼び出したイベントリスナーが登録されているオブジェクトでイベントリスナーの呼び出しを終了させる。
※ 現在イベントを処理中のオブジェクトにまだ実行待ちのイベントリスナーが登録されていたら、それは実行する。
※ 有効な対象は自分で追加したリスナーに限定される。
2008/6/20 追記:"自分で追加した"は、ActionScript3のデフォルト以外でという意味。mx.〜系のFlex Framework にて追加されている分は含まれる。みたい。


public function stopImmediatePropagation():void

そのメソッドを呼び出したイベントリスナーが登録されているオブジェクトでイベントリスナーの呼び出しを終了させる。
※ 自身が登録されているオブジェクトを含め、以降のイベントリスナー呼び出しを行わない。
※ 有効な対象は自分で追加したリスナーに限定される。
2008/6/20 追記:"自分で追加した"は、ActionScript3のデフォルト以外でという意味。mx.〜系のFlex Framework にて追加されている分は含まれる。みたい。


上記すべて akihiro kamijoさんのブログの December 09, 2005 の記事から抜粋


さて、問題なのは自分の英語力の無さだったりする。

上記メソッドは、
DataGridなどの複雑にコンポーネントが入り組んだコンポーネントにさらにたくさん手を加える時などによく使っている。

でも

メソッドが読めない。

ペアプロしてても
「ストップなんとかって書いたらええんちゃう？」
で通じ合う(笑)


なので、メソッド名から振る舞いのイメージが全く沸かない。


prevent [ぷりヴぇんと] 妨げる,防ぐ.

preventDefault は デフォルトの（イベントリスナ）を妨げる。

propagate　[ぷらぷぁげぃと] 伝播する.

stopPropagate は 伝播を止める。

immediate　[いみでぃえっと]直接の, すぐ近くの; 即時の; 当面の; 一番近い.

stopImmediatePropagate は 直接の伝播を止める。

ということなんですね。



あーすっきりした。

AIRのasDoc作成ツールは asdoc じゃなくて aasdoc だから気をつけろっ




一行で終わるのも何なので
以下知ってると思うけどasDocに関する補足情報まとめ。



1) asDoc作成ツール

flex sdk の bin の中にある。

AIRなら
aasdoc.bat ( for Windows )
aasdoc ( for Mac )

Flexなら
asdoc.exe ( for Windows )
asdoc ( for Mac )



2) Eclipse上からant実行するほうが楽かも

コマンドラインから実行してもいいけど
FlexBuilder使ってる人はEclipse上からAnt実行できたほうが断然楽やと思う。

build.xmlは

http://blog.bittube.com/ さんが公開してる asdoc作成build.xml をベースに作る。

(情報元 ASDocのAnt用build.xml satoshiさん)

出来上がったHTMLもsvnで管理してる場合は
asDocフォルダを丸ごと消さずに
defaultexcludesを書くか、「**/.svn」「**/.svn/**」を除外して
古いdocをdeleteするなどの工夫が必要。



3) その他情報

BeInteractive! [AsDoc]

Download Adobe AIR 1.0 for JavaScript Developers Book

Ajaxian has just posted the PDF download for the Adobe AIR for JavaScript Developers Pocketguide Book (published by O'Reilly).

pdfがダウンロードできるよ



ダウンロードしたよ

こないだのSingletonがうまく動かなくて自分でへこんでたからリベンジだこのやろう。


というわけで、さかっさんとの合作で出来上がった新しいSingleton。

package test { public class HogeSingleton { public function HogeSingleton(hsi:HogeSingletonInternal) { super(); if(!hsi) throw new Error("NO GOOD"); } public static function get instance():HogeSingleton { return HogeSingletonInternal.instance; } } } import test.HogeSingleton; class HogeSingletonInternal{ public static var instance:HogeSingleton = new HogeSingleton(new HogeSingletonInternal()); public function HogeSingletonInternal(){} }

コペルニクス的逆転の発想。


パッケージ外クラスでインスタンスを取得してやるのさっ


これでget instance の度にnewするべきかどうかチェックしなくていい。

Wicked南海謹製なり。

ModuleLoaderやSWFLoaderを利用してアプリケーションを分割するのは規模が大きいときはマスト。


でも各モジュール間や各SWF間でのデータ連携は大変！！ではない。


絵で説明する。

何かを管理するクラスを作るときはSingletonを多用する。とにかくよく使う。


で、ずっとこう書いてきた
package test { public class HogeSingleton { private static var _instance:HogeSingleton; public function HogeSingleton(hsi:HogeSingletonInternal) { super(); if(!hsi) throw new Error("no good !"); } public static function getInstance():HogeSingleton { if(!_instance) _instance = new HogeSingleton(new HogeSingletonInternal()); return _instance; } } } class HogeSingletonInternal{ public function HogeSingletonInternal(){} }
つかいかた
var ins1:HogeSingleton = HogeSingleton.getInstance();

2008/04/02：新しいSingletonを書いてたけどちゃんと動作しないから削除。した。ごめん。
2008/04/04：リベンジした。AS3のSingletonの書き方をちょっと変えた。リベンジ


ちなみに、一応書いておくと、

パッケージの外にクラスを書く(上記HogeSingletonInternal,MogeSingletonInternal)と、
このファイル内からしかアクセスできないので、上記クラス以外からシングルトンをnewしようとしてもErrorがスローされるYO！

// これだとErrorがスローされる var ins2:MogeSingleton = new MogeSingleton(null);

ASKUL DESKTOP


法人向け注文アプリ by Adobe AIR。