Accessibility

Flex Documentation

Essentials for Developing Macromedia Flex Applications

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

Getting started with Flex

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

Use sample applications to familiarize yourself with Flex

The Macromedia 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 to 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 the “Using Flex Components” chapter 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 down performance 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 specify the position, width, and height of components to improve application startup time.
  • You can improve performance by using the Grid container only when controls must line up both horizontally and vertically.

For more information about performance, see the “Architecting Flex Applications” chapter in Getting Started with Flex. During the Flex product life cycle, Macromedia will provide additional information about performance on the Macromedia website.

Determine the best way to dynamically repeat components

To dynamically repeat components, you can choose between the Repeater object or a HorizontalList, TileList, or List control. To achieve better performance, you can often replace layouts you created with a Repeater during the Flex 1.0 timeframe with the combination of a HorizontalList or TileList and a cell renderer.

The Repeater object is useful for repeating a small set of simple user interface components, such as RadioButton controls and other controls typically used in Form containers. You can use the HorizontalList, TileList, or List control when you want to display more than a few repeated objects.

The HorizontalList control displays data horizontally much like the HBox container. The HorizontalList control always displays items from left to right. The TileList control displays data in a tile layout, much like the Tile container. The TileList control provides a direction property that determines if the next item is down or to the right. The List control displays data in a single vertical column. Unlike the Repeater object, which instantiates all objects that are repeated, the HorizontalList, TileList, and List controls only instantiate what is visible in the list.

For more information, see the “Dynamically Repeating Controls and Containers” and “Using Data Provider Controls” chapters 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 the “Managing Data in Flex” chapter in Developing Flex Applications.

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

Styles, fonts, themes, and skins (the graphical elements of a component) 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 the “Using Styles and Fonts” and “Using Themes and Skins” chapters in Developing Flex Applications.

Understand and control component creation

By default, containers create only the controls that initially appear to the user. Flex creates the other controls, or descendants, later, if the user navigates to them. Deferred instantiation lets you determine when controls and other components are created when you invoke a Flex application. For both debugging and development purposes, it is important to understand how Flex creates components.

For more information, see the “Improving Startup Performance” chapter in Developing Flex Applications.

Use browser back and forward commands with the 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 the “Using the History Manager” chapter 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 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 the “Using the Drag and Drop Manager” chapter in Developing Flex Applications.

Encapsulate nonvisual functionality with nonvisual components

Nonvisual components provide functionality that does not require the overhead of the Flex user interface component architecture. Nonvisual components are useful for a wide variety of functionality, including model functionality in an model-view-controller (MVC) architecture, data formatting, data validation, and effects.

For more information, see the “Creating ActionScript Components” chapter 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 the “Debugging Flex Applications” chapter in Developing Flex Applications.

Avoiding common programming issues

You can avoid common programming issues by following the 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 angle brackets (< 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 the script is 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 the “Using ActionScript” chapter in Getting Started with Flex.

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. For example, the <mx:ComboBox> tag creates an instance of the mx.controls.ComboBox class. 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. For example, the rowCount property in the <mx:ComboBox rowCount="7"> tag corresponds to the rowCount property of the mx.controls.ComboBox class. 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 the “Using MXML” chapter in Getting Started with Flex.

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. Skins are the graphical elements of a component. 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 the “Using Themes and Skins” chapter in Developing Flex Applications.

You set styles globally for all applications by using a global style sheet based on the Cascading Style Sheets (CSS) standard, which you configure in the flex-config.xml file in the WEB-INF/flex directory of a Flex web application.

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 user interface 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. You should use the setStyle() method sparingly to avoid performance degradation.

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 class, 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 the “Using Styles and Fonts” chapter 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 an underscore character ("_"). You should not use quotation marks anywhere else. 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 the “Using Styles and Fonts” chapter 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 the “Architecting Flex Applications” chapter in Getting Started with Flex.

Configuring data services

Data services include remote object services, SOAP-compliant web services, and HTTP 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 of a Flex web application. By default, access to data services is secured, and must be explicitly opened in the data service security whitelists in the flex-config.xml file. For more information, see Part III, 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 the “Architecting Applications” chapter in Getting Started with Flex.

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 the “Administering Flex” chapter 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 followed by an asterisk (*). 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. All namespace declarations must include an asterisk (*) at the end.

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 the “Building an Application with Multiple MXML Files” and “Creating ActionScript Components” chapters in Getting Started with Flex.

Using the ActionScript Profiler

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

For more information, see the “Profiling ActionScript” chapter 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 the “Debugging Flex Applications” chapter 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, because 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 the “Working with ActionScript in Flex” chapter in Developing Flex Applications.

Getting Started

 

Application Development

 

Security

 

Downloads

 

Documentation

 

Community Resources