Developing applications

开发应用程序

MXML development is based on the same iterative process used for other types of web application files such as HTML, JavaServer Pages (JSP), Active Server Pages (ASP), and ColdFusion Markup Language (CFML). Developing a useful Flex application is as easy as opening your favorite text editor, typing some XML tags, saving the file, requesting the file's URL in a web browser, and then repeating the same process.

MXML开发与其他的Web应用开发相似，比如HTML，JavaServer Pages(JSP)，Active Service Pages(ASP)和ColdFunsion Markup Language (CFML)。开发一个Flex应用很简单，打开你的文本编辑器，输入一些XML标签，保存这个文件，然后将这个文件的URL放到浏览器上，就可以看到结果了。

Laying out a user interface using containers

通过容器设计用户接口

In the Flex model-view design pattern, user interface components represent the view. The MXML language supports two types of user interface components: controls and containers. Controls are form elements, such as buttons, text fields, and list boxes. Containers are rectangular regions of the screen that contain controls and other containers.

在Flex的模型-视图设计模式中，用户接口组件在视图中展示出来。MXML语言支持两种类型的用户接口组件：控制组件和容器组件。控制组件是一些表单元素，如butttons, text fileds和list boxes。容器是包含了控制组件和其他容器的一个矩形的区域。

You use container components for laying out a user interface, and for controlling user navigation through the application. Examples of layout containers include the HBox container for laying out child components horizontally, the VBox container for laying out child components vertically, and the Grid container for laying out child components in rows and columns. Examples of navigator containers include the TabNavigator container for creating tabbed panels, the Accordion navigator container for creating collapsible panels, and the ViewStack navigator container for laying out panels on top of each other.

你可以用容器组件去设计用户接口，在应用中控制用户的操作。比如说，布局容器包括HBox容器，它是用来将子组件水平摆放，VBox容器将子组件垂直摆放，Grid容器将子组件以行列的形式展示。导航容器的例子有TabNavigator容器，它用来创建Tab面板，Accordion容器用来创建可伸展的面板，ViewStack导航容器将面板相互叠加。

The Container class is the base class of all Flex container classes. Containers that extend the Container class add their own functionality for laying out child components. Typical properties of a container tag include id , width , and height .

Container类是所有Flex容器的基类。容器通过集成Container class，增加自己的功能，来实现子容器。典型的容器标签包括id,width和height。

The List control and TabNavigator container are laid out side by side because they are in an HBox container. The controls in the TabNavigator container are laid out from top to bottom because they are in a VBox container.

List标签容器与TabNavigator容器分别在各自的旁边，因为它们在一个HBox容器中。在TabNavigator中的容器是从上到下排列，因为它们在一个VBox容器中。

Adding user interface controls

添加用户控制接口

Flex includes a large selection of user interface components, such as Button , TextInput , and ComboBox controls. After you define the layout and navigation of your application by using container components, you add the user interface controls.

Flex包含了许多用户接口组件，比如Button,TextInput和ComboBox等。当你定义好了应用的界面布局并且通过容器组件来控制你的应用时，你就添加了用户控制接口。

The following example contains an HBox (horizontal box) container with two child controls, a TextInput control and a Button control. An HBox container lays out its children horizontally.

下面这例子是一个包含有两个子控制组件，一个TextInput，一个Button的HBox容器。HBox容器将它的子容器横向排放。

<?xml version="1.0"?>
<!-- mxml/AddUIControls.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function storeZipInDatabase(s:String):void {
                // event handler code here
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:TextInput id="myText"/>
        <mx:Button click="storeZipInDatabase(myText.text)"/>
    </mx:HBox>

</mx:Application>

Typical properties of a control tag include id , width , height , fontSize , color , event listeners for events such as click and change , and effect triggers such as showEffect and rollOverEffect.
一个典型的控制标签包括id,width,height,fontSize,color,event listeners（如click和change），还有效果触发器，如showEffect何rollOverEffect等。

Using the id property with MXML tags

在MXML中使用id属性

With a few exceptions (see MXML tag rules ), an MXML tag has an optional id property, which must be unique within the MXML file. If a tag has an id property, you can reference the corresponding object in ActionScript.

除了很少一部分标签，一个MXML标签都有一个可选的id属性。这个id属性，在一个MXML文件中必须唯一。如果一个标签包含有id属性，那么，你可以在ActionScript中通过这个id去直接引用这标签对象。

In the following example, results from a web-service request are traced in the writeToLog function:

下面的例子中，一个通过web-service请求回来的数据通过writeToLog方法被记录下来：

<?xml version="1.0"?>
<!-- mxml/UseIDProperty.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:TextInput id="myText" text="Hello World!" />
        <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            private function writeToLog():void          {
                trace(myText.text);
            }
        ]]>
    </mx:Script>
</mx:Application>

This code causes the MXML compiler to autogenerate a public variable named myText that contains a reference to that TextInput instance. This autogenerated variable lets you access the component instance in ActionScript. You can explicitly refer to the TextInput control's instance with its id instance reference in any ActionScript class or script block. By referring to a component's instance, you can modify its properties and call its methods.

这段代码会让MXML编译器生成一个名叫myText的公共的变量，这个变量指向了那个TextInput实例。这个自动生成的变量可以让你在ActionScript中访问它所指向的实例。你可以在ActionScript类或script块中通过这id直接操作那个TextInput实例。通过这个指向容器实例的引用，你可以修改它的属性调用它的方法。

Because each id value in an MXML file is unique, all objects in a file are part of the same flat namespace. You do not qualify an object by referencing its parent with dot notation, as in myVBox.myText.text.
由于一个MXML文件中每一个id都是唯一的，一个文件中的所有的对象都是同一个命名空间的一部分。因此，你不需要在引用一个对象时在前面指定它的父对象。

Using XML namespaces

使用XML命名空间

In an XML document, tags are associated with a namespace. XML namespaces let you refer to more than one set of XML tags in the same XML document. The xmlns property in an MXML tag specifies an XML namespace. To use the default namespace, specify no prefix. To use additional tags, specify a tag prefix and a namespace.

在一个XML文件中，标签是与命名空间相关联的。XML命名空间可以让你在同一个XML文件中引用更多的XML标签。在MXML标签中，xmlns属性指定了XML命名空间。如果要用默认的命名空间，不要加前缀。要用额外的标签，需要制定标签的前缀和命名空间。

For example, the xmlns property in the following <mx:Application> tag indicates that tags in the MXML namespace use the prefix mx: . The Universal Resource Identifier (URI) for the MXML namespace is http://www.adobe.com/2006/mxml.

例如，在下面的<mx:Application>标签中的xmlns属性指定了命名空间mx。这个MXML命名空间的URI是http://www.adobe.com/2006/mxml。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 XML namespaces give you the ability to use custom tags that are not in the MXML namespace. The following example shows an application that contains a custom tag called CustomBox. The namespace value containers.boxes.*

indicates that an MXML component called CustomBox is in the containers/boxes directory.

XML命名空间可以让你使用不在MXML命名空间的自定义的标签。下面这个例子展示了一个叫CustomBox的自定义标签。这个命名空间containers.boxes.*指定了一个叫CustomBox的组件在containers/boxes目录下。

<?xml version="1.0"?>
<!-- mxml/XMLNamespaces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="containers.boxes.*"
>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <MyComps:CustomBox/>
    </mx:Panel>
</mx:Application>

The containers/boxes directory can be a subdirectory of the directory that contains the application file, or it can be a subdirectory of one of the ActionScript source path directories assigned in the flex-config.xml file. If copies of the same file exist in both places, Flex uses the file in the application file directory. The prefix name is arbitrary, but it must be used as declared.

containers/boxes路径可以是一个包含应用文件路径的子路径，也可以是一个在flex-config.xml文件中指定的ActionScript源文件路径的子路径。如果在这两个路径下都包含这个文件，Flex使用的是应用程序文件路径。前缀名可以是任意的，但是用的时候必须和声明时的一样。

When using a component contained in a SWC file, the package name and the namespace must match, even though the SWC file is in the same directory as the MXML file that uses it. A SWC file is an archive file for Flex components. SWC files make it easy to exchange components among Flex developers. You exchange only a single file, rather than the MXML or ActionScript files and images, along with other resource files. Also, the SWF file inside a SWC file is compiled, which means that the code is obfuscated from casual view.

当使用了一个包含在SWC文件中的组件时，包名与命名空间必须相符，即使这个SWC文件与要使用它的MXML文件在同一路径下。SWC文件是一个Flex组件的存档文件。SWC文件使得组件在Flex开发者的相互使用中更加方便。你只需要用一个SWC文件，而不是MXML或ActionScript类，以及图片等其他资源文件进行交互。另外，SWC文件中的SWF文件经过了编译，也就是说在一般的视图下打开SWC文件，看到的将是乱码。

Using MXML to trigger run-time code

用MXML触发运行时代码

Flex applications are driven by run-time events, such as when a user selects a Button control. You can specify event listeners , which consist of code for handling run-time events, in the event properties of MXML tags. For example, the <mx:Button> tag has a click event property in which you can specify ActionScript code that executes when the Button control is clicked at run time. You can specify simple event listener code directly in event properties. To use more complex code, you can specify the name of an ActionScript function defined in an <mx:Script> tag.

Flex应用是由运行时的事件驱动的，如当一个用户选择了一个Button控制组件，你可以通过MXML标签的事件属性编写事件监听器，来处理运行时的事件。如：<mx:Button>标签有一个click事件属性，通过这个属性，你可以用一段ActionScript代码控制当这个button在运行时被点击后的动作。你可以直接在事件属性中编写简单的事件监听器。如果要用更复杂的代码，你可以在事件属性中指定监听器的名字，这个监听器被定义在<mx:Script>标签中。

The following example shows an application that contains a Button control and a TextArea control. The click property of the Button control contains a simple event listener that sets the value of the TextArea control's text property to the text Hello World。
下面这个例子展现的是一个包含了一个Button和一个TextArea的应用。Button组件的click属性指定一个监听器，它会将TexaArea的text属性设置为Hello,World。

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="textarea1.text='Hello World';"/>
    </mx:Panel>
</mx:Application>

The following example shows the code for a version of the application in which the event listener is contained in an ActionScript function in an <mx:Script> tag:

下面是一段包含在<mx:Script>标签中定义的监听器代码：

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function hello():void {
                textarea1.text="Hello World";
            }
        ]]>
    </mx:Script>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="hello();"/>

    </mx:Panel>
</mx:Application>

Binding data between components

组件中的数据绑定

Flex provides simple syntax for binding the properties of components to each other. In the following example, the value inside the curly braces ({ }) binds the text property of a TextArea control to the text property of a TextInput control. When the application initializes, both controls display the text Hello . When the user clicks the Button control, both controls display the text Goodbye .

Flex提供了一套简单语法用来将组件间的属性进行绑定。下面的例子中，在{}中的值将一个TexaArea的text属性与一个TextInput的text属性相绑定。当应用初始化时，两个组件都会显示Hello。当用户点击Button时，两个组件会同时显示Goodbye.

<?xml version="1.0"?>
<!-- mxml/BindingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextInput id="textinput1" text="Hello"/>
        <mx:TextArea id="textarea1" text="{textinput1.text}"/>
        <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>
    </mx:Panel>
</mx:Application>

As an alternative to the curly braces ({ }) syntax, you can use the <mx:Binding> tag, in which you specify the source and destination of a binding.

与{}有相同功效的是<mx:Binding>标签，你可指定源和目的进行数据绑定。

Using RPC services

使用RPC服务

Remote-procedure-call (RPC) services let your application interact with remote servers to provide data to your applications, or for your application to send data to a server.

远程方法调用(RPC)服务可以让你的应用与远程服务器通信并获得数据，或者向远程服务器发送数据。

Flex is designed to interact with several types of RPC services that provide access to local and remote server-side logic. For example, a Flex application can connect to a web service that uses the Simple Object Access Protocol (SOAP), a Java object residing on the same application server as Flex using AMF, or an HTTP URL that returns XML.

Flex设计了几种与本地和远程服务器通信的RPC服务方式。例如，一个Flex应用可以通过SOAP协议进行web service通信，并返回AMF(Action Message Format)对象，或者是一个HTTP请求，返回XML数据。

The MXML components that provide data access are called RPC components. MXML includes the following types of RPC components:

提供数据访问的MXML组件叫做RPC组件。MXML包括以下RPC组件：

• WebService provides access to SOAP-based web services.
• HTTPService provides access to HTTP URLs that return data.
• RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only).
• WebService 提供了基于SOAP的web服务
• HTTPService提供了通过HTTP URL访问并返回数据的方式
• RemoteObject提供了用AMF协议访问Java对象（只适用于Adobe LiveCycle Data Service ES）
  

The following example shows an application that calls a web service that provides weather information, and displays the current temperature for a given ZIP code. The application binds the ZIP code that a user enters in a TextInput control to a web service input parameter. It binds the current temperature value contained in the web service result to a TextArea control.

下面的例子展示的是一个Flex应用通过调用web service获得天气信息并根据给出的地区编码获得当前的温度。应用将TextInput中的地区编码与web service输入参数绑定，并将web service中获得的当前温度值与TexaArea绑定。

<?xml version="1.0"?>
<!-- mxml/RPCExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the web service connection
        (the specified WSDL URL is not functional). -->
    <mx:WebService id="WeatherService"       
        wsdl="http:/example.com/ws/WeatherService?wsdl" 
        useProxy="false">

        <!-- Bind the value of the ZIP code entered in the TextInput control
            to the ZipCode parameter of the GetWeather operation. -->
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zip.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Provide a ZIP code in a TextInput control. -->
        <mx:TextInput id="zip" width="200" text="Zipcode please?"/>

        <!-- Call the web service operation with a Button click. -->
        <mx:Button width="60" label="Get Weather"
            click="WeatherService.GetWeather.send();"/>

        <!-- Display the location for the specified ZIP code. -->
        <mx:Label text="Location:"/>
        <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/>

        <!-- Display the current temperature for the specified ZIP code. -->
        <mx:Label text="Temperature:"/>
        <mx:TextArea
            text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
    </mx:Panel>
</mx:Application>

Storing data in a data model

在数据模型中存储数据

You can use a data model to store application-specific data. A data model is an ActionScript object that provides properties for storing data, and optionally contains methods for additional functionality. Data models provide a way to store data in the Flex application before it is sent to the server, or to store data sent from the server before using it in the application.

你可以用一个数据模型存储应用中的数据。数据模型是一个提供了存储数据的ActionScript对象，并可以增加一些方法对功能进行扩展。数据模型提供了一种将数据发送到服务端前进行存储的方式，或缓存从服务端回来的数据。

You can declare a simple data model that does not require methods in an <mx:Model> , <mx:XML> , or <mx:XMLList> tag. The following example shows an application that contains TextInput controls for entering personal contact information and a data model, represented by the <mx:Model> tag, for storing the contact information:

你可以在<mx:Model>,<mx:XML>或<mx:XMLList>中声明一个没有方法的简单数据模型。下面的例子是一个包含了用于输入个人信息的TextInput和一个由<mx:Model>声明的用于存储这些信息的数据模型。

<?xml version="1.0"?>
<!-- mxml/StoringData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>

Validating data

数据验证

You can use validator components to validate data stored in a data model, or in a Flex user interface component. Flex includes a set of standard validator components. You can also create your own.

你可以通过数据验证组件对存储在数据模型或Flex用户接口中的数据进行验证。Flex包含一组标准的数据验证组件。你也可以自定义自己的验证组件。

The following example uses validator components for validating that the expected type of data is entered in the TextInput fields. Validation is triggered automatically when the user edits a TextInput control. If validation fails, the user receives immediate visual feedback.

下面的例子是一个通过数据验证组件验证输入到TextInput中数据。当用户对一个TextInput进行编辑操作时，验证会自动触发。如果验证失败，用户可以立刻看到相关的错误提示信息。

<?xml version="1.0"?>
<!-- mxml/ValidatingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <!-- Validator components validate data entered into the TextInput controls. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{homePhoneInput}" property="text"/>
    <mx:PhoneNumberValidator id="pnV2" 
        source="{cellPhoneInput}" property="text"/>
    <mx:EmailValidator id="emV" source="{emailInput}" property="text" />

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>

Formatting data

数据格式化

Formatter components are ActionScript components that perform a one-way conversion of raw data to a formatted string. They are triggered just before data is displayed in a text field. Flex includes a set of standard formatters. You can also create your own formatters. The following example shows an application that uses the standard ZipCodeFormatter component to format the value of a variable:

格式化组件是一组ActionScript组件，它提供一种将原始数据格式化的方式。它们只会在在数据显示在文本区域后触发。Flex包含了一组标准的格式化组件。你也可以创建自己的格式化组件。下面是一个使用标准的格式化组件ZipCodeFormatter对数据进行格式化的例子。

<?xml version="1.0"?>
<!-- mxml/FormatterExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Declare a ZipCodeFormatter and define parameters. -->
    <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var storedZipCode:Number=123456789;
        ]]>
    </mx:Script>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Trigger the formatter while populating a string with data. -->
        <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> 
    </mx:Panel>
</mx:Application>

Using Cascading Style Sheets (CSS)

使用CSS

You can use style sheets based on the CSS standard to declare styles to Flex components. The MXML <mx:Style> tag contains inline style definitions or a reference to an external file that contains style definitions.

你可以使用基于标准CSS的样式表对Flex组件进行定义。<mx:Sytle>标签包含了内嵌的样式定义或一个指向外部样式定义文件的引用。

The <mx:Style> tag must be an immediate child of the root tag of the MXML file. You can apply styles to an individual component using a class selector, or to all components of a certain type using a type selector.

<mx:Style>标签必须是MXML文件跟标签的直接子标签。你可以通过一个类选择器将样式应用于单独的组件，或所有的组件。

The following example defines a class selector and a type selector in the <mx:Style> tag. Both the class selector and the type selector are applied to the Button control.

下面的例子在<mx:Style>中定义了一个类选择权和一个样式选择器。两个选择器都应用于Button控件上。

<?xml version="1.0"?>
<!-- mxml/CSSExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        .myClass { color: Red } /* class selector */
        Button { font-size: 18pt} /* type selector */
    </mx:Style>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Button styleName="myClass" label="This is red 18 point text."/>
    </mx:Panel>
</mx:Application>

Using skins

使用皮肤

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images. Skins can define the entire appearance, or only a part of the appearance, of a component in various states.

换肤是通过改变或替换组件的可视化原始进而改变组件样式的过程。这些元素可以是位图、SWF文件或包含绘图方法的类文件。通过换肤可以定义组件的全部或一部分表现。

Using effects

使用效果组件

An effect is a change to a component that occurs over a brief period of time. Examples of effects are fading, resizing, and moving a component. An effect is combined with a trigger , such as a mouse click on a component, a component getting focus, or a component becoming visible, to form a behavior . In MXML, you apply effects as properties of a control or container. Flex provides a set of built-in effects with default properties.

所谓效果是指在一段很短的时间内组件发生的一些变化。效果的一些例子如褪色、尺寸变换、组件移动等。一个效果会与一个触发器相结合，就像用鼠标点击一个组件，组件获得焦点或组件可视等一些行为。在MXML中，你可将效果作为组件或容器的属性使用。Flex定义了一些默认的内置效果。

The following example shows an application that contains a Button control with its rollOverEffect property set to use the WipeLeft effect when the user moves the mouse over it:

下面的例子是一个包含了rollOverEffect属性的button控件，当鼠标在控件上时，WipeLeft效果会被触发。

<?xml version="1.0"?>
<!-- mxml/WipeLeftEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the effect. -->
    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Assign effect to targets. -->
        <mx:Button id="myButton" rollOverEffect="{myWL}"/>
    </mx:Panel>
</mx:Application>

Defining custom MXML components

定义自定义MXML组件

Custom MXML components are MXML files that you create and use as custom MXML tags in other MXML files. They encapsulate and extend the functionality of existing Flex components. Just like MXML application files, MXML component files can contain a mix of MXML tags and ActionScript code. The name of the MXML file becomes the class name with which you refer to the component in another MXML file.

自定义MXML组件是你自己创建的MXML标签。它们继承已存在的Flex组件。就像MXML应用程序文件，MXML组件文件可以包含MXML标签和ActionScript代码。MXML文件的名字就是你在其他MXML文件中使用这个组件的类名。

The following example shows a custom ComboBox control that is prepopulated with list items:

下面的例子是一个自定义ComboBox组件：

<?xml version="1.0"?>
<!-- mxml/containers/boxes/MyComboBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:ComboBox >
        <mx:dataProvider>
            <mx:String>Dogs</mx:String>
            <mx:String>Cats</mx:String>
            <mx:String>Mice</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:VBox>

The following example shows an application that uses the MyComboBox component as a custom tag. The value containers.boxes.* assigns the MyComps namespace to the containers/boxes sub-directory. To run this example, store the MyComboBox.mxml file in that sub-directory.

下面的例子是一个应用使用MyComboBox自定义组件。containers.boxes.*指定了MyComps命名空间为containers/boxes子路径。运行这个例子需要将MyComboBox.mxml放在那个路径下。

<?xml version="1.0"?>
<!-- mxml/CustomMXMLComponent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10" 
    >
        <MyComps:MyComboBox/>
    </mx:Panel>
</mx:Application>