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 |

配列内の検索

Posted by muchag | PHP | 2010-08-04 (水) 1:16:18

配列内を検索する関数は複数ある。
array_search()array_keys()array_key_existsin_array()

array_search
  1. mixed array_search  (  mixed $needle  ,  array $haystack  [,  bool $strict  ] )

PHP マニュアル:array_search

needle が見つかった場合に配列のキー、 それ以外の場合に FALSE を返します。
もし haystack に 1 つ以上の needle に見つかった場合、 最初にマッチしたキーが返されます。

警告:この関数は論理値 FALSE を返す可能性がありますが、FALSE として評価される 0 や “” といった値を返す可能性もあります。
詳細については 論理値のセクションを参照してください。
この関数の返り値を調べるには === 演算子 を使用してください。

  1. $array = array(0 => 'blue', 1 => 'red', 2 => 'green', 3 => 'red');
  2.  
  3. $key = array_search('green', $array); // $key = 2;
  4. $key = array_search('red', $array);   // $key = 1;

 

array_keys
  1. array array_keys  (  array $input  [,  mixed $search_value  [,  bool $strict = false  ]] )

PHP マニュアル:array_keys

配列 input から全てのキー (数値および文字列) を返します。

オプション search_value が指定された場合、 指定した値に関するキーのみが返されます。
指定されない場合は、 input から全てのキーが返されます。

  1. $array = array(0 => 100, "color" => "red");
  2. print_r(array_keys($array));
  3.  
  4. // output
  5. Array
  6. (
  7.     [0] => 0
  8.     [1] => color
  9. )
  10.  
  11.  
  12. $array = array("blue", "red", "green", "blue", "blue");
  13. print_r(array_keys($array, "blue"));
  14.  
  15. // output
  16. Array
  17. (
  18.     [0] => 0
  19.     [1] => 3
  20.     [2] => 4
  21. )
  22.  
  23.  
  24. $array = array("color" => array("blue", "red", "green"),
  25.                "size"  => array("small", "medium", "large"));
  26. print_r(array_keys($array));
  27.  
  28. // output
  29. Array
  30. (
  31.     [0] => color
  32.     [1] => size
  33. )

 

array_key_exists
  1. bool array_key_exists  (  mixed $key  ,  array $search  )

PHP マニュアル:array_key_exists

成功した場合に TRUE を、失敗した場合に FALSE を返します。

5.3.0 この関数はオブジェクトに対しては使えなくなりました。オブジェクトについては property_exists() を使用します。

  1. $search_array = array('first' => null, 'second' => 4);
  2.  
  3. // false を返します
  4. isset($search_array['first']);
  5.  
  6. // true を返します
  7. array_key_exists('first', $search_array);

 

in_array
  1. bool in_array  (  mixed $needle  ,  array $haystack  [,  bool $strict  ] )

PHP マニュアル:in_array

配列で needle が見つかった場合に TRUE、それ以外の場合は、FALSE を返します。

PHP | 2010-08-04 (水) 1:16:18 |

初期化(インスタンス化)

Posted by muchag | ActionScript 3.0 | 2010-08-02 (月) 22:40:30

リファレンスで 初期化 と言っているのでそのままタイトルにしたが
要は インスタンス化

XML リテラルを割り当てる手法
ActionScript 3

  1. var myXML:XML =  
  2.     <item label="野球">
  3.         <item label="プロ">
  4.             <item label="パ・リーグ">
  5.                 <item label="南海ホークス"/>
  6.                 <item label="西鉄ライオンズ"/>
  7.             </item>
  8.         </item>
  9.         <item label="高校野球">
  10.             <item label="明訓"/>
  11.             <item label="弁慶"/>
  12.         </item>
  13.     </item>;

 

XML 文字列から生成する手法
ActionScript 3

  1. var myString:String =  
  2.     <item label="野球">
  3.         <item label="プロ">
  4.             <item label="パ・リーグ">
  5.                 <item label="南海ホークス"/>
  6.                 <item label="西鉄ライオンズ"/>
  7.             </item>
  8.         </item>
  9.         <item label="高校野球">
  10.             <item label="明訓"/>
  11.             <item label="弁慶"/>
  12.         </item>
  13.     </item>;
  14. var myXML:XML = new XML(myString);

 

変数から生成する手法

こんなこともできるんだねぇ。
ちょっと驚いた。 😆

ActionScript 3

  1. var tagname:String = "item";  
  2. var attributename:String = "id";  
  3. var attributevalue:String = "5";  
  4. var content:String = "Chicken";  
  5. var x:XML = <{tagname} {attributename}={attributevalue}>{content}</{tagname}>;  
  6. trace(x.toXMLString())
  7.  
  8. // Output: <item id="5">Chicken</item>

 

外部ファイルを読み込む手法

 
Flash 用 ActionScript 3.0 のプログラミング:XML 変数の初期化

ActionScript 3.0 | 2010-08-02 (月) 22:40:30 |

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 |