MACROMEDIA FLEX-FLEX BUILDER Operation instructions

Flex Builder Tutorials

This series of four interconnected tutorials explains how you can build a simple Macromedia Flex

application using Macromedia Flex Builder. The application is part of a website for the fictitious

Flex Store company. The application gives visitors the ability to view a product catalog, find out

more about each product, and add products to a shopping cart. The application is a simplified

version of the Flex Store application installed with the Flex server.

The tutorials focus on using the development tools in Flex Builder, not on developing Flex

applications. The goal is to show you how to use Flex Builder to develop a Flex application more

rapidly and with less coding.

You can complete each tutorial as a stand-alone unit or as a part of a larger four-part tutorial. You

don’t have to complete all the tutorials or complete them in order, except for the first tutorial,

which you must complete before you can start any of the others.

The first tutorial shows you how to set up a Flex development environment. The second shows

you how to lay out a Flex user interface with Flex Builder. The third shows you how to use Flex

Builder to create custom components, the building blocks of Flex applications. The fourth shows

you how to visually bind components to data with Flex Builder.

This chapter includes the following tutorials:

•“Tutorial: Setting up a development environment” on page 1

•“Tutorial: Creating a layout with Flex Builder” on page 6

•“Tutorial: Building custom components with Flex Builder” on page 15

•“Tutorial: Binding components to data with Flex Builder” on page 39

Tutorial: Setting up a development environment

This tutorial shows you how to install the Flex server on your computer, copy sample files to a

folder, and define a Flex Builder site. You must complete these tasks to complete the other

tutorials in this chapter.

In this tutorial, you’ll accomplish the following tasks:

•“Install the Flex server on your computer” on page 2

•“Copy the tutorial folders to the Flex samples folder” on page 4

•“Define a Flex Builder site” on page 5

2 Flex Builder Tutorials

Install the Flex server on your computer

This part of the tutorial describes how to set up the Developer edition of Flex on the same

computer as Flex Builder. To compile and run MXML and ActionScript files, you need access to

a Flex server.

The setup described in this part of the tutorial is only one of many possible configurations. You

can also install Flex on a remote server running a different J2EE server and access it through a

network or using FTP. If you don’t select the integrated JRun4/Flex install option, make sure you

deploy the samples .war file. For more information, see the Flex installation guide on the

Macromedia website at www.macromedia.com/go/flex_install/.

The Developer edition is for noncommercial use for developing and testing Flex applications. It is

not licensed for deployment. After 60 days, it will support requests from only five IP addresses

(plus localhost), but you can still use it for development and testing as long as you want. The

software does not expire.

Copy the Windows version of the Flex installer from the Macromedia Flex CD.

In Windows, double-click the Flex installer file, flex-10-win.exe.

The install wizard appears:

Follow the onscreen instructions.

When prompted for a serial number, leave the text box blank.

You don’t need to enter a serial number for the Developer edition. The Flex server works for 60

days as a trial edition; after that, it becomes a Developer edition.

Tutorial: Setting up a development environment 3

On the Install Options dialog box, select the Integrated JRun4/Macromedia Flex option.

The dialog box gives you other installation options. This tutorial assumes that you selected the

Integrated JRun4/Macromedia Flex option.

After you finish installing Flex 1.0, install any Flex updaters available on the Macromedia

website at www.macromedia.com/go/flex_updaters.

Start the server by selecting Start > All Programs > Macromedia > Macromedia Flex > Start

Integrated Flex Server.

The server displays startup information.

Caution: Do not close the Start Integrated Flex Server dialog box once the server is running.

Closing it shuts down the Flex server.

4 Flex Builder Tutorials

For more information, see the Flex installation documentation on the Macromedia website at

www.macromedia.com/go/flex_install/.

You can verify that the Flex server is running normally as follows:

Open the following URL in your browser:

http://localhost:8700/samples

The Flex Sample Apps page appears.

Select a sample application to run it.

If the application doesn’t run, try the following troubleshooting suggestions:

Copy the tutorial folders to the Flex samples folder

In this part of the tutorial, you copy the Flex Builder tutorial folders to the folder called samples

on the Flex server. The samples folder is the Flex application root folder of the Flex Sample Apps

application.

Caution: You must copy the tutorial folders to the folder called samples or the tutorials will not work

properly.

Locate the Tutorial folder in the following folder on your hard disk.

C:\Program Files\Macromedia\Flex Builder\Tutorial\

If you didn’t install Flex Builder to the default location, locate the Tutorial folder on your

hard disk.

Select the three folders (fbBindings, fbComponents, and fbLayout) in the Tutorial folder and

copy them to the following Flex application root folder:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\

Note: If you installed Flex on a different computer, you must copy the files to the samples folder on

the remote computer. For more information, see “Examples and site settings” in Using Flex

Builder Help.

Problem Possible solution

Port conflicts If you created a new server for the Flex application, make sure the ports used by

that server don’t conflict with other servers running on your web application server.

Application

server

Make sure the integrated JRun4/Flex server is running. In Windows, select Start >

All Programs > Macromedia > Macromedia Flex > Start Integrated Flex Server.

Flash Player Make sure you’re running the latest Macromedia Flash Player. Flash Player is

installed when you install Flex Builder.

Tutorial: Setting up a development environment 5

In the Flex application root folder, locate the folder named products in the

\samples\flexstore\assets\ folder and copy it to the \samples\fbBindings\assets\ folder.

The products folder contains the product images used in the tutorial. If you're working with

the integrated JRun4/Flex server locally, the path of the original products folder is as follows:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\flexstore\assets\products

After copying the folder, it should also appear at the following location:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\fbBindings\assets\products

Define a Flex Builder site

In this part of the tutorial, you define a Flex Builder site for the tutorials. A Flex Builder site lets

you visually design, preview, and debug MXML and ActionScript files without leaving Flex

Builder.

After you define the Flex Builder site, you can start working on the tutorials.

This section assumes you installed the Flex server on the same computer as Flex Builder using the

integrated JRun/Flex install option. If you installed the Flex server on a different computer, you

must use a procedure that’s different from the one below to define the site. For instructions, see

“Defining the site if the Flex server is remote” in Using Flex Builder Help.

In Flex Builder, select Site > Manage Sites, click the New button in the Manage Sites dialog box,

and select Flex Site from the context menu.

The Flex Server Site Setup dialog box appears.

Tip: You can also open this dialog box by clicking the Flex Site link on the Start page.

In the Site Name text box, enter Flex Builder Samples.

The name identifies your site. The samples folder contains not only the Flex Builder tutorials,

but other sample applications as well.

In the Local Root Folder text box, click the folder icon and select the following folder:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\

It should contain the Flex Builder tutorial folders (see “Copy the tutorial folders to the Flex

samples folder” on page 4), among other folders.

This step tells Flex Builder where your files are located on your hard disk.

In the Flex Server Root Folder text box, make sure the following path is specified:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\

This folder must always be a Flex application root folder on the server. You can tell if a folder is

an application root folder by checking to see if it has a WEB-INF/flex folder containing a flex-

config.xml file. An application root folder always has this folder and file. For more

information, see “Identifying a Flex application root folder” in Using Flex Builder Help.

This step tells Flex Builder where it can “test” files—that is, where it can send MXML and

ActionScript files to be compiled by the Flex server at design time. Flex Builder needs to get

these files compiled so you can preview MXML files, get build and debugging information,

and connect to back-end systems.

6 Flex Builder Tutorials

In the URL Prefix text box, enter the following URL:

http://localhost:8700/samples/

Caution: Flex Builder may auto-populate this text box with http://localhost:8700/flex/. Make sure

you change the value to http://localhost:8700/samples/.

To get the Flex server to compile files while you work, Flex Builder uploads the file to the

application root folder you specified and attempts to request it using the URL prefix.

The Flex Server Site Setup dialog box should look like this:

Click OK to define the site and close the dialog box, and then click Done to close the Manage

Sites dialog box.

The Flex Builder site is defined and the tutorials are set up. To start working on a tutorial, see any

of the following:

•“Tutorial: Creating a layout with Flex Builder” on page 6

•“Tutorial: Building custom components with Flex Builder” on page 15

•“Tutorial: Binding components to data with Flex Builder” on page 39

Tutorial: Creating a layout with Flex Builder

This tutorial shows you how to use Flex Builder to quickly lay out a Flex user interface.

You can complete this tutorial as a stand-alone unit or as the first part of a multipart tutorial. In

either case, you must complete the setup tutorial before you begin. For instructions, see “Tutorial:

Setting up a development environment” on page 1.

In this tutorial, you’ll accomplish the following tasks:

•“Review the approved user interface mock-ups” on page 7

•“Create an MXML file” on page 8

•“Import your CSS styles” on page 9

•“Position the page title” on page 9

•“Position the catalog component” on page 11

•“Position the product detail and shopping cart components” on page 12

•“Add view buttons to the product catalog” on page 13

Tutorial: Creating a layout with Flex Builder 7

Review the approved user interface mock-ups

During the planning and approval stages of the project, members of your team produced final

mock-ups of the user interface for the Flex Store. You will use these mock-ups to guide you when

you create the MXML layout.

The final mock-ups for the Flex Store application are stored in your fbLayout folder:

/fbLayout/mockups

You can open a mock-up file in your favorite image editor from the Files panel in Flex Builder.

This feature is useful if you want to quickly change or touch up a mock-up.

In Flex Builder, make sure the Flex Builder Samples site is selected in the Files panel.

If the Files panel is closed, select Window > Files to open it.

In the Files panel, locate the uiGrid.png image and double-click it.

Flex Builder opens the image in your default image editor. For more information on setting a

default image editor, see “Setting external image editor preferences” in Using Dreamweaver

Help.

The first mock-up file, uiGrid.png, shows the general layout of the Flex Store user interface:

8 Flex Builder Tutorials

The user will also have the option of viewing thumbnails in the product catalog on the left side of

the layout. The second mock-up file, uiThumbs.png, shows this thumbnail view:

The layout contains the following custom components:

•Two interchangeable product catalog components on the left side, which give the user two

views of the catalog

•A product detail component on the upper right side

•A shopping cart component on the lower right side

Another tutorial shows you how to build these components (see “Tutorial: Building custom

components with Flex Builder” on page 15). In this tutorial you create the basic layout of the

application.

Create an MXML file

In this part of the tutorial, you take the first step in laying out the application by creating an

MXML file. MXML is a XML-based language for building Flex applications. For more

information, see “About MXML files” in Using Flex Builder Help.

In Flex Builder, make sure the Flex Builder Samples site is selected in the Files panel.

Select File > New.

The New Document dialog box appears.

Select Flex Development in the left pane and MXML Application in the right pane, and then

click Create.

The dialog box closes and a blank MXML file appears.

Tutorial: Creating a layout with Flex Builder 9

Set the following property in the Attributes panel of the Tag inspector (Window > Tag

Inspector):

■Styles > verticalGap: 0

Note: The angle bracket means the verticalGap property is located in the Styles category of the

Attributes tab. This convention is used throughout the tutorials.

Save the file in the fbLayout folder by selecting File > Save, double-clicking the fbLayout folder,

and naming the file as follows:

flexstore.mxml

Import your CSS styles

In this part of the tutorial, you import CSS styles into the flexstore.mxml file. You want to import

styles defined in an external CSS file to make sure your site has a consistent look and feel. CSS

styles also give you more flexibility when you want to change the design of your site.

Make sure the flexstore.mxml file is open in Flex Builder.

Open the CSS Styles panel (Window > CSS Styles) and click the Attach Style Sheet button at

the lower edge of the panel.

The Attach External Style Sheet dialog box appears.

In the Attach External Style Sheet dialog box, click Browse to select the external CSS style sheet

called flexstore.css located in the fbLayout folder.

After you click OK twice to close the dialog boxes, the name of the external CSS style sheet

appears in the CSS Styles panel. You can click the Plus (+) icon to display a tree view of all the

styles in the style sheet and their properties.

Save your work.

Position the page title

After importing the CSS styles, the next task is to create a basic layout for the user interface. In

this part of the tutorial, you position the page title (Flex Store) in the upper left corner of the

layout, as indicated in the mock-up of the user interface (see “Review the approved user interface

mock-ups” on page 7).

You decide to use a VBox (for vertical box) container to position the page title at the top of the

file. The rest of the user interface will be positioned below the page title.

10 Flex Builder Tutorials

In Design view, click the Expanded button on the Document toolbar and then click anywhere

inside the Application container.

Expanded mode adds borders and padding to controls and containers in Design view to help

you lay out your application. (The borders and padding appear only at design time.) You can

click the Standard button at any time to get a better representation of how your project will

look after it’s compiled.

In the Containers category of the Insert bar, click the VBox button.

Flex Builder inserts a VBox container in the file.

With the insertion point still blinking in the VBox container, set the following property in the

Attributes panel:

■Size > widthFlex: 0

Tip: To verify that the component is selected, check that <mx:VBox> and its associated icon

appear at the top of the Attributes panel.

Insert the page title by clicking anywhere inside the VBox container and clicking the Label

button in the Controls category of the Insert bar.

Flex Builder inserts a Label control in the file and selects it.

Modify the Label text by double-clicking the Label control to open the Quick Tag Editor, and

then changing the text property value to "Flex Store" as follows and pressing Enter.

With the Label control still selected, set the following property in the Attributes panel:

■Common > styleName: appTitle

You can select the style from the pop-up menu that appears when you click the field for the

styleName property.

You can see the effect of applying the style in Design view.

Save your work.

This manual suits for next models

Table of contents

Other MACROMEDIA Software manuals

MACROMEDIA

MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH... User manual

MACROMEDIA

MACROMEDIA CONTRIBUTE-USING CONTRIBUTE Mounting instructions

MACROMEDIA

MACROMEDIA CONTRIBUTE 3-CONTRIBUTE PUBLISHING SERVER User manual

MACROMEDIA

MACROMEDIA COLDFUSION 5 - INSTALING AND CONFIGURING... User manual

MACROMEDIA

MACROMEDIA FIREWORKS 8-USING FIREWORKS Mounting instructions

MACROMEDIA

MACROMEDIA DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER User manual

MACROMEDIA

MACROMEDIA COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX... Mounting instructions

MACROMEDIA

MACROMEDIA STUDIO 8-EXPLORING STUDIO 8 User manual

MACROMEDIA

MACROMEDIA BREEZE-USING THE MACROMEDIA BREEZE MANAGER Mounting instructions

MACROMEDIA

MACROMEDIA COLDFUSION 4.5-DEVELOPING WEB User manual

MACROMEDIA

MACROMEDIA CONTRIBUTE 3-DEPLOYING CONTRIBUTE User manual

MACROMEDIA

MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH User manual

MACROMEDIA

MACROMEDIA BREEZE PRESENTER User manual

MACROMEDIA

MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH LITE User manual

MACROMEDIA

MACROMEDIA BREEZE-USING THE BREEZE XML WEB SERVICES Mounting instructions

MACROMEDIA

MACROMEDIA CONTRIBUTE 3 - USING AND ADMINISTERING... Mounting instructions

MACROMEDIA

MACROMEDIA BREEZE-FOR MEETING PARTICIPANTS User manual

MACROMEDIA

MACROMEDIA FLASH MX 2004-DATA Operation instructions

MACROMEDIA

MACROMEDIA FREEHAND MX 11 Mounting instructions

MACROMEDIA

MACROMEDIA BREEZE Quick reference guide

MACROMEDIA

MACROMEDIA FREEHAND 10-USING FREEHAND Mounting instructions

MACROMEDIA

MACROMEDIA COLDFUSION MX 61 - CONFIGURING AND ADMINISTERING COLDFUSION... Guide

MACROMEDIA

MACROMEDIA FLASHLITE2 ACTIONSCRIPT-LANGUAGE Service manual

MACROMEDIA

MACROMEDIA COLDFUSION 4.5-ADMINISTRING COLDFUSION... User manual

Popular Software manuals by other brands

COMPRO

COMPRO COMPROFM manual

Muratec

Muratec OFFICEBRIDGE ONLINE user guide

Oracle

Oracle Contact Center Anywhere 8.1 installation guide

Adobe

Adobe 65007312 - Photoshop Lightroom Programmer's guide

Avaya

Avaya NULL One-X for RIM Blackberry user guide

HP ProLiant BL420c user guide

PS Audio

PS Audio PowerPlay Programming manual

Brady

Brady LOCKOUT PRO 3.0 Administrator's guide

Avaya

Avaya Interaction Center user guide

Texas Instruments

Texas Instruments TI-83 Plus Silver Edition Guide book

Novell

Novell GROUPWISE 8 - INTERNET AGENT manual

Oracle

Oracle Application 9i Configuration guide

Acer

Acer RDM user guide

Canon

Canon Vixia HF21 instruction manual

Canon

Canon ZR950 instruction manual

Samsung

Samsung Auto Backup user manual

Polycom

Polycom Vortex EF2201 Application note

Brocade Communications Systems

Brocade Communications Systems Brocade 8/12c user manual