1. Home
2. Developer Connection
3. Flex Developer Center
4. Quick Starts

Flex Quick Start: Getting started

Table of contents

• Coding with MXML and ActionScript
• Creating your first application
• Handling events
• Positioning and laying out Flex components
• Embedding application assets

Creating your first application

MXML files are ordinary XML files, so you have a wide choice of development environments. You can write MXML code in a simple text editor, a dedicated XML editor, or an integrated development environment (IDE) that supports text editing. Flex supplies a dedicated IDE, Adobe® Flex™ Builder™ 3, that you can use to develop your applications.

The first line of the MXML file is the XML declaration. This line has to be the first line in each MXML file.

The next line is <mx:Application> tag, which defines the Application container that is always the root tag of a Flex application.

The <mx:Panel> tag defines a Panel container that includes a title bar, a title, a status message, a border, and a content area for its children. Its title property is set to "My Application".

The <mx:Label> tag represents a Label control, a very simple user interface component that displays text. Its text property is set to "Hello, World!".

The fontWeight and fontSize properties of the <mx:Label> tag change the style of the font used. You can also use CSS to style your components. For more information, see "Using Cascading Style Sheets (CSS)" in the Flex 3 Developer's Guide.

Note: You can compile your Flex application by using the command-line compiler mxmlc, or by using Flex Builder 3. For instructions on compiling your application with mxmlc, see the Coding with MXML and ActionScript tutorial.

Example

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HelloWorld/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160"
>
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My Application"  
    >

        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

For more information

• Part I: Creating a Simple RIA in the Flex 3 Getting Started Experience
• Developing Applications in MXML in the Adobe Flex 3 Help

About the author