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/
[as3]package com.flexer
 ↓ // 例の場合
package hoge.com.flexer[/as3]  

利用法
  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)を影武者として立てる。
[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

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 を設定しようとしたが

[as3onfx4]var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
mySkinnableContainer.layout = “HorizontalLayout”;[/as3onfx4] としたら

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

と怒られた。

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

というわけで
[as3onfx4]import spark.layouts.HorizontalLayout;

var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
mySkinnableContainer.layout = new HorizontalLayout();[/as3onfx4]

これで layout の設定に成功。

細かい設定もしたければ
[as3onfx4]import spark.layouts.HorizontalLayout;

var mySkinnableContainer:SkinnableContainer = new SkinnableContainer();
var myHorizontalLayout:HorizontalLayout= new HorizontalLayout();
myHorizontalLayout.columnWidth=”calculated”;
myHorizontalLayout.gap = 6;
myHorizontalLayout.paddingBottom = 0;
myHorizontalLayout.paddingLeft = 0;
myHorizontalLayout.paddingRight = 0;
myHorizontalLayout.paddingTop = 0;
myHorizontalLayout.requestedColumnCount = -1;
myHorizontalLayout.requestedMinColumnCount = -1;
myHorizontalLayout.variableColumnWidth = true;
myHorizontalLayout.verticalAlign = “top”;

mySkinnableContainer.layout = myHorizontalLayout;[/as3onfx4] ※コード内の値はデフォルト値

こんな感じかしら?

ううう、こんなときには 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 上で指さしカーソルを表示する方法
というのを発見した。

<引用コード>
[as3]var ta: TextArea = new TextArea();

ta.useHandCursor = true;
ta.buttonMode = true;
ta.mouseChildren = false;
ta.addEventListener(MouseEvent.CLICK, onClickEvt); [/as3]

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

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 メソッドは、様々なものにイベントを登録するもの。

[as3]public function addEventListener(
type:String,
listener:Function,
useCapture:Boolean = false,
priority:int = 0,
useWeakReference:Boolean = false
):void[/as3]

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

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

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

[as3]myLabel.addEventListener(MouseEvent.CLICK, onClickEvent(myLabel.text));

private function onClickEvent(myString:String):void {
Alert.show(myString);
}[/as3]  

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

例えばステージ上に LinkButton を3つ配置して、それぞれにリンク先を設定する場合。
[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.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) から)
が存在します。

こんなエラーが出た。

原因はこれだ。
[as3]import spark.components.*;
import mx.controls.*;[/as3]

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

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

解決法めっけ!

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

[as3onfx4]myLabel:mx.controls.Label = new mx.controls.Label();
yourLabel:spark.components.Label = new spark.components.Label();[/as3onfx4]
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