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)を影武者として立てる。
[as3onfx4]// Array
var myArray:Array = new Array();
var myArray:Array = new Array(“信康”, “秀康”, “秀忠”);

// ArrayCollection
var myAC:ArrayCollection = new ArrayCollection();
var myAC:ArrayCollection = new ArrayCollection(“信康”, “秀康”, “秀忠”); // エラー
var myAC:ArrayCollection = new ArrayCollection(myArray);
var myAC:ArrayCollection = new ArrayCollection([“信康”, “秀康”, “秀忠”]);[/as3onfx4]

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

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

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

外観

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

[as3onfx4]var myArray:Array = [“信康”, “秀康”, “秀忠”];
var myAC:ArrayCollection = new ArrayCollection(myArray);[/as3onfx4]

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”
}

 

差異

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

 

配列の作成
[as3onfx4]var myArray:Array = [“信康”, “秀康”, “秀忠”];
var myAC:ArrayCollection = [“信康”, “秀康”, “秀忠”]; // エラー[/as3onfx4] 2行目はコンパイルエラーになる。

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

 

データの追加
[as3onfx4]// Array
var myArray:Array = [“信康”, “秀康”, “秀忠”];
myArray.push(“忠吉”);
myArray.unshift(“元康”);
myArray[9] = “義直”;

// ArrayCollection
var myAC:ArrayCollection = new ArrayCollection([“信康”, “秀康”, “秀忠”]);
var myAC5:ArrayCollection;
myAC.addItem(“信吉”);
myAC.addItem([“忠輝”]);
myAC.addItemAt(“忠吉”, 3);
myAC.addItemAt(“元康”, 0);
myAC.addItem({9:”義直”});
myAC.addItemAt(“頼宣”, “十男”); // エラー[/as3onfx4]  
同じ作業をするにも方法は違う。
 

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 である。
 

データの削除
[as3onfx4]var myArray6:Array = [“信康”, “秀康”, “秀忠”];
var myAC6:ArrayCollection = new ArrayCollection(myArray6);
myAC6.removeItemAt(1);[/as3onfx4]
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 変数として宣言できる。

これができるのは コレクションオブジェクトだけ
[as3onfx4][Bindable] // メタデータタグ
private myAC:ArrayCollection = new ArrayCollection(myArray);[/as3onfx4]

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

dataProvider

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

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





[/mxml]

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

合わせ味噌

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

test4.mxml
[mxml]











[/mxml]  

test4.as
[as3onfx4]import com.flexer.Debug;
import mx.collections.ArrayCollection;

private var myArray:Array = [
{col1:”長男”, col2:”信康”, uid:1},
{col1:”次男”, col2:”秀康”, uid:2},
{col1:”三男”, col2:”秀忠”, uid:3}
];

[Bindable] private var myAC:ArrayCollection = new ArrayCollection(myArray);

private function init():void {
myArrayTA.text = Debug.dump(myArray);
myArrayCollectionTA.text = Debug.dump(myAC);
}

private function itemEditHandler():void {
myArrayTA.text = Debug.dump(myArray);
myArrayCollectionTA.text = Debug.dump(myAC);
}

protected function myButton_clickHandler(event:MouseEvent):void
{
if (myDataGrid.selectedIndex >= 0) {
myAC.removeItemAt(myDataGrid.selectedIndex);
}

itemEditHandler();
}[/as3onfx4]

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

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment