Build user interfaces

You can build your user interface in Flash Builder using Flex components. You can also extend components to add new properties and methods, and create components as required by your application.

For example, you can create rich form experiences using the Spark Form. The Spark Form is a highly customizable container that supports multiple form designs. You can use the Flex Charting components to create some of the most common chart types, and also give you extensive control over the appearance of your charts.

For more information on using Flex components to build user interfaces, see Building the user interface.

Use themes

Flash Builder provides several themes that help you implement a more personalized appearance to your applications.

Themes provided by Flash Builder include a set of Spark themes and a set of Halo themes. The default theme for Flex 4.x components is Spark. Halo is the default theme for Flex 3. You can import additional themes or create your own themes.

For more information on theme support in Flex, see About themes.

Specify a theme

Specify themes on a project basis. After specifying a theme for a project, all applications in the project share the theme.

  1. From the Flash Builder menu, select Project > Properties > Flex Theme to open the Select Project Theme dialog.

  2. Select a theme and click OK.

Import themes

Flash Builder lets you import themes. The files for a theme must be located in a folder; all the required files for a Flex theme must be present.

The name of the theme is determined by the name element in the metadata.xml file contained within the theme folder. If the name element is not specified, or if metadata.xml is not present, then the name of the theme folder becomes the name of the theme.

Flash Builder themes can be in the following formats:

  • Theme ZIP file

    Extract the contents of the ZIP file before importing the theme. The extracted contents should contain all required files.

  • CSS or SWC file for a theme

    The CSS or SWC file must be in a folder containing all required files for a Flex theme. When you import a theme using Flash Builder, you select either the CSS or SWC file for the theme.

  • MXP file

    You can use Adobe Extension Manager CS5 to package files for Flex themes in an MXP file. The theme can then be imported into Flash Builder using the Adobe Extension Manager.

    For more information on packaging themes in an MXP file, see Create an extension file (MXP file) for a Flex theme.

Import Flex themes using Flash Builder

  1. From the Flash Builder menu, select Project > Properties > Flex Theme to open the Select Project Theme dialog.

  2. Select Import Theme, navigate to the folder containing the theme to import, select the CSS or SWC file, and click OK.

Import Flex themes packaged in an MXP file

  1. If you have not already done so, import Adobe Flash® Builder™ 4.7 into Adobe Extension Manager CS6:

    From Adobe Extension Manager, select File > Import Product.

  2. Open Adobe Extension Manager and select Flash Builder 4.7.

  3. Select File > Install Extension, navigate to the MXP file for the theme, and click Open.

    After you accept the license, Adobe Extension Manager installs the theme into Flash Builder. The theme is now available in Flash Builder from the Select Project Theme dialog.

    Note: You can also double-click the MXP file to start Adobe Extension Manager, which then automatically installs the theme.

Download themes

You can download themes that can then be imported into Flash Builder.

Download Flex themes

  1. From the Flash Builder menu, select Project > Properties > Flex Theme to open the Select Project Theme dialog:

  2. Select Find More Themes.

    Flash Builder opens your default web browser to a page containing themes to download. You can also navigate to any other site containing themes for Flex that you can download.

  3. Select a Flex theme to download.

    After you download the theme, you can import the theme, as described in Import themes.

Create themes

You can create your own themes and import them into Flash Builder. A Flex theme typically contains the following files:

  • SWC, SWF file, CSS, PNG, JPEG, and other files that make up your theme.

    The files that make up the theme can vary, but must include a SWC file or CSS file.

  • preview.jpg file

    The preview image file for the theme. If your theme folder does not contain preview.jpg, then Flash Builder uses a default preview image for the theme.

  • metadata.xml file

    Contains information about the theme, including which versions of the SDK the theme is compatible with. If your theme folder does not contain this file, then Flash Builder creates one when importing the theme.

Typically you package a theme in ZIP file, but ensure that you extract the ZIP file before you can import the theme into Flash Builder. You can also package the theme files in an Adobe Extension Manager file (MXP file), and use Adobe Extension Manager to import the theme into Flash Builder.

For more information, see About themes.

Metadata.xml file

The following table lists the elements that can be included in metadata.xml.

Element Name

Description

Name

The name of the theme that appears in Flash Builder.

When importing a theme using Flash Builder, you can override the name specified in the metadata.xml file.

Category

Author of the theme. The category under which the theme is displayed in Flash Builder.

sdks

Specifies the Flex SDK versions for which the theme is compatible. This element is a parent element for minVersionInclusive and maxVersionExclusive.

If the sdks element is absent, then the theme is valid for all SDKs.

minVersionInclusive

Earliest Flex SDK version for which this theme is compatible. If absent, then this theme is compatible with all earlier versions of the Flex SDK.

maxVersionExclusive

Latest SDK version for which this theme is compatible. If absent, then this theme is compatible with all later versions of the Flex SDK.

mainFile

Top-level file for implementing the theme. This file can reference other files in the theme. For example, a CSS file could reference a SWC file or SWF file.

The -theme compiler argument references the specified file.

The following example shows a typical metadata.xml file for a theme created by Company ABC.

<theme> 
    <name>WindowsLookAlike</name> 
    <category>ABC</category> 
        <sdks> 
            <minVersionInclusive>2.0.1</minVersionInclusive> 
            <maxVersionExclusive>4.0.0</maxVersionExclusive> 
        </sdks> 
    <mainFile>WindowsLookAlike.css</mainFile> 
</theme>

According to the metadata.xml file, the theme is compatible with the Flex 2.0.1 SDK. It is also compatible with SDKs up to, but not including, Flex 4.0.0. When this theme is selected, WindowsLookAlike.css is the file that is added to the -themes compiler argument.

Create an extension file (MXP file) for a Flex theme

You can use Adobe Extension Manager to create an extension file (MXP file) for a Flex theme. The MXP file can be imported into Flash Builder using Adobe Extension Manager.

Place all your theme files in a staging folder, and then create an extension installation file (MXI file) that the Adobe Extension Manager uses to create the MXP file. For information on the format of an MXI file, see the Extension File Format document.

When creating the MXI file, you specify destination paths for each of the theme’s files. The destination paths are in this format:

$flexbuilder/<Theme Name>
  • $flexbuilder is defined in the Flash Builder configuration file, XManConfig.xml. Adobe Extension Manager expands $flexbuilder according to this definition. XManConfig.xml is at the following location on your file system:

    /<Install Dir>/Flash Builder 4/configuration/XManConfig.xml
  • <Theme Name> is the name of the folder that contains the Flex theme.

Create an MXP Extension file for a Flex theme

  1. Place all the files for the theme, including the MXI file, in a staging folder.

  2. From the Adobe Extension Manager, select File > Package Extension.

  3. Navigate to the extension installation file and select it.

  4. Navigate to a location for the package file, and name it using the extension .mxp.

    You can then test the extension file by installing it using the Adobe Extension Manager.

Add additional themes

You can specify more than one theme file to apply to an application. If there are no overlapping styles, both themes are applied completely. There are other considerations when adding additional themes, such as the ordering of the theme files.

To add additional themes, use the command line compiler, mxmlc with the theme compiler option to specify the path to the theme files.

Using themes provides details on specifying compiler arguments and the ordering of theme files.

Using styles

Styles affect the appearance of an application by specifying values for visual parameters for application components. You can set styles that apply to all components in an application, to individual components, or to a set of components referenced by a style selector.

For example, you can specify styles such as:

  • Text

    Font family, size, weight, color, font (bold, italic, underline) and other text display settings

  • Border

    Thickness, color, rollover color, border-style (solid, inset, outset, none), corner radius, and others

  • Color

    Fill color and alpha

Note: The styles available for a component varies, according to the component.

You set style properties inline on an MXML tag or separately using CSS code. The CSS code can be inside <fx:Style> tags in an application or in a separate CSS file.

When you apply inline styles to components, you can convert component styles into a CSS rule in an external style sheet. You can use the CSS editor to edit CSS files.

Apply an external or embedded style to an application

You can embed CSS styles in an MXML application file or reference an external CSS file. The following example shows CSS code to apply styles to all Spark Button components in an application. It also creates a selector, .myStyle, that can be applied to any component:

    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 
 
    <s:Button { fontSize: 16pt; color: Red } /* type selector */ 
    .myStyle { color: Red } /* class selector */ />

For styles applied to components, such as s:Button, the selector for components must specify a namespace. In this example, s:Button defines a style that is automatically applied to all Spark Button components.

Use the CSS period notation to create a selector that can be applied to any component. In this example, .myStyle does not have to declare a namespace and can be applied to any component.

Flex has specific requirements for creating and applying styles. For details, see Using styles in Flex.

Create CSS files

Use the New CSS File wizard to create CSS files for a project. The New CSS File wizard creates a blank file that you can use to define your CSS styles.

By default, Flash Builder adds the default namespaces for Spark and MX styles.

To create a blank CSS file:

  1. From the Flash Builder menu, select File > New CSS File.

  2. Specify a source folder.

    The source folder can be in the current project or another project.

  3. Specify a package for the file

    Select from the packages available in the project. If you want to place the file in a new package, then first create the package. Select File > New Package.

  4. Specify a Name for the file.

  5. Click Finish.

Flash Builder uses templates that define the contents of newly created files. You can customize the templates that Flash Builder uses. See Customize file templates.

Use the CSS editor

Flash Builder provides a CSS editor which you can use to create and edit style sheets for your application. The CSS editor is available only in Source mode.

When you create a style sheet in Flash Builder, Flash Builder provides the following declarations for the Spark and MX namespaces:

@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx";

Some Spark and MX components share the same local name. For example, there is a Spark Button component (in the spark.components.* package) and an MX Button component (in the mx.controls.* package). To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

If you do not use type selectors in your style sheets, then you are not required to declare namespaces. For more information, including examples, see About namespaces in CSS.

Note: Styles are handled differently for applications that use the Flex 3 SDK. If you are working in a Flex project that specifies the Flex 3 SDK, the CSS editor reverts to behavior implemented with Flex Builder 3. See the Flex Builder 3 documentation for information on using the CSS editor for applications that use the Flex 3 SDK.

Add View states and transitions

You can use Flash Builder to create applications that change their appearance depending on tasks performed by the user. For example, the base state of the application could be the home page and include a logo, sidebar, and welcome content. When the user clicks a button in the sidebar, the application dynamically changes its appearance (its state), replacing the main content area with a purchase order form but leaving the logo and sidebar in place.

In Flex, you can add this interaction with view states and transitions. A view state is one of several views that you define for an application or a custom component. A transition is one or more effects grouped together to play when a view state changes. The purpose of a transition is to smooth the visual change from one state to the next.

Support for Flex 3 view states

Flash Builder provides support for view states as implemented in Flex 3. If you create a project that uses the Flex 3 SDK, the MXML editor reverts to the Flex Builder 3 implementation. For information on editing states for the Flex 3 SDK, see the Flex Builder 3 documentation.

Create and edit view states

The MXML editor in Flash Builder contains several features to help you edit source code for view states.

The includeIn and excludeFrom properties for MXML components specify the view state or state group in which a component appears. Code hinting in the MXML editor assists you in selecting a view state or state group for these properties.

You can also use dot notation with component attributes to specify a view state in which the attribute applies. For example, if you want a Button component to appear in two view states, but also have the label change according to the view state, use the dot operator with the label property. Code hinting in the MXML editor assists you in selecting the view state. For example:
<s:Button label.State1="Button in State 1" label.State2="Same Button in State 2">

For more information on creating and editing view states, see Create and apply view states.

Switch view states at runtime

When your application is running, users need to switch from one view state to another. You can define event handlers for user controls so that users can switch states at runtime.

The simplest method is to assign the currentState property to the click event of a control such as a button or a link. The currentState property takes the name of the view state you want to display when the click event occurs. In the code, you specify the currentState property as follows:

click="currentState='viewstatename'"

If the view state is defined for a specific component, you must also specify the component name, as follows:

click="currentState='componentID.viewstatename'"

For more information, see View states.

Create view state groups

Flex provides support for view state groups. The stateGroups attribute of the <States> tag lets you group one or more states together. For example, if multiple components appear in the same set of view states, you can create a view state group that contains all these view states. Then, when you set the currentState property to any view state in the group, the components appears. For more information, with examples, see Defining view state groups.

Flash Builder provides code hinting to assist you in creating and editing state groups.

Create a transition

When you change the view states in your application, the components appear to jump from one view state to the next. You can make the change visually smoother for users by using transitions.

A transition is one or more effects grouped together to play when a view state changes. For example, you can define a transition that uses a Resize effect to gradually minimize a component in the original view state, and a Fade effect to gradually display a component in the new view state.

  1. Make sure that you create at least one view state in addition to the base state.

  2. In the MXML editor, define a Transition object by writing a <s:transitions> tag and then a <s:Transition> child tag, as shown in the following example:

    <s:transitions> 
        <mx:Transition id="myTransition"> 
        </mx:Transition> 
    </s:transitions>

    To define multiple transitions, insert additional <s:Transition> child tags in the <s:transitions> tag.

  3. In the <s:Transition> tag, define the change in view state that triggers the transition by setting the tag’s fromState and toState properties, as in the following example (in bold):

    <s:transitions> 
        <mx:Transition id="myTransition" fromState="*" toState="checkout"> 
        </mx:Transition> 
    </s:transitions>

    In the example, you specify that you want the transition to be performed when the application changes from any view state (fromState="*") to the view state called checkout (toState="checkout"). The value "*" is a wildcard character specifying any view state.

  4. In the <mx:Transition> tag, specify whether you want the effects to play in parallel or in sequence by writing a <mx:Parallel> or <mx:Sequence> child tag, as in the following example (in bold):

    <mx:Transition id="myTransition" fromState="*" toState="checkout"> 
        <mx:Parallel> 
        </mx:Parallel> 
    </mx:Transition>

    If you want the effects to play simultaneously, use the <mx:Parallel> tag. If you want them to play one after the other, use the <mx:Sequence> tag.

  5. In the <mx:Parallel> or <mx:Sequence> tag, specify the targeted component or components for the transition by setting the property called target (for one target component) or targets (for more than one target component) to the ID of the target component or components, as shown in the following example:

    <mx:Parallel targets="{[myVGroup1,myVGroup2,myVGroup3]}"> 
    </mx:Parallel>

    In this example, three VGroup containers are targeted. The targets property takes an array of IDs.

  6. In the <mx:Parallel> or <mx:Sequence> tag, specify the effects to play when the view state changes by writing effect child tags, as shown in the following example (in bold):

    <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}"> 
        <mx:Move duration="400"/> 
        <mx:Resize duration="400"/> 
    </mx:Parallel>

    For a list of possible effects and how to set their properties, see Introduction to effects.

  7. To test the transition, click the Run button in the Flash Builder toolbar, then switch states after the application starts.

Modify user interfaces using skins

Skin classes modify the appearance of controls in a user interface. The way you create, edit, and import skins differs for Spark components and MX components.

About Spark skins

Spark skins control all visual elements of a component, including layout. Spark skins can contain multiple elements, such as graphic elements, text, images, and transitions. Spark skins support states. You can use a skin to define the appearance of a component for each of the component's states. Skins typically specify minimum sizing requirements for the component. For details on how Spark skins are implemented in Flex, see About Spark skins.

About skins for MX components

Skins for MX components can be either a bitmap graphic or a vector graphic. A bitmap graphic, called a graphical skin, is made up of individual pixels that together form an image. A vector graphic, called a programmatic skin, consists of a set of line definitions that specify a line’s starting and end point, thickness, color, and other information required by Adobe® Flash® Player to draw the line. For details on how skins are implemented for MX components in Flex, see About MX component skinning.

You can use Flash Builder to import skin artwork for MX components. See Import skin artwork for MX components.

The mx.skins.spark package defines Spark skins for MX components.

Create and edit skins for Spark components

You can open the New MXML Skin dialog by selecting File > New MXML Skin.

You can also open it directly in the editor. For example, do the following to create a skinClass for a Spark Button component.

  1. In Source mode of the editor, place your cursor inside a <s:Button> tag and type the following:

    <s:Button skinClass="

    After you type the first quote for the skinClass name, a context menu appears.

  2. With Create Skin highlighted in the code hints, the Enter key opens the New MXML Skin dialog.

  3. Specify the following in the New MXML Skin Dialog:

    • Source Folder and Package for the generated Skin declaration.

    • Name

      The name for the Skin class you are creating.

    • Host Component

      To change the default component, click Browse and select a host component.

    • (Recommended) Select Create As Copy Of and do not remove ActionScript styling code

      If you are new to skinning, use a copy to get started creating a Skin class. Modify the ActionScript styling code.

    • (Advanced Users) Do either of the following if you are familiar with creating Skin classes:

      Remove ActionScript styling code or do not create a copy of an existing class.

      If you do not create a copy of an existing class, Flash Builder generates a blank Skin class file with some comments to guide you.

      The remaining steps of this procedure assume that you followed the Recommended option for generating a Skin class.

  4. Click Finish.

    Flash Builder generates a new skinClass based on your selections in the New MXML Skin dialog. The editor switches to the source for the newly generated class.

  5. Edit the skinClass.

    Save your class file and application file.

Import skin artwork for MX components

You use the Import Skin Artwork wizard to import both vector graphics artwork and bitmap artwork from the CS5 or higher versions of Flash Professional, Fireworks, Illustrator, and Photoshop. For bitmap artwork, any .PNG, .JPG, or .GIF can be used. The artwork can then be used as skins for Flex components.

Note: Adobe provides a set of skinning templates to make it easy to create skins for the built-in Flex components. Use the templates with Flash, Fireworks, Illustrator, or Photoshop to create the artwork. You can also use Flash to create fully functional custom Flex components. For more information, see the articles in Importing Flash Professional Assets into Flex.
  1. Select File > Import > Flash Builder > MX Skin Artwork.

  2. In the Import Skin Artwork dialog box:

    • Choose a folder of bitmaps or a SWC or SWF file to import skins from, or click Browse to locate one. Supported file types include the following:

      • AS3 SWF files and AS3 SWC files created in Adobe Flash Professional CS5

      • Vector graphic files created in Adobe Illustrator® and exported as SWF files for Flash Player 8

      • Bitmap graphic files in PNG, GIF, and JPG formats

    • Choose a folder to import the skins to. The folder must be a source folder for a Flex project (or you can specify a subfolder in the source folder). The default selection is the folder for the Flex project currently open.

    • In the Copy Artwork To Subfolder field, the default folder name is based on the folder or assets being imported. Click Browse to choose a different location.

    • In the Create Skin Style Rules In field, specify a name for a CSS file that contains the style rules. The default name is based on the name of the artwork folder or FLA file being imported.

    • Click the Delete All Existing Rules In File check box if you want the specified CSS file to be overwritten upon importing (as opposed to importing skins and keeping other existing definitions in the CSS file). The box is deselected by default, and if the CSS file does not exist it is disabled.

    • In the Apply Styles To Application field, the default is the selected file in the Flex Navigator or active editor view, or the main application file for the project.

    • Click Next.

  3. In the next Import Skin Artwork dialog box, select the skins you want to import and specify which CSS style type and skin part property will be used. You can check items one at a time or click Check All or Uncheck All.

    • If items do not have a valid style or skin part property name, they will not be checked by default. The following examples show the naming convention used in Flash Builder:

      • Button_upSkin

      • Button_glow_downSkin (maps to downSkin property of Button.glow style rule)

      • TabBar-tab_upSkin (upSkin property maps to tabStyleName property of TabBar style rule)

      • MyCustomComponent_borderSkin

      For custom components, the item is checked if the component has been defined somewhere within the project you are importing to.

    • If necessary, choose a style and skin part for the pop-up menus in each column.

    • Click Finish.

      A CSS file is created and displayed in the Source view. The CSS file is attached to the application specified in the wizard. If you import a SWC file, it is automatically added to the library path for the project.

Add interactivity with effects

An effect is a visible or audible change to the target component that occurs over a time, measured in milliseconds. Examples of effects are fading, resizing, or moving a component.

Effects are initiated in response to an event, where the event is often initiated by a user action, such as a button click. However, you can initiate effects programmatically or in response to events that are not triggered by the user.

For example, you can create an effect for a TextInput component that causes it to bounce slightly when the user tabs to it, or you can create an effect for a Label component that causes it to fade out when the user passes the mouse over it.

You can define effects in Flash Builder as a property of an MXML component.

Effects are implemented differently for Spark and MX components. For information on creating effects in MXML and ActionScript code, see Introduction to effects.