Flash Builder 4 -> Text

Posted by muchag | Flash Builder 4 | 2010-08-27 (金) 0:08:22

<Text>
mx.controls

 

改行

Text コンポーネント内で改行を実現するには
改行したい場所に {‘\n’} と入力。

Flash Builder 4 | 2010-08-27 (金) 0:08:22 |

Flash Builder 4 -> Spark コンポーネントで背景画像

Posted by muchag | Flash Builder 4 | 2010-08-26 (木) 16:42:12

まだまだ研究不足なので何とも言えないが
どうやら Spark コンポーネントで背景画像を設定できるコンテナは
BorderContainer コンポーネントだけのようだ。

Adobe® Flex® 4.1 リファレンスガイド:BorderContainer

MX コンポーネントであれば Canvas だの VBox だの HBox だの
それぞれに backguroundImage プロパティがあり、背景画像を設定できるようなのだが
Spark コンポーネントでは backgroundImage プロパティを持つコンテナは BorderContainer しか見当たらない。

[mxml][/mxml]

Flash Builder 4 | 2010-08-26 (木) 16:42:12 |

Flash Builder 4 -> Rect -> グラデーション

Posted by muchag | Flash Builder 4 | 2010-08-26 (木) 16:10:23

Rect クラスを用いてグラデーションを付けたいときは
LinearGradient クラスあるいは RadialGradient クラスを用いる。

<参考元>
Shigeru Nakagaki:Flex 4 : グラデーションが MXML だけで描ける

ちょっと困ったというか戸惑ったのは、参考サイトでは
[mxml]
とか
[/mxml]
としてあるが、Adobe® Flex® 4.1 リファレンスガイド を見る限りでは
LinearGradient あるいは RadialGradient は mx.graphics となっており
サンプルも
[mxml]
とか
[/mxml]
となっている。

リファレンスの記載ミスかしら・・・。

いずれにせよ Rect クラスの fiil プロパティで囲んでやるようだ。
 

LinearGradient

LinearGradient クラスは 線形グラデーション を実現するためもの。

<LinearGradient>
mx.graphics

LinearGradient クラスを使用すると、グラフィックエレメントの塗りを指定できます。
グラデーションでは塗りのカラーにおける段階的なカラー変化が指定されます。
一連の GradientEntry オブジェクトを LinearGradient オブジェクトの entries 配列に追加して、
グラデーションの塗りを構成するカラーを定義します。

リファレンスのサンプルはこれ。
[mxml]







[/mxml]

参考サイトのサンプルはこれ。
[mxml]








[/mxml]
 

rotation

rotation プロパティにて、線形グラデーションの方向を設定できる。
[mxml][/mxml]
ratio プロパティの詳細は以下。
 

GradientEntry

GradientEntry クラスにて
透明度:alpha
色:color
位置:ratio
を設定できる。

Adobe® Flex® 4.1 リファレンスガイド:GradientEntry

ratio

LinearGradient クラスのグラデーションは 水平方向 左から右 へ設定される。
ratio プロパティを設定することで各位置での基準色を設定できる。
0 が最左。 1 が最右。
0.xx と指定することで途中にも基準色を設定できる。

残りの部分は自動計算にて配色される。

LinearGradient クラスの rotation プロパティと組み合わせることで以下のようになる。
デフォルト
左が ratio=”0″ で、右が ratio=”1″

rotation=”90″
が ratio=”0″ で、下が ratio=”1″

rotation=”180″
右が ratio=”0″ で、左が ratio=”1″

rotation=”-90″
下が ratio=”0″ で、上が ratio=”1″
 

RadialGradient

RadialGradient クラスは 円形グラデーション を実現するためのもの。

<RadialGradient>
mx.graphics

RadialGradient クラスにより、塗りのカラーにおいて段階的なカラー変化を指定できます。
放射状グラデーションは、グラフィックエレメントの中心から放射状に広がる塗りパターンを定義します。
一連の GradientEntry オブジェクトを RadialGradient オブジェクトの entries 配列に追加して、
グラデーションの塗りを構成するカラーを定義します。

Flash Builder 4 | 2010-08-26 (木) 16:10:23 |

Flash Builder 4 -> Rect

Posted by muchag | Flash Builder 4 | 2010-08-26 (木) 15:13:42

Rect クラスは以下の通り、矩形を描画する塗りつぶしグラフィックエレメント。
背景色をつけたいとき、グラデーションにしたいときもこれを用いる。

<Rect>
spark.primitives

Rect クラスは矩形を描画する塗りつぶしグラフィックエレメントです。
矩形の角は丸くすることができます。
drawElementent() メソッドは Graphics.drawRect() および Graphics.drawRoundRect() メソッドを呼び出します。

 

Flash Builder 4 | 2010-08-26 (木) 15:13:42 |

Flash Builder -> Tree -> itemRenderer の変更

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-08-02 (月) 22:16:53

Tree コンポーネントの各ノードの外観や昨日を変更するには
Tree コンポーネントの itemRenderer プロパティを用いる。

itemRenderer

itemRenderer は、Tree コンポーネントの全体ではなく
ノード1つ分、つまり1行分を設定するようなシステムである。

この、ノード1つ分を決めてやることで、各ノードにその設定が反映され
独自の Tree コンポーネントが出来上がる。
 

itemRenderer の作成
MXML で作成する手法


MXML エディタに上記のように打ち込むと、itemRenderer の作成サポートが表示される。
 
これを選択すると左のようなダイアログが表示される。

パッケージ は、参照からフォルダを辿ってもよいし、
自ら入力すればフォルダが存在しない場合はフォルダを自動生成してくれる。

終了 をクリックすれば、以下のような MXML ファイルが自動生成される。

プロジェクトフォルダ/src/hoge/moge/testRenderer.mxml

[mxml]


















[/mxml]

これを見るとデフォルトの itemRenderer が分かる。

ステート

normal、hovered(マウスオーバー時)、selected(クリック時) の3つのステートがある。
 

itemEditor

itemRenderer に搭載される各コンポーネントのことを itemEditor という。

Tree コンポーネントの itemEditor は5つ(?)。
getChildAt(0):インデント用の Rect
getChildAt(1):disclosureIcon 用の Group
getChildAt(2):disclosureIcon 用の BitmapImage
getChildAt(3):icon 用の BitmapImage
getChildAt(4):Label
上記5つのうち、3 の icon 用の BitmapImage 以外は、確かめていないので怪しい。

いずれにせよ、ここに CheckBox なり RadioButton なり配置すれば、表示することができる。

データバインディング
また、バインドされているデータのところを見ると {treeListData.indent} のようになっている。

ここから見て、indent, icon, label は予め設定してあるようでこのまま使えるようだ。
Tree コンポーネントの iconField プロパティや lableField プロパティに XML データの属性を設定した結果、そのまま使えた。

しかしそれ以外の属性データを使いたい場合は
{treeListData.@hoge} ではなく {data.@hoge} としてやることで読み込んでくれた。

課題
ただ、残念ながら icon は上手くいかなかった。
固定アイコンは問題なかったのだが、@icon 属性に表示したい icon へのパスをセットし
source=”{treeListData.disclosureIcon}”

source=”@Embed source='{treeListData.disclosureIcon}'”
こんな風にしてみても反映されなかった。
 

AS で作成する手法

アシアルブログ:【Flex3】「Flex3の、こんなときどうするの??」
ここの6番。 6. ツリーに文字列以外のものを表示したい
これを参考にさせていただいた。
[mxml]



).node; ]]>

[/mxml]

TreeItemRenderer クラスを継承したクラスを新たに作成する。

Actionscript 3.0 on Flex 4

  1. package components
  2. {
  3.     import mx.binding.utils.BindingUtils;
  4.     import mx.controls.CheckBox;
  5.     import mx.controls.treeClasses.TreeItemRenderer;
  6.     import mx.controls.treeClasses.TreeListData;
  7.  
  8.     public class Hoge extends TreeItemRenderer
  9.     {
  10.         [Bindable]
  11.         public var checkBox:CheckBox;
  12.  
  13.         public function Hoge()
  14.         {
  15.             super();
  16.         }
  17.  
  18.         override public function set data(value:Object):void {
  19.             super.data = value;
  20.         }
  21.  
  22.         override protected function createChildren():void{
  23.             super.createChildren();
  24.  
  25.             checkBox = new CheckBox();
  26.             checkBox.setStyle("verticalAlign","middle");
  27.             BindingUtils.bindSetter(setSelected, checkBox, 'selected');
  28.             this.addChild(checkBox);
  29.         }
  30.  
  31.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {    
  32.             var treeListData:TreeListData = TreeListData(super.listData);
  33.  
  34.             super.updateDisplayList(unscaledWidth,unscaledHeight);
  35.  
  36.             if(super.data)
  37.             {
  38.                 if (data.@selected.toString() == 'true')
  39.                 {
  40.                     checkBox.selected = true;
  41.                 }
  42.                 else
  43.                 {
  44.                     checkBox.selected = false;
  45.                 }
  46.  
  47.                 checkBox.x = super.label.x;
  48.                 checkBox.y = ( unscaledHeight - checkBox.height ) /2;
  49.                 label.x = checkBox.x + checkBox.width + 20;
  50.             }
  51.         }
  52.  
  53.         private function setSelected(selected:Boolean):void
  54.         {
  55.             if (data)
  56.             {
  57.                 data.@selected = selected.toString();
  58.             }
  59.         }
  60.     }
  61. }

別途、こんな例も見つけた。
FXUG:Re: Treeのアイコンを動的に変更したい

Actionscript 3.0 on Flex 4

  1. import flash.display.DisplayObject;
  2.    
  3.     import mx.collections.*;
  4.     import mx.controls.Image;
  5.     import mx.controls.treeClasses.*;
  6.  
  7.     public class TreeItemRendererEx extends TreeItemRenderer {
  8.         private var img:Image = new Image();
  9.  
  10.         public function TreeItemRendererEx() {
  11.             super();
  12.             this.addChild(this.img as DisplayObject);
  13.         }
  14.  
  15.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  16.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  17.  
  18.             if(data!=null) {
  19.                 this.label.x += 5;
  20.                 this.img.x = this.getChildAt(3).x;
  21.                 this.img.y = this.getChildAt(3).y - 5;
  22.                 this.img.width = 24;
  23.                 this.img.height = 24;
  24.  
  25.                 this.img.source = data.iconPath;
  26.  
  27.                 this.getChildAt(3).visible = false;
  28.             }
  29.         }
  30.     }

この方法だと、上記 MXML による itemRenderer の実装時に問題となった
全ノード異なるアイコンを表示する という作業も上手くいった。

しかしこちらの方法だと Label を二段にする という作業は上手くできなかった。

ActionScript 3.0,Flash Builder 4 | 2010-08-02 (月) 22:16:53 |

Flash Builder -> Tree -> ノードの開閉

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 21:59:23

Tree コンポーネントの各ノードの開閉を制御したい。

expandItem() メソッドを用いることで実現できる。

開く場合は、第2引数を true に、閉じる場合は、第2引数を false に。

 

Actionscript 3.0 on Flex 4

  1. public function expandItem(
  2.     item:Object,
  3.     open:Boolean,
  4.     animate:Boolean = false,
  5.     dispatchEvent:Boolean = false,
  6.     cause:Event = null
  7. ):void

Adobe® Flex® 4.1 リファレンスガイド:Tree expandItem() メソッド
 

item

今のところ、XMLListCollection の方法しかわからない。

しかも、場所を自由に選ぶ方法がわからない。

詳細は、以下の 特定のノードの開閉 を参照。
 

特定のノードの開閉

今のところ、起動時に固定フォルダを開く方法しか試していない。
 

XML オブジェクトを辿る手法
Actionscript 3.0 on Flex 4

  1. var myXML:XML = new XML(event.result);
  2. myTree.dataProvider = new XMLListCollection( new XMLList(myXML) );
  3.  
  4. myTree.validateNow();
  5. treeFavorit.expandItem(myXML.children()[0], true, true);

これはルートを表示しない方式の Tree で、1番目のフォルダをデフォルトで開いた状態にしている。

4行目に関しては

dataProvider を設定し、その直後に expandItem() を呼び出した場合は、不適切な動作が起こる可能性があります。
コンポーネントが検証されるまで待つか、validateNow() を呼び出します。

リファレンスのこの指示に従ったまでである。
 

XML オブジェクトをインデックスで拾う手法

Tree コンポーネントには、indexToItemRenderer() メソッドというものがあり
インデックスから当該アイテムレンダラを取得できる。

ただこのインデックスは曲者で、現在の状態で上から何番目 というものらしく
ノードの開閉状態によって コロコロ変化する ようだ。

さりながら、メインフォルダであればルートを表示していれば 1 。
ルートを表示してなければ 0 になる。

これを利用して以下のようにすることで、メインフォルダに関してだけは成功した。

Actionscript 3.0 on Flex 4

  1. var myXML:XML = new XML(event.result);
  2. myTree.dataProvider = new XMLListCollection( new XMLList(myXML) );
  3.  
  4. myTree.validateNow();
  5. var renderer:IListItemRenderer = myTree.indexToItemRenderer(0);
  6. if (renderer)
  7. {
  8.     var myXML:XML = renderer.data as XML;
  9.     myTree.expandItem(myXML, true);
  10. }
ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 21:59:23 |

Flash Builder -> XML 系の比較

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 18:34:04

Flash Builder 4 -> コレクションオブジェクト
ここでも触れたが、FB4 には XML 系オブジェクトとして3種類存在する。
XML オブジェクト、XMLList オブジェクト、XMLListCollection オブジェクト

それぞれの意義自体もまだよく分かってないが
それに纏わるプロパティ、メソッドとなると尚更だ。

そこで、気が付く毎に何となく列挙していくことにした。

length 系
XML
length プロパティ

length プロパティは存在する。

Actionscript 3.0 on Flex 4

  1. XML.length

これは、当然の如く必ず 1 が戻り値。
なぜって? XML オブジェクトとは、ルートが1つのものだから。
 

length() メソッド

子供の数を知りたければ

Actionscript 3.0 on Flex 4

  1. XML.children().length()

このように children()length() メソッド を用いる。

特定の子供の数を知りたければ

Actionscript 3.0 on Flex 4

  1. XML.child("hoge").length()

このように child() メソッドlength() メソッド を用いる。

また、child() メソッドにはワイルドカードが使えるようで

Actionscript 3.0 on Flex 4

  1. XML.child("*").length()

これで全ての子の数が拾えるようだ。
 

XMLList
length プロパティ

XMLList オブジェクトには、length プロパティは 存在しない ようだ。
 

length() メソッド
Actionscript 3.0 on Flex 4

  1. XMLList.length()

これは、XMLList のプロパティの数が戻り値。
 

XMLListCollection
length プロパティ

[読み取り専用] このビュー内のアイテムの数です。

意味不明・・・。
 

length() メソッド

XMLListCollection オブジェクトには、length() メソッドは 存在しない ようだ。
 
 
実際に動かしてみないとよくわからないね。
暇を見てチャレンジしてみることにしよう。
 
Adobe® Flex® 4.1 リファレンスガイド
XMLXMLListXMLListCollection

Flash 用 ActionScript 3.0 のプログラミング:XML の操作

ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 18:34:04 |

Flash Builder -> Tree -> Drag & Drop 情報取得

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 2:19:59

D&D によって変更されたフォルダ構成を DB へ反映させるためには
ドラッグしたアイテムとドロップ先アイテムの情報を取得しなければならない。

幸い、よい参考サイトが見つかった。
FXUG:ドラッグ&ドロップ(treeからpanel)
Re: Treeのアイテム移動の制御

元データの取得

まずはドラッグしているアイテム(ノード)の情報について。

これはとても単純。
しかし、上記参考サイトにも載っているが、以下のようにするとエラーが出る。

Actionscript 3.0 on Flex 4

  1. var dragInitiatorData:Object = event.dragSource.dataForFormat('treeItems');
  2. Alert.show(dragInitiatorData.@label);
ReferenceError: Error #1081: Array にプロパティ @label が見つからず、デフォルト値もありません。

これは、変数 data が単純な Object 型 だと思っていたら Array 型 だったという罠。

そういうわけなので、下記のようにするのが正解。

Actionscript 3.0 on Flex 4

  1. var dragInitiatorData:Object = event.dragSource.dataForFormat('treeItems');
  2. Alert.show(dragInitiatorData[0].@label);

また、これも上記サイトに書いてあるが、複数行選択を許可した場合はまだ工夫が必要なようだ。
 

先データの取得

これも 前回 同様、上記参考サイトのコードをそのままいただいた。

Actionscript 3.0 on Flex 4

  1. var tree:Tree = event.currentTarget as Tree;
  2. var n:int = tree.calculateDropIndex(event);
  3. var dropTargetRenderer:IListItemRenderer = tree.indexToItemRenderer(n);
  4. if (dropTargetRenderer)
  5. {
  6.     // ドロップ先のXML情報
  7.     var targetXML:XML = dropTargetRenderer.data as XML;
  8.     // ドロップ先の親のXML情報
  9.     var parentXML:XML = targetXML.parent();
  10.     // ドロップ先の親の子供情報
  11.     var childrenXMLList:XMLList = parentXML.children();
  12. }


 

calculateDropIndex の曖昧さ

ところが、この方法だと、私がやりたいことの場合は曖昧であることがわかった。


このような Tree コンポーネントがあるとする。

Folder 3 を Folder 12 と Folder 2 の間に入れる場合は、以下の2パターン存在する。
傍線の長さに注目。

そして、それぞれの結果はこうなる。

この場合、上記の手法、即ち calculateDropIndex を利用する手法だと、
共に 3 を得ることになる。

calculateDropIndex とは、現時点で開いている、
つまり 見えている状態で上から何番目 という判断をするらしく
全体の中での 正確な情報ではない 上に、パターン1とパターン2の 区別がつかない

mx_internal::_dropData

そこで他を当たっていたら以下を見つけた。
FXUG:DataGridからTreeへのドラッグアンドドロップ時のドロップ先情報について

ここに載っている mx_internal::_dropData というのを用いると

Actionscript 3.0 on Flex 4

  1. var dropTargetData:Object = tree.mx_internal::_dropData;
  2. // ドロップ先の親のXML情報
  3. var parentXML:XML = dropTargetData.parent as XML;

パターン1では root を親とし
パターン2では Folder 2 を親としてくれた。

ホッとしながらも、mx_internal についてグーグル先生に聞いてみると
DROP.FACTORY:[@Flex]プロパティやメソッドの可視性

「mx_internal」は過去の遺物らしいです。
使用には十分注意しましょう、とゆーことか。

ということらしい。

確かに Adobe® Flex® 4.1 リファレンスガイド の索引には見当たらない・・・。

ん~、それでは正しい情報はどこからもらえるんだろう・・・。

また、こちらのサイトの他、あちこちのサイトに書いてある

Actionscript 3.0 on Flex 4

  1. import mx.core.mx_internal;
  2. use namespace mx_internal;

こちらの2行は、私の環境では書かなくても利用可能であった。

ActionScript 3.0,Flash Builder 4 | 2010-07-31 (土) 2:19:59 |

Flash Builder -> Tree -> Drag & Drop 個々に設定

Posted by muchag | ActionScript 3.0,Flash Builder 4 | 2010-07-29 (木) 1:25:50

Tree コンポーネントを触っていて
Windows エクスプローラ ライクに D&D をしたくなる。

Tree コンポーネントの場合、D&D だけなら簡単だ。

D&D の実装

[mxml][/mxml]
上記の如く、dragEnableddropEnabled プロパティを true に設定すればいい。

dragMoveEnabled プロパティに関しては、Tree コンポーネントの場合はデフォルトで true なので、
設定の必要はない。
 

個々に設定

ところが、1つの Tree コンポーネントの中で、
ドラッグ禁止やらドロップ禁止を個々に設けたい場合がある。

その際は、Tree コンポーネントのイベントを利用する。

Flash Builder -> Tree with Spring Loaded Folders
で、よいサンプルを見つけたものの、Flex 2 用で上手く動かなかったので
これを見つつ、以下を大いに参考にして、カーソル変更も付加した結果がこれだ。
FXUG:Re: Treeのアイテム移動の制御
[mxml][/mxml]

上記のように、目的別にイベントを設定し、
そのイベント内容を関数にすることで、目的の処理をする。

Actionscript 3.0 on Flex 4

  1. import mx.controls.listClasses.IListItemRenderer;
  2. import mx.events.DragEvent;
  3.  
  4. import net.lifebird.ui.cursor.*;
  5. import net.lifebird.ui.cursor.plugins.*;
  6.  
  7. // D&D 処理が完全に終了した時点
  8. private function myTree_dragCompleteHandler(event:DragEvent):void
  9. {
  10.     Cursors.cursor(CursorType.DEFAULT);
  11. }
  12.  
  13. // ドロップした時点
  14. private function myTree_dragDropHandler(event:DragEvent):void
  15. {
  16.     Cursors.cursor(CursorType.DEFAULT);
  17.  
  18.     if (!isDropEnabled(event))
  19.         event.preventDefault();
  20. }
  21.  
  22. // Tree コンポーネントより外へマウスが出た時点
  23. private function myTree_dragExitHandler(event:DragEvent):void
  24. {
  25.     Cursors.cursor(CursorType.REJECT);
  26. }
  27.  
  28. // Tree コンポーネント内でドラッグされている間
  29. private function myTree_dragOverHandler(event:DragEvent):void
  30. {
  31.     if (!isDropEnabled(event)) {
  32.         var tree:Tree = event.currentTarget as Tree;
  33.         tree.hideDropFeedback(event);
  34.         event.preventDefault();
  35.         Cursors.cursor(CursorType.REJECT);
  36.     }
  37.     else {
  38.         Cursors.cursor(CursorType.DEFAULT);
  39.     }
  40. }
  41.  
  42. // ドラッグ開始時点
  43. private function myTree_dragStartHandler(event:DragEvent):void
  44. {
  45.     if (!isDragEnabled(event))
  46.         event.preventDefault();
  47.    
  48.     Cursors.cursor(CursorType.DEFAULT);
  49. }
  50.  
  51. // マウスカーソルが乗ったアイテムのドラッグ可否関数
  52. private function isDragEnabled(event:DragEvent):Boolean
  53. {
  54.     var tree:Tree = event.currentTarget as Tree;
  55.     var n:int = tree.calculateDropIndex(event);
  56.     var renderer:IListItemRenderer = tree.indexToItemRenderer(n);
  57.     if (renderer)
  58.     {
  59.         var xml:XML = renderer.data as XML;
  60.         if (xml.@acceptDrag == "false")
  61.             return false;
  62.     }
  63.     return true;
  64. }
  65.  
  66. // マウスカーソルが乗ったアイテムのドロップ可否関数
  67. private function isDropEnabled(event:DragEvent):Boolean
  68. {
  69.     var tree:Tree = event.currentTarget as Tree;
  70.     var n:int = tree.calculateDropIndex(event);
  71.     var renderer:IListItemRenderer = tree.indexToItemRenderer(n);
  72.     if (renderer)
  73.     {
  74.         var xml:XML = renderer.data as XML;
  75.         if (xml.@acceptDrop == "false")
  76.             return false;
  77.     }
  78.     return true;
  79. }

This movie requires Flash Player 9.0.0

カーソルの変更については以下を参照。
Flash Builder 4 -> net.lifebird.ui.cursor

ActionScript 3.0,Flash Builder 4 | 2010-07-29 (木) 1:25:50 |

Flash Builder -> Tree with Spring Loaded Folders

Posted by muchag | Flash Builder 4 | 2010-07-26 (月) 17:43:07

Tree コンポーネントを触っていて
Windows エクスプローラ ライクに D&D をしたくなる。

そこでグーグル先生の力を借りて手法を探していたら
素敵なカスタムコンポーネントを見つけたのでいただいてきた。 🙂
Flexible Experiments:Flex 2.0.1 Tree with Spring Loaded Folders (Update 2)

Flex 2.0.1 用、February 26th, 2007 の記事ということで、FB4 でちゃんと動作するか不安だが
先ずは試してみることにした。

DL & インストール

上記サイトから DL 。

フォルダ構成。

com
┣DelayedTimer.as
┣ListItemGroupedDragProxy.as
┗SpringLoadedTree.as
Sample.mxml
sampleData.xml

この内の as ファイル3点を

プロジェクトフォルダ/src/com/springLoadedFolders

を新たに作成してその中へ入れる。

上記 as ファイル3点のパッケージ名をフォルダ構成に合わせて変更。

メインファイルの Application タグに以下を記述。
[mxml]xmlns:Extended=”com.sprintLoadedFolders.*”[/mxml]

警告が出るので対処。

3608: “getStyleDeclaration” は 4.0 以降推奨されていません。”IStyleManager2.getStyleDeclaration on a style manager instance” を使用してください。 Flex の問題
Actionscript 3.0 on Flex 4

  1. import mx.styles.StyleManager;
Actionscript 3.0 on Flex 4

  1. var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");

Actionscript 3.0 on Flex 4

  1. import mx.styles.StyleManager;
  2. import mx.styles.IStyleManager2; // 追加
Actionscript 3.0 on Flex 4

  1. var manager:IStyleManager2 = StyleManager.getStyleManager(null);
  2. var styleSheet:CSSStyleDeclaration = manager.getStyleDeclaration("DragManager");

<参考サイト>
ActionScript入門Wiki@rsakane:スタイルをCSSではなく、AS3側から記述する(StyleManager)
 
また、いくつかのサイトに載っていた事例で、以下のようにしても対応できるらしい。

Actionscript 3.0 on Flex 4

  1. var styleSheet:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("DragManager");

 

エラー
TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。

前述の如く改変した上で動かしてみたが、上記のようなエラーが出た。

問題箇所は正に警告のあった行だった。

Actionscript 3.0 on Flex 4

  1. // オリジナル
  2. var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
  3.  
  4. // 改変1
  5. var styleSheet:CSSStyleDeclaration = manager.getStyleDeclaration("DragManager");
  6.  
  7. // 改変2
  8. var styleSheet:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("DragManager");

以上のどれで試しても同じエラーが出る。

あれこれ弄ってみた結果、Tree コンポーネント外へマウスを移動する分には問題ないのだが
Tree コンポーネント上でマウスを移動すると、上記コードの変数 styleSheet が null になってしまうのだ。
 

結論

どうやら、私の力量ではコンバートは難しい。

2日程、悩み、弄り、眠り・・・を繰り返したが、解決法が浮かばない。
残念。。。 😯

Flash Builder 4 | 2010-07-26 (月) 17:43:07 |
次ページへ »