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
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
Kommentare zu diesen Handbüchern