« 2006年6月 | トップページ | 2006年8月 »

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)

2006年7月20日 (木)

Flex2 コントロール - レイアウト・コンテナ Part2 -

Flex2のコンテナコントロール Part2 です。
コントロール サンプルページ
example.mxml

  • Panel
    TitleWindow のようにタイトル部分・内容部分を持ち、視覚的にはっきりとしたコンテナです。
    レイアウトというよりも、見た目をわかりやすくする目的で使用するんじゃないでしょうか。
    それ以外は Box と大きくは違わないように思います。
    使用頻度の高いコンテナだと思います。
    <mx:Panel title="Panel">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Panel>
  • Canvas
    Boxに似ていますが、大きな違いは中に配置するコントロールにX、Y座標を指定する点です。
    Canvasの中では、CSS の position が absolute になるというイメージのようです。
    <mx:Canvas>
        <mx:Button label="button1" x="0" y="0" />
        <mx:Button label="button2" x="10" y="50" />
        <mx:Button label="button3" x="50" y="75" />
    </mx:Canvas>
  • DividedBox(HDividedBox・VDividedBox)
    中の要素はスプリッターで仕切られ、リサイズ可能となるコンテナです。
    Windows のエクスプローラで、左のツリーと右のリストビューの間の仕切りを ドラッグしてリサイズするのと同様の操作となります。
    direction に horizontal を指定すると横方向、vertical を指定すると縦方向となります。
    これは、それぞれHDividedBox と VDividedBox と同等になります。
    <mx:DividedBox direction="horizontal">
        <mx:Tree height="100%" />
        <mx:DataGrid height="100%" />
    </mx:DividedBox>
  • Form
    入力フォームをレイアウトする際に使用するようです。
    この中で、さらにFormItemを使用してTextInputやComboBoxなどを配置できます。
    FormItem には label プロパティがあり、ここに入力欄に対するラベルを設定します。
    また、入力必須の項目の場合は、FormItem の required を true にすると、ラベルの横に 赤い * 印が自動的に表示され、ユーザーに入力必須であることを知らせることができます。
    <mx:Form>
        <mx:FormItem label="氏名 :" required="true">
            <mx:TextInput width="300" />
        </mx:FormItem>
        <mx:FormItem label="性別 :" required="true" direction="horizontal">
            <mx:RadioButton groupName="group" label="男性" />
            <mx:RadioButton groupName="group" label="女性" />
        </mx:FormItem>
    </mx:Form>
  • ControlBar
    Panel または TitleWindow の下の部分にコントロールを配置する際に使用するようです。
    TitleWindow に OK、Cancel ボタンを配置する時などに使用すると良さそうです。
    配置する際は、Panel、TitleWindow の終了タグの直前に記述しなければならないようです。
    <mx:Panel title="ControlBar Test">
        <mx:TextArea width="100%" height="100%" />
        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="保存" />
            <mx:Button label="リセット" />
        </mx:ControlBar>
    </mx:Panel>

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

2006年7月19日 (水)

Flex2 コントロール - レイアウト・コンテナ Part1 -

画面をレイアウトする際に使用するコンテナのサンプルと簡単な使用例です。
コントロール サンプルページ
example.mxml

  • HBox
    中身を横方向に配置するBoxです。
    Boxのdirectionにhorizontalを指定した場合と同じようです。
    BoxはHTMLの div タグのような感覚で使用できそうです。
    <mx:HBox>
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:HBox>
    
    <mx:Box direction="horizontal">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Box>
  • VBox
    中身を縦方向に配置するBoxです。
    Boxのdirectionにverticalを指定した場合と同じようです。
    <mx:VBox>
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:VBox>
    
    <mx:Box direction="vertical">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Box>
  • Grid
    中身を格子状に配置します。
    HTMLの table タグのような感覚で使用できそうです。
    GridRowで行を区切ります。
    列はGridItemの中身の数で自動的に調整されるようです。
    <mx:Grid>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="Row1 Col1" />
                <mx:Button label="Row1 Col2" />
                <mx:Button label="Row1 Col3" />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="Row2 Col1" />
                <mx:Button label="Row2 Col2" />
                <mx:Button label="Row2 Col3" />
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
  • Tile
    こちらも、中身を格子状に配置する際に使用します。
    Gridと違い、列や行の数が大きさや中身の数によって変化します。
    width 及び height を指定すると、それに収まるように自動調整されるようです。
    指定しない場合は、中身の数のよってバランスよく配置されるように自動調整されるようですね。
    direction に vertical を指定すると配置順が縦方向になります。
    <mx:Tile>
        <mx:Button label="1" />
        <mx:Button label="2" />
        <mx:Button label="3" />
        <mx:Button label="4" />
        <mx:Button label="5" />
        <mx:Button label="6" />
        <mx:Button label="7" />
        <mx:Button label="8" />
        <mx:Button label="9" />
    </mx:Tile>
  • Spacer
    スペーサーです。
    width 及び height に間隔を指定します。
    <mx:Label text="label" />
    <mx:Spacer width="20" />
    <mx:Button label="button1" />

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

2006年7月18日 (火)

Flex2 コントロール - ナビゲーション -

Flex2のコントロールのうち、ユーザーをナビゲートする際に使用しそうなコントロールのサンプルです。
これらは、HTMLではなかなか作るのが大変なものですが、Flex2では簡単に利用できますね。
コントロール サンプルページ
example.mxml

  • Tree
    ツリービューです。
    階層構造を持つオブジェクトを表示する際には欠かせませんね。
    dataProviderにはXMLListなどを指定できるようです。
    <mx:Tree labelField="@label" width="200">
        <mx:dataProvider>
            <mx:XMLList>
                <TreeItem label="TreeItem1">
                    <Item label="Item1">
                        <SubItem label="SubItem1" />
                        <SubItem label="SubItem2" />
                    </Item>
                    <Item label="Item2" />
                </TreeItem>
                <TreeItem label="TreeItem2">
                    <Item label="Item1" />
                    <Item label="Item2" />
                </TreeItem>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:Tree>
  • MenuBar
    メニューバーです。
    Tree同様にdataProviderにはXMLListなどを指定できるようです。
    itemClickイベントにMenuItemがクリックされた際のイベントハンドラを記述します。
    <mx:MenuBar labelField="@label" itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:XMLList>
                <Menu label="Menu1">
                    <MenuItem label="MenuItem1">
                        <MenuSubItem label="MenuSubItem1" />
                        <MenuSubItem label="MenuSubItem2" />
                    </MenuItem>
                    <MenuItem label="MenuItem2" />
                </Menu>
                <Menu label="Menu2">
                    <MenuItem label="MenuItem1" />
                    <MenuItem label="MenuItem2" />
                </Menu>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:MenuBar>
  • TabNavigator
    タブです。
    タブの中身はVBoxで分けるようです。
    VBoxについては、後日サンプルなどを書きたいと思います。
    <mx:TabNavigator width="200" height="200">
        <mx:VBox label="Tab1"><mx:Label text="Tab1" /></mx:VBox>
        <mx:VBox label="Tab2"><mx:Label text="Tab2" /></mx:VBox>
        <mx:VBox label="Tab3"><mx:Label text="Tab3" /></mx:VBox>
        <mx:VBox label="Tab4"><mx:Label text="Tab4" /></mx:VBox>
    </mx:TabNavigator>
  • Accordion
    Outlookで使用されていたような、アコーディオンバーです。
    複数のコントロールをグループ化し、選択されたグループのみを展開して表示するコントロールです。
    VBoxでグループを分けるようです。
    <mx:Accordion width="200" height="200">
        <mx:VBox label="Accordion Button1">
            <mx:Label text="Accordion Panel1" />
        </mx:VBox>
        <mx:VBox label="Accordion Button2">
            <mx:Label text="Accordion Panel2" />
        </mx:VBox>
        <mx:VBox label="Accordion Button3">
            <mx:Label text="Accordion Panel3" />
        </mx:VBox>
        <mx:VBox label="Accordion Button4">
            <mx:Label text="Accordion Panel4" />
        </mx:VBox>
    </mx:Accordion>

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

2006年7月17日 (月)

Flex2 コントロール - Window・Dialog -

Flex2のメッセージAlertとウィンドウのサンプルと簡単な使用例です。
コントロール サンプルページ
example.mxml
LoginWindow.mxml

  • Alert
    メッセージボックスです。
    staticなshowメソッドで表示します。
    表示するボタンは第3引数でAlert.OK、Alert.CANCEL、Alert.YES、Alert.NOを指定します。
    第5引数にはクローズ時のイベントハンドラを指定できます。
    <mx:Button label="Click"
        click="mx.controls.Alert.show('よろしですか?','確認',
        Alert.YES|Alert.NO, null, closeHandler);" />
  • TitleWindow
    モーダル・モードレスウィンドウです。
    PopUpManagerと併用して表示するようです。
    PopUpManagerのcreatePopUpメソッドの第3引数にtrueを指定するとモーダル、falseならモードレスとなります。
    SDKのサンプルを見ながら少し触ってみただけですが、今のところ、とても使い辛い印象です。
    <mx:Script>
    <![CDATA[
    import mx.controls.*;
    import mx.managers.*;
    
    function popUpLoginWindow() : void{
        var window:LoginWindow = LoginWindow(
            PopUpManager.createPopUp(this, LoginWindow, true));
        
        PopUpManager.centerPopUp(window);
        window.UserName = this.userName;
        window.Password = this.password;
    }
    ]]>
    </mx:Script>
    <mx:Button label="Click" click="popUpLoginWindow();" />
    <mx:Text id="userName" /><mx:Text id="password" />
    LoginWindow.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="login">
        <mx:Script>
        <![CDATA[
        import mx.managers.PopUpManager;
        import mx.controls.Text;
        
    
        public var UserName : Text;
        public var Password : Text;
    
        function okClicked() : void{
            this.UserName.text = userName.text;
            this.Password.text = password.text;
            PopUpManager.removePopUp(this);
        }
        ]]>
        </mx:Script>
        <mx:VBox>
            <mx:HBox>
                <mx:Label text="ユーザー名 :" />
                <mx:TextInput id="userName" />
            </mx:HBox>
            <mx:HBox>
                <mx:Label text="パスワード :" />
                <mx:TextInput id="password" displayAsPassword="true" />
            </mx:HBox>
            <mx:HBox>
                <mx:Button label="OK" click="okClicked();" />
                <mx:Button label="キャンセル"
                    click="PopUpManager.removePopUp(this);" />
            </mx:HBox>
        </mx:VBox>
    </mx:TitleWindow>
    

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

2006年7月15日 (土)

Flex2 コントロール - ボタン -

使用頻度の高いボタン系コントロールですが、Flex2では数種類用意されているようです。
以下、サンプルと簡単な説明です。
コントロール サンプルページ
サンプルのMXMLファイル

  • Button
    通常のボタンです。
    labelプロパティでラベルを取得・設定できます。
    clickイベントでクリック時の処理を行います。
    <mx:Button label="Click" click="mx.controls.Alert.show('クリックされました');" />
  • ButtonBar
    複数のボタンを1つのグループとして扱うことが出来ます。
    dataProviderプロパティに配列などを指定して複数のボタンを生成できます。
    itemClickイベントでクリック時の処理を行います。その際、event.indexで何番目のボタンが押されたかを知ることが出来ます。 また、event.labelで押されたボタンのラベルを取得できます。
    <mx:ButtonBar itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>Button1</mx:String>
                <mx:String>Button2</mx:String>
                <mx:String>Button3</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>
    
  • ToggleButtonBar
    ButtonBarのトグルボタン版です。
    グループ内のボタンのうち、1つだけが選択状態となります。
    RadioButtonの見た目がボタンになったような感じです。
    使用方法はButtonBarと同じようです
    <mx:ButtonBar itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>Button1</mx:String>
                <mx:String>Button2</mx:String>
                <mx:String>Button3</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>
    
  • LinkButton
    リンクボタンです。
    labelプロパティでラベルを取得・設定できます。
    clickイベントでクリック時の処理を行います。
    <mx:LinkButton label="Click"
        click="mx.controls.Alert.show('クリックされました');" />
  • PopUpButton
    見た目はコンボボックスのようですが、ボタンです。
    popUpプロパティにポップアップされるものを指定することが出来ます。
    右の三角の部分を押すとポップアップされる動きはコンボボックスと同じですが、ポップアップされるものとしてIUIComponentインターフェイスを 実装してるものを指定できる点が面白いです。
    以下の例はカレンダーをポップアップするサンプルです。
    ただ、どういう時に使うのか思い浮かびません。
    <mx:PopUpButton id="popupButton" width="170"
        click="mx.controls.Alert.show(popupButton.label);">
        <mx:popUp>
            <mx:DateChooser id="dateChooser"
                change="popupButton.label=dateChooser.selectedDate.toLocaleDateString();
                    popupButton.close();" />
        </mx:popUp>
    </mx:PopUpButton>
  • PopUpMenuButton
    PopUpButtonのMenu版です。
    PopUpButton以上に使い道が思い浮かびません。
    <mx:PopUpMenuButton id="menuButton" width="120" labelField="@label"
             click="mx.controls.Alert.show(menuButton.label);"
            itemClick="menuButton.label=event.label;">
        <mx:dataProvider>
            <mx:XMLList>
                <item label="MenuItem1" />
                <item label="MenuItem2">
                    <subitem label="SubItem1" />
                    <subitem label="SubItem2" />
                </item>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:PopUpMenuButton>

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

2006年7月14日 (金)

Flex2 コントロール - 入力系 -

Flex2では、標準で豊富なコントロールが用意されていますが、その中の入力系コントロールについての表示例と簡単な説明です。
コントロール サンプルページ
サンプルのMXMLファイル

  • TextInput
    通常のテキストボックスです。
    textプロパティで値を取得・設定できます。
    <mx:TextInput text="value" />
  • TextArea
    複数行のテキストエリアです。
    textプロパティで値を取得・設定できます。
    <mx:TextArea text="value" />
  • NumericStepper
    数値入力用のテキストボックスで、上下のボタンで指定した値を増減出来ます。
    valueプロパティで値を取得・設定できます。
    <mx:NumericStepper value="value" />
  • CheckBox
    チェックボックスです。
    selectedプロパティでチェック状態を取得・設定できます。 labelプロパティでラベルを設定します。
    <mx:CheckBox selected="true" label="Check1" />
  • RadioButton
    ラジオボタンです。
    selectedプロパティでチェック状態を取得・設定できます。
    groupNameプロパティに同じ名前を指定することで、グループ化します。
    labelプロパティでラベルを設定します。
    <mx:RadioButton groupName="group1" label="Radio1" selected="true" />
    <mx:RadioButton groupName="group1" label="Radio2" />
  • ComboBox
    コンボボックスです。
    selectedItemプロパティで選択された項目を取得できます。
    editableプロパティをtrueにすると入力も可能となります。デフォルトではfalseになっています。
    dataProviderに配列などを指定すると、データをバインドできます。
    promptプロパティには、未選択時の文字列を設定します。 選択を必須とする場合などに「選択してください...」といった文字列を入れておくとよいと思います。
    <mx:ComboBox editable="true" dataProvider="{data}" />
  • List
    リストボックスです。
    selectedItemプロパティで選択された項目を取得できます。
    editableプロパティをtrueにすると入力も可能となります。デフォルトではfalseになっています。
    dataProviderに配列などを指定すると、データをバインドできます。
    <mx:List editable="true" dataProvider="{data}" />
  • HSlider、VSlider
    スライダーコントロールです。
    HSliderは横向き、VSliderは縦向きに配置されます。
    labelsプロパティでラベルを設定します。(配列で複数設定)
    valueプロパティで値を取得・設定します。
    minimumプロパティで最小値を設定します。(デフォルトは0)
    maximumプロパティで最大値を設定します。(デフォルトは10)
    tickIntervalプロパティでメモリ間隔を設定します。(デフォルトは10)
    <mx:HSlider labels="['0','10']" value="5" tickInterval="1" />
  • DateField
    日付入力用のテキストボックスです。
    カレンダーを表示して日付を選択できます。
    デフォルトではカレンダーは英語表記となっています。
    yearSymbol、monthSymbol、monthNames、dayNames、formatStringなどのプロパティで表示をカスタマイズ出来ます。
    <mx:DateField>
        <mx:yearSymbol>年</mx:yearSymbol>
        <mx:monthNames>
            [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ]
        </mx:monthNames>
        <mx:monthSymbol>月</mx:monthSymbol>
        <mx:dayNames>["日", "月", "火", "水", "木", "金", "土"]</mx:dayNames>
        <mx:formatString>YYYY年MM月DD日</mx:formatString>
    </mx:DateField>
  • RichTextEditor
    フォント、文字サイズ、文字色などをユーザーが編集出来るテキストエリアです。
    textプロパティで値を取得・設定できます。
    htmlTextプロパティで書式情報も含めた値をHTML形式で取得・設定できます。
    <mx:RichTextEditor text="value" />

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

2006年7月10日 (月)

【Flex2】 イベントハンドラをセットする

Flex2で、ボタンを配置してボタンのイベントハンドラをセットするサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[

        function button_clicked() : void
        {
            mx.controls.Alert.show("OK");
        }

    ]]>
    </mx:Script>

    <mx:Button id="button" label="Click" click="button_clicked();" />
</mx:Application>
HTMLとJavaScriptの記述と似てますよね。
JavaScriptの window.alert() と同様の機能は、mx.controlsパッケージにあるAlertクラスのshowメソッドを使って出来ます。
function の後 :void というのがありますが、ActionScriptでは関数の戻り値の型をこのように記述します。

また、HTMLとJavaScriptと同じように、以下のようにaddEventListenerでイベントリスナーをセットすることも出来ます。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    applicationComplete="application_init();">
    <mx:Script>
    <![CDATA[

        function application_init() : void
        {
            this.button.addEventListener(
                "click", 
                function():void{
                    mx.controls.Alert.show("OK");
                },
                false
            );
        }
    ]]>
    </mx:Script>

    <mx:Button id="button" label="Click" />
</mx:Application>
JavaScriptと同様に、ActionScriptでも匿名関数を使用できますね。

HTML、CSS、JavaScriptに慣れているWeb開発者にとって、Flex2は非常に馴染やすいのではないでしょうか。

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

2006年7月 7日 (金)

Adobe Flex2 リリース & ついでにHello World

先日、もうすぐリリースになりそうと書きましたが、すでにリリースされていました。
Adobe Flex2

ドキュメントはまだ英語だけみたいです。
SDKはフリーとのことですので、早速ダウンロードしてみました。
レイアウトはMXMLと言われるXMLファイルで行うようです。
GUIのレイアウトはXMLで、というのが多くなってますね。

コンパイラはmxmlcとcompcの2種類あるようです。
mxmlcはMXMLのコンパイルを行いSWFファイル(アプリケーション)が、compcはActionScriptをコンパイルしてSWCファイル(コンポーネント)が出来るみたいです。

で、ダウンロードした以上は何か作りたいということで、早速以下のようなMXMLファイルを作成し、helloworld.mxmlという名前で保存しました。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Text text="Hello World" fontSize="20" />
</mx:Application>
さて、これをコンパイルするんですが、コンパイラがJavaを使用しているようで、JREへパスを通す作業が必要みたいです。
また、Flex2 SDKのbinやframeworkフォルダへもパスを通す必要があるようです。
そこで、今回は以下の様なバッチファイルを作りました。
@set SDK_PATH=D:\MyDocuments\Flex\flex_sdk_2
@set JAVA_PATH=C:\Program Files\Java\jdk1.5.0_06

@set PATH=%SDK_PATH%\bin;%SDK_PATH%\frameworks;%JAVA_PATH%\bin;%JAVA_PATH%\lib;%PATH%
@set LIB=%SDK_PATH%\lib;%LIB%
@set JAVA_HOME=%JAVA_PATH%\jre

mxmlc helloworld.mxml

@pause
これを実行して、めでたく helloworld.swf が完成しました。
そのファイルがこちらになります。
サンプルページを見るにはFlashPlayer 9 が必要です。

しばらくはこれで遊べそうです。
Flex2については、自分自身の備忘録を兼ねて勉強しながらボチボチ書いていこうと思います。

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

2006年7月 5日 (水)

Spry framework for Ajax

Adobeが提供しているJavaScriptライブラリに、Spry framework for Ajaxというものがあります。
使い方が他の多くのライブラリとは異なり、JavaScriptのコードは最小限のものしか記述せず、 HTMLに細工をしてサーバーのXMLデータをバインドするといった感じで、雰囲気としてはASPXに サーバーコントロールのタグを記述してバインドするような感じですかね。
BSDライセンスのもと、フリーで利用可能です。
詳細については、また後日書いてみたいと思います。

Flash Player 9もリリースされ、Flex 2のリリースも近いようですので、楽しみですね。

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

2006年7月 3日 (月)

prototype.js その他の便利機能 Part2

少し間があいてしましましたが、prototype.jsの便利な機能の続きです。

Positionクラス
このクラスは、要素の位置を操作する際に使用します。
positionedOffset メソッド
CSSスタイルのpositionを指定していない際に、要素の位置を得る場合に便利です。
引数は要素のインスタンスで、戻り値はleftとtopの数値が格納された配列です。
使用例:
var p = Position.positionedOffset($("ElementId"));
alert("left=" + p[0] + ",top=" + p[1]);

absolutize メソッド
CSSスタイルのpositionをabsoluteにし、位置も計算して設定してくれます。
このメソッドでは内部で$()関数を使用していますので、引数は要素のIDまたはインスタンスでOKです。
この辺は統一してもらえると助かりますね。
使用例:
Position.absolutize("ElementId");

Eventクラス
このクラスは、要素のイベントに関する機能を提供しています。
observe メソッド
addEventListenerの代わりとして使用することが出来ます。
IEはattachEventで、FirefoxなどはaddEventListenerでと使い分ける部分がカプセル化されています。
引数は要素のIDまたはインスタンス、イベント名、イベントを処理する関数、キャプチャを行うかどうかをtrueかfalseで指定します。
この関数で指定したコールバック関数には、引数としてEventオブジェクトが渡ってきます。
使用例:
Event.observe("ElementId", "click", CallbackFunc, false);

stopObserving メソッド
observeメソッドで追加したイベントリスナーを削除します。
引数はobserveメソッドと同じです。
使用例:
Event.stopObserving("ElementId", "click", CallbackFunc, false);

stop メソッド
イベントは親要素へ伝播していきます(イベントバブリング)が、それをキャンセルすることが出来ます。
引数は、イベントリスナーに渡されるEventオブジェクトです。
使用例:
function EventListener(e)
{
    ......
    Event.stop(e);
}

Form.Element.Observer クラス
Form要素の値の変更を監視することが出来ます。
コンストラクタ
Form要素の値の変更を監視する条件などをセットします。
引数は、Form要素のIDかインスタンス、監視する間隔(秒)、値変更時に呼び出される関数です。
使用例:
var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);

getValue メソッド
Form要素の値を取得します。
使用例:
var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);
function CallbackFunc()
{
    var v = w.getValue();
}


などなど、使用頻度の高そうなものを列挙してみましたが、他にもありますので機会があればまた書きたいと思います。

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

« 2006年6月 | トップページ | 2006年8月 »