記述方法

記述方法は、通常の背景の指定と変わりません。
ちがうのは、カンマ区切りで最高4つまで背景をしてできるというところ。

background:
    url(path.hoge.gif) transparent no-repeat 0 0,
    url(path.hoge.jpg) transparent no-repeat left bottom;

先に指定した背景の方が上にきます。
また、背景のグラデーションと一緒に指定することもできました。
背景のグラデーション指定方法は先日の記事をどうぞ。

background-image:
    url(path.hoge.gif),
    -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
background-image:
    url(path.hoge.gif),
    -moz-linear-gradient(top, #000000, #ffffff);

グラデーションと一緒に指定するときは、background-imageで指定したほうがよさそうです。
グラデーションと背景画像、あとは角丸をつかえば色々なものがCSSだけで作れそうですね。

あ、それから背景の複数指定は

[Multiple background image]

というんだそうです。
これでググるとたくさんでてきますので、詳しくはそちらをどうぞ。

主な対応ブラウザ

• Google Chrome
• Fire Fox 3.6～
• Opera 10.5～

サンプルコード

CSS3 / background:複数

サンプルコードでは、3つの背景画像の上に、
網目の画像をリピートさせています。

参考サイト

SafariのCSS 3対応–1つの要素に複数の背景画像を表示する - builder
日食 と uuAltCSS.js と CSS3 multiple background image - latest log

gradientとは

backgroundに指定することで、ボックスの背景色を線形にグラデーションさせることができます。

記述方法

gradientはブラウザによって記述方法が変わりますので注意が必要です。

background: -moz-linear-gradient(設定); //mozilla
background: -webkit-gradient(設定); //webkit

この場合、backgroundの値として記述していますが、扱いはbackground-imageになるようです。
従って、background-imageの値として記述もできます。

background-image: -moz-linear-gradient(設定); //mozilla
background-image: -webkit-gradient(設定); //webkit

グラデーションの設定はかっこの中に記述します。

background: -moz-linear-gradient(top, #eee, #999); //mozilla
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999)); //webkit

mozilla系ブラウザの場合

-moz-linear-gradient(方向, 開始色, 終了色)

mozilla系ブラウザの場合、一つ目にはグラデーションの方向、2つ目と3つ目に開始と終了の色を記述します。
方向は、

top →　上から下
left →　左から右
left top →　左上から右下
・
・

というように記述します。

色はrgbを使っても記述できます。
また、この場合一緒にアルファ値（透明度）も設定できます。

-moz-linear-gradient( top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),)

アルファ値は0～1.0で指定します。（0が透明、1.0が不透明）
グラデーションに色を追加したい場合は、色数を増やします。

-moz-linear-gradient(top, #eee, #c00, #999)

このままだと自動的に開始点と終了点の真ん中に色が置かれます。
色を置く位置を指定したい場合は色指定の後ろに位置指定の数値を記述します。

-moz-linear-gradient(top, #eee, #c00　20%, #999)

webkit系ブラウザの場合

-webkit-gradient(linear, 開始地点, 終了地点, from(開始色), to(終了色));

webkit系ブラウザの場合は少し長くなってしまいます。
一つ目はグラデーションの種類です。（線形なので、linear）
mozillaのほうは開始点だけだったのに対して、webkitは開始点と終了点も記述します。

色は同じようにrgbaでも指定できます。

-webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)),)

ちょっと長くなってきましたね・・・。
グラデーションの色を追加する場合はcolor-stopを使います。

-webkit-gradient( linear, left top, left bottom,
　　　　　　　　from(rgba(255, 255, 255, 0)),
　　　　　　　　color-stop(0.5, rgba(255, 255, 255, 0)),
　　　　　　　　color-stop(0.5, rgba(255, 255, 255, 0)),
　　　　　　　　to(rgba(255, 255, 255, 0)),)

このように色指定の前に開始点から終了点までのどの地点に色を置くかを指定できます。

主な対応ブラウザ

• FireFox3.6～
• Google Chrome
• Safari 4～

サンプルコード

CSS3サンプル / gradient

その他

mozilla系のブラウザでは

-moz-radial-gradient

という円のグラデーションも使うことができるようです。
詳しくはこちらにて。

-moz-radial-gradient

参考サイト

CSSグラデーションのちょっとしたテクニック #1 - hail2u.net
CSS3のグラデーションを試してみる - A Day in the Life
CSS3だけで丸いボタンを作る方法 - CSS-EBLOG

box-sizingとは

box-sizingを指定することで、要素の幅、高さの値に余白（padding）や線（border）の値を含めるかどうかを設定できます。

記述方法

box-sizing: 値;

値に下記の値を入れることで設定ができます。

box-sizing: border-box; // padding、borderの値をwidthに含める
box-sizing: content-box; // padding、borderの値をwidthに含めない（デフォルト）

です。
各ブラウザでは頭に記号を追加することで動作するようになります。

■webkitの場合
-webkit-box-sizing: border-box;

■mozillaの場合
-moz-box-sizing: border-box;

■IEの場合
-ms-box-sizing: border-box;

対応ブラウザ

上記のように記述することで動作するブラウザです。
IEは8から対応していますね。

• Firefox2～
• Safari3.1～
• Chrome0.2～
• Opera9.6～
• IE8～

サンプルコード

CSS3サンプル / box-sizing

実はこのプロパティって割と使えるのではないかと思っています。
特に、cssの記述を使いまわしたいときなんかに良さそうです。

例えばデザイン性は同じで幅だけちがうようなタイトルの場合

.title01 {
    width:100%;
    //　共通の記述
}

幅を100%にしておけば親要素の幅次第で可変するようになります。
ただ以前は、この共通の記述のところにpaddingが入ってしまったりすると幅が変わり、100%以上になってしまってうまくいかなかったんです。
css3を使えるようになれば、box-sizingを指定するだけで、paddingが入ろうが、borderをつけようが幅がはみ出てしまうことはありません。

.title01 {
    width:100%;
    box-sizing: border-box; // padding、borderがあっても平気
    //　共通の記述
}

便利でしょ？

参考サイト

CSS3のbox-sizingでpadding・borderをwidth、heightに含めてみる - HouseTect

border-radiusとは

指定したブロックの角を丸くすることができます。
モダンブラウザでも一部しか正確にレンダリングされません。

記述方法

border-radius: 値;

px単位で値を指定するとその値の半径分だけ角丸になります。

border-radius: 10px;

4つの角それぞれに指定をしたい場合。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

というように記述します。
また、Google Chromeではimgに指定することで画像自体を角丸にすることもできます。

img {
    border-radius: 10px;
}

すごい！

対応しているブラウザ

http://journal.mycom.co.jp/articles/2009/07/07/Modernizr/002.html

上記のページで対応しているブラウザが分かります。
mozilla系、webkit系は頭に

mozilla系（FireFox等）　→　「-moz-」
webkit系（Google Chrome, Safari）　→ 「-webkit-」

をつけると対応するようです。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

■mozillaで一辺づつ指定する場合
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

■webkitで一辺づつ指定する場合
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

ちなみに、IE、Operaは基本的に未対応です。

IE、Operaで角丸にする

IEの場合はビヘイビアファイルを使うことで同じような効果を出すことができます。
いくつかあるようでした。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

また、javasriptを読み込むことで対応する方法もあります。
こちらは、IE、Opera両方とも対応します。

http://www.html5.jp/library/border-radius.html

ただこのjavascriptは全てのブラウザ用に読み込んでしまうと
正確にレンダリングするブラウザが逆に崩れてしまうのでIEだけに読み込んだほうがいいですね。
※IE8だと正確にレンダリングされません。

余談ですが、このjavascriptどうやらtableタグを生成しているようです。
ここにきてもやっぱりテーブルコーディングに頼るのかっていう感じですね・・。

サンプルコード

CSS3サンプル / border-radius

参考サイト

CSS3 角丸を表現する border-radius - CSS Lecture
CSSだけで角丸を表現する「border-radius」 - CHIBATCH.JP
border-radius

Matrixクラス

通常、BitmapDataにdrawする時、オブジェクトに指定している変形（位置、スケール、回転）は全て破棄されます。
変形を適用したい場合はMatrixクラスを使います。
パッケージは、

flash.geom.Matrix

適用方法は、Matrixオブジェクトを生成後オブジェクトが持つ以下のプロパティを変更します。

translate(x,y)　：　位置の指定
scale(sx,sy)　：　スケールの指定
rotate(radian)　：　回転の指定（ラジアン）

プロパティ設定後、オブジェクトをBitmapDataにdrawするときの第二引数に一緒に指定します。
そのdrawするオブジェクトに対し変形効果がかかります。

bitmapdata.draw( sprite, matrix );

一度プロパティをクリアしたい場合は、identityメソッドを使います。

matrix.identity(); // 初期化される

identityを実行しないとプロパティの値は保持しつづけます。

コード

matrixのtranslateとscaleを使ってみました。

その他

Kayacの本によりますと、指定するプロパティの順番によってはうまく効果がかからない場合があるとのこと。
以下の順番で指定するのが一番安定しているようです。

• scale
• rotate
• translate

基本概念

• Bitmapを使うにはBitmapとBitmapDataの2種類を使う。
• 通常actionscript3.0では各要素それぞれオブジェクトになっているがBitmapはオブジェクトを転写することで一枚の絵のように扱うことができる。
• Bitmapには、ぼかしや色付け等色々な効果をつけることができる。

一枚の絵を操作するという概念がキモのような気がする。

基礎

実際のBitmapを扱う方法。
クラスは以下のものを使用。

flash.display.Bitmap
flash.display.BitmapData

流れとしては、

1. オブジェクトを作成（なんでもいい）
2. Bitmap、BitmapDataを作成
3. Bitmapをステージに配置
4. BitmapDataにオブジェクトを転写

という流れ。
実際に配置するのはBitmap。
BitmapにBitmapDataを設定する感じ。
転写したいオブジェクトはBitmapDataに転写する。

基本コード。

package {
    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Bitmap;

    public class myBitmap extends Sprite {
        public function myBitmap() {

            /* オブジェクトを作成 */
            var fig:Sprite = createCircle( stage.stageWidth/2, stage.stageHeight/2, 100, 0XCC0000 );

            /* BitmapDataを作成して、Bitmapに設定 */
            var bitmapdata:BitmapData = new BitmapData( 465, 465, false, 0 );

            /* ステージに配置 */
            addChild( new Bitmap( bitmapdata ) );

            /* BitmapDataにオブジェクトを転写 */
            bitmapdata.draw( fig );

        }

        private function createCircle(cx:Number, cy:Number, size:Number, col:uint):Sprite {
            var sprite:Sprite = new Sprite();
            sprite.graphics.beginFill( col );
            sprite.graphics.drawCircle( cx, cy, size );
            sprite.graphics.endFill();
            return sprite;
        }
    }
}

です。
思ったより簡単。

それから、Bitmapの方法ってjavascriptでいうところのcanvasに似てる。
Bitmapで学んだ方法をcanvasでもやってみようかな・・。

LoadingIcon

package classes
{
	/**
	 * ローディングアイコン生成クラス
	 * @author Takuya Fujimi
	 */
	import flash.display.Sprite;
	import flash.events.Event;

	public class LoaderIcon extends Sprite
	{
		/* デフォルト設定 */
		private var obj:Object = {
			width: 2,
			height: 5,
			color: 0X000000,
			num: 12,
			radius: 5
		};

		/* コンストラクタ */
		public function LoaderIcon( ...arg:Array )
		{
			for ( var item:Object in arg[0] ) {
				obj[item] = arg[0][item];
			}
			for (var i:int = 0; i < obj.num; i++ ) {
				createRect( i );
			}
			addEventListener(Event.ENTER_FRAME, boxRotation);
		}

		/* 図形の描画 */
		private function createRect( i:int ):void {
			var posX:Number = obj.radius * Math.sin(Math.PI * 2 * i / obj.num);
			var posY:Number = obj.radius * Math.cos(Math.PI * 2 * i / obj.num);

			var box:Sprite = new Sprite();
			box.graphics.beginFill( obj.color );
			box.graphics.drawRect( obj.x / -2, 0, obj.width, obj.height );
			box.graphics.endFill();
			box.rotation = 360 - ( i * 360 / obj.num );
			box.alpha = 1 - (1 / obj.num * i);
			box.x = posX;
			box.y = posY;
			addChild( box );
		}

		/* 回転 */
		private function boxRotation(e:Event):void {
			rotation += 360 / obj.num;
		}

		/* アイコンを削除 */
		public function deleteIcon():void {
			var parentObj:Object = Object(parent);
			parentObj.removeChild( this );
		}

	}

}

使用方法

使い方はクラスを初期化してステージに配置するだけ。

var icon:LoadingIcon = new LoadingIcon();
addChild( icon );

ですね。
デフォルトのままで良ければこれで終わり。
それに加えて、引数にオブジェクトを渡すことで数値を変更できるようにしました。

var obj:Object = { radius: 20, color: 0Xcc0000 };
var icon:LoadingIcon = new LoadingIcon( obj );
addChild( icon );

こうすることで、いろいろな大きさや色のローディングアイコンを生成することができます。
変更できる数値は

※以下すべて、ローディングアイコン用に使用している図形に対する数値です。

width: 図形の幅
hieght: 図形の高さ
color:　図形の色
num: 図形の数
radius: 回転する半径

となります。

あとは、念のためアイコンを削除するメソッドもつけています。
配置したアイコンを削除したい場合は、アイコンのインスタンスからメソッドを実行します。

icon.deleteIcon();

これで、どこに配置しようが削除できます。

デモ

ここのところ、仕事上でFlashを使う機会が増えてきてますので、いよいよAS3.0を勉強しようかと思っています。とりあえず、基本的な事を本で学んだのであとはwonderflを活用しながらいろいろ作ってみようと思います。

新年なので、ちょっとぱーっとしたものを。

イベントリスナー

AS3.0からは全てイベントリスナーになっています。

オブジェクト.addEventListener(イベント, 実行関数);

という形で記述します。
実行関数の引数にはイベントオブジェクトが入るので、

function hoge(e:Event) {
    //実行するコードを書きます。
}

となります。
AS3.0では、イベントオブジェクトの型を省略できません。（コンパイルエラー）
イベントオブジェクトの型は使用するイベントによって変わります。
（イベントが属しているクラスによる？）

Event.ENTER_FRAME →　e:Event
MouseEvent.CLICK → e:MouseEvent

のように。
マウスイベント（クリック、オーバー、ムーブ）なんかは、MouseEventクラスになります。
エンターフレームイベントはEventクラスです。

今回使用した箇所でいくと、

stage.addEventListener(Event.ENTER_FRAME, make_ball);

private function make_ball(e:Event):void {
    var ball:Ball = new Ball();
    ball.x = stage.mouseX;
    ball.y = stage.mouseY;
    ball.init();
    ball.move();
    addChild( ball );
}

です。
また、イベントを使用する際はイベントクラスをインポートする必要があります。

import flash.events.Event;
import flash.events.MouseEvent;

イベントリスナーはjavascriptでも使っていたので、そんなに違和感なく使用できました。

ステージにイベントを設置する

上記にも書いてありますが、ステージ上をクリックしたり、オーバーさせるときは
stageにイベントリスナーを設置するようです。

stage.addEventListener(Event.ENTER_FRAME, make_ball);

stage部分を省略するとダメですね。
このへんの仕組みをもうちょっと勉強しないといけないです。

オブジェクトの配置

AS3.0でオブジェクトをステージ及び指定のMovieClipに配置するときは、addChildを使います。

親オブジェクト.addChild( 子オブジェクト );

使い方としては、このような感じです。

var ball:Ball = new Ball(); // オブジェクトを作成
addChild( ball ); // オブジェクトを配置

Ballオブジェクトを作成して、それをステージに配置する流れです。
作成だけでは反映されないんですね。

ちなみに削除するときは、removeChildを使います。

親オブジェクト.removeChild( 子オブジェクト );

こんな感じで使用します。

var ball:Ball = new Ball(); // オブジェクトを作成
addChild( ball ); // オブジェクトを配置

removeChild( ball ); // オブジェクトを削除

自分自身を削除する

上記のように、外からオブジェクトを削除する時は親オブジェクト、子オブジェクトが分かりやすいですよね。
ただ、自分自身を削除したい場合はちょっと苦労します。

上記のように、親オブジェクトや子オブジェクトがわかりづらいんです。
基本的には

親オブジェクト.removeChild( 子オブジェクト );

この様式にのっとって書きますので、親オブジェクトと子オブジェクトが参照できればいいわけです。

まず、削除する子オブジェクトですが、これは自分自身なのでthisですね。

親オブジェクト.removeChild( this );

となります。
そして親オブジェクトの方ですが、自分自身の親オブジェクトの参照にはparentを使います。

parent.removeChild( this );

これでいけそうですが、parentのままではダメなようです。（※自分も理由がわからないので調べます・・）
一旦、オブジェクトに変換すると出来ます。

var parentObj:Object = Object( parent );
parentObj.removeChild( this );

と、これで無事削除完了です。

まとめ

たったこれだけのAS3.0を書くだけでも、いろんな事を学ぶことができました。
そもそも思い立ってこれを作ってみただけなんですが、
なんにせよ作るって言うことがどれほど重要かというのを実感しました。

やっぱり、何事も作らないとだめですね・・。
今年はちょっとしたものでも作って作って勉強しようと思います。

コレクションについて

あえず、ArrayCollectionやXMLListCollectionってなんだろうということですが、Flexのヘルプに書かれていました。

コレクションは、Array や XMLList オブジェクトなどのデータソースオブジェクトに格納されたデータにアクセスしたり、このようなデータを表現したりするための一貫した方法を提供するオブジェクトです。コレクションにより、Flex コンポーネントと、そのコンポーネントの生成に使用するデータオブジェクトのと間に抽象レベルが提供されます。

ということみたいです。
ArrayやXMLListというのは通常のデータ（元となるデータ）。で、コレクションっていうのはそのデータのラッパーオブジェクトっていうことですね。
元データ色々な機能を追加したオブジェクトっていうことでしょうか。
追加される機能としては、以下のものになります。

• 生データソースにより提供される処理から独立した一貫したデータ処理セットを提供します。
• 基になるデータが変化したときに、コンポーネントが適切に更新されます。
• リモートデータソースから到達するページングデータを処理するためのメカニズムを提供します。
• ソートしたデータや開発者の提供するメソッドによってフィルタしたデータを表す具体的な「ビュー」を提供します。
• 1 つのコレクションを使用して、同じデータソースから複数のコンポーネントにデータを格納できます。
• コレクションを使用することで、コンポーネントのデータソースを実行時に切り替えることができます。また、データソースの内容を変更して、そのデータソースを使用するすべてのコンポーネントに変更を反映することもできます。
• コレクションのメソッドを使用して、基になるデータソース内のデータにアクセスできます。

（ヘルプより抜粋）
いろいろな機能がありますね。
その中でも重要な点をピックアップしました

基になるデータが変化したとき、コンポーネントが適切に更新される

ここが実は重要で、DataGrid等のデータにArrayやXMLListを使わないほうが良い理由でもあります。

まず、ArrayCollectionを使用した場合。
ArrayCollectionが持っている要素の追加・削除メソッドを使ってコレクションを変更できます。
そして、DataGridもあわせて変化します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    // データをバインドさせる
    [Bindable]
    public var data_array:ArrayCollection;

    // ArrayCollectionを作成する
    public function init():void{
        data_array = new ArrayCollection(def_array);
    }

    private function btn_click_add():void{
        data_array.addItemAt({name:'suzuki',money:500,number:1},1);
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            data_array.removeItemAt(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{data_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

同じことをArrayでやろうとする。
Arrayにももちろん要素の追加や削除メソッドがあります。
しかし、そのメソッドを使用してもDataGridが変化することはありません。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    [Bindable]
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    private function btn_click_add():void{
        def_array.push( { name:'suzuki', money:500, number:1 } );
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            def_array.splice(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{def_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

自動的に反映はしてくれないんですね。
ここがArrayCollectionやXMLListCollectionを使う理由のひとつになりそうです。

ただ、DataGridはArrayを読み込んだ時点で自動的にArrayCollectionを生成します。
ですので、読み込んだデータがArrayでも生成されたArrayCollectionを操作することで、同じような効果を出すことができます。
生成されたArrayCollectionはdataProviderを通して操作します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    [Bindable]
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    private function btn_click_add():void{
        dg.dataProvider.addItemAt({name:'suzuki',money:500,number:1},1);
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            dg.dataProvider.removeItemAt(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{def_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

まとめ

他にも便利な機能がいろいろあるようです。
その機能を使えるようにするためにコレクションを有効活用しましょう。

DataGrid内に直接記述

DataGrid内に直接XMLを記述するには、dataProvider内にXMLListの形式で記述します。
※root要素がありませんので注意。

<mx:DataGrid width="100%">
    <mx:dataProvider>
        <mx:XMLList>
            <person>
                <name>suzuki</name>
                <money>500</money>
                <number>1</number>
            </person>
            <person>
                <name>sato</name>
                <money>300</money>
                <number>2</number>
            </person>
        </mx:XMLList>
    </mx:dataProvider>
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

XMLデータを記述する際には、XMLListとXMLListCollectionと2つのクラスが存在する。
ArrayとArrayCollectionのときのように、XMLListCollectionのほうが様々なメソッドが用意されているようなので、こちらを使用するのが良いらしい。

上記の場合、指定しているのはXMLListになる。
しかし、DataGridのdataProviderにセットした時点でどうやら自動的にXMLListCollectionに変換をするらしい。

同一ファイル内のXMLを使用する

上記のXMLListをDataGridから外に出し、id値をつける。
そのid値をDataGridのdataProviderにバインドさせる。

<mx:XMLList id="data_xml">
    <person>
        <name>suzuki</name>
        <money>500</money>
        <number>1</number>
    </person>
    <person>
        <name>sato</name>
        <money>300</money>
        <number>2</number>
    </person>
</mx:XMLList>

<mx:DataGrid width="100%" dataProvider="{data_xml}">
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

Script内で作成したXMLを使用する

actionscript内で生成したXMLを使用する場合は、XMLをXMLListCollectionに変換したものをバインドさせる。

■Script側

<mx:Script>
<![CDATA[

// XMLデータ
[Bindable]
private var def_xml:XML =
    <root>
        <person>
            <name>suzuki</name>
            <money>500</money>
            <number>1</number>
        </person>
        <person>
            <name>sato</name>
            <money>300</money>
            <number>2</number>
        </person>
    </root>;

// XMLListCollectionを作成する
[Bindable]
private var data_xml:XMLListCollection = new XMLListCollection(def_xml.person);

]]>
</mx:Script>

■mxml側

<mx:DataGrid width="100%" dataProvider="{data_xml}">
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

外部ファイルのXMLを使用する

外部のXMLファイルを読み込む。

1. HTTPServiceタグで読み込むXMLを指定する。
2. Applicationが読み込まれた時点で、リクエストを送りファイルを取得する。
3. DataGridのdataProviderに返されたXMLを指定する。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" creationComplete="Request.send()">
    <mx:HTTPService id="Request" url="data/name.xml" useProxy="false" />
    <mx:Panel width="100%">
        <mx:DataGrid width="100%" dataProvider="{Request.lastResult.data.person}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="名前" />
                <mx:DataGridColumn dataField="money" headerText="金額" />
                <mx:DataGridColumn dataField="number" headerText="番号" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>

HttpServiceについてはまた調べてみます。

サンプル

まとめ

XMLも使えるといろいろと便利そうです。
Arrayのときもそうだったんですが、XML、XMLList、XMLListCollectionの違いをちゃんと知らないとごっちゃになります。
なかなか難しいです・・・。

参考サイト

第11回　Flexが備えるMXMLコンポーネント（Part6：データグリッド） - ITPro