Flash Builder 4 -> library -> Debug

Posted by muchag | ActionScript 3.0,Flash Builder 4,Library & PlugIn & AddIn |
初回投稿:2010-07-16 (金) 15:20:24 | 最終更新:2010-07-25 (日) 2:45:20

まだ触りたてでよくわからないが、現在のところ
FB4 で変数の内容を確認するには

  • デバッグ中にコード内の変数名をマウスでロールオーバーする
  • デバッグ中に「変数」ビューを辿る

という方法があることがわかった。
 

Debug クラス

FLEX{er}:Dump Debug Method (Like var_dump Function in PHP) and Debug Class

この外部クラスを用いると、PHPvar_dump 同様の出力を得られる。

上記ページに用例が掲載されている。

DL & インストール

上記ページの記事の最後にある var_dump_sources リンクからDL。

解凍したフォルダの中にある com フォルダを src フォルダ直下に配置。

これで完了。

フォルダ配置を変更

FB4 では、メインファイルからパスを辿るようなので基本は src フォルダ直下みたい。

ただ、エラーメッセージ等を見ると(当たり前だが)SDK等にはパスが通っているようなので
src フォルダ以外でパスが通っているフォルダがあれば、その直下でも動作すると思う。

どうしても変更したい場合

まだ src フォルダ内での方法しかわからないが
src フォルダ直下ではなく、1つ2つフォルダを噛ませたい場合は

com/flexer/Debug.as

を開き、パッケージ名をパス通りに変更する。

例) src/com/ → src/hoge/com/

  1. package com.flexer
  2.  ↓ // 例の場合
  3. package hoge.com.flexer

 

利用法
  1. ステージに TextArea コンポーネント(例:myTextArea)を配置
  2. ActionScript コード内に import com.flexer.Debug; と記述
    (パッケージ名を変更している場合は、変更後の通りに)
  3. ActionScript コード内に myTextArea.text = Debug.dump(変数名); と記述
  4. アプリケーション実行
複数の変数を var_dump したい

Debug.dump(変数名, 変数名, 変数名, ・・・);
と併記可能。

Posted by muchag | ActionScript 3.0,Flash Builder 4,Library & PlugIn & AddIn |
初回投稿:2010-07-16 (金) 15:20:24 | 最終更新:2010-07-25 (日) 2:45:20

Flash Builder 4 -> コレクションオブジェクト

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-15 (木) 22:24:56 | 最終更新:2010-07-25 (日) 2:46:40

Flex には

  • Array に対する ArrayCollection
    ArrayCollection クラスは、ICollectionView
    または IList インターフェイスのメソッドとプロパティを使用して、
    アクセスおよび操作できるコレクションとして配列を公開するラッパークラスです。
     
    ArrayCollection インスタンスに対する操作はデータソースを変更します。
    例えば、ArrayCollection で removeItemAt() メソッドを使用した場合、
    基になる Array からアイテムが削除されます。
     
  • XMLList に対する XMLListCollection
    XMLListCollection クラスは、XMLList オブジェクトにコレクション機能を提供し、
    ネイティブ XMLList クラスのメソッドのいくつかを使用可能にします。

のような、元オブジェクトを継承するクラスがある。(注釈はリファレンスより引用)

ラッパー・・・ね。
あ~ 残ったおかずにラップしとかなきゃ・・・。
 

イメージ

他のサイトも参考にしながら、つらつらとイメージを膨らませる。。。

ArrayCollection は Array のインスタンス? イメージ? デーモン?
クローン? コピー? ヴァーチャル? 投影? 影武者? ・・・ 影武者?!

滅茶苦茶に様々並べてみたけど、もしかして「影武者」がイメージしやすいかも?

時代小説を読んでいると 武田信玄 や 徳川家康 などの影武者が登場することがある。

せっかくなので漫画にもなっている「徳川家康」(本人)と「世良田二郎三郎」(影武者)で例を考えてみる。
 

宣言

家康(Array)が死んじゃうと困るので二郎三郎(ArrayCollection)を影武者として立てる。

  1. // Array
  2. var myArray:Array = new Array();
  3. var myArray:Array = new Array("信康", "秀康", "秀忠");
  4.  
  5. // ArrayCollection
  6. var myAC:ArrayCollection = new ArrayCollection();
  7. var myAC:ArrayCollection = new ArrayCollection("信康", "秀康", "秀忠"); // エラー
  8. var myAC:ArrayCollection = new ArrayCollection(myArray);
  9. var myAC:ArrayCollection = new ArrayCollection(["信康", "秀康", "秀忠"]);

7行目はコンパイルエラーになる。

1137: 引数の数が正しくありません。1 個以下であることが必要です。
1067: 型 String の値が、関連しない型 Array に暗黙で型変換されています。

ArrayCollection コンストラクタの引数は1つ。それも Array 型であること。
よって、8行目や9行目のようにするとエラーにならない。
正に影武者! 😀
 

外観

影武者二郎三郎は、容姿・立ち居振る舞いは家康にソックリ(に真似る)。
思考も似せてはいるだろうけど、いざとなれば家康に聞けばいいので思考もソックリにできる。

  1. var myArray:Array = ["信康", "秀康", "秀忠"];
  2. var myAC:ArrayCollection = new ArrayCollection(myArray);
Debug.dump(myArray); 
Array (3) {
[0] =>
String (3) = “Jun”
[1] =>
String (3) = “Feb”
[2] =>
String (3) = “Mch”
}
Debug.dump(myAC); 
mx.collections::ArrayCollection (3) {
[0] =>
String (3) = “Jun”
[1] =>
String (3) = “Feb”
[2] =>
String (3) = “Mch”
}

 

差異

さりながら別人であることは間違いなく、様々な差異がある。
が、家康&二郎三郎の二者間での連絡は密に取る。

 

配列の作成
  1. var myArray:Array = ["信康", "秀康", "秀忠"];
  2. var myAC:ArrayCollection = ["信康", "秀康", "秀忠"]; // エラー

2行目はコンパイルエラーになる。

1067: 型 Array の値が、関連しない型 mx.collections:ArrayCollection に暗黙で型変換されています。

 

データの追加
  1. // Array
  2. var myArray:Array = ["信康", "秀康", "秀忠"];
  3. myArray.push("忠吉");
  4. myArray.unshift("元康");
  5. myArray[9] = "義直";
  6.  
  7. // ArrayCollection
  8. var myAC:ArrayCollection = new ArrayCollection(["信康", "秀康", "秀忠"]);
  9. var myAC5:ArrayCollection;
  10. myAC.addItem("信吉");
  11. myAC.addItem(["忠輝"]);
  12. myAC.addItemAt("忠吉", 3);
  13. myAC.addItemAt("元康", 0);
  14. myAC.addItem({9:"義直"});
  15. myAC.addItemAt("頼宣", "十男"); // エラー

 
同じ作業をするにも方法は違う。
 

Debug.dump(myArray); 
Array (6) {
[0] =>
String (2) = “元康”
[1] =>
String (2) = “信康”
[2] =>
String (2) = “秀康”
[3] =>
String (2) = “秀忠”
[4] =>
String (2) = “忠吉”
[9] =>
String (2) = “義直”
}
Debug.dump(myAC); 
mx.collections::ArrayCollection (8) {
[0] =>
String (2) = “元康”
[1] =>
String (2) = “信康”
[2] =>
String (2) = “秀康”
[3] =>
String (2) = “秀忠”
[4] =>
String (2) = “忠吉”
[5] =>
String (2) = “信吉”
[6] =>
Array (1) {
[0] =>
String (2) = “忠輝”
}
[7] =>
Object (1) {
[9] =>
String (2) = “義直”
}
}

 
ちなみに、10行目はコンパイルエラーになる。

1067: 型 String の値が、関連しない型 int に暗黙で型変換されています。

addItemAt メソッドの第2引数は index:int である。
 

データの削除
  1. var myArray6:Array = ["信康", "秀康", "秀忠"];
  2. var myAC6:ArrayCollection = new ArrayCollection(myArray6);
  3. myAC6.removeItemAt(1);
Debug.dump(myArray); 
Array (2) {
[0] =>
String (2) = “信康”
[1] =>
String (2) = “秀忠”
}
Debug.dump(myAC); 
mx.collections::ArrayCollection (2) {
[0] =>
String (2) = “信康”
[1] =>
String (2) = “秀忠”
}

 
ArrayCollection のデータを削除すると
元オブジェクト Array からも削除される。
 

コンポーネントとの連携

いざ戦場ともなると、影武者は危険な最前線に(二郎三郎本人の気持ちは聞かないことにして)平気で出られる。
そして、最前線で思うままに采配を揮える。

 

Bindable

Bindable 変数として宣言できる。

これができるのは コレクションオブジェクトだけ

  1. [Bindable] // メタデータタグ
  2. private myAC:ArrayCollection = new ArrayCollection(myArray);

こう宣言することで値の変更と同時にイベントが発生する。
 

dataProvider

コンポーネントの dataProvider プロパティに ArrayCollection, XMLListCollection を設定することで
コンポーネントとデータ連携ができる。

これも コレクションオブジェクトだけ
[mxml] // dataProvider





[/mxml]

1行目の dataProvider プロパティのところで
ArrayCollection オブジェクト名の myAC7 を { } 中括弧で括っているのがデータバインディングの印。
 

合わせ味噌

Bindable と dataProvider 両方の設定が完了したら
DataGrid コンポーネントと ArrayCollection オブジェクトの連携が完成する。

test4.mxml
[mxml]











[/mxml]  

test4.as
  1. import com.flexer.Debug;
  2. import mx.collections.ArrayCollection;
  3.  
  4.  
  5. private var myArray:Array = [
  6.     {col1:"長男", col2:"信康", uid:1},
  7.     {col1:"次男", col2:"秀康", uid:2},
  8.     {col1:"三男", col2:"秀忠", uid:3}
  9. ];
  10.  
  11. [Bindable]
  12. private var myAC:ArrayCollection = new ArrayCollection(myArray);
  13.  
  14.  
  15. private function init():void {
  16.     myArrayTA.text = Debug.dump(myArray);
  17.     myArrayCollectionTA.text = Debug.dump(myAC);
  18. }
  19.  
  20. private function itemEditHandler():void {
  21.     myArrayTA.text = Debug.dump(myArray);
  22.     myArrayCollectionTA.text = Debug.dump(myAC);
  23. }
  24.  
  25. protected function myButton_clickHandler(event:MouseEvent):void
  26. {
  27.     if (myDataGrid.selectedIndex >= 0) {
  28.         myAC.removeItemAt(myDataGrid.selectedIndex);
  29.     }
  30.    
  31.     itemEditHandler();
  32. }
This movie requires Flash Player 9.0.0
左が myArray、右が myArrayCollection。
myArray, myArrayCollection, DataGrid の三者がしっかりと同期しているのがわかる。

あ、あれ?
myArray と myArrayCollection って同期してていいのかな・・・?
ん~ まだわからないことがいっぱいあるらしい。
 
現在のところでは、myArray と myArrayCollection の違いを
影武者でイメージするのは悪くない気がする。
この先学習が進めば変わるかも。。。
 

コレクションオブジェクトの機能
  • 生データソースにより提供される処理から独立した一貫したデータ処理セットを提供します。
  • 基になるデータが変化したときに、コンポーネントが適切に更新されます。
  • リモートデータソースから到達するページングデータを処理するためのメカニズムを提供します。
  • ソートしたデータや開発者の提供するメソッドによってフィルタしたデータを表す具体的な「ビュー」を提供します。
  • 1 つのコレクションを使用して、同じデータソースから複数のコンポーネントにデータを格納できます。
  • コレクションを使用することで、コンポーネントのデータソースを実行時に切り替えることができます。
    また、データソースの内容を変更して、そのデータソースを使用するすべてのコンポーネントに変更を反映することもできます。
  • コレクションのメソッドを使用して、基になるデータソース内のデータにアクセスできます。

ヘルプより抜粋)

いろいろな機能がありますね。
その中でも重要な点をピックアップしました

<引用元>
blog.wonder-boys.net:[Flex]ArrayとArrayCollectionについて

 
 
 
今回学習した内容はこのくらい。
 
Adobe® Flex® 4 リファレンスガイド
Array
ArrayCollection
XMLList
XMLListCollection

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-15 (木) 22:24:56 | 最終更新:2010-07-25 (日) 2:46:40

Flash Builder 4 -> AS3 で layout の設定

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-14 (水) 19:00:25 | 最終更新:2010-07-25 (日) 2:49:12

動的に SkinnableContainer を配置しようとした。

その際に layout を設定しようとしたが

  1. var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
  2. mySkinnableContainer.layout = "HorizontalLayout";

としたら

1067: 型 String の値が、関連しない型 spark.layouts.supportClasses:LayoutBase に暗黙で型変換されています。

と怒られた。

あ~、layout プロパティって、値じゃなくてクラスを設定しないといけないのか。
Flash Builder 4 -> LayoutBase

というわけで

  1. import spark.layouts.HorizontalLayout;
  2.  
  3. var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
  4. mySkinnableContainer.layout = new HorizontalLayout();

これで layout の設定に成功。

細かい設定もしたければ

  1. import spark.layouts.HorizontalLayout;
  2.  
  3. var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
  4. var myHorizontalLayout:HorizontalLayout= new HorizontalLayout();
  5. myHorizontalLayout.columnWidth="calculated";
  6. myHorizontalLayout.gap = 6;
  7. myHorizontalLayout.paddingBottom = 0;
  8. myHorizontalLayout.paddingLeft = 0;
  9. myHorizontalLayout.paddingRight = 0;
  10. myHorizontalLayout.paddingTop = 0;
  11. myHorizontalLayout.requestedColumnCount = -1;
  12. myHorizontalLayout.requestedMinColumnCount = -1;
  13. myHorizontalLayout.variableColumnWidth = true;
  14. myHorizontalLayout.verticalAlign = "top";
  15.  
  16. mySkinnableContainer.layout = myHorizontalLayout;

※コード内の値はデフォルト値

こんな感じかしら?

ううう、こんなときには with 文を使いたいね~。

でも、よくないらしいので我慢我慢。
EfficientJavaScript – Dev.Opera – 効率的な JavaScript :with を使うのはやめよう

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-14 (水) 19:00:25 | 最終更新:2010-07-25 (日) 2:49:12

Flash Builder 4 -> テキスト系でマウスカーソルの変更

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-13 (火) 3:58:31 | 最終更新:2010-07-25 (日) 2:26:47

Label コンポーネントにリンクを貼ったのだが、マウスカーソルがそのままなのは至極残念。
そこで、手法を探していたところ
PHACTORY:【Flex】Label や TextArea 上で指さしカーソルを表示する方法
というのを発見した。

<引用コード>

  1. var ta: TextArea = new TextArea();
  2.  
  3. ta.useHandCursor = true;
  4. ta.buttonMode = true;
  5. ta.mouseChildren = false;
  6. ta.addEventListener(MouseEvent.CLICK, onClickEvt);

ほーほー、これでバッチリ解決。感謝 🙂

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-13 (火) 3:58:31 | 最終更新:2010-07-25 (日) 2:26:47

Flash Builder 4 -> addEventListener

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-13 (火) 3:40:30 | 最終更新:2010-07-25 (日) 2:27:50

addEventListener メソッドは、様々なものにイベントを登録するもの。

  1. public function addEventListener(
  2.     type:String,
  3.     listener:Function,
  4.     useCapture:Boolean = false,
  5.     priority:int = 0,
  6.     useWeakReference:Boolean = false
  7. ):void

Adobe® Flex® 4 リファレンスガイド:flash.events addEventListener() メソッド
(addEventListener() メソッドのページはいっぱいあるけど、これ・・・じゃないかな :roll:)
 

利用例
テキスト系のコンポーネントに click イベントを登録

click イベント処理が存在しないテキスト系のコンポーネントに click イベントを登録する。

  1. myLabel.addEventListener(MouseEvent.CLICK, onClickEvent(myLabel.text));
  2.  
  3. private function onClickEvent(myString:String):void {
  4.     Alert.show(myString);
  5. }

 

変数はイベント発生時に値を参照する

例えばステージ上に LinkButton を3つ配置して、それぞれにリンク先を設定する場合。
var myArray:Array = new Array(“http://www.google.com/”, “http://www.yahoo.com/”, “http://www.adobe.com/”);
for (var i:int = 0; i < 3; i++) { var myLinkButton:LinkButton= new LinkButton(); myLinkButton.text = myArray[i]; myLinkButton.addEventListener(MouseEvent.CLICK, function():void{ navigateToURL(new URLRequest(myArray[i]), "_blank"); }); addElement(myLinkButton); }[/as3] これだと、LinkButton がクリックされた時点で myArray[i] を参照するので 意図通りに動作しない。 そこで [as3]var myArray:Array = new Array("http://www.google.com/", "http://www.yahoo.com/", "http://www.adobe.com/"); for (var i:int = 0; i < 3; i++) { var myLinkButton:LinkButton= new LinkButton(); myLinkButton.text = myArray[i]; myLinkButton.data = myArray[i]; // ここがミソ myLinkButton.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{ navigateToURL(new URLRequest(event.currentTarget.data), "_blank"); }); addElement(myLinkButton); }[/as3] 5行目の各 LinkButton の data プロパティにURLを格納しておき クリック時にそれを参照させることで意図通りに動作する。 Flex User Group:addEventListener メソッドについて
こちらで教えていただいた。

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-13 (火) 3:40:30 | 最終更新:2010-07-25 (日) 2:27:50

Flash Builder 4 -> 並存コンポーネントのクラッシュ

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-12 (月) 20:37:30 | 最終更新:2010-07-25 (日) 2:51:45

複数の名前の参照を明確に解決できません。
spark.components:Label
(*****\frameworks\libs\spark.swc(spark.components:Label) から)
および
mx.controls:Label
(*****\frameworks\libs\framework.swc(mx.controls:Label) から)
が存在します。

こんなエラーが出た。

原因はこれだ。

  1. import spark.components.*;
  2. import mx.controls.*;

Label コンポーネント(コントロール)は、mx.controls および spark.components のどちらにも搭載されているので
どっちの Label よ~?
ってことになったわけだ。

はい・・・全部1つ1つ記述します。 😐
 

解決法めっけ!

並存するコンポーネントについては、真面目に記述してやればOK。

  1. myLabel:mx.controls.Label = new mx.controls.Label();
  2. yourLabel:spark.components.Label = new spark.components.Label();
Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-12 (月) 20:37:30 | 最終更新:2010-07-25 (日) 2:51:45

Flash Builder 4 -> コントロール配列

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-11 (日) 1:33:42 | 最終更新:2010-07-25 (日) 2:26:08

コントロール配列 なんていうタイトルにしてみたけど
これは VB 用語なんだそうな。

ActionScript 界では何ていうのかな?

要するに、同種のコンポーネントを未定数個配置して一括制御したい わけだ。

  1. Textbox0_txt.text = myArray[0];
  2. Textbox1_txt.text = myArray[1];
  3. Textbox2_txt.text = myArray[2];
  4.  ・
  5.  ・
  6.  ・
  7. Textbox30_txt.text = myArray[30];

こんな風にコードを書いているんじゃ大変だし
変更があったらメンドイからねぇ。。。

しかも毎回数が変わるわけだから、予め書きようがない。
 

手法1:コンポーネントの ID で配列化

Flash は今まで MX, 8, CS3 と使ってきたが、ずっと ActionScript 2.0。
このときは、インスタンス名に番号を付けることで実現してきた。
[as2]for (var i:Number = 0; i < 31; i++ ) { eval("_root.Textbox" + i +"_txt").text = myArray(i); }[/as2] ってことは、今回も各コンポーネントに付ける ID で実現できそう。 インスタンスの参照 -> 変数の利用

と思ったら甘かった。

  1. // ステート上に myGroup を設置済み
  2. var myArray:Array = new Array("Flash", "Dreamweaver", "Illustrator");
  3. for (var i:int = 0; i < 3; i++) {
  4.     var myLabel:Label = new Label();
  5.     myLabel.id = "myLbl" + i;
  6.     myLabel.text = myArray[i];
  7.     myGroup.addElement(myLabel);
  8.  
  9.     Alert.show(myGroup["myLbl" + i].text);
  10. }[/as3]
  11.  
  12. としても
  13.  
  14. [as3]// ステート上に myGroup を設置済み
  15. var myArray:Array = new Array("Flash", "Dreamweaver", "Illustrator");
  16. for (var i:int = 0; i < 3; i++) {
  17.     var myLabel:Label = new Label();
  18.     myLabel.id = "myLbl" + i;
  19.     myLabel.text = myArray[i];
  20.     myGroup.addElement(myLabel);
  21. }
  22.  
  23. Alert.show(myGroup["myLbl0"].text);
  24. [/as3]
  25.  
  26. としても、実行時エラーになる。
  27. <div class="fb4error">ReferenceError: Error #1069: spark.components.Group にプロパティ myLbl0 が見つからず、デフォルト値もありません。</div>
  28.  
  29. Flex User Group:<a href="http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=1096" target="_blank">コントロールの取得方法</a>
  30. こちらにも同様の実行時エラーが載っている。
  31.  
  32. しかし、回答者の方々は、この手法でいける と書いているので
  33. 私がどこか間違えているらしい。
  34.  
  35. ん~。。。   :-|
  36.  
  37. <div class="flow2">this</div>
  38. <a href="http://diaspar.jp/node/164" target="_blank">Drag&Drop で参考にさせていただいたサイト</a>で <span class="emphasis_b">this</span> を用いて参照しているのを見た。
  39. [as3]this['opt'+i]

こちらのプロジェクトを実際に動かしてみる。
おー 参照できてるやん!

早速私のプロジェクトに引用・・・あれ? 動かない・・・。

イベントで受け取った target の id を参照することはできても、
id を用いてコントロール自体を参照することができない。

グーグル先生・・・。
FXUF:addChildでid設定

どうやら MXML で設定した idAS で設定した id は、微妙に異なるらしく
AS で設定した id へは参照できないっぽい。 意味ね~!!!

大体、上記フォーラム内容にある id が重複してもOK なんて・・・ありえにゃい・・・orz
 

ClassFactory

また、上記フォーラム内容にある ClassFactory を用いる方法も試してみたが
親コンポーネントへ登録する際にエラーになる。

1061: 未定義である可能性のあるメソッド addChild を、静的型 mx.core:ClassFactory の参照を使用して呼び出しました。 Flex の問題
1061: 未定義である可能性のあるメソッド addElement を、静的型 mx.core:ClassFactory の参照を使用して呼び出しました。 Flex の問題

Adobe® Flex® 4.1 リファレンスガイド:ClassFactory
を見てみたものの、よくわからない・・・放置。 😐
 

途中経過

そういうわけで、現在までのところでは
MXML で設定した id なら、ths[id] で参照可能
AS で設定した id の場合は、参照不能
 

手法2:コンポーネントへの参照を配列へ格納

で、結局 ActionScript 界で何ていうのかわからない「コントロール配列」。
わからないので、グーグル先生にも上手く質問ができなかった。
 

お手本発見

それでも、あれこれ試して探していると
2ch:Flexでもswf作ろうぜ
の313番にいいものを見つけた。

<以下、引用>
コントロール配列が欲しいなら自分で用意すればいい

var textarray:Array = new Array();
for (var i:int = 0; i <= 3; i++) { var text:TextField = new TextField(); text.text = String(i); text.x = i*10 text.y = i*10 addChild(text); textarray[i] = text; } removeChild(textarray[1]);[/as] 例えばArrayでやるならこんな感じで <以上、引用> ほうほう、これを見る限りでは、コンポーネント(オブジェクト)への参照を配列に格納できるのか。 よって、配列に格納される値は、以下のような感じになる。 [text]test.ApplicationSkin2._ApplicationSkin_Group1.contentGroup.TextField** // **は数字が入る[/text]   id を設定している場合はこんな感じ。(text.id = "myTF" だとして) [text]test.ApplicationSkin2._ApplicationSkin_Group1.contentGroup.myTF[/text]  

自分用に改変

これが書かれたのが 2008/07/11(金) 00:32:33 なので
上記コードを FB4 用にちょいちょい手を入れて

  1. // ステート上に myGroup を設置済み
  2. var myArray:Array = new Array("Flash", "Dreamweaver", "Illustrator");
  3. var myCompornentArray:Array = new Array();
  4. for (var i:int = 0; i < 3; i++) {
  5.     var myLabel:Label = new Label();
  6.     myLabel.text = myArray[i];
  7.     myGroup.addElement(myLabel);
  8.     myCompornentArray[i] = myLabel;
  9. }
  10. myGroup.removeChild(textarray[1]);[/as3]
  11. としてみたら、希望通り動いた。
  12.  
  13. <div class="flow2">Array と ArrayCollection</div>
  14. 因みに、これを ArrayCollection でやると実行時エラーになる。
  15. 上下のコードの3行目に注目。
  16. [as3]// ステート上に myGroup を設置済み
  17. var myArray:Array = new Array("Flash", "Dreamweaver", "Illustrator");
  18. var myCompornentArray:ArrayCollection = new ArrayCollection(); // 注目
  19. for (var i:int = 0; i < 3; i++) {
  20.     var myLabel:Label = new Label();
  21.     myLabel.text = myArray[i];
  22.     myGroup.addElement(myLabel);
  23.     myCompornentArray[i] = myLabel;
  24. }
  25. myGroup.removeChild(textarray[1]);[/as3]
  26. <div class="fb4error">RangeError: 指定したインデックス '0' が範囲外です
  27.     at mx.collections::ListCollectionView/setItemAt()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:531]</div>
  28.  
  29. 経験者の方々にとっては当たり前なのかもしれないが
  30. <span class="emphasis_b">Array</span> と <span class="emphasis_b">ArrayCollection</span> との区別がしっかりついていない現時点では貴重な資料。
  31.  
  32. <div class="file">FB4 インストールディレクトリ\sdks\4.0.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:531</div>
  33. を見ると
  34. [as3 num=525]public function setItemAt(item:Object, index:int):Object
  35. {
  36.     if (index < 0 || !list || index >= length)
  37.      {
  38.         var message:String = resourceManager.getString(
  39.             "collections", "outOfBounds", [ index ]);
  40.         throw new RangeError(message);
  41.     }
  42.  
  43.     var listIndex:int = index;
  44.     if (localIndex)
  45.     {
  46.         if (index > localIndex.length)
  47.         {
  48.             listIndex = list.length;
  49.         }
  50.         else
  51.         {
  52.             var oldItem:Object = localIndex[index];
  53.             listIndex = list.getItemIndex(oldItem);
  54.         }
  55.     }
  56.     return list.setItemAt(item, listIndex);
  57. }

531行目はただのエラー処理なだけで
要は527行目に引っ掛かってる。

ArrayCollection だと、この時点で length が 0 になっているのでエラー。
この先は、気力と時間があるときに・・・。 🙄
 

お手本2

SilverFox2nd~狐の小屋~:コントロールを配列で参照
ここにもお手本があった。

上とほぼ同じだが、配列そのものをインスタンスに設定しているパターン。

<以下、引用>
// Canvas型の配列変数を宣言
[ArrayElementType(“mx.containers.Canvas”)] public var CvsAry:Array = new Array();
 ・
 ・ 中略
 ・
private function InitFunc():void {
 ・
 ・ 中略
 ・
for ( i = 0; i < RightCnt; i++ ) {  ・  ・ 中略  ・ // Canvasのインスタンス作成 CvsAry[i] = new Canvas(); CvsAry[i].width = CvsW; CvsAry[i].height = CvsH; CvsAry[i].setStyle("backgroundColor", "0x000000");  ・  ・ 中略  ・ }  ・  ・ 中略  ・ }[/as3] <以上、引用> こちらも希望通り動いた。 更に [as3 num=2][ArrayElementType("mx.containers.Canvas")][/as3] こういうメタデータタグがあるということも学習できた。 Flex 3 コンポーネントの作成と拡張 / カスタムコンポーネントの開発 / カスタムコンポーネントのメタデータタグ :メタデータタグ

試しにこれを除いてみてもちゃんと動いたが
型宣言は大事だからね~。メモメモ。

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-11 (日) 1:33:42 | 最終更新:2010-07-25 (日) 2:26:08

Flash Builder 4 -> PHPからのデータの受け取り方

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-07 (水) 18:38:16 | 最終更新:2010-07-25 (日) 2:19:45

PHPサービスを利用した場合のデータの受け取り方。

本には接続方法とテストの仕方しか載ってない。
しかも似たようなコードをズラズラ並べて。。。
そのスペースで受け取り方を書いてくれればよかったのになぁ。

グーグル先生に聞いても、DataGridへのバインドの仕方は載ってても
個々に受け取って処理する方法がない。

大体戻り値は配列しかないのかしら?
「戻り値の設定」では、Booleanでも自動検出できたのに。

デザインモードからボタンのクリックイベントで getUserInfo メソッドを設定したら
[mxml]

[/mxml]

  1. protected function btnLogin_clickHandler(event:MouseEvent):void
  2. {
  3.     getUserInfoResult.token = dbCooperate.getUserInfo(/*次の値を入力 : */ username, password);
  4. }

こんなんが自動生成された。
 
ので、引数にテキストボックスのテキストを設定。

  1. protected function btnLogin_clickHandler(event:MouseEvent):void
  2. {
  3.     getUserInfoResult.token = dbCooperate.getUserInfo(txtUserName.text, txtPassword.text);
  4. }

 
深く考えずに getUserInfoResult.token にユーザ情報が入ってるんだろうと
trace してみたけど、Object とか出るだけでてんでダメ。

そこで token ってなんじゃろ と思い
PHP&MySQLとの連携 で作成した

_Super_DbCooperate.as

を見ると

  1. public function getUserInfo(username:String, password:String) : mx.rpc.AsyncToken
  2. {
  3.     var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getUserInfo");
  4.     var _internal_token:mx.rpc.AsyncToken = _internal_operation.send(username,password) ;
  5.  
  6.     return _internal_token;
  7. }

こんな感じ。

ほぉほぉ、mx.rpc.AsyncToken とかいうクラスなのね。
で、それ何?

このクラスは、非同期 RPC 処理のための追加データまたはトークンレベルのデータを設定する場所を提供します。また、個々の呼び出しに IResponder を追加することもできます。AsyncToken は、ResultEvent および FaultEvent(token プロパティ)で参照することができます。

Adobe® Flex™ 3.2 リファレンスガイド:AsyncToken

ふーん。

そういうわけらしいので、具体的な手法をグーグル先生に聞いてみると
どうも2種類やり方があるような・・・。
 

<s:CallResponder/>内に記述する方法

Adobeのチュートリアル動画:Flex Test Drive:データベースの変更
に出てきたやり方が
saturnboy:LCDS and MySQL Views
をはじめとするいくつかのサイトに載っていたので試してみたけど
エラーばっかりでダメ。

諦め。。。た。
 

AsyncResponder を用いる方法

aki193の日記:Flexの実装(AsyncTokenとAsyncResponder、Javaのリモート呼び出し)
を参考に以下のようにしてみたら受け取りに成功した。 🙂
 

  1. import mx.rpc.AsyncResponder
  2. import mx.rpc.events.ResultEvent;
  3. import mx.rpc.events.FaultEvent;
  4.  
  5. protected function btnLogin_clickHandler(event:MouseEvent):void
  6. {
  7.     getUserInfoResult.token = dbCooperate.getUserInfo(txtUserName.text, txtPassword.text);
  8.     getUserInfoResult.token.addResponder(new AsyncResponder(successUserInfo,failUserInfo));
  9. }
  10.  
  11. //リモートアクセス成功時
  12. private function successUserInfo(event:ResultEvent, obj:Object=null):void{
  13.     // ObjUserInfo は、「戻り値の設定」で設定した独自オブジェクト
  14.     var myUserInfo:ObjUserInfo = event.result as ObjUserInfo;
  15.  
  16.     trace(myUserInfo.id);
  17.     mx.controls.Alert.show(myUserInfo.id);
  18. }
  19.  
  20. //リモートアクセス失敗時
  21. private function failUserInfo(event:FaultEvent, obj:Object=null):void{
  22.     trace("FaultCode:" + event.fault.faultCode + "\n" + "FaultString:" + event.fault.faultString + "\n"
  23.         + "FaultDetail:" + event.fault.faultDetail);
  24.     trace("fault");
  25. }

ただし、13~14行目のところ。

id を name に変えてみたところ
データが更新されない。

ブラウザのキャッシュかな と思って
キャッシュをクリアしたら無事に更新された。

ん~、デバッグの度にキャッシュをクリアせんといかんのかなぁ。
 

戻り値が多次元配列(?)の場合

オブジェクト型なので、多次元配列という言葉を用いてよいかわからないけど
複数レコードを格納している場合は、以下のように。
//リモートアクセス成功時
private function successUserInfo(event:ResultEvent, obj:Object=null):void{
// ObjUserInfo は、「戻り値の設定」で設定した独自オブジェクト
var myUserInfo:ObjUserInfo;

for (var i:Number = 0; i < event.result.length; i++) { myUserInfo = event.result[i] as ObjUserInfo; } }[/as3onfx4] また、もしプロパティ名(要素名、キー)を取得したい場合は 配列の書き方 を参照。
 

FaultEvent

現時点までの範囲で、さっきまで思惑通りに動いていたのに
急にこんなアラートが。

へ?
ちょっとビビリながら、あれこれ見ていると
FB4 のコンソールビューに

FaultCode:Client.Error.DeliveryInDoubt
FaultString:チャンネルが切断されました
FaultDetail:応答を受信する前に、チャンネルが切断されました。
fault

あ、これ FaultEvent だ!

つまりリモートアクセスに失敗したってことか・・・。
あああ、そうか。DBの実験してて、接続情報を PDO 用に変更したんだった。

DB接続情報を mysqli 用に戻したら無事に動いた。
よい経験になった。 🙂

 
しっかし、データを受け取るだけで相当はまってしまった。
まだ全面的には解決してないしね。

初心者だからって、これはまずいなぁ。

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-07 (水) 18:38:16 | 最終更新:2010-07-25 (日) 2:19:45

Flash Builder 4 Index

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-06 (火) 17:57:08 | 最終更新:2011-01-09 (日) 23:13:52

Zend Framework に触ってみたものの
私程度の規模には必要がなさそうなので
(本当は、結構しんどかったので・・・orz)
ず~~~っとやりたかった Flex に挑戦することにした。

SDK にての環境も整えてみたが
素人の私にはまだまだ厳しそうなので
思い切って Flash Builder 4 (以下 FB4) へ突入。

Flash なり Actionscript なり、少しは触ったことがあるけど
FB4 を開いてみたら Flex SDK 4 同様
ほぼ一からのスタートになりそうなので
以前の失敗を繰り返さないよう
毎度覚書を残そうと思う。

また、FB4 については、まだまだネット上の情報が少ないので
「困ったTT」も増えそう。

情報をお持ちの方は、よかったらコメントを残してください。
 
 
では~ スタート~!!
 

Flash Builder 4 Index

丸っきりの書きかけ項目は Not found になる。

目次
序章
  1. 呼称
  2. 新規プロジェクトの立ち上げ
  3. フォルダ配置
  4. ActionScript コードを外部ファイルへ
  5. Tips
    1. Flex 3 から Flex 4 への移植

 

データ中心型開発(DCD)
  1. PHP&MySQLとの連携
    1. データの戻り値
    2. データの受け取り方

 

コンポーネント
  1. コントロール
    1. Alert
    2. Button
    3. CheckBox
    4. DropDownList
    5. RichEditableText
    6. Text
    7. TextInput
    8. Tree
      1. Drag & Drop 個々に設定
      2. Drag & Drop 情報取得
      3. アイコンのカスタマイズ
      4. itemRenderer の変更
      5. ノードの開閉
  2. 一般プロパティ(UIComponent?)
    1. toolTip
    2. サイズ指定
  3. Tips
    1. MX と Spark コンポーネント比較
    2. Repeater
    3. Spark コンポーネントで背景画像
    4. コントロール配列
    5. テキスト系でマウスカーソルの変更
    6. テキスト系の比較
  4. カスタム
    1. 継承型
      1. Tree
        1. Tree with Spring Loaded Folders
    2. 独立型(UIComponent 直接継承)

 

関数・メソッド
  1. ***
    1. addEventListener
  2. Tips
    1. 関数パラメータ
    2. 配列操作
    3. 文字列操作
      1. Trim
    4. 文字列と XML の相互変換

 

クラス・オブジェクト
  1. ***
    1. DragManager
    2. LayoutBase
    3. Rect
      1. グラデーション
    4. ShareObject
    5. StringUtil
    6. XML、XMLList、XMLListCollection
      1. E4X
      2. 初期化(インスタンス化)
      3. XML 系の比較
      4. XML の操作
  2. Tips
    1. Drag & Drop
    2. コレクションオブジェクト

 

ライブラリ
  1. ***
    1. com.flexer.Debug
    2. net.lifebird.ui.cursor

 

がい~ん!(はまったこと)
  1. 解決済み(たぶん)
    1. エラーメッセージとその対処法
    2. AS3 で layout の設定
    3. MySQL の LONGTEXT型フィールド
    4. PHP で データ型の指定
    5. width, height のパーセント指定
    6. データサービスのエラー
    7. 並存コンポーネントのクラッシュ

 

瑣末な話
  1. 疑問
    1. コンソールビュー

 

参考

書籍「Flex 4 プログラミング入門」

Adobe® Flex® 4 リファレンスガイド
Adobe® Flex™ 3.2 リファレンスガイド
Adobe ヘルプリソースセンター:Flex 3 開発ガイド
Adobe ヘルプリソースセンター:Flex 3 コンポーネントの作成と拡張
Flex デベロッパーセンター

Flash CS4 Professional
Flash 用 ActionScript 3.0 のプログラミング
ActionScript 3.0 コンポーネントガイド
ActionScript 3.0 言語およびコンポーネントリファレンス

参考サイト

その他各参考サイトについては、各エントリーにて。

Posted by muchag | ActionScript 3.0,Flash Builder 4 |
初回投稿:2010-07-06 (火) 17:57:08 | 最終更新:2011-01-09 (日) 23:13:52

キーイベントの取得

Posted by muchag | ActionScript 2.0 |
初回投稿:2010-06-22 (火) 13:23:30 | 最終更新:2010-06-22 (火) 13:28:27

ユーザのキー入力を Actionscript で制御するには
オブジェクトインスタンスに

  1. onClipEvent (KeyDown) {
  2. }

なんて書いてやる方法もある。

が、フレームアクション(?)から制御してやるには
オブジェクトを作成して登録する必要があるようだ。
[as2]var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
trace(“DOWN -> Code: ” + Key.getCode() + “\tACSII: ” + Key.getAscii() + “\tKey: ” + chr(Key.getAscii()));
};
Key.addListener(keyListener);[/as2]

2行目 keyListener.onKeyDown = function() 内には
キーが押されたときの処理を綴る。

どのキーが押されたかを取得するには
それぞれのキーのコードを取得する必要がある。

そのコードの一覧は、以下の参考元参照。

<参考元>
Adobe ヘルプリソースセンター:キーボードのキーとキーコードの値
 

Actionscript 3.0 では、Keyクラスが廃止された

らしい・・・。

参考サイトだけ残して、AS3を使うときに勉強することにしよう。

<参考元>
ITpro:Flash CS3入門 基本からActionScriptまで 第15回 キーボード入力を取得して利用する

Posted by muchag | ActionScript 2.0 |
初回投稿:2010-06-22 (火) 13:23:30 | 最終更新:2010-06-22 (火) 13:28:27
« 前ページへ次ページへ »