Flex クイックスタート：簡単なユーザインタフェースの作成

コントロールの使用

Adobe® Flex™ のモデル／ビューというデザインパターンでは、ユーザインタフェースのコンポーネントがビューを構成します。 MXML 言語は、コントロールとコンテナという 2 種類のユーザインタフェースのコンポーネントに対応しています。コンテナは画面上の四角形の領域で、コントロールと他のコンテナが含まれます。コントロールはボタン、テキストボックス、リストボックスなどのフォーム要素です。

Flex には多様なコントロールがありますが、このクイックスタートではもっともよく使われるテキストベース、ボタンベースおよびリストベースのコントロールについて説明します。

テキストベースのコントロールの使用
ボタンベースのコントロールの使用
リストベースのコントロールの使用

テキストベースのコントロールの使用

テキストベースのコントロールはテキストを表示したり、ユーザのテキスト入力を受け入れるために使用します。

Flex で使用できるテキストベースのコントロールには、Label、Text、TextArea、TextInput および RichTextEditor コントロールがあります。 TextInput および TextArea コンポーネントは両方ともテキストを表示し、ユーザの入力を受け入れることができますが、Label および Text コントロールはテキストを表示するためにだけ使用します。

Text および TextArea コントロールは複数行のテキストを表示できますが、Label および TextInput コントロールは 1 行のテキストを表示するためにだけ使用します。

RichTextEditor コントロールは、ユーザがテキストの入力、編集および書式設定を実行できるようにします。 RichTextEditor コントロールの下部にあるサブコントロールを使用して、ユーザがテキストの書式や URL を適用することができます。

テキストベースのコンポーネントはすべて text プロパティを持ちます。これを使用して表示するテキストを設定することができます。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsTextBased/index.html" 
    layout="horizontal" width="380" height="320"
    horizontalAlign="center" verticalAlign="middle" 
>
    <mx:Panel 
        title="Leave a comment" 
        paddingBottom="10" paddingTop="10" 
        paddingLeft="10" paddingRight="10"
    >
        <mx:Text 
            text="Fill out this form to leave us a comment:" 
            width="100%" 
        />            
        <mx:Label text="Name:" />
        <mx:TextInput id="userName" />
        <mx:Label text="Email:" />
        <mx:TextInput id="userEmail" />
        <mx:Label text="Comment:" />
        <mx:TextArea id="userComment" width="100%" />
    </mx:Panel>
</mx:Application>

結果

このコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

ボタンベースのコントロールの使用

Button ファミリーのコンポーネントには、Button、LinkButton、CheckBox、RadioButton および PopupButton コントロールがあります。

Button コントロールは一般的な四角形のボタンです。 Button コントロールは押すことができるような外観を持ち、表面にテキストラベルやアイコンが付きます。オプションで、いくつかの Button ステートにグラフィックスキンを指定することもできます。通常の Button コントロールまたはトグル Button コントロールを作成することができます。通常の Button コントロールは、選択してマウスボタンを押している間はずっと押された状態になります。トグル Button コントロールは、2 回目に選択するまで押された状態になります。

Button は通常、イベントリスナを使用して、ユーザがコントロールを選択したときにアクションを実行します。ユーザが Button コントロール上でマウスをクリックし、Button コントロールが有効になると、 click イベントと buttonDown イベントが送信されます。

LinkButton コントロールは 1 行のハイパーテキストリンクを作成します。これにはオプションのアイコンを使用することができます。要するに、これはボーダーのない Button コントロールです。 LinkButton コントロールを使用して、Web ブラウザで URL を開くことができます。

CheckBox コントロールはよく使用されるグラフィックコントロールで、チェックマークを付けたり、チェックを解除する（空にする）ことができます。 CheckBox コントロールは、相互に排他的でない真または偽の値を収集する場合にいつでも使用できます。 CheckBox コントロールにテキストラベルを追加して、チェックボックスの左、右、上または下に配置することができます。 Flex では、コントロールの境界に合わせて CheckBox コントロールのラベルが切り落とされます。

RadioButton コントロールは、相互に排他的な選択肢の中からユーザが 1 つを選択する場合に使用します。 RadioButtonGroup コントロールは、同じ groupName を持つ複数の RadioButton コントロールから構成されます。グループは、 <mx:RadioButtonGroup> タグによって作成されたグループを参照することができます。ユーザが一度に選択できるのはグループの 1 つの項目だけです。グループ内の選択されていない項目を選択すると、グループ内の現在選択されている RadioButton コントロールの選択が解除されます。

PopUpButton コントロールで Button コントロールに柔軟性の高いポップアップコントロールインタフェースを追加することができます。このコントロールはメインボタンとポップアップボタンと呼ばれる第 2 のボタンから構成されます。ユーザがポップアップボタンをクリックすると、UIComponent オブジェクトが表示されます。 PopUpButton コントロールの一般的な使い方として、ポップアップボタンで List コントロールまたは Menu コントロールを開いて、メインボタンの関数とラベルを変更する方法があります。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsButtonBased/index.html"
    layout="absolute" width="460" height="400"
>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            
            private const NL:String = "\r";
            
            private function submitButtonClickHandler (event:MouseEvent):void
            {
                var userDetails:String = "You submitted the following details:" + NL + NL;
                userDetails += "Name: " + userName.text + NL;
                userDetails += "Email: " + userEmail.text + NL;
                userDetails += "Hide email? " + (hideEmail.selected ? "Yes" : "No") + NL + NL;
                userDetails += "Comment:" + NL + NL + userComment.text;
                
                Alert.show (userDetails);    
            }
            
            private function emailButtonClickHandler (event:MouseEvent):void
            {
                var msg:String = "You can use the navigateToURL() method to open a URL"
                msg += " using a call similar to the following:\r\r";
                msg += "navigateToURL (new URLRequest ('mailto:comments@somewhere.com'));";
                
                Alert.show (msg);
            }
                    
        ]]>
    </mx:Script>
    
    <mx:Panel 
        title="Leave a comment" 
        left="10" top="10" right="10" bottom="10" 
        layout="absolute"
    >
        <mx:Text 
            text="Fill out this form to leave us a comment:" 
            width="250" x="10" y="10" fontWeight="bold"
        />            
        <mx:Label text="Name:"  x="10" y="38"/>
        <mx:TextInput id="userName" y="36" right="10" left="90"/>
        <mx:Label text="Email:"  x="10" y="68"/>
        <mx:TextInput id="userEmail" y="66" right="10" left="90"/>
        <mx:Label text="Comment:"  x="10" y="129"/>
        <mx:TextArea id="userComment" left="10" right="10" height="109" bottom="40"/>
        
        <mx:CheckBox 
            id="hideEmail" 
            y="103" left="90"
            label="Hide my email address" 
            selected="true" 
        />
        
        <mx:LinkButton 
            id="emailButton" 
            y="272" horizontalCenter="0"
            label="Having trouble? Email us!" 
            click="emailButtonClickHandler(event);" 
        />
        
        <mx:ControlBar x="120" y="258" horizontalAlign="center">
            <mx:Button 
                id="submitButton" label="Submit" 
                click="submitButtonClickHandler(event);"
            />
        </mx:ControlBar>
    
    </mx:Panel>
</mx:Application>

結果

このコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

リストベースのコントロールの使用

リストベースのコントロールは、内部継承階層のいずれかのポイントで ListBase クラスを拡張します。リストベースのコントロールには、ComboBox、List、HorizontalList、DataGrid、Tile、Menu および Tree コントロールがあります。

リストベースのコントロールを含むいくつかの Flex フレームワークのコントロールは、コントロールが必要とするデータを含むオブジェクトであるデータプロバイダのデータを表現します。たとえば、Tree コントロールのデータプロバイダによって、ツリーの構造およびツリーノードに割り当てる関連データが決定されます。また、ComboBox コントロールのデータプロバイダによって、コントロールのドロップダウンリストの項目が決定されます。

注意：ColorPicker や MenuBar コントロールなどの多くの標準コントロールも、データプロバイダからデータを取得します。アプリケーションデータを表示するコントロールは、データプロバイダコントロールと呼ばれることがあります。データプロバイダの使用について詳しくは、『Flex 2 Developer's Guide』の「Using Data Providers and Collections」を参照してください。

コンポーネントのデータプロバイダは 2 つの方法で設定できます。 1 つは MXML を使用してインラインでデータプロバイダを定義する方法です。この場合は、Array または Collection をデータプロバイダを使用するコントロールの子タグとして定義します。この方法のメリットは素早く実装できることで、静的データと共に使用する場合やプロトタイプに適切です。 2 つ目はデータバインディングを使用して、ActionScript を使用して定義した既存の Array または Collection にコントロールをバインディングする方法です。この後者の方法は、サーバサイド呼び出しによって生成されたデータを表示して、ActionScript で作成されたデータ構造にバインディングするために使用します。後者のほうが拡張が容易です。

次に両者の例を示します。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsListBased/index.html"
    layout="horizontal" width="460" height="360"
>

    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            private const NL:String = "\r";

            // A data provider created by using ActionScript
            [Bindable]
            private var subscriptions:ArrayCollection = 
                new ArrayCollection 
                (
                    [
                        {data:0, label:"Print"},
                        {data:1, label:"Website"},
                        {data:2, label:"RSS (text)"},
                        {data:3, label:"Podcast"} 
                    ]
                ); 

            private function submitButtonClickHandler(event:MouseEvent):void
            {
                var userDetails:String = "You submitted the following details:" + NL + NL;
                userDetails += "Name: " + userName.text + NL;
                userDetails += "Email: " + userEmail.text + NL;
                userDetails += "Site rating: " + userRating.selectedItem.label + NL + NL;
                userDetails += "Subscriptions:";
                
                var selectedSubscriptionItems:Array = userSubscriptions.selectedItems;
                for ( var i:String in selectedSubscriptionItems)
                {
                    // Display the selected subscriptions, separated by commas
                    userDetails += selectedSubscriptionItems[i].label + ", ";
                }
                // Remove the last comma and space from the string we're displaying
                userDetails = userDetails.substring(0, userDetails.length-2);                 
                
                Alert.show ( userDetails );    
            }
            
        ]]>
    </mx:Script>
    
    <mx:Panel 
        title="Feedback form" width="99%"
        paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" 
        layout="vertical"
    >
        <mx:Text 
            text="Thank you for giving us feedback:" 
            width="100%" fontWeight="bold"
        />            
        <mx:Form width="100%">
            <mx:FormItem label="Name:" width="100%">
                <mx:TextInput id="userName" />
            </mx:FormItem>
            <mx:FormItem label="Email:" width="100%">
                <mx:TextInput id="userEmail" />
            </mx:FormItem>
            <mx:FormItem label="Site rating:" width="100%">
                <mx:ComboBox id="userRating" width="100%">
                    <!-- An inline data provider -->
                    <mx:Array>
                        <mx:Object data="0" label="Zero" />
                        <mx:Object data="1" label="One" />
                        <mx:Object data="2" label="Two" />
                        <mx:Object data="3" label="Three" />
                        <mx:Object data="4" label="Four" />
                    </mx:Array>
                </mx:ComboBox>        
            </mx:FormItem>
            <mx:FormItem label="Subscriptions:" width="100%">
                <mx:List 
                    id="userSubscriptions" rowCount="3"
                    allowMultipleSelection="true" width="100%"
                    dataProvider="{subscriptions}"
                />
            </mx:FormItem>
        </mx:Form>
        
        <mx:ControlBar x="120" y="258" horizontalAlign="center">
            <mx:Button 
                id="submitButton" label="Submit" 
                click="submitButtonClickHandler(event);"
            />
        </mx:ControlBar>
    
    </mx:Panel>
</mx:Application>

結果

このコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

詳細情報

アセットの埋め込みについて詳しくは、『Flex 2 Developer's Guide』の「Using Controls」の章を参照してください。

著者について

Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。常に強固な意見を持ち、活気にあふれ情熱的。いつも笑顔を絶やさず、ガムをかみながら歩くこともある。

Flex クイックスタート： 簡単なユーザインタフェースの作成

コントロールの使用

テキストベースのコントロールの使用

例

結果

このコンテンツを視聴するには Flash が必要です

ボタンベースのコントロールの使用

例

結果

このコンテンツを視聴するには Flash が必要です

リストベースのコントロールの使用

例

結果

このコンテンツを視聴するには Flash が必要です

詳細情報

著者について

次のステップ

Flex クイックスタート：簡単なユーザインタフェースの作成