2006年9月 5日 (火)

Flex2のカスタムコントロールにイベントを作成する

独自のコントロールを作成したら、次は独自のイベントを発行する必要が生じると思いますので、今日は先日作成したカスタムコントロールに イベントを追加するサンプルを書いてみます。
サンプルのMXMLファイル(CustomEvent.zip)

まず、独自のイベントを定義してみます。
イベントオブジェクトは、flash.mx.events.Eventのサブクラスである必要があります。
今回は、イベントオブジェクトの定義にActionScriptファイル(asファイル)を使用します。
ExampleBox.mxmlと同じディレクトリに、ExampleBoxButtonClickEvent.asという名前のファイルを作成し、以下のコードを記述します。
package controls
{
    import flash.events.Event;
	
    public class ExampleBoxButtonClickEvent extends Event
    {
        public var message:String;
        
        public function ExampleBoxButtonClickEvent(eventType:String)
        {
            super(eventType, false, false);
        }
    }
}
このサンプルでは、単純にメッセージを持つ変数だけのシンプルなものにしました。

先頭の package controls は、このイベントクラスがcontrolsパッケージに属することを示しています。
クラス宣言時の extends Event により、このクラスはEventクラスのサブクラスとなります。
コンストラクタ内の super は、スーパークラス(この場合はEventクラス)のコンストラクタを呼び出しています。
ここまでは、Javaの経験がある方ならおなじみですね。

なお、Eventクラスのコンストラクタは、
第1引数 : イベントタイプを表す文字列
第2引数 : イベントバブリング(親要素へイベントが伝播する)を行うかどうか
第3引数 : イベントをキャンセルできるかどうか
を指定するようです。


次に、ExampleBoxがイベントを発行する部分を記述しましょう。
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox borderStyle="solid" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initBox()"
    width="300" height="300">
    
    
    <mx:Metadata>
        [Event(name="exampleButtonClick", 
            type="controls.ExampleBoxButtonClickEvent")]
    </mx:Metadata>
    

    <mx:Script>
    <![CDATA[
    
    private var boxTitle:String = "";
    
    private function initBox() : void
    {
        this.titleLabel.text = this.boxTitle;
    }
    
    public function set title(value:String) : void
    {
        this.boxTitle = value;
        
        if(this.titleLabel != null)
            this.titleLabel.text = value;
    }
    
    public function get title() : String
    {
        return this.boxTitle;
    }
    
    
    private function buttonClick() : void
    {
        var event:ExampleBoxButtonClickEvent = 
            new ExampleBoxButtonClickEvent("exampleButtonClick");
            
        event.message = "ボタンがクリックされました";
            
        dispatchEvent(event);
    }
    
    
    ]]>
    </mx:Script>
    
    <mx:Label id="titleLabel" />
    <mx:Button label="click" click="buttonClick()" />
</mx:VBox>
太字の部分が、先日のExampleBox.mxml ファイルに追加したコードです。
今回は、ボタンを1つ追加して、そのボタンが押されたときにイベントを発生させます。

まず、このコントロールが持つイベントを、
<mx:Metadata>
    [Event(name="exampleButtonClick", type="controls.ExampleBoxButtonClickEvent")]
</mx:Metadata>
の部分で定義しています。
[Event ( name="EventName", type="EventClassName" ) ]
といった書式で、EventNameはイベント名となり、EventClassNameで指定したクラスはイベントハンドラに引数として渡されます。

実際にイベントを発行している部分は、ボタンのクリックイベントハンドラである
private function buttonClick() : void
{
    var event:ExampleBoxButtonClickEvent = 
        new ExampleBoxButtonClickEvent("exampleButtonClick");
    
    event.message = "ボタンがクリックされました";
    
    dispatchEvent(event);
}
の部分で、まずイベントハンドラに渡すExampleBoxButtonClickEventのインスタンスを生成します。
第1引数にはイベントタイプを渡しますが、この文字列はイベント名と同じものを指定する必要があるようです。
その後、必要なデータを格納した後に dispatchEvent(event) でイベントを発行します。
dispatchEventメソッドは flash.events.EventDispatcher クラスのメソッドで、今回のVBoxはこのクラスのサブクラスとなっています。


最後に、このイベントを処理する部分のコードを追加します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:components="controls.*"
    width="100%" height="100%"
    horizontalAlign="left">
    
    <mx:Script>
    <![CDATA[
    import controls.*;
    
    private function parts1ButtonClickHandler
        (event:ExampleBoxButtonClickEvent) : void
    {
        mx.controls.Alert.show(event.message);
    }
    
    ]]>
    </mx:Script>
    
    
    <mx:HBox>
        <components:ExampleBox title="共通パーツ1" 
            exampleButtonClick="parts1ButtonClickHandler(event)"
            backgroundColor="#5555ff" />
        <components:ExampleBox title="共通パーツ2" backgroundColor="#ff5555" />
    </mx:HBox>
    
</mx:Application>
太字の部分が追加したコードです。
ExampleBoxタグに、追加したイベント名であるexampleButtonClick="..."としてイベントハンドラを指定出来ていますね。

あとは、ボタンなどと同様にイベントを処理します。
このサンプルでは、Alertでイベントオブジェクトの message 文字列を表示しています。

| | コメント (3) | トラックバック (0)

2006年8月30日 (水)

Flex2のカスタムコントロールを作る

複数の画面で共通で使うものは部品化しておくと便利です。
今日は、Flex2でこのような部品を作成するサンプルを書いてみたいと思います。
サンプルのMXMLファイル(CustomControl.zip)

カスタムコントロールを作成する際は、Javaのパッケージや.NETの名前空間のように機能などでグループを 作成すると、使用する際にわかりやすくなります。
Flex2は、Javaのようにディレクトリ構成がそのままパッケージとなり、ファイル名がコントロール名となるようです。
今回のサンプルは、C:\Flex2という名前のフォルダに作成するものとして進めたいと思います。

まずC:\Flex2にcontrolsというフォルダを作り、使いまわす部品となるmxmlを以下のように記述し、controlsフォルダにExampleBox.mxmlという名前で保存します。
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox borderStyle="solid" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initBox()"
    width="300" height="300">

    <mx:Script>
    <![CDATA[
    
    private var boxTitle:String = "";
    
    private function initBox() : void
    {
        this.titleLabel.text = this.boxTitle;
    }
    
    public function set title(value:String) : void
    {
        this.boxTitle = value;
        
        if(this.titleLabel != null)
            this.titleLabel.text = value;
    }
    
    public function get title() : String
    {
        return this.boxTitle;
    }
    
    ]]>
    </mx:Script>
    
    <mx:Label id="titleLabel" />
</mx:VBox>
VBoxの中にLabelがあるだけの簡単なものです。
プロパティとして、ラベルに文字を設定する title というプロパティを作成してみました。
ActionScript3はプロパティもサポートしていて、set/getというキーワードを使って上記のようにプロパティを定義します。

このコントロールのプロパティは、標準のコントロールと同様にタグでプロパティを設定できるのですが、設定時には まだコントロールが初期化されていないようで、Labelのインスタンスがまだ生成されていません。
仕方がないので、一旦クラス変数に格納しておいて、initialize イベントでLabelの text プロパティにセットするようにしています。


次に、このコントロールを使用する側のmxmlファイルをC:\Flex2に作成します。
mxmlファイルは以下のように記述します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="controls.*"
    width="100%" height="100%"
    horizontalAlign="left">
    
    <mx:HBox>
        <custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
        <custom:ExampleBox title="共通パーツ2" backgroundColor="#ff5555" />
    </mx:HBox>
    
</mx:Application>
先ほど作成したコントロールを使用するために重要なのは、ルートタグ(この例ではmx:Application)に、 xmlns:custom="controls.*"
を記述する点です。
これにより、controlsフォルダ内にあるコントロールを、customという名前空間で修飾したタグで標準のコントロールのように配置できます。
名前空間に指定している custom というのは任意のもので構いません。

あとは、
<custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
のようにmxmlのファイル名をタグ名として記述して配置します。
コントロールに作成した title というプロパティも、他のプロパティと同様に属性として値を設定できます。

また、上の例ではExampleBoxには作成していないbackgroundColorに値を設定し、実際に背景色が指定の色に塗りつぶされますが、 これは、ExampleBoxのルートタグがVBoxであるため、ExampleBoxはVBoxの派生クラスとなっていて、ExampleBoxはVBoxが持つプロパティや スタイルなどを継承してるためです。
もちろん、ActionScript上でも
var ctrl:ExampleBox = new ExampleBox();
var box:VBox = ctrl;
のように、ExampleBox型のインスタンスをVBox型の変数に格納することが出来ます。

| | コメント (0) | トラックバック (0)

2006年8月28日 (月)

Flex2でドラッグ&ドロップ

デスクトップアプリケーションでは当たり前のドラッグ&ドロップですが、Webアプリケーションでは難しいものです。
しかし、最近ではWebアプリケーションでもデスクトップアプリケーションに近いユーザーインターフェイスが求められつつあり、 開発も大変ですよね。

今日は、Flex2でドラッグドロップを行う基本部分のサンプルを書いてみます。
ドラッグ&ドロップ サンプルページ
サンプルのMXMLファイル

まず、ドラッグするオブジェクトと、そのオブジェクトをドロップするターゲットとなるオブジェクトの2つが必要となりますので、 それを作成します。
<mx:Canvas id="ddbox"
    mouseDown="mouseDownHandler(event)"
    mouseMove="mouseMoveHandler(event)"
    mouseUp="mouseUpHandler(event)"
    borderStyle="solid" backgroundColor="#ffffff" width="100" height="100" />

<mx:VBox id="ddtarget"
    dragEnter="dragEnterHandler(event)"
    dragDrop="dropHandler(event)"
    backgroundColor="#9999ff"
    borderStyle="solid" width="300" height="500" />
ここではCanvasとVBoxを使っていますが、mx.core.UIComponentの派生クラスであればOKです。
Canvasはドラッグされるオブジェクトで、mouseDown、mouseMove、mouseUpの各イベントハンドラを作成します。
VBoxはドロップされるターゲットで、dragEnterとdragDropイベントハンドラを作成します。
ここで、ドラッグされるターゲットとなるオブジェクトの方は、なぜかbackgroundColorを指定していないとdragEnterイベントが 正しく発生しないようですので、気をつけてください。

次に、まずドラッグの対象となるオブジェクトのmouseDown、mouseMove、mouseUpイベントハンドラを実装します。
import mx.events.*;
import mx.core.*;
import mx.managers.DragManager;
import mx.controls.*;
import mx.containers.*;

private var isMouseDown:Boolean = false;

private function mouseDownHandler(event:MouseEvent) : void
{
    isMouseDown = true;
}

public function mouseMoveHandler(event:MouseEvent) : void
{
    if (isMouseDown && !DragManager.isDragging)
    {
        var ds:DragSource = new DragSource();
        ds.addData(ddbox, "canvas");
        DragManager.doDrag(ddbox, ds, event);
    }
}

public function mouseUpHandler(event:MouseEvent) : void
{
    isMouseDown = false;
}
mouseDown、mouseUpイベントでは、マウスボタンを押しているかどうかをBooleanの変数にセットしているだけです。
mouseMoveイベントでは、マウスが押されていて、かつDragManagerのisDraggingがfalseの場合に処理を行います。

DragManagerは、mx.managers.DragManagerクラスで、ドラッグ&ドロップ処理をする際の要となるクラスです。
ドラッグをスタートするときは、まず、mx.core.DragSourceクラスのインスタンスを作成し、addDataメソッドで ドラッグするオブジェクトと、そのオブジェクトを識別するための名前を指定して追加します。
その後、DragManagerクラスのdoDragメソッドを呼び出すと、ドラッグが開始されます。
ドラッグ中は、デフォルトでドラッグするオブジェクトと同じサイズの半透明の四角形が表示されます。

最後に、ドラッグされるターゲットオブジェクトのイベントハンドラを記述します。
private function dragEnterHandler(event:DragEvent):void
{
    if(event.dragSource.hasFormat("canvas")){
        DragManager.acceptDragDrop(IUIComponent(event.target));
    }
}

private function dropHandler(event:DragEvent):void
{
    var item:Box = new Box();
    
    item.width = 298;
    item.height = 30;
    
    item.setStyle("borderStyle", "solid");
    item.setStyle("backgroundColor", 0xff0000);
    
    item.addChild(label);
    
    ddtarget.addChild(item);
}
dragEnterイベントは、オブジェクトがドラッグされてターゲット内に入った時(まだドロップはされていません)に発生します。
この時、ターゲットではドラッグされているオブジェクトのドロップを許可するかどうかを判定します。
引数にわたってくるDragEvent型のインスタンスのdataSourceプロパティにより、ドラッグ開始時に作成したDragSourceを取得でき、 そのhasFormatメソッドによりそのDragSourceが保持しているオブジェクトを判定できます。
オブジェクトのドロップを許可する場合、DragManagerクラスのacceptDragDropメソッドを呼び出します。

dragDropイベントはユーザーがマウスを離した時に発生します。
この時に、ドロップ完了時の処理を記述して、ドラッグ&ドロップ処理が完成です。

| | コメント (0) | トラックバック (0)

2006年8月11日 (金)

Flex2のエフェクト

Flashの魅力といえば、やはり動きのあるページだと思います。
ただ、私のようなプログラマーにはなかなか難しかったのですが、Flex2では動きもプログラムでコントロールしやすくなっています。
以下は、mx.effects パッケージに用意されているエフェクトのいくつかを簡単に使ってみるサンプルです。
サンプルページ
example.mxml

  • Resize
    スムーズにサイズを変更するエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    widthFromに初期幅を、heightToに初期の高さを指定します。指定しなければ、現在の幅・高さになるようです。
    widthToに最終的な幅を、heightToに最終的な高さを指定します。
    <mx:Resize id="openEffect" duration="1000" target="{panel}" heightTo="300"  />
  • Fade
    フェードイン・フェードアウトのエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    alphaFromに初期透過度を、alphaToに最終的な透過度を指定します。(1.0で不透明、0.0で透明)
    対象が文字を含む場合、なぜか文字だけ透過されないようです。
    <mx:Fade id="fadeOutEffect" target="{panel}" duration="500"
        alphaFrom="1.0" alphaTo="0.0" />
  • Blur
    残像のエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    blurXFromに初期のぶれ幅を、BlurYFromに初期のぶれ高を指定します。
    blurXToに最終的なぶれ幅を、BlurYToに最終的なぶれ高を指定します。
    <mx:Blur id="blurEffect" target="{panel}" duration="2000"
        blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />
  • Move
    スムーズに移動するエフェクトです。
    targetにエフェクトを適用する対象を指定します。
    durationにエフェクトの要する時間をミリ秒単位で指定します。
    xFromに初期X座標、yFromに初期Y座標を指定します。指定しなかった場合は、現在の座標が適用されます。
    xToに移動先のX座標、yToに移動先のY座標を指定します。
    <mx:Move id="moveEffect" target="{panel}" xTo="500" />

また、各エフェクトにはeasingFunctionというプロパティがあり、mx.effects.easingパッケージのクラスを使って値を適用すると さらに細かな動きを加えることが出来ます。
これについては、また後日サンプルを作成してみたいと思います。

| | コメント (0) | トラックバック (0)

2006年8月 2日 (水)

Flex2の入力値チェック

入力フォームの値をチェックする作業は必ず必要となるものですが、Flex2では入力値チェックを行うコンポーネントが mx.validatorsパッケージに用意されています。
今日は、その中から金額・日付・メールアドレスのチェックを行うサンプルを載せておきたと思います。
コントロール サンプルページ
example.mxml

各 Validator のサンプルの前に、まず Validator の主に使う共通項目として、source、property、trigger、triggerEvent、required、valid、invalid といったプロパティがありますので、これらの役割について簡単に書いておきます。

source : TextInputなど入力値をチェックするコントロールのIDを指定します。
property : source で指定したコントロールの値を取得するプロパティ(textなど)を指定します。
trigger : チェックが実行されるきっかけとなるコントロール(Buttonなど)を指定します。
triggerEvent : triggerに指定したコントロールのイベント(clickなど)を指定し、そのイベントでチェックが実行されます。
required : sourceで指定したコントロールが入力必須かどうかをBooleanで指定します。
valid : チェックが行われ、入力値が正当なものと判定された場合の処理を記述します。
invalid : チェックが行われ、入力値が不正なものと判定された場合の処理を記述します。

では、以下サンプルです。
  • CurrencyValidator
    金額の値をチェックする際に使用します。
    currencySymbol プロパティに、\や$などの通貨記号を指定します。
    3桁ごとに区切りのカンマが含まれていてもパスするようです。
    <mx:CurrencyValidator source="{currencyInput}" 
        property="text" currencySymbol="\" trigger="{currencyButton}"
        triggerEvent="click" valid="{Alert.show('OK');}" />
  • DateValidator
    日付の値をチェックする際に使用します。
    inputFormat プロパティに、yyyy/mm/ddなどの入力フォーマットを指定します。
    / の代わりに - が入力されていてもパスするようです。
    <mx:DateValidator inputFormat="yyyy/mm/dd" source="{dateInput}" property="text"
        trigger="{dateButton}" triggerEvent="click" valid="{Alert.show('OK');}" />
  • EmailValidator
    メールアドレスの値をチェックする際に使用します。
    <mx:EmailValidator source="{mailInput}" property="text"
        trigger="{mailButton}" triggerEvent="click" valid="{Alert.show('OK');}" />

この他には、クレジットカードの値をチェックする CreditCardValidator 、数値であるかをチェックする NumberValidator 、 電話番号をチェックする PhoneNumberValidator 、独自の正規表現を指定できる RegExpValidator など結構多彩に用意されています。
各 Validator 固有のプロパティはあるものの、使い方は上記のサンプルと同じような感覚で使用できると思いますので、チェックしてみてはいかがでしょうか。

なお、サンプルページで表示されるメッセージは英語ですが、日本語版のSDKではちゃんと日本語になると思います。
また、オリジナルのメッセージを指定することも出来ます。

| | コメント (0) | トラックバック (0)

2006年7月31日 (月)

Flex2でStyleを適用する

Flex2でも、HTMLと同じようにCSSを適用できます。

以下のようなCSSファイルを、
ComboBox.example{
    backgroundAlpha: 1;
    highlightAlphas: 0.77, 0.2;
    fillAlphas: 0.12, 1, 0.75, 0.65;
    fillColors: #0000cc, #0066ff, #ffffff, #eeeeee;
}

以下のようにMXMLに適用します。
<mx:Style source="style.css" />
	
<mx:ComboBox styleName="example" />

styleNameプロパティが、HTMLのclass属性に相当するようです。
スタイルの調整には、Style Explorer が便利です。

| | コメント (0) | トラックバック (0)

2006年7月28日 (金)

Flex2のDataGridにXMLデータをバインドする Part2

今日は、このブログの Atom Feed を URLLoader を使って取得するサンプルを載せておきます。
が、もっと良い方法があるような気がします。
サンプルページ

<mx:Script>
<![CDATA[
    import flash.events.*;
    import flash.net.*;
    
    private function getAtomFeed() : void
    {
        var loader:URLLoader = new URLLoader();
        var request:URLRequest = new URLRequest("/web/atom.xml");

        loader.addEventListener(Event.COMPLETE, loaderCompleted);
        
        loader.load(request);
    }
    
    
    private function loaderCompleted(event:Event) : void
    {
        namespace ns = "http://www.w3.org/2005/Atom";
        use namespace ns;
        
        var loader:URLLoader = URLLoader(event.target);
        var data:XML = new XML(loader.data);
        
        var ns2:Namespace = new Namespace("http://www.w3.org/1999/xhtml");
        
        var entries:Array = new Array();
        for(var i:uint=0;i<data.entry.length();i++){
            entries.push(
                {
                    title : data.entry[i].title,
                    published : data.entry[i].published,
                    content : data.entry[i].content.ns2::div.toXMLString()
                }
            );
        }
        
        this.grid.dataProvider = entries;
    }

]]>
</mx:Script>

<mx:DataGrid id="grid" width="400">
    <mx:columns>
        <mx:DataGridColumn dataField="title" headerText="題名" width="300" />
        <mx:DataGridColumn dataField="published" headerText="公開日" width="100" />
    </mx:columns>
</mx:DataGrid>
<mx:Button label="データを取得" click="getAtomFeed();" />
<mx:Box height="300" borderStyle="solid"
    verticalScrollPolicy="auto" backgroundColor="0xFFFFFF">
    <mx:Text id="view" width="700" height="100%"
        htmlText="{grid.selectedItem.content}" />
</mx:Box>
URLLoaderは、load メソッドに URLRequest を渡すことでデータをロード出来ます。
データの取得が完了したら complete イベントが発生するのでイベントリスナーを登録しておいて処理します。
ダウンロードしたデータは、event.data から取得できます。

ここまでは特に問題はないと思いますが、取得した Atom Feed を取り扱う時に躓いてしまいそうです。
Atom Feed のルートノードは、
<feed xmlns="http://www.w3.org/2005/Atom">
という具合に名前空間で修飾されていて、単純に data.entry と記述してもうまくいきません。
この場合は、
var ns : Namespace = new Namespace("http://www.w3.org/2005/Atom");
data.ns::entry[0].ns::author ......
という具合にNamespaceクラスを使う必要があります。
しかし、これだとちょっと見辛くなってしまいますよね。
そこで、
namespace ns = "http://www.w3.org/2005/Atom";
use namespace ns;

data.entry[0].author .........
のように、事前に http://www.w3.org/2005/Atom という URI の名前空間を使用することを宣言しておくと、
スッキリ書けます。

Namespaceのドキュメントには、RSS Feed を取得するサンプルが書いてあり、そこでは、
var rss:Namespace = new Namespace("http://purl.org/rss/1.0/");
.....
default xml namespace = rss;
と記述してあるので最初はこのようにやってみたのですが、実行時エラーとなり動作しませんでした。
何か書き間違えていたのかもしれませんが、私もまだ理解していない部分が多く、理由はよくわかりませんでした。

| | コメント (0) | トラックバック (0)

2006年7月27日 (木)

Flex2のDataGridにXMLデータをバインドする

DataGridなどは、サーバーのデータを動的にバインドして使用するケースがほとんどだと思います。
そこで、サーバーではASP.NETのDataSetをXMLとして返し、それをDataGridのバインドするケースを想定したサンプルを作成してみました。
サンプルページ
example.mxml

まず、サーバーではC#で以下のようなコードを記述してDataSetを作成しそれをXMLとして返すことにします。
private void Page_Load(object sender, System.EventArgs e)
{
    DataSet ds = new DataSet("DataSet");
    DataTable dt = new DataTable("DataTable");
    dt.Columns.Add("Column1");
    dt.Columns.Add("Column2");
    dt.Columns.Add("Column3");

    DataRow dr = dt.NewRow();
    dr[0] = "Row1 Column1";
    dr[1] = "Row1 Column2";
    dr[2] = "Row1 Column3";
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr[0] = "Row2 Column1";
    dr[1] = "Row2 Column2";
    dr[2] = "Row2 Column3";
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr[0] = "Row3 Column1";
    dr[1] = "Row3 Column2";
    dr[2] = "Row3 Column3";
    dt.Rows.Add(dr);

    ds.Tables.Add(dt);

    Response.ContentType = "text/xml";
    ds.WriteXml(Response.OutputStream);
    Response.End();
}
生成されるXML

このデータを、DataGridにバインドするんですが、サーバーからデータを取得するには主にURLLoaderクラスを使用するようですが、 今回のサンプルでは、HTTPServiceクラスを使用してデータを取得してみます。
MXMLは以下のようになります。
<mx:HTTPService id="dataRequest" url="DataSetBind.aspx" />
<mx:DataGrid id="grid" width="400"
    dataProvider="{dataRequest.lastResult.DataSet.DataTable}">
    <mx:columns>
        <mx:DataGridColumn dataField="Column1" headerText="Column1" width="300" />
        <mx:DataGridColumn dataField="Column2" headerText="Column2" width="100" />
    </mx:columns>
</mx:DataGrid>
<mx:Button label="データを取得" click="dataRequest.send();" />
ボタンをクリックすると HTTPService の send メソッドが呼ばれて、url に指定しているページからデータを取得します。
リクエストの method はデフォルトでは GET です。
取得したデータには HTTPService の lastResult プロパティからアクセスできますので、そのデータを DataGrid の dataProvider に 指定することで、データ取得と同時に自動的にバインドされます。

dataProvider には dataRequest.lastResult.DataSet.DataTable と記述してありますが、これは HTTPService クラスが取得したXMLデータを パースして、XMLのタグ名と同じ名前のプロパティを持ち、かつXMLと同じツリー構造のオブジェクトを自動生成して返しているため、 このように簡単にXMLの要素を指定することが出来ます。
このデータ形式は、HTTPService の resultFormat を指定することで変更することが出来ます。

ActionScript 3 では E4X をサポートしていて、XMLデータに同様の 記述でアクセスできますが、上記のサンプルではE4XでXMLListにアクセスしているのではありませんので ご注意下さい。

以上のように、簡単にサーバーのXMLデータをバインドすることが出来ました。
ただし、Flash でも基本的には Ajax と同様に他のドメインのサーバーからデータを取得することは出来ません。

| | コメント (0) | トラックバック (0)

2006年7月25日 (火)

Flex2 コントロール - DataGrid -

DataGridのサンプルと簡単な使用例です。
コントロール サンプルページ
example.mxml

dataProviderにはXMLListなどを指定できます。
columnsプロパティ内にDataGridColumnをカラムの数だけ配置し、DataGridColumnのdataFieldプロパティにバインドするデータの名前を指定するだけで基本的にはOKのようです。
ソートや列の入れ替えもできます。

また、editableプロパティにtrueを設定することで、データを直接編集できるようになります。
editableプロパティはDataGridColumnも持っており、カラムごとに個別に設定できます。
<mx:XMLList id="exampleData">
    <data>
        <col1>Row1 Col1</col1>
        <col2>Row1 Col2</col2>
        <col3>Row1 Col3</col3>
    </data>
    <data>
        <col1>Row2 Col1</col1>
        <col2>Row2 Col2</col2>
        <col3>Row2 Col3</col3>
    </data>
    <data>
        <col1>Row3 Col1</col1>
        <col2>Row3 Col2</col2>
        <col3>Row3 Col3</col3>
    </data>
    <data>
        <col1>Row4 Col1</col1>
        <col2>Row4 Col2</col2>
        <col3>Row4 Col3</col3>
    </data>
</mx:XMLList>

<mx:DataGrid id="grid" dataProvider="{exampleData}" editable="true">
    <mx:columns>
        <mx:DataGridColumn dataField="col1" headerText="Column1" editable="false" />
        <mx:DataGridColumn dataField="col2" headerText="Column2" />
        <mx:DataGridColumn dataField="col3" headerText="Column3" />
    </mx:columns>
</mx:DataGrid>

列にチェックボックスを表示したり、値を編集する際にComboBoxを使用したいという場合も多いと思いますが、そのような事も可能なようです。
それらについては、また後日書いてみたいと思います。

| | コメント (0) | トラックバック (0)

2006年7月21日 (金)

サンプルページが見辛かったようです

FirefoxではFlex2のサンプルページが見辛かったですね。
さっき気がつきましたので、変更しました。

それから、ページを開いても何も表示されなかったりもしますね。
まだ理由はわかりませんが、何も表示されないときは、お手数ですが右クリック→再生で表示されるようです。
原因を調べないと・・・。

| | コメント (0) | トラックバック (0)