Rect クラスは以下の通り、矩形を描画する塗りつぶしグラフィックエレメント。
背景色をつけたいとき、グラデーションにしたいときもこれを用いる。
＜Rect＞
spark.primitivesRect クラスは矩形を描画する塗りつぶしグラフィックエレメントです。
矩形の角は丸くすることができます。
drawElementent() メソッドは Graphics.drawRect() および Graphics.drawRoundRect() メソッドを呼び出します。
Tree コンポーネントの各ノードの外観や昨日を変更するには
Tree コンポーネントの itemRenderer プロパティを用いる。
itemRenderer は、Tree コンポーネントの全体ではなく
ノード１つ分、つまり１行分を設定するようなシステムである。
この、ノード１つ分を決めてやることで、各ノードにその設定が反映され
独自の Tree コンポーネントが出来上がる。
MXML エディタに上記のように打ち込むと、itemRenderer の作成サポートが表示される。
これを選択すると左のようなダイアログが表示される。
パッケージ は、参照からフォルダを辿ってもよいし、
自ら入力すればフォルダが存在しない場合はフォルダを自動生成してくれる。
終了 をクリックすれば、以下のような MXML ファイルが自動生成される。
これを見るとデフォルトの itemRenderer が分かる。
normal、hovered（マウスオーバー時）、selected（クリック時） の３つのステートがある。
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}'”
こんな風にしてみても反映されなかった。
アシアルブログ：【Flex3】「Flex3の、こんなときどうするの？？」
ここの６番。 6. ツリーに文字列以外のものを表示したい
これを参考にさせていただいた。
[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 の方法しかわからない。
しかも、場所を自由に選ぶ方法がわからない。
詳細は、以下の 特定のノードの開閉 を参照。
今のところ、起動時に固定フォルダを開く方法しか試していない。
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 プロパティは 存在しない ようだ。
[読み取り専用] このビュー内のアイテムの数です。
意味不明・・・。
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 だけなら簡単だ。
dragMoveEnabled プロパティに関しては、Tree コンポーネントの場合はデフォルトで true なので、
設定の必要はない。
ところが、１つの Tree コンポーネントの中で、
ドラッグ禁止やらドロップ禁止を個々に設けたい場合がある。
その際は、Tree コンポーネントのイベントを利用する。
Flash Builder -> Tree with Spring Loaded Folders
で、よいサンプルを見つけたものの、Flex 2 用で上手く動かなかったので
これを見つつ、以下を大いに参考にして、カーソル変更も付加した結果がこれだ。
FXUG：Re: Treeのアイテム移動の制御
[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]
カーソルの変更については以下を参照。
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]
警告が出るので対処。
＜参考サイト＞
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 になってしまうのだ。
どうやら、私の力量ではコンバートは難しい。
２日程、悩み、弄り、眠り・・・を繰り返したが、解決法が浮かばない。
残念。。。 😯
toolTip プロパティとは、コンポーネントにマウスオーバーしたときに表示されるヒントのこと。
HTML でいうところの title プロパティ。
ツールヒントを作成するときにコンポーネントによって送出されます。
コンポーネントのツールヒントが非表示にされており、まもなく破棄されるときに、コンポーネントによって送出されます。
コンポーネントのツールヒントが非表示にされる前に、コンポーネントによって送出されます。
コンポーネントのツールヒントが表示される前に、コンポーネントによって送出されます。
コンポーネントのツールヒントが表示された後に、コンポーネントによって送出されます。
toolTip プロパティが設定されているコンポーネント上にユーザーがマウスを移動すると同時に、そのコンポーネントによって送出されます。
Adobe® Flex® 4.1 リファレンスガイド：UIComponent
フライヤーを製作しなくてはならなくなったことがあり
それが Illustrator との出会いだった。
デザイン能力に全くといっていいほど欠けている私だが
触ってみるとこれが楽しい楽しい。 😎
それ以来、何かにつけて Illustrator のお世話になってきた。
しかしながら、プロの方々のような作品は、いつまで経っても作れない・・・。
牛歩の如く頑張るしかない！
丸っきりの書きかけ項目は Not found になる。
デザインが苦手な私にはかな～り難しいアプリだけど
あれこれ例を見るととっても素敵なものばかりなので
少しずつでも挑戦していきたい。
Fight～！ 私！
丸っきりの書きかけ項目は Not found になる。
その他各参考サイトについては、各エントリーにて。