Flex3 快速入門：構建簡單的使用者介面 使用控制項

from：http://www.airia.cn/FLEX_Directory/using_controls/Flex3 快速入門：構建簡單的使用者介面 使用控制項[ 來源：Adobe.com ]
[ 作者：Adobe devnet ]
[ 日期：08-08-01 ]
[ 瀏覽：1018
次]

使用控制項

在 Adobe Flex 模型–視圖設計模式下, 使用者介面組件代表視圖。MXML 語言支援兩種使用者介面組件類型: 控制項和容器。容器是包含控制項和其他容器的螢幕的矩形地區。控制項是表單元素, 如按鈕、文字欄位和列表框。

存在許多類型的 Flex 控制項時, 此 QuickStart 描述三種最常見的控制項: 基於文本的控制項、基於按鈕的控制項和基於列表的控制項。

• 使用基於文本的控制項
  
  
• 使用基於按鈕的控制項
  
  
• 使用基於列表的控制項
  
  
• 使用基於文本的控制項基於文本的控制項用於顯示文本和/或接收來自使用者的文本輸入。

在 Flex 中提供的基於文本的控制項有 Label、Text、TextArea、TextInput 和 RichTextEditor
控制項。TextInput 和 TextArea 組件既可以顯示文本又可以接受使用者輸入, 而 Label 和 Text 控制項僅用於顯示文本。

Text 和 TextArea 控制項可以顯示跨多行的文本, 而 Label 和 TextInput 控制項用於顯示單行文本。

使用 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>

 

結果

若要查看全部原始碼, 請按右鍵 Flex 應用程式並從操作功能表中選擇“查看原始碼”。

使用基於按鈕的控制項

組件的 Button 系列包括 Button、LinkButton、CheckBox、RadioButton 和 PopupButton 控制項。

Button 控制項是一個常用的矩形按鈕。Button 控制項看起來就像被按下一樣,
在其面上有一個文字標籤、一個表徵圖或全部兩者。可以選擇為幾個 Button 狀態的每一個指定圖形外觀。可以建立一個普通 Button
控制項或一個切換 Button 控制項。只要在選中之後按下滑鼠按鍵, 普通 Button 控制項就會保持其被按下的狀態。切換 Button
控制項直到您又一次選中它之後, 才會保持被按下的狀態。

當使用者選中控制項時, 按鈕通常使用事件監聽器來執行操作。 當使用者在 Button 控制項上單擊滑鼠, 且 Button 控制項被啟用時, 它會發出一個 click 事件和一個 buttonDown 事件。

LinkButton 控制項建立一個支援可選表徵圖的單行超文本連結。 它根本上是一個沒有邊框的 Button 控制項。 可以使用 LinkButton 控制項在 網頁瀏覽器中開啟 URL。

CheckBox 控制項是一個常用的圖形控制項, 它可以包含一個核取記號或者未被選中 (空)。 在需要收集一組並不相互排斥的 true 或
false 值的地方, 可以使用 CheckBox 控制項。 可以給 CheckBox 控制項添加文字標籤,
並將文字標籤置於複選框的左側、右側、頂部或底部。 Flex 會裁剪 CheckBox 控制項的標籤以適合控制項的邊界。

使用 RadioButton 控制項, 使用者可以在一組相互排斥的選項內作單一選擇。RadioButtonGroup
控制項由具有相同組名的兩個或更多 RadioButton 控制群組成。該組可以指由 <mx:RadioButtonGroup>
標籤建立的組。使用者一次僅選擇該組的一個成員。選擇某個未選中的群組成員會取消選中該組內當前選中的 RadioButton 控制項。

PopUpButton 控制項給 Button 控制項添加一個靈活的彈出控制項介面。它包含一個主按鈕和一個輔助按鈕,
這個輔助按鈕也稱為退出鍵, 當使用者單擊該退出鍵時, 它會彈出任何 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 (&apos;mailto:comments@somewhere.com&apos;));";
               
                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>

 

結果

若要查看全部原始碼, 請按右鍵 Flex 應用程式並從操作功能表中選擇“查看原始碼”。

使用基於列表的控制項

基於列表的控制項是在其繼承階層內的某些點上擴充 ListBase 類的那些控制項。它們包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控制項。

幾個 Flex 架構組件 (包括所有基於列表的控制項) 表示來自某個資料提供者的資料, 資料提供者是一個包含控制項所需資料的對象。例如,
一個 Tree 控制項的資料提供者確定樹的結構和分配給每個樹節點的相關聯的資料, 而一個 ComboBox
控制項的資料提供者確定控制項的下拉式清單中的項目。

注意: 許多標準控制項 (包括 ColorPicker 和 MenuBar 控制項)
也從資料提供者擷取資料。顯示應用程式資料的控制項有時被稱為資料提供者控制項。有關使用資料提供者的詳細資料, 請參閱 Flex 2
開發人員指南*中的“使用資料提供者和集合”。

您可以使用兩種方法設定組件的資料提供者: 第一種方法是通過將 Array 或 Collection
定義為取得資料提供者的控制項的子標籤, 線上上在 MXML 中定義資料提供者。這種方法具有實施快速的優點,
適合與待用資料一起使用及用於原型設計。第二種方法是使用資料繫結將控制項綁定到使用 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&apos;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>

結果

若要查看全部原始碼, 請按右鍵 Flex 應用程式並從操作功能表中選擇“查看原始碼”。