构建简单的用户界面

使用控件

在 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>

 

使用基于按钮的控件

 

组件的 Button 系列包括 Button、LinkButton、CheckBox、RadioButton 和 PopupButton 控件。

 

Button 控件是一个常用的矩形按钮。Button 控件看起来就像被按下一样, 在其面上有一个文本标签、一个图标或全部两者。可以选择为几个 Button 状态的每一个指定图形外观。可以创建一个普通 Button 控件或一个切换 Button 控件。只要在选中之后按下鼠标按钮, 普通 Button 控件就会保持其被按下的状态。切换 Button 控件直到您又一次选中它之后, 才会保持被按下的状态。

 

当用户选中控件时, 按钮通常使用事件监听器来执行操作。 当用户在 Button 控件上单击鼠标, 且 Button 控件被启用时, 它会发出一个 click 事件和一个 buttonDown 事件。

 

LinkButton 控件创建一个支持可选图标的单行超文本链接。 它根本上是一个没有边框的 Button 控件。 可以使用 LinkButton 控件在 Web 浏览器中打开 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:[e-mail]&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>

 

使用基于列表的控件

 

基于列表的控件是在其继承层次结构内的某些点上扩展 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>