developing rich client applications

ADOBE FLEX 3 Developing Rich Client Applications

ADOBE FLEX 3 Developing Rich Client ApplicationsIntroducing Flex 3:......................................................................................................................... 7 Developing Rich Client Applications ............................................................................................... 7 Introducing Mastery Learning .............................................................................................................. 8 Understanding the Course Format ....................................................................................................... 8 Reviewing the Course Prerequisites..................................................................................................... 9 Summary .............................................................................................................................................. 9 Introducing Adobe Flex 3 ............................................................................................................. 10 Understanding rich Internet applications .......................................................................................... 11 Understanding Adobe Flex ................................................................................................................. 12 Understanding Adobe Flex Builder..................................................................................................... 13 Understanding the foundation of the RIA .......................................................................................... 14 Understanding the Flex application process flow .............................................................................. 15 Accessing remote data resources from a Flex application................................................................. 16 Getting help and other resources ...................................................................................................... 16 Summary ............................................................................................................................................ 17 Getting Started with Flex Builder ................................................................................................. 18 Understanding the relationship between Eclipse and Flex Builder ................................................... 19 Exploring the Flex Builder interface ................................................................................................... 20 Creating a project and your first application...................................................................................... 22 Using the main application file ........................................................................................................... 24 Running the application file ............................................................................................................... 24 Compiling the application .................................................................................................................. 24 Grouping projects with workspaces ................................................................................................... 25 Walkthrough 1: Creating a main application file and running it ........................................................ 26 Debugging a Flex application.............................................................................................................. 31 Debugging an application ................................................................................................................... 32 Walkthrough 2: Debugging and using the Debugging Perspective .................................................... 34 Accessing help in Adobe Flex Builder ................................................................................................. 37 Pgina 1 de 274


Learning Flex Fundamentals ........................................................................................................ 39 Creating a simple Flex application...................................................................................................... 40 Walkthrough 1: Creating your first Flex application .......................................................................... 42 Displaying images ............................................................................................................................... 43 Walkthrough 2: Adding images to an application .............................................................................. 45 Laying out a Flex application with containers .................................................................................... 46 Walkthrough 3: Using basic layouts ................................................................................................... 50 Using the Panel container .................................................................................................................. 51 Walkthrough 4: Separating application modules into panels ............................................................ 53 The ControlBar container ................................................................................................................... 54 Walkthrough 5: Using a ControlBar container ................................................................................... 55 Adding user interface controls ........................................................................................................... 56 Creating data bindings between components ................................................................................... 57 Walkthrough 6: Creating data bindings ............................................................................................. 58 Architecting an application with MXML components........................................................................ 59 Walkthrough 7: Creating and instantiating a custom component..................................................... 61 Creating properties and methods for MXML components ................................................................ 62 Walkthrough 8: Creating properties and methods in a component .................................................. 64 Handling Events .......................................................................................................................... 68 Understanding events ........................................................................................................................ 69 Demonstration 1: Viewing system and user events........................................................................... 70 Creating event handlers using inline ActionScript ............................................................................. 70 Walkthrough 1: Using inline ActionScript .......................................................................................... 72 Handling events within ActionScript functions .................................................................................. 73 Walkthrough 2: Using a function for an event handler...................................................................... 74 Placing ActionScript functions in external files .................................................................................. 74 Demonstration 2: Using an external ActionScriptfile ......................................................................... 75 Understanding the Event object ........................................................................................................ 75 Walkthrough 3: Understanding the event object .............................................................................. 79 Demonstration 3: Simplify the event demo ....................................................................................... 80 Using the addEventListener() method ............................................................................................... 80 Walkthrough 4: Using the addEventListener() method ..................................................................... 82 Summary ............................................................................................................................................ 83

Pgina 2 de 274


Review ................................................................................................................................................ 83 Laying out an Application Using Constraint-Based Layout ............................................................. 84 Understanding absolute positioning .................................................................................................. 85 Positioning components within a Canvas container .......................................................................... 85 Walkthrough 1: Positioning components inside a Canvas ................................................................. 87 Creating a constraint-based layout using Flex Builder ....................................................................... 89 Walkthrough 2: Using Design mode to implement a constraint-based layout .................................. 91 Creating a constraint-based layout via MXML ................................................................................... 94 Walkthrough 3: Implementing a constraint-based layout in MXML.................................................. 95 Using Enhanced Constraints............................................................................................................... 95 Demonstration 1: Using Enhanced Constraints ................................................................................. 97 Using constraint-based layouts within nested containers ................................................................. 98 Walkthrough 4: Using custom components in a constraint-based layout ......................................... 99 Summary .......................................................................................................................................... 100 Review .............................................................................................................................................. 100 Lab: 1 ........................................................................................................................................ 101 Part 2: Creating the Contribute page component............................................................................ 104 Part 3: Create the Gallery page component..................................................................................... 107 Using View States for Application Design ................................................................................... 109 Understanding view states ............................................................................................................... 110 Walkthrough 1: Creating two states for the Contact page .............................................................. 113 Controlling view states ..................................................................................................................... 114 Walkthrough 2: Switching states in the Contact form ..................................................................... 115 Reviewing the generated MXML code ............................................................................................. 116 Walkthrough 3: Implementing view states using MXML ................................................................. 119 Creating view states that include custom component states .......................................................... 121 Walkthrough 4: Using custom components with their own view states ......................................... 122 Summary .......................................................................................................................................... 123 Review .............................................................................................................................................. 123 Creating Application Navigation ................................................................................................ 124 Understanding navigator containers and controls........................................................................... 125 Using the LinkBar control ................................................................................................................. 126 Using the TabBar control.................................................................................................................. 126

Pgina 3 de 274


Using the ViewStack container......................................................................................................... 127 Enabling Buttons Dynamically .......................................................................................................... 129 Walkthrough 1: Navigating the Cafe Townsend application using the ViewStack and TabBar control .......................................................................................................................................................... 130 Using the TabNavigator container ................................................................................................... 132 Using the Accordion container ......................................................................................................... 133 Walkthrough 2: Navigating the Cafe Townsend content using the TabNavigator and Accordion containers......................................................................................................................................... 135 Using ButtonBar & ToggleButtonBar................................................................................................ 135 Using the ApplicationControlBar container ..................................................................................... 136 Walkthrough 3: Adding the ApplicationControlBar container to the Cafe Townsend application.. 137 Summary .......................................................................................................................................... 138 Review .............................................................................................................................................. 138 Customizing the Application ...................................................................................................... 139 Customizing Flex application look and feel ...................................................................................... 140 Modifying Styles to change look-and-feel........................................................................................ 141 Using Themes ................................................................................................................................... 146 Walkthrough 1: Changing the look and feel of the Caf Townsend application.............................. 147 Applying behaviors to components.................................................................................................. 149 Walkthrough 2: Add behaviors to the Cafe Townsend seating chart .............................................. 153 Applying transitions to view state changes...................................................................................... 154 Walkthrough 3: Resize the contact Cafe Townsend panel during the view states transition ......... 157 Summary .......................................................................................................................................... 159 Review .............................................................................................................................................. 159 Lab 2: ........................................................................................................................................ 160 Using ActionScript Data Models ................................................................................................. 167 Using the MVC design pattern ......................................................................................................... 168 Creating an MXML data model......................................................................................................... 169 Using ActionScript classes as a data model...................................................................................... 170 Walkthrough 1: Instantiating an Object in MXML from an ActionScript class................................. 175 Creating an ActionScript constructor with parameters ................................................................... 177 Walkthrough 2: Instantiating an Object in ActionScript from an ActionScript class........................ 179 Defining class methods..................................................................................................................... 181 Walkthrough 3: Adding Methods to an ActionScript class............................................................... 183 Pgina 4 de 274


Summary .......................................................................................................................................... 184 Review .............................................................................................................................................. 184 Exchanging Data Between Components Using Custom Events..................................................... 185 Understanding the problem with bindings ...................................................................................... 186 Demonstration 1: Using a binding to get data from a component .................................................. 187 Creating custom events.................................................................................................................... 187 Walkthrough 1 : Creating, dispatching and handling a custom event ............................................. 190 Sending data with a custom event ................................................................................................... 193 Walkthrough 2: Creating a custom event object and dispatching it ................................................ 196 Summary .......................................................................................................................................... 199 Review .............................................................................................................................................. 199 Creating Data Entry Forms ......................................................................................................... 200 Using the Form container................................................................................................................. 201 Walkthrough 1 : Creating a data entry form component ................................................................ 203 Sharing Form Data ............................................................................................................................ 205 Walkthrough 2: Sharing Form Data with the Application ................................................................ 207 Validating form data......................................................................................................................... 209 Triggering validation with events ..................................................................................................... 210 Walkthrough 3: Validating Numeric Input ....................................................................................... 212 Triggering validation with ActionScript ............................................................................................ 213 Walkthrough 4: Triggering Validation with ActionScript.................................................................. 215 Summary .......................................................................................................................................... 216 Review .............................................................................................................................................. 216 Retrieving XML Data with HTTPService ...................................................................................... 217 Retrieving XML data at runtime ....................................................................................................... 218 Handling results................................................................................................................................ 219 Walkthrough 1: Retrieving data at runtime with HTTPService ........................................................ 222 Handling results using an event handler .......................................................................................... 223 Walkthrough 2: Using a result event................................................................................................ 224 Handling faults.................................................................................................................................. 226 Walkthrough 3: Handling a fault event ............................................................................................ 228 Making HTTP requests to different domains ................................................................................... 230 Walkthrough 4: Testing cross-domain policy ................................................................................... 232

Pgina 5 de 274


Making HTTP requests with parameters .......................................................................................... 233 Walkthrough 5: Using HTTPService with parameters ...................................................................... 235 Summary .......................................................................................................................................... 238 Review .............................................................................................................................................. 238 Displaying Data Using the DataGrid ........................................................................................... 239 Using the DataGrid control............................................................................................................... 240 Demonstration 1 : Displaying Simple XML Data in a DataGrid......................................................... 242 Specifying DataGrid columns............................................................................................................ 243 Walkthrough 1: Specifying DataGrid columns ................................................................................. 244 Formatting DataGrid columns .......................................................................................................... 245 Walkthrough 2: Formatting data in DataGrid columns .................................................................... 247 Using item renderers and item editors ............................................................................................ 248 Walkthrough 3: Using a drop-in item editor .................................................................................... 252 Inline item renderers and item editors ............................................................................................ 253 Walkthrough 4: Using an inline item editor ..................................................................................... 254 Item renderer and item editor components .................................................................................... 255 Walkthrough 5: Using a component item renderer ......................................................................... 256 Using the TileList and HorizontalList ................................................................................................ 257 Walkthrough 6: Displaying data with a TileList and HorizontalList .................................................. 257 Using events and selected items with list-based components ........................................................ 259 Walkthrough 7: Using a change event on the TileList ...................................................................... 259 Summary .......................................................................................................................................... 260 Review .............................................................................................................................................. 260 Lab 3 ......................................................................................................................................... 261

Pgina 6 de 274


Introducing Flex 3: Developing Rich Client ApplicationsIn this section of the course, you will learn the course format, prerequisites and topics.

ObjectivesAfter Completing this unit, you should be able to: Describe the target audience and prerequisites for this course Describe the course content and objectives

TopicsIn this unit, you will learn about the following topics: Introducing Mastery Learning Understanding the Course Format Reviewing the Course Prerequisites Reviewing the Course Outline

Pgina 7 de 274


Introducing Mastery LearningJust as there are methodologies for application development, there are methodologies for teaching and learning. The methodology used in this course is mastery learning. Mastery learning includes:Clearly stated learning objectives Presentation of material to support the learning objectives Model uses of new material Feedback from students Guided practice Each unit in this course starts with the objectives for that unit. The instructor for this course uses slides, the whiteboard and other media to get across concepts. The instructor for this course demonstrates the use of the product. The instructor for this course tests for understanding during and after each unit. Each unit in this course has a series of walkthroughs that you perform along with your instructor so thatyou get familiar with new skills. Each unit in this course concludes with a hands-on lab that lets you practice a set of new skills, on your own, in context. After each lab in this course you review what you have learned and discuss any problems that you may have had while practicing new skills.

Independent practice Closure and testing

Understanding Format

the

Course

This course is divided into 14 units, most of which present new information and contain demonstrations, walkthroughs and a lab. At the end of each unit, you will find a summary and a short review to test your knowledge of the units content. The following icons are used throughout the guide:

Concepts introduce new information.

Demonstrations illustrate new concepts.

Walkthroughs guide you, with the instructors assistance, through procedures.

Labs let you practice new skills on your own.

Summaries provide a brief synopsis of the units content.

Pgina 8 de 274

ADOBE FLEX 3 Developing Rich Client Applications Reviews test how well you remember the concepts from the unit.

Pgina 9 de 274


Reviewing the Course PrerequisitesTo gain the most from this class, you should already: Be familiar with an object-oriented programming language such as Java or C++ Be familiar with XML terminology and use

Reviewing the Course OutlineThis course is separated into the following 14 modules: Introducing Flex 3: Developing Rich Client Applications Introducing Adobe Flex 3 Getting Started with Flex Builder Learning Flex Fundamentals Handling Events Laying Out an Application Using Constraint-Based Layout Using View States for Application Design Creating Application Navigation Customizing the Application Using ActionScript Data Models Exchanging Data Between Components Using Custom Events Creating Data Entry Forms Retrieving XML Data with HTTPService Displaying Data Using the DataGrid

SummaryThe course is presented through a combination of lectures, demonstrations, walkthroughs, and labs To benefit the most from this course you should be familiar with an object oriented programming language and be familiar with XML terminology and use The course consists of 14 modules and 3 lab exercises

Pgina 10 de 274


Introducing Adobe Flex 3In this unit, you will begin to understand what a rich Internet application (RIA) is, and how Adobe Flex and the Adobe Flash Player help in constructing them. You will also understand the process of how MXML code you write is transformed into a SWF file delivered to the client.

ObjectivesAfter completing this unit, you should be able to: Describe en RIA Explain the different technologies in the Adobe Flex product line Describe what Adobe Flash Player is and some of its features Understand the application flow of a Flex application and how it is transformed into SWF and delivered to the client Know where and how to get help

TopicsIn this unit, you will learn about the following topics: Understanding rich Internet applications Understanding Adobe Flex Understanding Adobe Flex Builder Understanding the foundation of the RIA Understanding the Flex application process flow Accessing remote data resources from a Flex application Getting help and other resources

Pgina 11 de 274


Understanding rich Internet applicationsA rich Internet application (RIA) combines the best user interface functionality of desktop software applications with the broad reach and low-cost deployment of web applications and the best of interactive, multimedia communications.

The Evolution of applications

Figure 1: Evolution of applications

Aspects of an RIA includeEvery user interaction does not require request/web server response Data can be obtained from the server without redrawing entire page Combine the best of desktop, web and communications Efficiently utilize network bandwidth by transmitting only the portion of the data that changed

Advantages of RIAsImpact of RIAs from businesses that have implemented them 32% far more, or more successful than expected 37% as successful as expected 10% far less, or less than expected 21% have not measured business impact E-commerce sites that use RIAs have more shoppers that convert to buyers and their average order size is larger Manufacturing and travel reservation companies see total ROI benefits from 185% to 1,354%

Note: Information from Forrester research paper located at http://www.adobe.com/resources/business/rich_internet_apps/.

Pgina 12 de 274


Adobes tools for RIA development

Figure 2: Adobes tools for RIAdevelopment

Understanding Adobe FlexProvides a structured, proven, free, open-source development framework for creating long-term RIA solutions Used to build web sites, intranet and enterprise applications Flex applications run identically in all major browsers leveraging Flash Player and on the desktop using AIR

Figure 3: The major elements of Flex

Pgina 13 de 274


Adobe Flex SDKProvides skeleton of the application that developers can use to Extend the application using prebuilt components Extend those prebuilt components Build their own components from scratch Rich class library based on ActionScript 3.0 that embodies best practices for building RIAs Contains XML-based language called MXML that provides a declarative way to build applications Contains an ECMAScript compliant scripting language called ActionScript Compiler for creating SWF files from your MXML and ActionScript Example prebuilt components (ActionScript classes) ComboBox DataGrid DateChooser

Understanding Adobe Flex BuilderAdobe Flex Builder accelerates the design, development and testing of rich Internet applications built with Flex

Adobe Flex Builder StandardAdobe Flex Builder Standard is an Eclipse based development tool enabling Intelligent coding Interactive step-through debugging Visual design interface Imports assets from Adobe Creative Suite 3 making it easy for designers and developers to work together

Adobe Flex Builder ProfessionalAdobe Flex Builder Professional includes all of the features of the Standard version plus Memory and performance profilers Integrated, automated functional testing support Aimed at building business-critical RIAs Includes data visualization support Create data dashboards using charts Create rich table-based reports with complex grouping and summary features

Pgina 14 de 274


Understanding the foundation of the RIAVersion 9 used with Flex 3 Backbone of the Flash Platform Supports ActionScript 3.0 Object-oriented scripting programming language Compliant with ECMAScript standard - In 2005 Macromedia chaired the ECMAScript committee and Adobe continues to drive evolution of ECMAScript Includes new, optimized ActionScript Virtual Machine (AVM) to execute the ActionScript code Built from the ground up to work with ActionScript 3.0 Significantly faster than earlier versions Full runtime error reporting - In earlier versions many runtime errors would fail in a graceful, but silent fashion Industry standard debugging Stronger compile-time type checking New language elements added E4X (ECMAScript for XML), which adds XML as a native data type Regular expressions Implements event handling based on W3C DOM Events standard Flash Player 9 also contains AVM1 for backwards compatibility with existing and legacy content written in ActionScript 1 and 2

Figure 5: Flash Player Interactivity

Pgina 15 de 274


Understanding the Flex application process flow

Figure 6: Application development process

Client invokes application Flex compiles MXML/ActionScript file into all ActionScript, then creates a SWF SWF is cached If file already requested, cached SWF is delivered Compiled application SWF downloaded to client Application requests additional resources using HTTP, SOAP or AMF

Pgina 16 de 274


Accessing remote data resources from a Flex applicationFlex applications can access remote data resources in a number of ways HTTP: Retrieve data via the HTTP/HTTPS protocol Often XML data which is then converted into ActionScript objects SOAP: Retrieve data via web services AMF (Action Message Format): Use this binary protocol to interact with server-side Java objects (POJOs, JavaBeans, EJBs), ColdFusion components, .NET, PHP and Ruby on Rails, all via remoting Adobe products that enable communication from Flex to remote data BlazeDS: Open source product to enable remoting and messaging technologies Remoting enables AMF protocol, and hence communication with Java objects and ColdFusion components Messaging enables real-time data push to Flex clients LiveCycle Data Services: Includes all features of BlazeDS, as well as a data management service Data management service registers client side data models and has LCDS manage changes

Getting help and other resourcesDocumentation and other resources

DocumentationFlex Resources http://www.adobe.com/go/flex_documentation Flex 3 Help http://livedocs.adobe.com/flex/3/html/index.html Flex ActionScript and MXML Language Reference http://livedocs.adobe.com/flex/3/langref/index.html Documentation ZIP file http://www.adobe.com/go/flex_documentation_zip ActionScript 3 Errors http://livedocs.adobe.com/flex/3/langref/compilerErrors.html

Flex URLsFlex product page http://www.adobe.com/go/flex Flex Developer Center http://www.adobe.com/devnet/flex/ flex.org: The starting point for developers working with Flex http://flex.org/ Third party Flex sites http://www.cflex.net/

Pgina 17 de 274


BLOGsStart your blog search at http://flex.org/blogs/, and link to hundreds of Flex blogs from there

SummaryA rich Internet application (RIA) combines the best user interface functionality of desktop software applications with the broad reach and low-cost deployment of web applications and the best of interactive, multimedia communications The Flex SDK provides a skeleton of the application that developers can use to extend the application Flex Builder is an Eclipse based tool for use in creating Flex applications Flash Player released with Flex forms the backbone of the Flash Platform

Pgina 18 de 274


Getting Started with Flex BuilderIn this module, you will explore Flex Builder and use it to create Flex application files in both Source and Design mode. You will also learn how to use the integrated debugger.

ObjectivesAfter Completing this unit, you should be able to: Explain how Flex Builder is based on Eclipse Understand Flex Builder Technology like views, perspectives and editors Create Flex project Create, compile and run a Flex application file Add to an application file in both Source mode and Design mode Use breakpoints while debugging an application

TopicsIn this unit, you will learn about the following topics: Understanding the relationship between Eclipse and Flex Builder Exploring the Flex Builder interface Creating a project and your first application Debugging a Flex application Accessing help in Adobe Flex Builder

Pgina 19 de 274


Understanding the relationship between Eclipse and Flex BuilderFlex Builder is built on Eclipse Integrated development environment (IDE) for building Flex applications

The Eclipse FoundationNot for profit organization Open source community whose projects are focused on providing a vendorneutral open development platform and application framework for building software Based on software released by IBM in November 2001 into the public domain Hundreds of plug-ins available for different environments CFEclipse for ColdFusion Java C/C++

Flex BuilderFlex Builder based on the Eclipse workbench

Installation optionsFlex Builder is available in two configurations: Stand-alone configuration: Customized package of Eclipse and Flex Builder plug-ins - Ideal for new users of Flex Builder and those who intend to develop only Flex and ActionScript 3 applications - Can add in other plug-ins, like ColdFusion and Java Plug-in configuration: For those who already use Eclipse and want to add the Flex Builder functionality

Flex Builder functionalityFlex Builder has the following functionality: Coding environment with many helpful tools Interface design environment with visual layout Debugging environment with integrated debugger and variable evaluation options Integrated compiler to build SWF bytecode from MXML and ActionScript

Pgina 20 de 274


Exploring the Flex Builder interfaceThe term workbench refers to the complete Flex Builder development environment Container for all tools you will use to develop applications Contains perspectives, editors and views

Understanding editorsAn editor is where files of various types are edited in either Source mode or Design mode Flex development consists mostly of MXML and ActionScript files, but Java, ColdFusion and CSS files may also be used Edit files in either Source mode or Design mode - Source mode is where you see code - Design mode is where you can create your applications visually Double clicking the editor tab maximizes and minimizes the editor Turn on line numbers in an editor by right clicking in the marker bar and selecting Show Line Numbers

Figure 1: Turning on line numbers

Understanding viewsA view supplies support tools when modifying a file in an editor Navigator view allows you to manage files, folders and projects Problems view shows errors in your code Outline view hierarchically presents, and allows you to navigate to, all of the user interface and code elements in a file

From the menu system choose Window to get to various views

Pgina 20 de 274


Understanding perspectivesA perspective is a group of views and editors laid out in a configuration of your choice Flex Builder has two default perspectives - Development perspective - Debugging perspective May have other perspectives if using plug-in configuration, like Java Can create and save your own perspectives from the Window menu

Figure 2: The Flex Builder workbench in Source mode

Figure 3: The Flex Builder workbench in Design mode

Pgina 21 de 274


Creating a project and your first applicationTo begin development, you need to learn how to Create a Flex Builder project Create a main application page Compile the application Run the application

Creating a ProjectA project is a grouping of resources that make up a Flex application Must have a project to create an application in Flex Builder Project name must be numbers and letters only Files will be stored automatically in the project location The main application file will be built automatically and saved at the root of the project location folder When a project is created, a number of files and folders are automatically created bin-debug folder: Where your compiled application resides html-template folder: Where the html wrapper page resides .settings folder: Where some project configuration files reside .actionScriptPoperties, .flexProperties and .project files: Project configuration files src folder: Where MXML files and other asset folders reside libs folder: Where custom class files can reside A main application file, if you do not select an existing file for that role Supply the following information to create a project

Figure 4: Choose a project name and location

Pgina 22 de 274


Figure 5: Specifyc output folder. The default is the bin-debug folder

Figure 6: Set project build paths

Pgina 23 de 274


Using the main application fileThe main application file contains the container tag set Each application can only have one associated application file The layout property is given the value absolute the first time you create an application Flex Builder will retain your last layout selection for future applications Using the absolute layout requires that all visual elements have specific x,y values or constraints for positioning Other layout choices horizontal: Visual elements laid out horizontally vertical: Visual elements laid out vertically If you do not specify the layout property the layout will be vertical

Running the application fileTo test the application file, you run it from within Flex Builder Use the Run button or CTRL+F11 Must be an application file, which means it must contain an container tag set Green triangle on top left of file icon in the Navigator view indicates file is an application If an application file is not marked with a green triangle you can still run it, then it will appear with a green triangle

Figure 7: File list with marked application

Compiling the applicationWhen the application file runs, the MXML code is compiled into a SWF file that the Flash Player will execute Can set to compile after every save by choosing Project > Build Automatically

Pgina 24 de 274


Grouping projects with workspacesA workspace (not to be confused with workbench) is a grouping of projects Actual file system directory that contains the files and folders that track a group of projects Can only have one workspace open at a time To create a new workspace Select File > Switch Workspace Click Other... Click Browse...

Figure 8: The Workspace Launcher dialog box

Click the Make New Folder button and create the new folder to correspond to the new workspace

Figure 9: Click the Make New Folder button to create a new workspace

To select an existing workspace Select File > Switch Workspace Click Other... From the drop down select the folder that corresponds to the wanted workspace

Figure 10: Selecting an existing workspace

Pgina 25 de 274


Walkthrough 1: Creating a main application file and running itIn this walkthrough, you will perform the following tasks: Create a new Flex Builder project Create a main MXML application file Use Design mode to place two controls on the page Run the file Manipulate views Change perspectives

StepsCreate a project and the application page1. Navigate to /addbeTraining/f3rca/fb.zip. 2. Extract the zip to the adobeTraining/f3rca directory. 3. Open Flex Builder. 4. Select Basic configuration if asked. 5. Right click in the Navigator view and select New > Flex Project. 6. Supply the following information: Project name: F B Project location: /adobeTraining/f3rca/fb Note: You will need to deselect the Use default location checkbox to enter t correct path. 7. Click Next. 8. Specify the folder where your compiled Flex application will be output. Output folder: b i n - d e b u g 9. Click Next. 10. Set the build paths for the new flex project. Main source folder: src Main application file: FB_wtl .mxml 11. Click Finish.12. Be sure the empty application code appears in the editor as shown here

Pgina 26 de 274


Turn on editor line numbers13. Right click in the margin to the left of the MXML code in the editor and turn on line numbers for editors. Note: If the line numbers are already on do not select Show Line Numbers or it will toggle them off.

Turning Build Automatically on14. From the Project menu be sure Build Automatically has a check mark in front of it:

Figure 11: Build Automatically will compile your file on save

Note: If there is not a check mark, select Build Automatically. If there is already a checkmark, do nothing.

Adding controls in Design mode15. Just below the editor tab where the filename appears, click the Design tab. 16. Locate the Controls folder in the Components view (docked at the lower left hand side of Flex Builder).

Figure 12: The Controls folder from the Components view

17. Drag a Label control onto the design surface and place it in the upper left portion of the editor. 18. Use the Flex Properties view to set the text property to Enter Your first name:

Pgina 27 de 274


Figure 13: The text property from the MXML Properties View

19. From the Components view drag a Textlnput control to the right of the Label control.

Note: Use the snap to lines to align the Textlnput control properly. 20. Your editor should appear similar to the following:

Figure 14: The layout of two controls

21. Save the file. Note: Because you have Build Automatically turned on, as soon as you saved the file, Flex Builder began the process of compiling your MXML code into a SWF file that the Flash Player can use. Any compilation errors will be indicated in the Problems view. 22. Place the mouse pointer over the Run button. Notice a tool tip pops up and tells you FB_wtl will be run. Click the button to run the application. 23. You should see the Label and Textlnput. Enter text into the Textlnput. 24. Return to Flex Builder, then click the lab to view Source mode. Examine I the MXML code generated.

Changing the size of the editor25. Double click the editor s tab to maximize the tab. 26. Double click the tab again to restore it to its previous size.

Note: You can also maximize and restore views in this way.

Pgina 28 de 274


Manipulating views27. Close the Navigator view by clicking on the X on the tab:

Figure 15: Closing a view

28. Reopen the Navigator view by selecting Window > Flex Navigator. Note: If using the Flex Builder plugin, Window > Show View > Navigator. 29. Open the internal web browser view by selecting Window > Other Views... Note: If using the Flex Builder plugin, Window > Web Browser > Internal Web Browser 30. From the Show View dialog box, click on the plus sign in front of the General folder, men select the Internal Web Browser view. Click OK. Note: The Internal Weh Browser cannot be used for running or debugging programs. These functions will always take place in an external browser.

31. Close the Internal Web Browser view.

Switch perspectives32. Use the Open Perspective button to select the Flex Debugging perspective. 33. Use the chevron () to switch back to the Flex Development perspective. Note: The chevron is really just an indicator there is more to the right. If you drag the displayed perspective tab to the left you will be able to see both perspectives listed, as shown in the following diagram.

Pgina 29 de 274


Figure 16: Displaying both perspectives

Working with workspaces34. Select File > Switch Workspace > Other... 35. From the Workspace Launcher dialog box click the Browse... button. 36. Select the directory which you want to be the parent of the soon to be created workspace folder. Note: In the standard Windows installation, this folder is suggested to be: C:\Documents and Settings\ \My Documents\Flex Builder 3.

37. Click the Make New Folder button and name the new folder testWorkspace. 38. Click OK. 39. Be sure the new directory is selected in the Workspace Launcher dialog box. 40. Click OK. Flex Builder close and then reopen in the new, empty workspace. Note: You will have to reset some preferences in the new workspace, such as visible line numbers. 41. Switch back to the default workspace, File > Switch Workspace, which corresponds to the directory Flex Builder 3. 42. Close any editors that may be open.

Pgina 30 de 274


Debugging a Flex applicationWhen debugging an application you can control the execution of the application at specific points in the code A special debug version of the Flash Player is used which is installed during the Flex Builder installation When debugging you can Use the trace() function to display values in the Console view Set breakpoints to suspend execution of application code so you can inspect code Monitor variable values Step through code execution

Tracing variable valuesUse the trace() function Display variables and text Examples

trace("In the function"); trace(myVar); trace("myVar = " + myVar); Must use Flash Debug Player to view console output

Setting breakpointsTo set breakpoints Must be ActionScript code An MXML tag that contains ActionScript In a Script block Invalid line for setting a breakpoint Valid line for setting a breakpoint since ActionScript is in the tag To set a breakpoint, use the marker bar, which is the left edge of an editor Double-click to add a breakpoint Or in the marker bar, right click and select Toggle Breakpoint

Pgina 31 de 274


Figure 17: Adding a breakpoint

Run > Remove All Breakpoints to clear the breakpoints

Debugging an applicationStart by using the Debug button Click down arrow beside the debug button Select application from drop-down list

Figure 18: Debugging an application

When the breakpoint is encountered the Flex Debugging perspective is activated in the workbench Use debug view to control debug session Suspend, resume or terminate debug session Resume, Step Into, Step Over and Step Return buttons

Figure 19: The debug view

Pgina 32 de 274

ADOBE FLEX 3 Developing Rich Client Applications Use the Variables view to see all variables for the application

Figure 20: The variables view

Use Expressions view to see the variables you choose

Figure 21: The expressions view

BE SURE to stop the debugging session before continuing other work Browser opened for the debugging session will automatically close

Pgina 33 de 274


Walkthrough 2: Debugging and using the Debugging PerspectiveIn this walkthrough, you will perform the following tasks: Use the trace statement Set a breakpoint for debugging Debug an application End a debugging session

StepsCreate a new application1. 2. 3.

In Flex Builder, open FB_wt2.txt at the root of the FB project in the src directory. Highlight all of the lines of FB_wt2.txt and press Ctrl-C. Create a new mxml application.

4.

File > New > MXML Application Parent Folder: FB/src Filename: FB_wt2.mxml . Click Finish

Highlight all of the lines in the FB_wt2.mxml file and press Ctrl-V to paste in the contents of the FB_wt2.txt file.

Using the trace statement5. 6. 7. 8.

Notice that there is a trace statement in the block. Use the Debug button to run the application. Once the application runs, return to Flex Builder. Examine the Console view, which by default will appear in the bottom of the workbench tabbed with the Problems view, and see that the text from the trace statement is displayed. Terminate the debugging session by clicking the red square in the Console view.

9.

Setting a breakpoint and using the Debugging perspective10. Switch to the Debugging perspective by clicking the Open Perspective or chevron in the upper right

corner of the workbench, and then select Flex Debugging.11. The views associated with the Debugging perspective should appear 12. In the marker bar, which is situated to the left of the line numbers, insert a breakpoint on the line which

sets the my Var variable to the value of 10.

Pgina 34 de 274

ADOBE FLEX 3 Developing Rich Client Applications Note: You can insert a breakpoint by double clicking in the marker bar next to the line, or right clicking on the line and selecting Toggle Breakpoint.13. Check to be sure the breakpoint was set by looking for the blue dot next to the correct line:

Figure 22: The breakpoint displayed in the marker bar

14. Click the tab to see the Expressions view. 15. Right click in the view and select Add Watch Expression... 16. In the Add Watch Expression dialog box enter my Var. 17. Click OK.

Note: You can also set Watch Expression variables during the debugging session.18. Debug the application.

You will see the browser start, then Flex Builder will appear again when program execution hits the breakpoint. Note: You do not have to be in the Debugging perspective when you set breakpoints. If you set breakpoints in the Development perspective, then debug your application, Flex Builder will either change to Debugging mode or prompt you if you wish to be.19. In the Expressions view, check to see that the myVar variable is undefined. This is because the

breakpoint stops before executing the specified line of code.20. Click the Step Into button on the top of the Debug view to execute the marked line of code. 21. Check the value of the variable in the Expressions view. You should see it is now reflecting the

assignment statement, and the value is shown as 10.22. Click the tab to see the Variables view. 23. View the value of myVar. 24. Terminate the debugging session by clicking the red square either at the top of the Debug or the Console

view.25. Clear the current breakpoint, then add another on the line that contains the tag. 26. Debug the application again. 27. Click the Button in the application and return to Flex Builder and be sure the Flex Debugging

perspective is open.

Pgina 35 de 274

ADOBE FLEX 3 Developing Rich Client Applications28. Continue to use the Step Into button to see the function get called and the newVar variable assigned a

value.29. Stop the debugging session by clicking the red square either at the top of the Debug or the Console

view.30. Close any open editors. 31. Return to the Development perspective. 32. Select the workspace at / adobeTraining/ f3rca.

Pgina 36 de 274


Accessing help in Adobe Flex BuilderHelp is available within Flex Builder and through other sources

Help inside Flex BuilderGet context sensitive help by pressing F1 Searchable Flex and Flex Builder documentation using Help > Help Contents Welcome page from Help > Flex Start Page Sample applications Tutorials

DocumentationFlex Resources http://www.adobe.com/go/flex_documentation LiveDocs http://www.adobe.com/go/flex2_livedocs Flex ActionScript and MXML Language Reference http://www.adobe.com/go/flex2_apiref Documentation ZIP file http://www.adobe.com/go/flex_documentation_zip ActionScript 3 Errors http://www.adobe.com/go/AS3errors Flex Getting Started Experience http://learn.adobe.com/wiki/display/Flex/Getting+Started

Summary

Adobe Flex Builder is based on the Eclipse development environment Flex Builder can be installed as a stand-alone product or as a plug-in to an existing Eclipse installation The term workbench refers to the complete Flex Builder development environment An editor is where files of various types are modified A view contains support tools for modifying a file in an editor A perspective is a group of views and editors laid out in a configuration of your choice A project is a group of resources that make up a Flex application An Flex application is contained within an component tag set Workspaces are used to group projects When debugging you can Add a trace() statement to display data in the console view Set breakpoints to suspend execution of application code to inspect code and variable values as well as walkthrough code execution Locate source code by pressing Ctrl while clicking the tag

Pgina 37 de 274


Review1. What is the relationship between Adobe Flex Builder and Eclipse? 2. What is an editor? 3. What is a view? 4. What is a perspective? 5. What determines if a file is an application file? 6. What is a workspace and how do you create one? 7. Name the two places a breakpoint can be set.8.

Name four ways to get help.

Pgina 38 de 274


Learning Flex FundamentalsIn this section of the course, you will develop your first Flex application and understand the basic infrastructure that a Flex application must have.

ObjectivesAfter completing this unit, you should be able to: Create a Flex application (MXML, file) Layout an application with containers Add simple user interface controls Create data bindings between controls Architect an applications using MXML components

TopicsIn this unit, you will learn about the following topics: Creating a simple Flex application Displaying images Laying out a Flex application with containers Using the Panel container Using the ControlBar container Adding user interface controls Creating data bindings between components Architecting an application with MXML components Creating properties and methods for MXML components

Pgina 39 de 274


Creating a simple Flex applicationSkeleton of an MXML application file contains XML document type declaration Opening and closing component tag set

is the default container tag

Specifying a namespaceUse the xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags http://www.adobe.com/2006/mxml is a Uniform Resource Identifier (URI) which associates a prefix (in this case mx) with a manifest file as follows http://www.adobe.com/2006/mxml mxml-manifest.xml flex-config.xml located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flexconfig.xml

Manifest fileThe manifest file, mxml-manifest.xml, has a long list of component XML elements, partially shown here

Located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\

Pgina 40 de 274


Setting the layout propertyThe layout property defaults to your last selection when building an application or component from the appropriate dialog box absolute: Visual elements must have specific x,y values or constraints for positioning horizontal: Visual elements presented horizontally vertical: Visual elements presented vertically

If the layout property is not used in the Application tag, the default layout is vertical

Adding UI controlsUI controls are used to display user interface type components in an application Text, text input, buttons, images, combo boxes, etc. Add between the application tag set or another container component

Also referred to as components Example of the Label control to display a single line of text

Specifying component propertiesComponent properties can be specified in two ways As attributes of the XML tag As nested tags or nodes

Hello

Commenting your MXML codeUse XML style comments which are similar to HTML comments

Pgina 41 de 274


Walkthrough 1: Creating your first Flex applicationIn this walkthrough, you will perform the following tasks: Create a project and main application page Display some text using a Label control Run the file from within Flex Builder

StepsImport Flex Project1. Open Flex Builder if not already opened. 2. Select File > Import > Flex Project. 3. Import project from Archive File. Browse to: /adobeTraining/f3rca/ FundamentalsProject.zip Click Open Click Finish 4. Open Fundamentals_wt1.mxml in the src folder at root of the Fundamentals project.

Displaying text with a Label control5. Between the tag set, add an control with a text property that has the value Flex is awesome!

Running the application6. Run the application. You should see the text appear in the browser.

Pgina 42 de 274


Displaying imagesUse the Image control to incorporate JPEGs (progressive and non-progressive) GIFs (can be transparent) PNGs (can be transparent) SWFs SVGs (can only embed at compile time)

Methods for displaying imagesTwo ways to display images Load them dynamically at runtime Embed them in the SWF file Specify image source three ways Via the source property of an Image control; will load image dynamically at runtime Use the Image load() method to add the image dynamically at runtime Embed the image in the SWF at compile time using the @Embed directive; useful for when you need instantaneous loading and offline applications

Loading dynamically at runtimeSpecify the image using the source attribute of the control Image is loaded at runtime Assign an id to the image to reference in ActionScript

Using the load() methodDynamically switch out the image using the load() method of the Image class Code example

Pgina 43 de 274


Embedding images at compile timeYou can embed images at compile time for instantaneous loading To embed, use the @Embed directive when specifying the image source

Pros of embedding imagesImage is available immediately, it is part of the SWF Very useful for creating applications that are able to work offline

Cons of embedding imagesAdds to applications SWF size Slows down application initialization process Must recompile application every time image changes Cannot use in data binding calls

Limitations working with Scalable Vector Graphic (SVG) filesYou can only embed an SVG file in an application; you cannot load one at runtime SMIL and animation are not supported Masking and filters are not supported Pattern Fill and some advanced Gradients are not supported Interactivity and scripting is not supported SVG text is rendered as nonsearchable and nonselectable SWF shape outlines, meaning it is not rendered as native text in Flash Player

Pgina 44 de 274


Walkthrough 2: Adding images to an applicationIn this walkthrough, you will perform the following tasks:

Add an image dynamically Use the load( ) method to switch an image Embed an image

Steps1. Open the Fundamentals_wt2.mxml file from the src folder at the root the Fundamentals project. 2. After the first Label component, add an Image control with a source set to images/dessert_cheesecake.jpg 3. Add id property with a value of image1 to the Image control.

4. Run the application. You should see an image of a cheesecake. 5. Add click="image1.load('images/ dessert_cookies.jpg')" to the Image control.

6. Run the application. 7. Click the image. You should see the image switch when you click the image. 8. After the second Label component, add an Image component with source of@Embed('images/dessert_breadPudding.jpg')

9. Run the application. You should see an image of bread pudding below image of the cheesecake.

Pgina 45 de 274


Laying out a Flex application with containersLayout an application using container components Rectangular region of Flash Player drawing surface Hierarchical structure contains controls and other containers Default layout methods to control the layout of its children, including sizing and positioning All containers are children of, and therefore inherit from, the UIComponent and Container classes

Viewing various types of containers with the Flex Component ExplorerAccess the Flex Component Explorer http://examples.adobe.com/flex3/componentexplorer/explorer.html

Figure 1: The containers portion of the Flex Explorer

How containers workContainers use a set of layout rules to position components Keeps you from having to worry about positions Allows easy resizing/re-positioning with browser window size Three-pass algorithm used Commitment Pass - Determines the property settings of the application's components Measurement pass - Size of each component calculated from inside to outside Layout pass - Lays out application from outermost container to innermost

Pgina 46 de 274


Restaurant application exampleSample application UI

Figure 2: Sample applications interface

Under the hood layout of the restaurant finder application

Figure 3: container layout of the applications

Pgina 47 de 274


Box ContainersThere are two types of Box containers available to layout pages Vertical box (VBox) Horizontal box (HBox)

VBoxThe VBox layout display controls vertically, as in the image below

Figure 4: VBox example

The following MXML snippet shows how you would lay out these three controls using the VBox layout

HBoxThe HBox layout displays controls horizontally, as in the following image

Figure 5: HVBox example

Canvas containerThe Canvas container is a basic container component that enables you to specify absolute positions You can use absolute positioning by specifying x and y properties of the components inside the container

Pgina 48 de 274


Canvas containers offer better performance, because client processing power does not have to be used in order to determine object placement You must then handle all positions and layout explicitly, and the application will not scale when the browser window is resized

Specifying positions in a Canvas containerYou must specify the x and y properties of all child components inside the container; the origin is the top-left corner of the Canvas

Figure 6: Canvas container x and y values

This x/y positioning is only valid for components on the Canvas, not for components inside child containers

Setting a layout in the tagWhen creating an application, the tag has the layout property which dictates the type of layout the Application container will utilize Possible values for the layout property absolute: Same as using a Canvas container horizontal: Same as using a HBox container vertical: Default, same as using a VBox container

Pgina 49 de 274


Walkthrough 3: Using basic layoutsIn this walkthrough, you will perform the following tasks: Use the Application component's layout property to change the layout of three Labels Use x and y values to absolutely position controls Combine different layouts

Steps1. 2. Open the Fundamentals_wt 3.mxml file from the src folder at the root of the project. Run the application. You should see that the three Labels are all displaying on top of each other.

Note: Since you are in absolute layout and no x,y positions are specified, all the controls default to position 0,0.

Setting absolute positions on the controls3. Set the x and y properties as follows. Label 1: x="20" y="25" Label2: x ="0" y="300" Label3: x="300" y="200" Run the application. You should see the Labels are now absolutely positioned.

4.

Using a horizontal layoutSelect the value absolulte of the layout property of the Application tag, and then delete it. In the quotes for the layout property, press Ctrl-Space to display code hinting. You will see the possible values for the property. 7. Select horizontal from the code hinting. 8. Run the application. You should see the Labels displayed horizontally. 9. Remove the x and y values on all the Labels. 10. Run the application. You should see the Labels displayed horizontally exactly as they did before. 5. 6.

Using a vertical layout11. Change the value for the layout property to vertical. 12. Run the application. You should see the Labels displayed vertically.

Combining layouts13. Surround the last two Labels with a container tag set. 14. Run the application. You should see the first Label on one line, then the last two Labels displayed side by side. The vertical container had two children, the first Label and the HBox, so they were displayed vertically. The HBox contains the second and third Labels as children, so they are displayed horizontally.

Pgina 50 de 274


Using the Panel containerThe Panel container wraps self-contained application modules

Figure 7: Separate, self contained content in panel container

includes a panel title, a title bar, a status message and a content area for its children

Figure 8: The parts of a Panels Container

is represented in MXML with the Panel tag

Using the Panel tag ... Characteristics default width and height properties set to values that accommodate all children, but will not be larger than allowed by its parent container truncates content that is too large and implements scroll bars as appropriate has a layout property which can take the values absolute, vertical (default) and horizontal has default padding values of 0 pixels

Pgina 51 de 274


Sizing container contentThe size of any content placed within a container is relative to that container, not the main Application area

Figure 9: Child content within a container is sized relative to that container

If child content is sized larger than the parent container, then it will be resized down to fit into the parent container

Figure 10: Child content will be resized to fit into the container

Pgina 52 de 274


Walkthrough 4: Separating application modules into panelsIn this walkthrough, you will perform the following tasks: Add Panel containers around Text controls Manipulate the Panel container padding values

Steps1. 2. Open the Fundamentals_wt4.mxml file from the src folder of the root project. Run the application. You should see four text controls laid out horizontally within the Application container.

Add Panel containers and space them evenly3. 4. 5. 6. 7. 8. Add a Panel tag around the first text control and type How to Find Us for the panels title property. Add a Panel tag around the second and third text controls and type About Cafe Townsend for the panel's title property. Add 4-pixel padding to all sides of this panel using the paddingBottom, paddingLeft, paddingRight and paddingTop style properties. Add a Panel tag around the last text control and type Take a Closer Look for the panel's title property. Add 10-pixel pa ding to all sides of this panel using the paddingBottom, paddingLeft, paddingRight and paddingTop style properties. The code should appear as follows.

Pgina 53 de 274

ADOBE FLEX 3 Developing Rich Client Applications 9. Run the application. You should see three horizontally placed panels, each with different padding around their child text controls.

Figure 11: Three panels, each having different padding settings

The ControlBar container The ControlBar container holds components that can be shared by the other children in the Panel or TitleWindow container

Figure 12: ControlBar container on a panel

must be the last child tag of the Panel or TitleWindow container is a subclass of the Box class, and therefore inherits the layout characteristics of the Box container has a direction property to determine either vertical or horizontal (default) layout of the child components defaults its width and height properties to values that accommodate all children, but will not be larger than allowed by its parent container has default padding values of 10 pixels has horizontalAlign and verticalAlign properties to control the positioning of the child components has verticalGap and horizontalGap properties to set the spacing between children

Pgina 54 de 274


Walkthrough 5: Using a ControlBar containerIn this walkthrough, you will perform the following tasks: Add a ControlBar to a Panel container. Add child controls to the ControlBar

Steps1. 2. Open the Fundamentals_wt5.mxml file from the src folder at the root of the project. Run the application. You should see an image and some text inside a Panel.

Add the ControlBar container3. 4. 5. 6. 7. 8. 9. As the last element inside of the Panel component, add a ControIBar component. Set the direction property (inherited from Box class) of the ControlBar component to horizontal. Switch to Design mode and drag a Button component from the Controls folder of the Components view and drop it into the ControlBar. Update the Button label property to add to cart. Drag another Button component and drop it to the right of the existing Button component. Update the Button label property to add to wishlist. Run the application. You should see the ControlBar with two buttons at the bottom of the Panel container.

Pgina 55 de 274


Adding user interface controlsControls are user interface components Button, TextInput, TextArea, ComboBox Controls are placed inside containers

Label control revisitedThe Label control is used to display a single line of text There are two ways you can use the tag to display text Specify the text as a property, as in the following

Specify the text as a subtag, as in the following

Hello World!

TextInput controlThe TextInput control is used to gather information from the user in a single line of text You can also optionally Enable borders Use a restrict attribute for simple user input checking - The restrict property can specify a set of allowable characters, as in the following example restrict="0-9a-zA-Z"

Figure 13: The TexInput control

A sample tag is shown in the code below

Pgina 56 de 274


Creating data bindings between componentsData binding is the process of binding the data of one object to another object Two ways to perform a binding Curly braces syntax ( { } ) tag

Assigning instance namesMost MXML tags refer to classes When you use the tag, you create an instance of the class Use the id property to assign an instance name Allows you to refer to the object created

Creating data bindingsUsing the curly braces syntax Assigns a property a dynamic instead of literal value Uses a broadcast/listener method Using the tag Specify the source and destination property values

Pgina 57 de 274


Walkthrough 6: Creating data bindingsIn this walkthrough, you will perform the following tasks: Bind using the curly brace syntax Bind a static value from one component to another Bind a variable value from one component to another

Steps1. Open the Fundamentals_wt6.mxml file from the src folder at the root of the project.

Creating a data binding2. Add a Labelcontrol with an id of myLabel and a text property set equal to This is a Label.

developing rich client applications

Documents

installdirectoryadobeflex

paddingtop

flex builder

visual elements

user interface

cafe townsend

flex builder

selecting