MACROMEDIA COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX 2 Guia do Utilizador Página 1

Getting Started with Flex 2Adobe® Flex™ 2

10 Installing Flex BuilderInstalling Flash Player 9You must use Flash Player 9 to run Flex 2 applications. Although the installer automatically instal

1018CHAPTER 8Create Your First ApplicationThis lesson shows you how to compile and run a simple Flex application with Adobe Flex Builder. This lesson

102 Create Your First Application4. In the Project Contents area, make sure the Use Default Location option is selected.The default location for your

Learn about compiling in Flex Builder 103The New Flex Project wizard automatically generates project configuration files, the output (bin) folder wher

104 Create Your First ApplicationWhen you create a project, Flex Builder creates a main application file and names it based on the project name. An ap

Create and run an application 105The final application should look like the following:<?xml version="1.0" encoding="utf-8"?>

106 Create Your First ApplicationA browser opens and runs the application.7. Click the “Welcome to Flex!” text to see the WipeRight effect.To learn mo

1079CHAPTER 9Retrieve and Display DataTo provide data to your application, Adobe Flex includes components designed specifically for interacting with H

108 Retrieve and Display DataSet up your projectBefore you begin this lesson, perform the following tasks: If you have not already done so, create th

Insert and position the blog reader controls 1091. With your Lessons project selected in the Navigator view, select File > New > MXML Applicatio

11About Flex DocumentationGetting Started with Flex 2 provides an introduction to the Adobe® Flex™ 2 product line, and contains a series of lessons de

110 Retrieve and Display Data Y: 225The layout should look like the following:9. Switch to the editor’s Source mode by clicking the Source button in

Insert and position the blog reader controls 11110. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run

112 Retrieve and Display DataInsert a HTTPService component For the blog reader in this lesson, you retrieve posts from Matt Chotin’s blog at http://w

Insert a HTTPService component 1133. In the <mx:Panel> tag, replace the value of the title property (“Blog Reader”) with the following binding e

114 Retrieve and Display DataSome nodes have child nodes containing data, including the “title” child node of the channel node. The lastResult object

Populate a DataGrid control 115Populate a DataGrid controlIn your application, you want the DataGrid control to display the titles of recent posts and

116 Retrieve and Display DataThe final application should look as follows:<?xml version="1.0" encoding="utf-8"?><mx:Appli

Display a selected item 117A browser opens and runs the application.Blog titles and dates should appear in the DataGrid control, confirming that the a

118 Retrieve and Display DataFor each selected item in the DataGrid component (named dgPosts), the value of the description field is used for the valu

Create a dynamic link 119You decide to create a dynamic link that opens a browser and displays the full content of the post selected in the DataGrid.1

12 About Flex DocumentationUsing this manualThis manual can help anyone get started with developing Flex applications. After reading this manual, you

120 Retrieve and Display Data2. Save the file, wait until Flex Builder finishes compiling the application, and click the Run button.A browser opens an

12110CHAPTER 10Create a Constraint-based LayoutThis lesson shows you how to create a constraint-based layout with Adobe Flex Builder. A constraint-bas

122 Create a Constraint-based LayoutLearn about constraint-based layouts in FlexWhen a user resizes a Flex application window, you want the components

Insert and position the components 1232. Designate the Layout.mxml file as the default file to be compiled by right-clicking (Control-click on Macinto

124 Create a Constraint-based Layout4. Use the pointer to position the Label and TextInput controls side-by-side about 60 pixels (two centimeters) fro

Insert and position the components 1256. Select the Label control in the layout and set the following Label properties in the Flex Properties view: T

126 Create a Constraint-based LayoutYou can preview the layout by clicking the Design button in the toolbar. The layout should look similar to the fol

Insert and position the components 12711. Click the Run button in the toolbar. If you’re using the plug-in configuration of Flex Builder, select Run &

128 Create a Constraint-based Layout12. Drag the edges of the browser window to make the application bigger and smaller.The components maintain their

Define the layout constraints 1292. In the Flex Properties view, ensure that the Layout category of properties is expanded.The Layout category contain

Using this manual 13Chapter 12, “Use an Event Listener”Shows you how to use an event listener. It shows you how to write one for a Button control, and

130 Create a Constraint-based LayoutThese constraints are expressed as follows in the MXML code:<mx:TextInput y="60" left="90"

Define the layout constraints 1316. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run button in the to

132 Create a Constraint-based LayoutIf you make the browser window wider, the Send button moves to the right and the TextInput and TextArea text boxes

Define the layout constraints 133In this lesson, you learned how to create a constraint-based layout with Flex Builder. The following table summarizes

134 Create a Constraint-based Layout

13511CHAPTER 11Use List-based Form ControlsYou can use list-based form controls such as a ComboBox, List, or HorizontalList in your Adobe Flex applica

136 Use List-based Form Controls1. With your Lessons project selected in the Navigator view, select File > New > MXML Application and create an

Insert and position controls 137The layout should look like the following example in Design mode:7. Switch to the editor’s Source mode by clicking the

138 Use List-based Form ControlsA browser opens and runs your small Flex application.9. Click the ComboBox control in the browser.The control doesn’t

Populate the list 1391. In the editor’s Source mode, enter the <mx:dataProvider> tag between the opening and closing <mx:ComboBox> tag, as

14 About Flex DocumentationAccessing the Flex documentationThe Flex documentation is designed to provide support for the complete spectrum of particip

140 Use List-based Form ControlsIf you want to access the value of the selected item in the ComboBox control, you can use the following expression in

Associate values with list items 141To do this, you populate the ComboBox control with an array of Object components. The <mx:Object> tag lets y

142 Use List-based Form Controls

14312CHAPTER 12Use an Event ListenerWhen you develop Adobe Flex applications, event handling is one of the most basic and important tasks. Events let

144 Use an Event ListenerSet up your projectBefore you begin this lesson, ensure that you perform the following tasks: If you have not already done s

Create a simple user interface 1455. Arrange the controls so that the layout is similar to the following example:6. Select the first Label control and

146 Use an Event Listener11. Switch to Source mode and examine the code generated by Flex Builder.Your code should look as follows (your coordinate va

Associate the listener with an event with MXML 147The keyword public specifies the function’s scope. In this case, the function is available throughou

148 Use an Event Listener2. Save the file, wait until Flex Builder compiles the application, and click Run in the toolbar. If you’re using the plug-in

Associate the listener with an event with ActionScript 1494. Enter the following function immediately before the convertCurrency function in the <m

151PART 1Introducing FlexThis part contains an introduction to the the Adobe Flex 2 product line and Adobe Flex Builder.The following chapters are inc

150 Use an Event ListenerThe final application should look like the following:<?xml version="1.0" encoding="utf-8"?><mx:A

15113CHAPTER 13Use BehaviorsAdobe Flex behaviors let you add animation and motion to your application in response to user or programmatic action. A be

152 Use BehaviorsCreate a behavior You decide to create a behavior so that a button glows when a user clicks it. You want the glow to be green, last o

Create a behavior 1536. In the Properties view, click the Category View button in the toolbar to view the properties as a table, and then locate the E

154 Use BehaviorsFlex Builder compiles the application.9. Click the Run button in the toolbar. If you’re using the plug-in configuration of Flex Build

Invoke an effect from a different component 155 X: 40 Y: 1002. Switch to Source mode and define your Blur effect by entering the following <mx:Bl

156 Use BehaviorsThe Behaviors.mxml file should contain the following MXML code:<?xml version="1.0" encoding="utf-8"?><mx

Create a composite effect 157Create a composite effectYou can make the Label component move down by 20 pixels while the numbers come into focus. In ot

158 Use Behaviors6. Save the file. The final application should look like the following:<?xml version="1.0" encoding="utf-8"?&g

15914CHAPTER 14Use View States and TransitionsYou can use view states and transitions in Adobe Flex to create richer, more interactive user experience

160 Use View States and TransitionsSet up your projectBefore you begin this lesson, ensure that you perform the following tasks: If you have not alre

Design the base state 1615. Add the following controls to the panel by dragging them into the panel from the Controls category of the Components view:

162 Use View States and TransitionsThe layout should look similar to the following example:10. Switch to the editor’s Source mode by clicking the Sour

Design the base state 16311. Save the file, wait until Flex Builder compiles the application, and click the Run button in the toolbar. If you’re using

164 Use View States and TransitionsDesign a view stateThe sample application provides a simple search mechanism that meets the needs of most users. Ho

Design a view state 165You can use the layout tools in Flex Builder to make changes to the appearance of the new state. You can modify, add, or delete

166 Use View States and Transitions8. Switch to Source mode and examine the code.Flex Builder inserted a <mx:states> tag after the opening <m

Design a view state 1679. Save the file, wait until Flex Builder compiles the application, and click Run in the toolbar.A browser opens and runs the a

168 Use View States and TransitionsDefine how users switch view statesYou want to design your application so that when the user clicks the Advanced Op

Define how users switch view states 1694. Select the LinkButton control in the layout of the Advanced view state, and then specify the following click

171CHAPTER 1Introducing Flex This topic introduces you to the Adobe® Flex™ 2 product line. Flex delivers an integrated set of tools and technology tha

170 Use View States and Transitions5. Save the file, wait until Flex Builder finishes compiling the application, and click the Run button in the toolb

Create a transition 171Create a transitionWhen you change the view states in your application, the check boxes immediately appear on the screen. You c

172 Use View States and TransitionsThe completed application should look like the following example:<?xml version="1.0" encoding="ut

Create a transition 1735. Click the LinkButton control to view the advanced search options.The WipeDown and Dissolve effects play simultaneously, caus

174 Use View States and Transitions

17515CHAPTER 15Create a Custom ComponentCreating custom MXML components can simplify the process of building complex applications. By breaking down th

176 Create a Custom ComponentCreate a test file for the custom componentYou decide to build a login box as a custom MXML component. Before you start,

Create the custom component file 177The layout should look similar to the following:5. Save the file.Now you can build and test your custom component.

178 Create a Custom Component3. With the myComponents folder still selected in the Navigator view, select File > New > MXML Component.The New MX

Design the layout of the custom component 179If you switch to Design mode, the component also appears in the Custom category of the Components view:If

18 Introducing Flex Adobe® Flex™ 2 SDK (software development kit) Adobe® Flex™ Builder™ 2 Adobe® Flex™ Data Services 2 Adobe® Flex™ Charting 2Thi

180 Create a Custom Component6. Select the second Label control and enter Password as the value of its text property.7. Select the first TextInput con

Define an event listener for the custom component 181This section describes how to define a simple event listener for the Login button. An event liste

182 Create a Custom Component6. Enter the following code in the CDATA construct:private function handleLoginEvent():void {lblTest.text = "logging

Use the custom component 1832. Locate the LoginBox component in the Custom category of the Components view.3. Drag the LoginBox component into the pan

184 Create a Custom ComponentThe layout should look similar to the following example:5. Switch to MXML editor’s Source mode by clicking the Source but

Use the custom component 185A browser opens and runs the application.The application displays the LoginBox component you inserted in the main applicat

186 Create a Custom Component

18716CHAPTER 16Use the Code EditorThis tutorial walks you through some of the essential code editing features in Adobe Flex Builder 2. Most of these f

188 Use the Code EditorSet up your projectBefore you begin this lesson, perform the following tasks: If you haven’t already done so, create the Lesso

Use Content Assist 189When you begin entering an MXML tag, code hints are immediately displayed, as shown here:2. Type the word panel and you’ll see t

About Flex 19 MXML is an XML language that you use to lay out the user interface for Flex applications. MXML provides tags that correspond to classes

190 Use the Code EditorShow line numbersTo more easily locate lines of code, you can display line numbers in the editor. With the CodeEditor.mxml fi

Use the Outline view 191Use the Outline viewYou use the Outline view to inspect the structure of and navigate to elements of your code. 1. Select and

192 Use the Code Editor4. A quick way to locate and navigate to elements in the Outline view is to select the view and begin typing the name of an MXM

Open a code definition 193Open a code definitionTo help simplify navigating to, inspecting, and modifying the various elements of your code that are l

194 Use the Code Editor

19517CHAPTER 17Debug an ApplicationThis lesson shows you the basic steps of debugging your applications in Adobe Flex Builder. The debugging tools hel

196 Debug an ApplicationSet up your projectBefore you begin this lesson, perform the following tasks: If you haven’t already done so, create the Less

Preview the application in design view 197Preview the application in design viewThe sample code you entered creates a simple currency converter that d

198 Debug an ApplicationAdd a calculation functionAn ActionScript function is used to capture the input from these controls, and calculate the exchang

Run and test the application 199This code sample purposely contains a logic error, which will help demonstrate how debugging works. Run and test the a

© 2006 Adobe Systems Incorporated. All rights reserved.Getting Started with Flex 2If this guide is distributed with software that includes an end-user

20 Introducing FlexThe following example shows the Flex Builder interface in design view:

200 Debug an ApplicationSet a breakpointTo debug the problem, you can set a breakpoint on the line of code to suspend the application so that you can

Debug the sample application 201Debug the sample applicationDebugging an application means that you are running it in debug mode. This allows you to s

202 Debug an Application4. To begin debugging, you need to step into the function that is called by the button’s click event. Select the Step Into com

Correct the coding error 203Like the variables contained within the function, you can monitor the Text component’s text property as you debug the appl

204 Debug an Application

20518CHAPTER 18Use Web ServicesTo provide data to your application, Adobe Flex includes components designed specifically for interacting with web serv

206 Use Web ServicesSet up your projectBefore you begin this lesson, perform the following tasks: If you have not already done so, create the Lessons

Insert and position controls 207The documentation describes a method called getMostPopularPosts. The method returns a number of posts with the most cl

208 Use Web Services4. In Design mode, drag the following controls into the Panel container from the Components view: ComboBox DataGrid LinkButton5

Insert and position controls 2098. Switch back to Design mode, select the DataGrid component, and specify the following properties in the Flex Propert

About Flex 21The following example shows the Flex Builder interface in code view:About Flex Data Services 2You build on the functionality of Flex 2 SD

210 Use Web Services10. Switch to Source mode.The Services.mxml file should contain the following MXML code (your coordinate values may vary):<?xml

Insert a WebService component 211The wsdl property specifies the location of the WSDL file for the web service. As of this writing, the location was s

212 Use Web ServicesThe final application code should look like the following:<?xml version="1.0" encoding="utf-8"?><mx:A

Populate the DataGrid component 213Populate the DataGrid componentYou want to use the DataGrid control to display the data returned by the web service

214 Use Web Services5. Save the file, wait until Flex Builder finishes compiling the application, and then click the Run button in the toolbar to test

Populate the DataGrid component 215The final application code should look like the following:<?xml version="1.0" encoding="utf-8&quo

216 Use Web ServicesBlog titles and click statistics should appear in the DataGrid control after the application starts, confirming that the applicati

Create a dynamic link 2171. In Source mode, enter the following click property in the <mx:LinkButton> tag (in bold):<mx:LinkButton x="30

218 Use Web Services

21919CHAPTER 19Use the Data Management ServiceThe Adobe Flex Data Management Service feature is a Flex Data Services feature that spans the client, ne

22 Introducing FlexThese features let you create and deploy enterprise-class applications that take full advantage of the rich presentation layer that

220 Use the Data Management ServiceBefore you beginBefore you begin this tutorial, perform the following tasks: Ensure that you have installed Flex D

Build a distributed application with the ActionScript object adapter 2212. Directly above the text <destination id="contact">, make su

222 Use the Data Management Service2. Save the file. If you are not using Flex Builder, open the following URL in a browser window:http://localhost:po

Build a distributed application with the ActionScript object adapter 223Create variablesIn this section, in the script block you declare variables for

224 Use the Data Management Service4. Add the boldface text to the <mx:Application> tag to call the initApp() method when the contact applicatio

Build a distributed application with the ActionScript object adapter 225Verify that your code is correctYour code should match the following code exam

226 Use the Data Management ServiceRun the completed notes applicationIn this section, you run the completed notes application in two browser windows

Build a distributed application with the Java adapter 227In this lesson, you used the Data Management Service feature with the ActionScript object ada

228 Use the Data Management ServiceCopy the following destination definition after the last destination in the samples/WEB-INF/flex/data-management-co

Build a distributed application with the Java adapter 229View the samples.contact.Contact classThe following example shows the code of the Contact.as

Benefits of using Flex 23Benefits of using FlexEnhanced user experience Flex lets you build applications that provide an engaging user experience. An

230 Use the Data Management Service1. Create a three-column editable DataGrid control by adding the following MXML code after the beginning <mx:App

Build a distributed application with the Java adapter 2312. Directly below the <![CDATA[ tag, add the following ActionScript import statements:impo

232 Use the Data Management Service1. Add the following method declaration directly under the variable declarations to create an event listener:public

Build a distributed application with the Java adapter 233Verify that your code is correctYour code should match the following code example. Verify tha

234 Use the Data Management Service2. Ensure that both instances of the application look like the following example. Resize the browser windows so tha

Build a distributed application with the Java adapter 235View the server-side Data Management Service destinationThe lesson2.mxml file contains a Data

236 Use the Data Management ServiceThe previous example calls out the following elements of the contact destination definition:Destination section Des

Build a distributed application with the Java adapter 237View the assembler classThe contact destination uses the Java adapter. This is one of several

238 Use the Data Management ServiceView the fill methodsA fill method of the assembler class is called as a result of the client-side DataService’s fi

Build a distributed application with the Java adapter 239The following example shows the flow of a fill() method call from the client-side contact app

24 Introducing FlexFlex application characteristics Many types of applications are appropriate for development in Flex. Some of the requirements of th

240 Use the Data Management ServiceView the sync methodThe sync method of an assembler class lets you handle data changes sent from client-side DataSe

Build a distributed application with the Java adapter 241The following example shows the assembler class’s doCreate(), doUpdate(), and doDelete() meth

242 Use the Data Management ServiceIn this lesson, you used the Data Management Service feature with the Java adapter to create a distributed data app

24320CHAPTER 20Use ColdFusion Event Gateway AdapterThis tutorial shows you how to create a Flex application to send a message to a ColdFusion applicat

244 Use ColdFusion Event Gateway AdapterSet up your development environmentThe ColdFusion Event Gateway Adapter lets you create applications in which

Set up your development environment 245To ensure that Flex Data Services recognizes the ColdFusion Event Gateway Adapter, you edit the messaging-confi

246 Use ColdFusion Event Gateway AdapterCreate the Flex applicationThe Flex application in this tutorial is a simple form in which you specify the ele

Create the Flex application 247Import the required ActionScript classesIn this section, you create a script block and import a set of classes that you

248 Use ColdFusion Event Gateway AdapterSend a message to ColdFusionIn this section, you create a function to send a message through the Flex Messagin

Create the Flex application 249 <![CDATA[ import mx.messaging.events.*; import mx.messaging.Producer;import mx.messaging.messages.AsyncMessage; p

Flex deployment models 25Support for large data sets Enterprise data applications often handle large data sets that must be transmitted to the client

250 Use ColdFusion Event Gateway Adapterclick="sendMessage();"/><mx:Label id="messagestatus" x="103" y="350&q

Test the application 2512. Save the file handleemail.cfc in the C:\CFusionMX7\wwwroot\flexgatewayexamples folder.Test the applicationTo test the sampl

252 Use ColdFusion Event Gateway AdapterCheck e-mail messagesTo ensure that the application executed successfully, check the e-mail messages of the re

253IndexAActionScriptabout 91compiling 93creating components 97custom components 97defining components 97identifiers 96importing files 96in MXM

254dataProvider propertycharts 79deployment models 25development environment, Flex 75doughnut charts 83Eevent model, standards in MXML 89Ffeature

255MXML syntaxdata binding 65Script tag 96mxmlc 70PPieChart controlabout 83PlotChart control 84SScript tagabout 94in MXML 96with ActionScript

256

26 Introducing FlexError reporting Lets you direct runtime error and warning messages to a log file. Flash Debug Player can also capture the output of

Flex deployment models 27Data access with HTTPService and WebServiceThe Flex HTTPService and WebService tags let you retrieve data from a remote serve

28 Introducing FlexWith Flex 2 SDK, Flash Player provides the platform for interface development so that both client and presentation tier logic execu

Flex deployment models 29This example shows Flex Data Services executing on the application server. Flex applications executing in Flash Player can pa

3ContentsInstalling Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Installing Flex Builder (stand-alone). .

30 Introducing FlexSummary of Flex application featuresThe following table describes the features that you are most likely to use when building Flex a

Summary of Flex application features 31Data services Data service objects let you interact with server-side data sources. You can work with data sourc

32 Introducing FlexRepeaters Repeaters let you dynamically repeat any number of controls or containers specified in MXML tags, at runtime.For more inf

Where to next 33Where to nextThis book contains an introduction to Flex and an overview of developing Flex applications. The Flex documentation set co

34 Introducing Flex

352CHAPTER 2Introducing Flex Builder 2This chapter introduces you to Adobe® Flex™ Builder™ 2. An integrated development environment (IDE) for developi

36 Introducing Flex Builder 2Flex Builder versions and configurationsFlex Builder is available in two versions: the standard version and a version tha

About Flex Builder perspectives 37Perspectives change automatically to support the task at hand. For example, when you create a Flex project, the work

38 Introducing Flex Builder 2The code editor is contained within the Flex Development perspective, which also includes the supporting Navigator, Probl

About Flex Builder perspectives 39The Flex Development perspective contains the following elements:Code editor Allows you to write MXML, ActionScript,

4ContentsChapter 4: Building a Flex Data Services Application . . . . . . . . . 71About Flex Data Services . . . . . . . . . . . . . . . . . . . . .

40 Introducing Flex Builder 2Problems view Displays syntax and other compilation errors that are detected by the compiler. Since by default the compil

About Flex Builder perspectives 41Content Assist also provides hinting for any custom MXML components or ActionScript classes that you create yourself

42 Introducing Flex Builder 2Components view All of the Flex containers and components are contained in this view and you may select and add them to t

About Flex Builder perspectives 43The Standard View shows some of the most commonly used general properties for that control or container (such as ID)

44 Introducing Flex Builder 2If you select the Alphabetical View command ( ), Flex Builder displays a complete alphabetical list of the container’s or

About Flex Builder perspectives 45The Flex Debugging perspectiveThe Flex Debugging perspective contains the tools you need to debug your applications.

46 Introducing Flex Builder 2The Flex Debugging perspective contains the following views: Debug view The Debug view (in other debuggers this is someti

About Flex Builder perspectives 47Variables view The Variables view serves the same purpose as the locals window does in other debuggers. It displays

48 Introducing Flex Builder 2Compiling your applicationsFlex Builder automatically compiles your Flex and ActionScript 3.0 projects into application S

More information about Flex Builder 49For more information, see Chapter 11, “Running and Debugging Applications” in Using Flex Builder 2. More informa

Contents 5Chapter 11: Use List-based Form Controls. . . . . . . . . . . . . . . . . . 135Set up your project. . . . . . . . . . . . . . . . . . . . .

50 Introducing Flex Builder 2

512PART 2Flex BasicsThis part presents an overview of the products and technologies that comprise the Flex environment.The following chapters are incl

533CHAPTER 3Building a Flex ApplicationFlex defines a component-based development model that you use to build your applications. To effectively design

54 Building a Flex ApplicationFor example, the following figure shows two different Box containers that each contain three Button controls and a Combo

Developing applications 55The data model supports automatic data validation. This means that you can use the Flex validators, such as the ZipCode vali

56 Building a Flex Application Web application serverA web application server, such as JRun, ColdFusion, or PHP, can dynamically generate pages that

Developing applications 577. Add a script to extend a component.8. Compile your application into a SWF file.Deploying applicationsYou can deploy your

58 Building a Flex ApplicationThe main MXML file contains the <mx:Application> tag. For more information, see Chapter 6, “Using MXML,” on page 8

The Flex programming model 59Relationship of the Flex class hierarchy to MXML and ActionScriptFlex is implemented as an ActionScript class library. Th

6ContentsShow language reference Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Open a code definition . . . . . . . . . . .

60 Building a Flex ApplicationOne advantage of having predefined layout rules is that your users will soon grow accustomed to them. That is, by standa

The Flex programming model 61The following example is an MXML application that uses a Button control to trigger a copy of the text from a TextInput co

62 Building a Flex ApplicationAdding ActionScript to a Flex applicationActionScript follows the ECMA-262 Edition 4 (the specification written by the E

The Flex programming model 63The following example is a modification to the example in the previous section that adds an event listener for the click

64 Building a Flex ApplicationThe previous example inserts the ActionScript code directly into the MXML code. Although this technique works well for o

The Flex programming model 65Using data bindingFlex provides simple syntax for binding the properties of components to each other, or to a data model.

66 Building a Flex ApplicationView states In many Rich Internet Applications, the interface changes based on the task the user is performing. View sta

About the Flex coding process 67Many times, the choice depends on your existing applications and how you choose to integrate them with your back end s

68 Building a Flex ApplicationUnlike a set of static HTML pages or HTML templates created using JSP, ASP, or CFML, the files in a Flex application are

About the Flex coding process 69Moving to Flex from an HTML templating environment In contrast to environments like JSP, ASP, and ColdFusion, Flex is

7Installing Flex BuilderThis topic contains installation instructions for installing Adobe® Flex™ Builder™ 2 (both the stand-alone and plug-in configu

70 Building a Flex ApplicationUsing Flex development toolsFlex provides the following tools to help you test, debug, and tune your applications during

714CHAPTER 4Building a Flex Data Services ApplicationWhen you use Flex Data Services to develop applications, you take advantage of its enhanced data

72 Building a Flex Data Services ApplicationAbout Flex Data Management ServiceThe Flex Data Management Service is a Flex Data Services feature that le

About Flex Data Management Service 73About the Flex Message Service The Flex Message Service is based on established messaging standards and terminolo

74 Building a Flex Data Services ApplicationPublish-subscribe messagingFlex supports publish-subscribe messaging, also known as topic-based messaging.

About the development environment 75Using RPC service components with the Flex 2 SDK onlyYou can use Flex 2 SDK without Flex Data Services to create a

76 Building a Flex Data Services ApplicationThe directory structure of a typical Flex-enabled web application looks like the following:Directory Descr

775CHAPTER 5Using Flex Charting ComponentsThe ability to display data in a chart or graph can make data interpretation much easier for Flex applicatio

78 Using Flex Charting ComponentsA simple chart shows a single data series, where a series is a group of related data points. For example, a data seri

Chart types 79Defining chart dataThe chart controls all take a dataProvider property that defines the data for the chart. A data provider is a collect

8 Installing Flex BuilderInstalling Flex Builder (stand-alone)The stand-alone configuration of Flex Builder includes a customized version of Eclipse,

80 Using Flex Charting ComponentsBar chartsYou use the BarChart control to represent data as a series of horizontal bars whose length is determined by

Chart types 81The following shows an example of a CandlestickChart chart:Column chartsThe ColumnChart control represents data as a series of vertical

82 Using Flex Charting ComponentsHighLowOpenClose chartsThe HLOCChart control represents financial data as a series of lines representing the high, lo

Chart types 83Pie chartsYou use the PieChart control to define a standard pie chart. The data for the data provider determines the size of each wedge

84 Using Flex Charting ComponentsPlot chartsYou use the PlotChart control to represent data in Cartesian coordinates where each data point has one val

856CHAPTER 6Using MXML MXML is an XML language that you use to lay out the user-interface for Adobe Flex applications. You also use MXML to declarativ

86 Using MXMLWriting a simple applicationBecause MXML files are ordinary XML files, you have a wide choice of development environments. You can write

Using MXML 87About XML encodingThe first line of the document specifies an optional declaration of the XML version. It is good practice to include enc

88 Using MXMLMXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the co

How MXML relates to standards 89XML standardsYou write Flex applications in XML documents. XML documents use tags to define pieces of structured infor

Installing Flex Builder (plug-in) 9Installing Flex Builder (plug-in)The plug-in configuration of Flex Builder is an Eclipse plug-in that is installed

90 Using MXMLHTTP standardsFlex provides MXML tags for making standard HTTP GET and POST requests, and working with data returned in HTTP responses.Gr

917CHAPTER 7Using ActionScriptAdobe Flex developers can use ActionScript to extend the functionality of their Flex applications. ActionScript provides

92 Using ActionScriptComparing ActionScript and ECMAScript (JavaScript)ActionScript 3.0 features a full implementation of ECMAScript for XML (E4X), re

About ActionScript 93ActionScript compilationThe logic of your Flex application can consist of ActionScript classes, MXML files, SWF files, and extern

94 Using ActionScriptUsing ActionScript in Flex applicationsWhen you write a Flex application, you use MXML to lay out the user interface of your appl

Using ActionScript in Flex applications 95The following example declares a variable and a function:<?xml version="1.0" encoding="utf

96 Using ActionScriptReferring to Flex components in ActionScriptWhen you refer to Flex components in ActionScript, the component must have an id prop

Creating ActionScript components 97Creating ActionScript componentsYou create reusable components using ActionScript, and reference these components i

98 Using ActionScriptIn this example, you first define the cmp namespace that defines the location of your custom component in the application’s direc

993PART 3LessonsThis part contains an a series of lessons designed to teach you the fundamentals of Flex. You can do all of the lessons, or only the o