＜Text＞
mx.controls

　

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

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

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

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

[mxml][/mxml]

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

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

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

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

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

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

＜LinearGradient＞
mx.graphics

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

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







[/mxml]

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








[/mxml] 　

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

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

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

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＞
mx.graphics

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

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

＜Rect＞
spark.primitives

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

　

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

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

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

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

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

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

[mxml]

[/mxml]

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

ステート

normal、hovered（マウスオーバー時）、selected（クリック時） の３つのステートがある。
　

itemEditor

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

Tree コンポーネントの itemEditor は５つ（？）。
getChildAt(0)：インデント用の Rect
getChildAt(1)：disclosureIcon 用の Group
getChildAt(2)：disclosureIcon 用の BitmapImage
getChildAt(3)：icon 用の BitmapImage
getChildAt(4)：Label
上記５つのうち、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. ツリーに文字列以外のものを表示したい
これを参考にさせていただいた。
[mxml]



).node; ]]>

[/mxml]

TreeItemRenderer クラスを継承したクラスを新たに作成する。
[as3onfx4]package components
{
import mx.binding.utils.BindingUtils;
import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;

public class Hoge extends TreeItemRenderer
{
[Bindable] public var checkBox:CheckBox;

public function Hoge()
{
super();
}

override public function set data(value:Object):void {
super.data = value;
}

override protected function createChildren():void{
super.createChildren();

checkBox = new CheckBox();
checkBox.setStyle(“verticalAlign”,”middle”);
BindingUtils.bindSetter(setSelected, checkBox, ‘selected’);
this.addChild(checkBox);
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
var treeListData:TreeListData = TreeListData(super.listData);

super.updateDisplayList(unscaledWidth,unscaledHeight);

if(super.data)
{
if (data.@selected.toString() == ‘true’)
{
checkBox.selected = true;
}
else
{
checkBox.selected = false;
}

checkBox.x = super.label.x;
checkBox.y = ( unscaledHeight – checkBox.height ) /2;
label.x = checkBox.x + checkBox.width + 20;
}
}

private function setSelected(selected:Boolean):void
{
if (data)
{
data.@selected = selected.toString();
}
}
}
}[/as3onfx4]

別途、こんな例も見つけた。
FXUG：Re: Treeのアイコンを動的に変更したい
[as3onfx4] import flash.display.DisplayObject;

import mx.collections.*;
import mx.controls.Image;
import mx.controls.treeClasses.*;

public class TreeItemRendererEx extends TreeItemRenderer {
private var img:Image = new Image();

public function TreeItemRendererEx() {
super();
this.addChild(this.img as DisplayObject);
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);

if(data!=null) {
this.label.x += 5;
this.img.x = this.getChildAt(3).x;
this.img.y = this.getChildAt(3).y – 5;
this.img.width = 24;
this.img.height = 24;

this.img.source = data.iconPath;

this.getChildAt(3).visible = false;
}
}
}
[/as3onfx4] この方法だと、上記 MXML による itemRenderer の実装時に問題となった
全ノード異なるアイコンを表示する　という作業も上手くいった。

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

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

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

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

　
[as3onfx4]public function expandItem(
item:Object,
open:Boolean,
animate:Boolean = false,
dispatchEvent:Boolean = false,
cause:Event = null
):void[/as3onfx4]

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

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

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

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

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

[as3onfx4]var myXML:XML = new XML(event.result);
myTree.dataProvider = new XMLListCollection( new XMLList(myXML) );

myTree.validateNow();
treeFavorit.expandItem(myXML.children()[0], true, true);[/as3onfx4]

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

４行目に関しては

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

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

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

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

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

これを利用して以下のようにすることで、メインフォルダに関してだけは成功した。
[as3onfx4]var myXML:XML = new XML(event.result);
myTree.dataProvider = new XMLListCollection( new XMLList(myXML) );

myTree.validateNow();
var renderer:IListItemRenderer = myTree.indexToItemRenderer(0);
if (renderer)
{
var myXML:XML = renderer.data as XML;
myTree.expandItem(myXML, true);
}[/as3onfx4]

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

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

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

length プロパティは存在する。
[as3onfx4]XML.length[/as3onfx4] これは、当然の如く必ず 1 が戻り値。
なぜって？　XML オブジェクトとは、ルートが１つのものだから。
　

子供の数を知りたければ
[as3onfx4]XML.children().length()[/as3onfx4] このように children() と length() メソッド を用いる。

特定の子供の数を知りたければ
[as3onfx4]XML.child(“hoge”).length()[/as3onfx4] このように child() メソッド と length() メソッド を用いる。

また、child() メソッドにはワイルドカードが使えるようで
[as3onfx4]XML.child(“*”).length()[/as3onfx4] これで全ての子の数が拾えるようだ。
　

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

[as3onfx4]XMLList.length()[/as3onfx4] これは、XMLList のプロパティの数が戻り値。
　

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

意味不明・・・。
　

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

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

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

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

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

これはとても単純。
しかし、上記参考サイトにも載っているが、以下のようにするとエラーが出る。
[as3onfx4]var dragInitiatorData:Object = event.dragSource.dataForFormat(‘treeItems’);
Alert.show(dragInitiatorData.@label);[/as3onfx4]

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

そういうわけなので、下記のようにするのが正解。
[as3onfx4]var dragInitiatorData:Object = event.dragSource.dataForFormat(‘treeItems’);
Alert.show(dragInitiatorData[0].@label);[/as3onfx4]

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

これも 前回 同様、上記参考サイトのコードをそのままいただいた。
[as3onfx4]var tree:Tree = event.currentTarget as Tree;
var n:int = tree.calculateDropIndex(event);
var dropTargetRenderer:IListItemRenderer = tree.indexToItemRenderer(n);
if (dropTargetRenderer)
{
// ドロップ先のXML情報
var targetXML:XML = dropTargetRenderer.data as XML;
// ドロップ先の親のXML情報
var parentXML:XML = targetXML.parent();
// ドロップ先の親の子供情報
var childrenXMLList:XMLList = parentXML.children();
}[/as3onfx4]

　

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

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

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

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

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

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

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

ここに載っている mx_internal::_dropData というのを用いると
[as3onfx4]var dropTargetData:Object = tree.mx_internal::_dropData;
// ドロップ先の親のXML情報
var parentXML:XML = dropTargetData.parent as XML;[/as3onfx4] パターン１では root を親とし
パターン２では Folder 2 を親としてくれた。

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

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

ということらしい。

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

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

また、こちらのサイトの他、あちこちのサイトに書いてある
[as3onfx4]import mx.core.mx_internal;
use namespace mx_internal;[/as3onfx4] こちらの２行は、私の環境では書かなくても利用可能であった。

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

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

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

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

個々に設定

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

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

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

上記のように、目的別にイベントを設定し、
そのイベント内容を関数にすることで、目的の処理をする。
[as3onfx4]import mx.controls.listClasses.IListItemRenderer;
import mx.events.DragEvent;

import net.lifebird.ui.cursor.*;
import net.lifebird.ui.cursor.plugins.*;

// D&D 処理が完全に終了した時点
private function myTree_dragCompleteHandler(event:DragEvent):void
{
Cursors.cursor(CursorType.DEFAULT);
}

// ドロップした時点
private function myTree_dragDropHandler(event:DragEvent):void
{
Cursors.cursor(CursorType.DEFAULT);

if (!isDropEnabled(event))
event.preventDefault();
}

// Tree コンポーネントより外へマウスが出た時点
private function myTree_dragExitHandler(event:DragEvent):void
{
Cursors.cursor(CursorType.REJECT);
}

// Tree コンポーネント内でドラッグされている間
private function myTree_dragOverHandler(event:DragEvent):void
{
if (!isDropEnabled(event)) {
var tree:Tree = event.currentTarget as Tree;
tree.hideDropFeedback(event);
event.preventDefault();
Cursors.cursor(CursorType.REJECT);
}
else {
Cursors.cursor(CursorType.DEFAULT);
}
}

// ドラッグ開始時点
private function myTree_dragStartHandler(event:DragEvent):void
{
if (!isDragEnabled(event))
event.preventDefault();

Cursors.cursor(CursorType.DEFAULT);
}

// マウスカーソルが乗ったアイテムのドラッグ可否関数
private function isDragEnabled(event:DragEvent):Boolean
{
var tree:Tree = event.currentTarget as Tree;
var n:int = tree.calculateDropIndex(event);
var renderer:IListItemRenderer = tree.indexToItemRenderer(n);
if (renderer)
{
var xml:XML = renderer.data as XML;
if (xml.@acceptDrag == “false”)
return false;
}
return true;
}

// マウスカーソルが乗ったアイテムのドロップ可否関数
private function isDropEnabled(event:DragEvent):Boolean
{
var tree:Tree = event.currentTarget as Tree;
var n:int = tree.calculateDropIndex(event);
var renderer:IListItemRenderer = tree.indexToItemRenderer(n);
if (renderer)
{
var xml:XML = renderer.data as XML;
if (xml.@acceptDrop == “false”)
return false;
}
return true;
}[/as3onfx4]

This movie requires Flash Player 9.0.0

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

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 。

フォルダ構成。

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

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

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

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

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

警告が出るので対処。

[as3onfx4 num=46]import mx.styles.StyleManager;[/as3onfx4] [as3onfx4 num=813]var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“DragManager”);[/as3onfx4] ↓
[as3onfx4 num=46]import mx.styles.StyleManager;
import mx.styles.IStyleManager2; // 追加[/as3onfx4] [as3onfx4 num=813]var manager:IStyleManager2 = StyleManager.getStyleManager(null);
var styleSheet:CSSStyleDeclaration = manager.getStyleDeclaration(“DragManager”);[/as3onfx4]

＜参考サイト＞
ActionScript入門Wiki@rsakane：スタイルをCSSではなく、AS3側から記述する(StyleManager)
　
また、いくつかのサイトに載っていた事例で、以下のようにしても対応できるらしい。
[as3onfx4]var styleSheet:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration(“DragManager”);[/as3onfx4] 　

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

問題箇所は正に警告のあった行だった。
[as3onfx4]// オリジナル
var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“DragManager”);

// 改変１
var styleSheet:CSSStyleDeclaration = manager.getStyleDeclaration(“DragManager”);

// 改変２
var styleSheet:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration(“DragManager”);[/as3onfx4]

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

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

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

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