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,ActionScript 3.0 |
初回投稿:2010-06-20 (日) 14:40:33 | 最終更新:2010-06-20 (日) 16:55:09

Flashでは、以下の3種のテキストが存在する。

  1. ダイナミックテキスト-Actionscriptにて制御可能。
  2. 入力テキスト-Actionscriptにての制御の他、ユーザからの入力に対応。
  3. 静止テキスト-パブリッシュ以降制御不能。

3は制御不能なので、ここでは1,2について。

書式設定をしたい場合は
まず TextFormat オブジェクト(クラス)のインスタンスを生成して
そのインスタンスのプロパティに代入。

  1. var text_format = new TextFormat();
  2. text_format.size = 12;      // 文字のポイントサイズ
  3. text_format.color = 0xFF0000;   // 文字の色

で、最後に設定を実行するわけだが
既存のテキストに設定する場合と
新たなテキストに設定する場合で
命令が異なる。

既存のテキストに設定する場合

「既存のテキスト」とは、既にステージ上に配置されているテキストフィールド。

ActionScript

  1. my_txt.setTextFormat(text_format);

ただ~し! ちょっと気になることが。

textFormat の null 以外のプロパティのみがテキストフィールドに適用されます。
textFormat で null に設定されているプロパティは適用されません。
デフォルトで、新しく作成された TextFormat オブジェクトのプロパティはすべて null に設定されます。

<引用元>
ActionScript 2.0 リファレンスガイド > ActionScript クラス > TextField > setTextFormat (TextField.setTextFormat メソッド)

2.0にのみ記述があり、3.0にはないのだが
「新しく作成したらデフォルトで全て null 」
ってことは・・・ステージ上で設定したものは全て無効で、
必要なプロパティは全て設定しなさなければいけないってことかな?

とビビリながら試してみたところ、必要なものだけでよさそう。

新たなテキストに設定する場合

「新たなテキスト」とは、Actionscript上で新たに設置されたテキストフィールド。
createTextFieldメソッドと併用する。

Actionscript 2.0 と 3.0 で異なる。

[as2 num=4]my_txt.setNewTextFormat(text_format);[/as2]
ActionScript 3

  1. my_txt.defaultTextFormat = text_format;

書式の違いは
setNewTextFormat はメソッド で
defaultTextFormat はプロパティ ということだ。

Posted by muchag | ActionScript 2.0,ActionScript 3.0 |
初回投稿:2010-06-20 (日) 14:40:33 | 最終更新:2010-06-20 (日) 16:55:09

データ型

Posted by muchag | ActionScript 3.0 |
初回投稿:2010-06-20 (日) 1:18:08 | 最終更新:2010-07-25 (日) 18:45:01

Actionscript 3.0 におけるデータ型について。
cf) データ型(AS2)

プリミティブデータ型

単一の値を保持。

データ型 説明
Boolean Boolean データ型は、true と false の 2 つの値で構成されます。Boolean 型の変数に有効な値は、この 2 つだけです。宣言されているが、初期化されていない Boolean 変数のデフォルト値は false です。
int int データ型は、32 ビット整数として内部に保存され、-2,147,483,648 (-231) ~ 2,147,483,647 (231 – 1) (両端を含む) の整数のセットで構成されます。旧バージョンの ActionScript には、整数と浮動小数点数の両方に使用する Number データ型しかありませんでした。ActionScript 3.0 では、32 ビット符号付および符号なし整数の低レベルマシン型にアクセスすることができるようになりました。変数が浮動小数点数を使用しない場合、Number データ型ではなく int データ型を使用する方が速く、効率的です。

最小 int 値と最大 int 値の範囲外の整数値の場合は、Number データ型を使用します。Number データ型では、-9,007,199,254,740,992 ~ +9,007,199,254,740,992 の値 (53 ビット整数値) を処理できます。int データ型である変数のデフォルト値は 0 です。

Null Null データ型は、1 つの値 null だけで構成されます。これは、String データ型および Object クラスを含む複合データ型を定義するすべてのクラスのデフォルト値です。Boolean、Number、int、uint などの他のプリミティブデータ型には、値 null は含まれません。Flash Player では、Boolean、Number、int、または uint 型の変数に値 null を割り当てようとすると、null は該当するデフォルト値に変換されます。このデータ型を型注釈として使用することはできません。
Number ActionScript 3.0 では、Number データ型は、整数、符号なし整数、および浮動小数点数を表すことができます。ただし、パフォーマンスを最大化するために、32 ビット int および uint 型より大きい整数値に対してのみ、Number データ型を使用する必要があります。また、Number データ型には、浮動小数点数を格納することができます。浮動小数点数を格納するには、数値に小数点を含めます。小数点を省略すると、数値は整数として格納されます。

Number データ型では、2 進数浮動小数点計算のための IEEE 規格 (IEEE-754) で指定されている 64 ビット倍精度フォーマットを使用します。この規格では、64 ビットを使用して浮動小数点数を格納する方法が指定されています。1 ビットを使用して数値が正か負かを指定します。指数には 11 ビットが使用され、2 を底として格納されます。残りの 52 ビットは、指数で指定される累乗した数値である “仮数部” (“仮数” とも呼ばれます) を格納するために使用されます。

Number データ型では、ビットの一部を使用して指数を格納することで、仮数のビットすべてを使用する場合より大きな浮動小数点数を格納できます。たとえば、Number データ型で 64 ビットすべてを使用して仮数を格納した場合は、265 – 1 の数値を格納できます。Number データ型では、11 ビットを使用して指数を格納することで、仮数を 21023 乗できます。

Number 型が表すことができる最大値と最小値は、Number.MAX_VALUE および Number.MIN_VALUE と呼ばれる Number クラスの静的プロパティに格納されます。

Number.MAX_VALUE == 1.79769313486231e+308
Number.MIN_VALUE == 4.940656458412467e-324

この数値の範囲が膨大である一方で、この範囲の精度が犠牲になっています。Number データ型では、仮数の格納に 52 ビットを使用します。その結果、分数 1/3 など、正確に表すためには 53 ビット以上必要な数値は近似値にしかなりません。アプリケーションで小数値を持つ絶対精度が必要な場合、2 進浮動小数点数計算ではなく、10 進浮動小数点計算を実装するソフトウェアを使用する必要があります。

Number データ型で整数値を格納する場合、仮数の 52 ビットだけが使用されます。Number データ型は、これらの 52 ビットと特殊な非表示のビットを使用して、-9,007,199,254,740,992 (-253) ~ 9,007,199,254,740,992 (253) の整数を表します。

Flash Player では、Number 型の変数のデフォルト値としてだけではなく、数値を返す必要があるが返さない演算の結果としても、NaN 値を使用します。たとえば、負の数値の平方根を計算しようとすると、その結果は NaN になります。その他の特殊な Number の値には “正の無限大” と “負の無限大” があります。

メモ:0 による除算の結果は、除数も 0 の場合、NaN だけです。0 による除算の結果は、被除数が正の場合に “正の無限大”、被除数が負の場合に “負の無限大” となります。

String String データ型は、16 ビット文字のシーケンスを表します。ストリングは、UTF-16 形式を使用して、Unicode 文字として内部的に格納されます。ストリングは、Java プログラミング言語の場合と同様に不変値です。String 値を操作すると、ストリングの新しいインスタンスが返されます。String データ型で宣言される変数のデフォルト値は null です。両方とも文字列が存在しないことを表しますが、値 null は、空のストリング (“”) と同じではありません。
uint uint データ型は、32 ビット符号なし整数として内部に保存され、0 ~ 4,294,967,295 (232- 1) (両端を含む) の整数のセットで構成されます。負以外の整数が必要な特別な場合に、uint データ型を使用します。たとえば、ピクセルカラー値を表すためには uint データ型を使用する必要があります。これは、int データ型にはカラー値の処理には適していない内部符号ビットがあるためです。最大 uint 値より大きな整数値には、53 ビット整数値を処理できる Number データ型を使用します。uint データ型の変数のデフォルト値は 0 です。
複合データ型(リファレンスデータ型)

複数のプロパティを持ち、それぞれの値を保持。
デフォルトで用意されているArrayクラスなどの他、独自クラスを作って複合データ型とすることが可能。

データ型 説明
void void データ型は、1 つの値 undefined だけで構成されます。旧バージョンの ActionScript では、undefined は Object クラスのインスタンスのデフォルト値でした。ActionScript 3.0 では、Object インスタンスのデフォルト値は null です。値 undefined を Object クラスのインスタンスに割り当てようとすると、Flash Player ではこの値は null に変換されます。型指定されていない変数には、undefined という値のみを割り当てることができます。型指定されていない変数は、型注釈がないか、型注釈にアスタリスク記号 (*) が使用されている変数です。void は、戻り値の型注釈としてのみ使用することができます。
Object Object データ型は Object クラスによって定義されます。Object クラスは、ActionScript のすべてのクラス定義の基本クラスです。ActionScript 3.0 の Object データ型は、次の 3 つの点で旧バージョンとは異なります。1 つ目は、Object データ型は、型注釈のない変数に割り当てられるデフォルトのデータ型ではなくなりました。2 つ目は、Object データ型には、Object インスタンスのデフォルト値であった値 undefined が含まれなくなりました。3 つ目は、ActionScript 3.0 では、Object クラスのインスタンスのデフォルト値が null になった点です。

旧バージョンの ActionScript では、型注釈のない変数には自動的に Object データ型が割り当てられていました。ActionScript 3.0 ではこれは行われず、真に型指定されていない変数の概念が導入されました。型注釈のない変数は、型が指定されていないと見なされます。コード内で変数の型を指定しないままにしておくことを明確に示す場合、型注釈に新しくアスタリスク記号 (*) を使用することができます。これは、型注釈を省略するのと同じことを示します。次の例は、いずれも型指定されていない変数 x を宣言する 2 つの同等のステートメントを示します。

var x
var x:*

型指定されていない変数だけが値 undefined を保持することができます。値 undefined をデータ型が指定されている変数に割り当てようとすると、Flash Player は値 undefined をそのデータ型のデフォルト値に変換します。Object データ型のインスタンスでは、デフォルト値は null です。これは、Object インスタンスに undefined を割り当てようとすると、Flash Player が値 undefined を null に変換することを意味します。

<引用元>
livedocs.adobe.com:データ型の記述

Posted by muchag | ActionScript 3.0 |
初回投稿:2010-06-20 (日) 1:18:08 | 最終更新:2010-07-25 (日) 18:45:01
« 前ページへ次ページへ »