Adobe
Sign in My orders My Adobe

by Trilemetry

Trilemetry

Content

Modified

2 May 2011

Page tools

Flash Builder Flex RIA

Prerequisite knowledge

User level

Beginning

Required products

Exercise files

In this exercise you will learn how to customize Flex components and bind them to data to create an auto-generating email address (see Figure 1).

Review your task for this exercise.
Figure 1. Review your task for this exercise.

In this exercise you will learn how to:

  • Implement data binding

Implementing data binding

In this section you will use data binding to populate the employee email address based on the employee's first and last name.

  1. Download the ex1_03_starter.zip file if you haven't already and extract the file ex1_03_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex1_03_starter.fxp file.
  4. Open the ex1_03_starter.mxml file.
  5. Locate the FormItem container with the label property First Name:.
  6. To the nested TextInput control, add the id property firstName:
<s:FormItem label="First Name:"> <s:TextInput id="firstName" width="196"/> </s:FormItem>
  1. Locate the FormItem control with the label property lastName:.
  2. To the nested TextInput control, add the id property lastName:.
<s:FormItem label="Last Name:"> <s:TextInput id="lastName" width="196"/> </s:FormItem>
  1. Locate the FormItem control with the label property assigned to Email:.
  2. To the nested TextInput control, bind the value of the text property to the value of the firstName and the lastName text properties, separating the values with a period. Append @xyzcompany.com to the end of the text property value so that a full email address is displayed.
<s:FormItem label="Email:"> <s:TextInput text="{firstName.text}.{lastName.text}@xyzcompany.com" width="196"/> </s:FormItem>
  1. Save the file.
  2. Run the application.
  3. Enter Athena into the First Name input field.
  4. Enter Parker into the Last Name input field.

    You should see the Email field populate with an email address based on the firstName and lastName TextInput controls (see Figure 2).

Use the first and last name fields to create an employee email address.
Figure 2. Use the first and last name fields to create an employee email address.
  1. Change the First Name field to read Athena Sara.

    Note that the email address is created with a space in it (see Figure 3).

Edit the employee's first name.
Figure 3. Edit the employee's first name.
  1. In the Email field, remove the space from between the two first names.

    You should see that editing the email address does not affect the first and last name values (see Figure 4). This is an example of one-way binding.

Changing the email address does not result in changes to other fields.
Figure 4. Changing the email address does not result in changes to other fields.

In this exercise you learned how to create and reuse a Flex custom component and bind data. In the next exercise you will use an XML file to populate the Employee Portal: Vehicle Request Form with dynamic data.

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement