Accessibility

Flex Documentation

Essentials for Developing Flex Applications

This article provides information to help you start developing applications quickly and successfully. It covers the following topics:

Getting started with Flex

Get familiar with the following features and concepts to start building applications quickly:

Use sample applications to familiarize yourself with Flex

The Flex sample applications include simple applications that demonstrate basic building blocks, more complex applications that focus on specific feature areas, and applications that demonstrate best practices for designing applications. The Flex Explorer application gives you a single place from which to quickly learn about all the major features in Flex.

The sample applications are contained in the samples.war file, which you can extract into your application server.

Effectively lay out applications with containers and controls

Containers are user interface components that let you control layout. You can use containers to control child sizing and positioning, or to control navigation among multiple child containers. Controls are user interface components such as Button, TextArea, and ComboBox controls. You typically use MXML tags to add containers and controls to an application, but you can also add them at runtime using ActionScript.

For more information, see “Using Flex Components” in Developing Flex Applications.

Make simple code changes to improve performance

There are some very simple things you can do to improve application performance. For example, consider the following facts:

  • Application startup time slows down when there are too many levels of nested containers.
  • Macromedia Flash Debug Player slows down applications; using trace() statements can slow performance down considerably because the player writes them to a file. Test your application in both Flash Player and Flash Debug Player.
  • You can use a container's creationPolicy property to determine when to create a component at runtime. For example, an application can create components at startup, when a user navigates to a container, or based on user interaction.
  • You can configure an application to lay out incrementally at startup.
  • You can improve a Repeater object's performance by setting its recycleChildren property to true. This binds new data items into existing children, incrementally creates new children if there are more data items, and destroys extra children that are no longer required.
  • You can reduce the use of layout managers to improve application startup time.

For more information, see “Developing Applications” in Developing Flex Applications.

Dynamically repeat components with the Repeater object

The Repeater object lets you dynamically repeat any number of controls or containers specified in MXML tags, at runtime. A control or container is repeated based on an array of dynamic data, such as an Array object returned from a web service. For example, using just one <mx:Label> tag and one <mx:Repeater> tag, you can generate a Label control for each element in an Array object.

For more information, see “Dynamically Repeating Controls and Containers” chapter in Developing Flex Applications.

Easily manage data with data management features

Flex provides data management features that let you do the following using MXML tags:

  • Send data to server-side data sources using web services, HTTP POST and GET commands, or Java objects.
  • Receive data from server-side data sources.
  • Pass data between client-side objects in an application.
  • Store data in client-side objects.
  • Format data before displaying it in the user interface.
  • Validate data before using it.

For more information, see “Managing Data in Flex” in Developing Flex Applications.

Control the look of applications with styles, fonts, and themes

Styles, fonts, and themes help you define the overall look and feel of applications. You can use them to change the appearance of a single component, or apply them across all components.

For more information, see “Using Styles, Fonts and Themes” in Developing Flex Applications.

Control component creation with deferred instantiation

Deferred instantiation lets you determine when controls and other components are created when you invoke a Flex application.

For more information, see “Applying Deferred Instantiation” in Developing Flex Applications.

Use browser back and forward commands with History Manager

The History Manager lets users navigate through a Flex application using the web browser’s Back and Forward navigation commands. It also lets users return to the previous location in an application if the browser accidentally changes from that location.

For more information, see “Using the History Manager” in Developing Flex Applications.

Move application data with drag-and-drop operations

Drag-and-drop management lets you move data from one place in a Macromedia Flex application to another. This feature is especially useful in visual applications where your data can be items in a list, images, or Flex components.

For more information, see “Using the Drag and Drop Manager” in Developing Flex Applications.

Encapsulate nonvisual functionality with faceless components

Faceless components are Flex components that provide nonvisual functionality. Faceless components are useful for a wide variety of things, including model functionality in an model-view-controller (MVC) architecture, data formatting, data validation, and effects.

For more information, see “Creating Actionscript Components” in Developing Flex Applications.

Debug applications with ActionScript debugging features

To assist you in debugging your application, Flex includes support for debug and warning messages, an error-reporting mechanism, and a command-line ActionScript debugger.

For more information, see “Debugging Flex Applications” in Developing Flex Applications.

Avoiding common programming issues

You can avoid some common programming issues by following guidelines described in these topics:

Using CDATA in Script tags

It is good practice to always use a CDATA section inside the <mx:Script> tag. Omitting the CDATA section can result in errors if the MXML compiler tries to parse XML characters, such as < and >, in the <mx:Script> tag. The following example shows an <mx:Script> tag that contains a CDATA section:

<mx:Script>
  <![CDATA[
     
     function sortList(list_obj) {
       if (list_obj.length < 10) {
         list_obj.insertionSort();
       }
       else
       {
         list_obj.quickSort();
       }
     }
  
   ]]>
</mx:Script>

Using ActionScript script files and classes

You do not use ActionScript script files and classes the same way. You specify a script file in the source property of an <mx:Script> tag to add simple code with no class definitions to applications or MXML components. The external file contains the same script that you would type inline in an <mx:Script> tag. The only difference is that store it in a separate file.

You cannot reference a file that contains an ActionScript class in the source property of an <mx:Script> tag. You can use an ActionScript class as a custom MXML tag, or you can create a variable of its type, and instantiate it in a function, as the following example shows: 

... 
var myA:A;
function myInitialize() {
myA = new A();
}
...

For more information, see “Working with ActionScript in Flex” in Developing Flex Applications.

Using capitalization in MXML

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class. Class names begin with an uppercase letter, and capital letters separate the words in class names. All tags that are immediate children of the <mx:Application> tag use this naming convention.

When a tag corresponds to an ActionScript class, its properties correspond to the properties and events of that class. Property names begin with a lowercase letter, and uppercase letters separate words in property names. You can set the values of properties using tag attributes or child tags. Macromedia recommends that you assign scalar values and simple binding expressions as attributes, and that you assign complex types as child tags.

For more information, see “Using MXML” in Developing Flex Applications.

Using styles

You modify the appearance of Flex components through style properties. There are several ways to work with style properties. Some provide more granular control and can be approached programmatically. Others are not as flexible, but can require less computation. The level of granularity that you require helps to dictate how you apply a style.

A theme defines the look of an entire Flex application. It is a collection of styles and skins that control the appearance of components. Themes also define what styles are available to set in your Flex applications. If a theme does not define a style such as buttonColor, you cannot set the buttonColor style property in your application.

The default theme included with Flex, the Halo theme, supports a subset of the style properties. For more information about the styles that Halo supports, see “Using Styles, Fonts, and Themes” in Developing Flex Applications.

You set styles globally for all applications by using a global CSS style sheet, which you configure in the flex-config.xml file.

You apply styles to an MXML file and its children by specifying a CSS style sheet inline in an <mx:Style> tag, or in the source property of an <mx:Style> tag.

To interact with style properties at runtime, you use the getStyle() and setStyle() ActionScript methods. Every Flex component exposes these methods. You can also programmatically create and apply style declarations using the mx.styles.StyleManager class, which also has getStyle() and setStyle() methods.

The StyleManager class lets you access global style sheets, class selectors, and type selectors in ActionScript. It also lets you apply inheritable and noninheritable properties globally. Using the StyleManager, you can define new CSS style declarations and apply them to controls in your Flex applications.

You can also set styles in MXML tag properties. These style definitions take precedence over all other style definitions.

For more information, see “Using Styles, Fonts,and Themes” in Developing Flex Applications.

Using quotation marks in CSS style declarations

The only time you need quotation marks in CSS style declarations is for names that begin with "_". Everywhere else you should not use quotation marks. For example, background-color:red works correctly, but background-color:"red" does not. There is no compiler error displayed when you use quotation marks incorrectly, but the application might not function as expected.

For more information, see “Using Styles, Fonts,and Themes” in Developing Flex Applications.

Laying out components

When laying out components, it is good practice to avoid explicit widths and heights. Use margins, gaps, and widthFlex and heightFlex properties as much as possible.

For more information, see “Introducing Containers” in Developing Flex Applications.

Minimizing container nesting

It is good practice to avoid deeply nested layouts when possible. If you have nested containers more than three levels deep, you can probably produce the same layout with fewer levels of containers.You can use the Grid, GridRow, and GridItem components to create complex layouts with a minimum amount of nesting. Deep nesting can lead to performance problems.

For more information, see “Developing Applications” in Developing Flex Applications.

Configuring data services

Data services include SOAP-compliant web services, HTTP services, and RemoteObject services. You configure data service access, security, debugging, and other data service features, in the flex-config.xml file in the WEB-INF/flex directory or a Flex web application. By default, access to data services is locked down, and must be explicitly opened in the data service security whitelists in the flex-config.xml file. For more information, see Part IV, Data Access and Interconnectivity in Developing Flex Applications.

You can create local Apache Axis web service definitions in a server-config.wsdd file in the WEB-INF directory of a Flex web application. The samples.war file contains an example of a server-config.wsdd file. For information about configuring Axis web services, see the Axis documentation at the Apache Axis website. You can also create web service definitions using the standard web service implementation available in your application server; for more information, see your application server documentation.

Partitioning an application

There are many approaches to partitioning the user interface and data objects in an application. There are also many approaches to separating MXML code from ActionScript code. For more information, see “Developing Applications” in Developing Flex Applications.

Using the command-line compiler

When using mxmlc, the command-line compiler with custom ActionScript classes and components, you must know where to locate custom ActionScript classes, how to set custom classpaths, and how to package classes correctly. When you are not using custom ActionScript code or MXML components, you can run mxmlc by changing to the Flex_install_dir/bin directory and invoking the following command:

mxmlc myApp.mxml

For information about configuring mxmlc, see “Administering Flex” in Developing Flex Applications.

For general information about using ActionScript classes, see the “Working with ActionScript in Flex”, “Creating ActionScript Components”, and “Creating Advanced Components in Flash MX 20004” in Developing Flex Applications.

Using XML namespaces

When using custom ActionScript components or MXML components, you specify the namespace of the local path or subdirectory that contains the component.

For a component in a subdirectory of the application directory or in the user_classes directory, you use a namespace that specifies the subdirectory using dot (.) notation. For example, in the following tag, the text xmlns:custom="customComponents.objects" specifies the customComponents.objects namespace:

<custom:MyFirstComponent xmlns:custom="customComponents.objects" />

The word custom directly following xmlns: indicates the tag prefix to use for components in this namespace. You can declare a namespace with or without a prefix, but you can declare only one namespace with no prefix in any MXML file.

For components in the same directory as the application, you use a namespace declared as "*", as the following example shows:

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:local="*">   <local:MyFirstComponent /> </mx:Application>

You can also declare a local namespace without a prefix, as the following example shows:

<mx:Application xmlns:mx=http://www.macromedia.com/2003/mxml xmlns="*">   <MyFirstComponent/> </mx:Application>

For more information, see “Building an Application with Multiple MXML Files” and “Creating ActionScript Components” in Developing Flex Applications.

Using the ActionScript Profiler

If you enable the ActionScript Profiler, ensure that you disable the profiler when you are done. The resulting .dat files use a large amount of disk space.

For more information, see “Profiling ActionScript” in Developing Flex Applications.

Creating custom SWC Files in Flash MX

When you create custom SWC files in Flash MX 2004, do not store the SWC files in the same directory as their ActionScript classes. For more information, see “Creating Advanced Components in Flash MX 2004” in Developing Flex Applications.

Using the command-line debugger

When using the Flex ActionScript command-line debugger (fdb), ensure that you install the version of Flash Debug Player included with Flex. Also, do not enable the Flash 2004 remote debugger at the same time. If you want to debug your custom SWC files, enable the "Debugging Permitted" option in the Publish Settings dialog box in Flash MX 2004.

For more information, see “Debugging Flex Applications” in Developing Flex Applications.

Scoping in ActionScript

Since ActionScript lets you pass functions and call those functions using different scopes, the keyword this can refer to different objects at different times. In general, an object’s methods execute within the context of the object, and not the calling object.

One particular area where scoping can be confusing is when you use callback functions, as you should use the mx.utils.Delegate class to pass the callback. The labelFunction property of List-based classes is a prime example of this.

The code in the following example uses the Delegate class to specify a callback function using the labelFunction property in ActionScript. Each item in the list is an Object with a lastName property. The lastName property is used as the index into an array where the corresponding first names are stored. The myLabelFunc() function concatenates first and last names, and returns a String that appears in the list. The myLabelFunc() function is called once for each list item. 

<mx:Application initialize="setLabel()">
... 
  <mx:Script>
   <![CDATA[
     import mx.utils.Delegate; 
    //Assume this variable has been populated with first names accessed by 
last name:
    var firstNameMap : Object;
    function myLabelFunc(item):String {
      return item.lastName + ", " + firstNameMap[item.lastName];
    }
  
    function setLabel{
    myList.labelFunction = Delegate.create(this, myLabelFunc);
   }
  
  ]]>
  </mx:Script>
  ...
  <mx:List id="myList"> 
   <mx:dataProvider>
    <mx:Array>
     <mx:Object lastName="Jones"/>
     <mx:Object lastName="Williams"/>
     <mx:Object lastName="Simpson"/>
  
    </mx:Array> 
   </mx:dataProvider>
  </mx:List>
  ...
</mx:Application>

For more information about scoping, see “Working with ActionScript in Flex” in Developing Flex Applications.

Getting Started

 

Application Development

 

Security

 

Downloads

 

Documentation

 

Community Resources