Building a desktop application with Flash Builder for Force.com – Part 6: Enhance the application with Flex components

Your application currently displays data for a single merchandise item. In this tutorial, you will use components in the Flex framework to display and switch between multiple merchandise items and to add the essential elements of text and images to your interface. You will also learn to create dynamic interfaces that change at runtime by using states. Flex components can have multiple states (with different property values, different visual objects, and more) and you can switch between the states of a component at runtime.

The Flex 4 framework has about 70 components for you to use. These consist of UI controls such as buttons, check boxes, radio buttons, sliders, steppers, grids, lists, date pickers, and more and containers such as VGroup, HGroup, Panel, and more. You already used several Flex components in your application: the Button control to interact with the user and the VGroup and HGroup containers to lay out your interface. As well, the Stratus LabelAndField uses a combination of the Flex Label and TextInput controls. 

The Flex 4 framework contains two different sets of components: the MX (or Halo) and the Spark components. The MX components are the legacy components from the previous Flex SDKs and are defined in the mx package and mx namespace. The Spark components are new components just introduced in the Flex 4 SDK and are defined in the spark package and the s namespace.

The Spark components use a new architecture which more cleanly separates the appearance and layout of a component from its logic using a new skinning technique in which the skin is defined with XML and its graphics can be declaratively represented using a new Flex Graphics markup (FXG). You can write the FXG yourself or use Creative Suite programs such as PhotoShop, Fireworks, and Illustrator to create the graphics and then export them as FXG for use in the skin files. You are not going to do any skinning in this tutorial, but this should give you a basic understanding of why there are two sets of components. Many of the MX components have been recreated for Spark, but not all. When possible, Adobe recommends you use the Spark components and use the new skinning architecture.

In this tutorial you will use some of the MX and Spark components to enhance your user interface. Specifically, you will:      

• Add a Spark DropDownList control to switch between records.
• Learn to use data-binding.
• Use the MX Image control to add a company logo and display merchandise images.
• Display a custom, dynamic image in a toast notification.
• Add simple text using the Spark Label control.
• Use the Spark RichText control and the Text Layout framework to add richly-formatted text.
• Add scrollable text with the Spark RichEditableText control.
• Use component states to change the interface dynamically at runtime.

Requirements

To complete this tutorial, you need the following:

A Force.com account with the custom Merchandise object created in Part 1 of this tutorial series:

• Part 1: Set up salesforce.com data

Adobe Flash Builder for Force.com

• Try

Tutorial files:

• SalesforceMerchandise06_images.zip (ZIP 82 KB)
• SalesforceMerchandise06_start.zip (ZIP 6.7 MB)
• SalesforceMerchandise06_solution.zip (ZIP 6.7 MB)

Prerequisite knowledge

• Understanding the technologies for building Force.com Flex applications with Adobe Flash Builder for Force.com
• Understanding data management in applications built with Adobe Flash Builder for Force.com
• Part 1: Set up salesforce.com data
• Part 2: Create the basic application
• Part 3: Retrieve and display salesforce.com data
• Part 4: Edit salesforce.com data
• Part 5: Provide user feedback with Stratus components

Page 1 of 5

Next Page

About the author