[Flex3] 어플리케이션 개발 / Developing applications

Reference : http://livedocs.adobe.com/flex/3/html/mxml_3.html#181565

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.

Flex also provides tools for code debugging. For more information, see Using the Command-Line Debugger.

Laying out a user interface using containers
컨테이너를 사용하여 사용자 인터페이스 배치

Flex 의 model-view 디자인 패턴에서, 사용자 인터페이스 컴포넌트는 뷰에서 보여집니다. MXML 언어는 컨트롤과 컨테이너라는 두 가지 종류의 사용자 인터페이스를 지원합니다. 컨트롤은 버튼, 텍스트 필드, 리스트 박스와 같은 폼 엘리먼트입니다. 컨테이너는 컨트롤이나 다른 컨테이너를 내부에 갖고 있는 화면의 사각형 영역입니다.

사용자 인터페이스를 배치하거나, 어플리케이션에서 사용자 navigation 제어를 위해 컨테이너 컴포넌트를 사용합니다. 레이아웃 컨테이너에는 내부 컴포넌트를 가로로 배치하는 HBox 컨테인너, 내부 컴포넌트를 세로로 배치하는 VBox 컨테이너, 내부 컴포넌트를 여러 행이나 여러 열로 배치하는 Grid 등이 있습니다. navigator 컨테이너에는 탭이 달린 패널을 생성하는 TabNavigator 컨테이너, 접을 수 있는 패널을 생성하는 Accordion navigator 컨테이너, 겹쳐질 수 있는 패널을 생성하는 ViewStack navigator 컨테이너 등이 있습니다.

Container 클래스는 모든 Flex 컨테이너 클래스가 상속하는 클래스입니다. Container 클래스를 확장한 컨테이너는 내부 컴포넌트를 배치하는 고유의 기능을 갖고 있습니다. 컨테이너 태그는 id, width, height 와 같은 일반적인 속성을 갖고 있습니다. 표준 Flex 컨테이너에 대해 더 많은 정보는 Introducing Containers 에서 볼 수 있습니다.

아래의 이미지는 사용자 인터페이스 왼편에 List 컨트롤이 있고, 오른쪽에 TabNavigator 컨테이너가 있는 Flex 어플리케이션의 예를 보여줍니다. Both controls are enclosed in a Panel container.

A. Panel 컨테이너 B. List 컨트롤 C. TabNavigator 컨테이너

이 어플리케이션을 구현하기 위해 아래의 코드를 사용하십시오:

<?xml version="1.0"?>
<!-- mxml/LayoutExample.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:HBox>
            <!-- 세 개의 아이템으로 구성된 List -->
            <mx:List>
                <mx:dataProvider>
                    <mx:Array>
                        <mx:String>Item 1</mx:String>
                        <mx:String>Item 2</mx:String>
                        <mx:String>Item 3</mx:String>
                    </mx:Array>
                </mx:dataProvider>
            </mx:List>

            <!-- TabNavigator 의 첫 번째 화면 -->
            <mx:TabNavigator borderStyle="solid">
                <mx:VBox label="Pane1" width="300" height="150">
                    <mx:TextArea text="Hello World"/>
                    <mx:Button label="Submit"/>
                </mx:VBox>

                <!-- TabNavigator 의 두 번째 화면 -->
                <mx:VBox label="Pane2" width="300" height="150">
                    <!-- Stock view goes here -->
                </mx:VBox>

            </mx:TabNavigator>
        </mx:HBox>
    </mx:Panel>
</mx:Application>

이 코드를 실행한 SWF 파일은 아래와 같다:

 
 

     

 
List 컨트롤과 TabNavigator 컨테이너는 HBox 컨테이너 안에 있어서 가로로 나란히 위치하게 됩니다. TabNavigator 컨테이너에 있는 컨트롤은 VBox 컨테이너 안에 있기 때문에 위에서 아래로 배치됩니다.

사용자 인터페이스 컴포넌트를 배치하는 거에 대한 자세한 정보는 Using Flex Visual Components 에서 볼 수 있습니다.

Adding user interface controls
사용자 인터페이스 컨트롤 추가

Flex 는 Button, TextInput, ComboBox 컨트롤과 같은 사용자 인터페이스 컴포넌트를 다수 포함합니다. 컨테이너 컴포넌트를 사용하여 어플리케이션의 레이아웃과 navigation을 정의한 후에, 사용자 인터페이스 컨트롤을 추가할 수 있습니다.

아래의 예제에는 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>
The executing SWF file for the previous example is shown below:

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. For information about the standard Flex controls, see Controls.

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.

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

<?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>
The executing SWF file for the previous example is shown below:

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.

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.

For more information, see Referring to Flex components.

Using XML namespaces
XML 네임스페이스 사용

XML 문서에서, 태그는 네임스페이스와 관련이 있습니다. 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.

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="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 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 executing SWF file for the previous example is shown below:

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.

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. For more information on SWC files, see Using the Flex Compilers.

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.

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.

<?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 executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

[

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:

<?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>
The executing SWF file for the previous example is shown below:

For more information about using ActionScript with MXML, see Using ActionScript.

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.

<?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>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window after the user clicks the Submit button:

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. For more information about data binding, see Storing Data.

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.

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.

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

• 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).

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.

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

The following image shows the application rendered in a web browser window:

For more information about using RPC services, see Accessing Server-Side Data with Flex.

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.

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:

<?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>
The executing SWF file for the previous example is shown below:

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.

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.

<?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>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

For more information about using data models, see Storing Data. For more information on validators, see Validating Data.

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:

<?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>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

For more information about formatter components, see Formatting Data.

Using Cascading Style Sheets (CSS)
Cascading Style Sheet 사용

Flex 컴포넌트에서 스타일을 선언하기 위해 CSS 표준을 따르는 스타일 시트를 사용할 수 있습니다. The MXML <mx:Style> 태그에 스타일을 정의하거나 스타일을 정의한 외부 파일을 찹조할 수 있습니다.

<mx:Style> 태그는 MXML 파일에서 최상위 태그에 직속으로 포함되어야 합니다. 클랙스 셀렉터를 사용하여 각 컴포넌트에 스타일을 적용할 수 있고, 타입 셀렉터를 사용하여 특정 타입의 컴포넌트 모두에게 스타일을 적용할 수도 있습니다.

아래의 예제는 <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>
 
이 코드를 실행한 SWF 파일은 아래와 같습니다: 

 
 

스타일 정의에서 클래스 셀렉터는 myClass 와 같은 새로운 이름의 스타일을 정의합니다. 스타일을 정의하면, 그 styleName 속성을 사용하는 어떤 컴포넌트에도 스타일을 적용할 수 있습니다. 위의 예제에서 Button 컨트롤의 폰트 색을 빨강으로 지정하기 위해 스타일을 적용하고 있습니다.

타입 셀렉터는 스타일을 특정 컴포넌트 타입의 모든 인스턴스에 적용합니다. 위의 예제에서 모든 Button 컨트롤의 폰트 크기를 18 포인트로 지정합니다.

아래의 이미지는 웹 브라우저 창에서 어플리케이션이 그려진 모습을 보여주고 있습니다:

Cascading Style Sheet 에 대한 더 많은 정보는 Using Styles and Themes 에서 볼 수 있습니다.

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. For more information about using skins, see Creating Skins.

Using effects
이펙트 사용

effect 는 짧은 시간에 컴포넌트에서 발생하는 변화입니다. 이펙트의 예는 사라지기, 크기 변화하기, 컴포넌트 이동하기 등이 있습니다. 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. MXML 에서, 컨트롤이나 컨테이너의 속성으로 이펙트를 적용할 수 있습니다. Flex provides a set of built-in effects with default properties.

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:

<?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>
The executing SWF file for the previous example is shown below:

For more information about effects, see Using Behaviors.

Defining custom MXML components
사용자 정의 MXML 컴포넌트

사용자 정의 MXML 컴포넌트는 다른 MXML 파일에서 사용자 정의 MXML 태그처럼 사용하는 MXML 파일입니다. 사용자 정의 MXML 컴포넌트는 기존의 Flex 컴포넌트의 기능을 캡슐화 하고, 확장합니다. MXML 어플리케이션 파일처럼, MSML 컴포넌트 파일도 MXML 태그와 ActionScript 코드를 혼합하여 작성할 수 있습니다. MXML 파일의 이름은 다른 MXML 파일에서 참조할 때 사용되는 클래스 이름입니다. 

Note: 웹 드라우저에서 사용자 정의 MXML 컴포넌트 URL 로 직접 접근하는 것은 불가능합니다.

아래의 예제는 리스트 아이템을 미리 갖고 있는 사용자 정의 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>

아래의 예제는 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>
 
이 코드를 실행한 SWF 파일은 아래와 같습니다:
  



   

아래의 이미지는 웹 브라우저 창에서 그려지는 어플리케이션을 보여줍니다.:

MXML 컴포넌트에 대해 더 많은 정보는 Simple MXML Components 에서 볼 수 있습니다.

ActionScript 에서 사용자 정의 Flex 컴포넌트를 정의할 수도 있습니다. Simple Visual Components in ActionScript 에서 더 많은 정보를 볼 수 있습니다.