MACROMEDIA FLEX-GETTING STARTED WITH FLEX User Manual Page 1

Getting Started with Flex™ 3

<mx:String>megan5.jpg</mx:String></mx:Array><mx:List id="ctlImage" dataProvider="{images}" selectedInde

images don’t have to be local; they can be any URL, pointingto any server. So, the list could be a set of URLs to variousimages. And that list cou

amazing, as you will learn as you delve more deeply into Flex.It’s also something that is easy to support as you build yourown controls.Drag-and-DropF

Example 6-5. Dragger.mxml<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/m

Figure 6-6. Dragging and dropping between two listsThis will add “Bad sci-fi” to the list of things I like.I realize that this may seem like a silly e

application that references my open/close box that I call theFlexiBox. The code for the application appears in Example 6-6.Example 6-6. States.mxml<

</mx:State></mx:states><mx:Button id="btnChanger" label="Open" click="onChangerClick(event);" />&l

backgroundColor="#ffdddd" borderStyle="solid" borderThickness="3" paddingBottom="5" paddingLeft="5&

]]></mx:Script><mx:states> <mx:State name="open"> <mx:SetProperty target="{this}" name="height&qu

<mx:SetProperty target="{this}" name="height" value="100" /> <mx:SetProperty target="{btnChan

PrefaceHow many times have you gotten an idea for a killer applicationin your mind, only to have the implementation fail when theframework you use bog

the application called ffmpegx (http://homepage.mac.com/major4/) which runs on the Mac and handles all of the nasty com-mand-line stuff for me. If vid

I can select the movie I want to see, and then use the Play andPause buttons to start and stop the playback. It is really thiseasy to get started with

layout="vertical"><mx:Script><![CDATA[public function updateUI() : void { btnPlay.label = ( cntlDisp.playing ) ? 'Paus

I also added a few effects (a rotation, glow, and drop shadow)to the video to demonstrate how you can create a more novelpresentation for the movie us

layout="vertical"><mx:Script><![CDATA[private var cues:Array = [ { start: 0.0, stop: 1.0, text:'Megan' }, { st

</mx:Canvas><mx:HBox> <mx:Button id="btnPlay" label="Pause" click="onPlay()" /> <mx:Button la

CHAPTER 7Advanced Flex ControlsAs we already discussed, Flex has a lot of great controls bakedright into it, including a chart control, an advanced gr

copy and paste the graphing code directly into your applica-tion.Figure 7-2 shows a combination of controls that includes a U.S.map displaying financi

Figure 7-3. A sample of ILOG Elixir’s treemap functionalityFigure 7-2. An interactive map created with a combination of ILOGElixir controlsILOG Elixir

Google, which is your best friend when it comes to learningabout the nooks and crannies of the Flex API.How This Book Is OrganizedHere is a summary of

ILOG Elixir is not free, but if highly customizable data visual-ization is a requirement for your Flex applications it’s a loteasier to buy th

The FlexLib ProjectThe FlexLib Project (http://flexlib.googlecode.com/) is an opensource set of containers, controls, and classes to which you arefree

between graphical elements, such as TitleWindows, using a roll-ing cube effect.He also provides movie-style effects, such as flipping and gat-ing, and

Figure 7-7. The SpringGraph tree visualization toolSpringGraph | 107

CHAPTER 8Flex for WidgetsFlex 1 was primarily a server-based technology. Flex 2 allowedus to compile SWFs in Flex Builder and then deploy them. Flex3

paddingTop="0" creationComplete="flickReq.send();" backgroundAlpha="0" backgroundColor="white"

Once I test this in the browser, I use the Project→Export ReleaseBuild command (shown in Figure 8-1) to build the release buildof the slide show contr

the framework. Flash Player will download the RSL once andthen cache it for future use.To enable the RSL linking I go to the Properties dialog for the

Figure 8-4. Ensuring the location of the RSLFigure 8-3. Selecting RSL linkingSlide Show Widget | 113

Chapter 8This chapter discusses how to build small Flex movies foruse on other people’s web pages. A full working chatwidget is provided as a

Now when I export the release build, using the same mecha-nism as before, I get a slideshow.swf file that is 98 KB. That’sfar less than half the size

<![CDATA[import mx.rpc.events.ResultEvent;import mx.rpc.http.HTTPService;private function sendMessage() : void { var message:String = txtMessage

</mx:columns></mx:DataGrid><mx:Form width="260"> <mx:FormItem label="User"> <mx:TextInput id

Figure 8-5. The startup chat widgetChat Widget | 117

CHAPTER 9Flex on AIRAdobe’s AIR runtime is your ticket to the world of cross-plat-form desktop application development. And the great news isthat you

layout="horizontal” creationComplete="onMilesChange(event)"><mx:Script><![CDATA[private function onMilesChange( event:Event

text="3.1" /> </mx:FormItem> <mx:FormItem label="Weeks"> <mx:Label id="txtWeeks" />

get that from Adobe (http://adobe.com/air), and you can linkto it on your website. Once they have AIR installed, you canuse Flex Builder to package up

CHAPTER 10Resources for Flex DevelopersIn addition to the resources I already talked about, lots of ad-ditional resources are available from which you

O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, CA 95472800-998-9938 (in the United States or Canada)707-829-0515 (international or loca

implementing Flex solutions yourself. Here’s a list of what Iconsider to be some of the best Flex blogs out there:Flex Team Blog (http://weblogs.macro

something, the first place you will want to visit is the FlexCookbook (http://www.adobe.com/go/flex_cookbook).When you think you are ready

also an excellent resource, as is Essential ActionScript 3, whichdemonstrates use of ActionScript that will blow your mind (allthree books are publish

IndexSymbols2D graph type, 1013D graph type, 101Aabsolute positioning (Canvascontainer), 41absolute property(Applicationcontainer), 38accordions, 55–5

Ccancel method, 27Canvas container, 41–44Cascading Style Sheets (seeCSS)chat applications, 16chat widgets, 114–116checkboxes, 50CIA World FactBook, 15

Box class and, 39–41Herrington, Jack, 124horizontal property(Applicationcontainer), 37horizontalCenter property(Canvas container), 43HTML (HyperText M

OObject variables, 27onFetchResult method, 110online applications, 9–11open state (mx:State), 90Outline inspector (Eclipse), 2PPanel container, 48phot

VideoDisplay component, 95VideoDisplay control, 94Wwidgets, 12, 109–116YYourMinis portal, 13Index | 131

This book is dedicated to my beautiful wife, Lori, and awesomedaughter, Megan. They are both the reason and the inspirationfor this book.—Jack Herring

CHAPTER 1Installing Flex Builder 3Getting started with Flex begins with downloading the FlexBuilder 3 integrated development environment (IDE). You ca

Once you have the software installed, launch it and you shouldsee the splash screen shown in Figure 1-1.On the splash screen you will see the words Bu

computer, rename it to myimage.jpg, and drop it into the srcfolder of your new project.Next, double-click on the MXML file for the application andadd

some things that are difficult to do in the browser without anycode.Our next step will be to add some dynamic behavior to theexample by adding control

Example 1-3. The updated image code<mx:Image id="myimg" source="@Embed('mypicture.jpg')" height="100" top

CHAPTER 2Flex in ActionFlash has always been a great tool for adding interactivity to awebsite. But with the advent of Flex a whole new group of

lector in Figure 2-1. At the top of the page you can hover yourmouse pointer over each snowboard design to find out moreabout it, as well as filter th

The controls, event model, and CSS skinning in Flex make iteasy to build complex interfaces that are easy to understandand maintain at the ActionScrip

Figure 2-3. SlideRocket’s editor screenSlideRocket is one of the most amazing applications I’ve seenon any platform in years. It’s well worth your tim

This application shows not only the functionality and elegancethat you can achieve in Flex interfaces, but also the speed ofthe Flash Player in execut

(http://www.robots.com/movies.php?tag=40). Figure 2-7 showsthe RobotWorx page with the embedded custom video player.The Flex application is seamlessly

nodes more friends pop out and I get a better feel for how I amconnected to people simply by interacting with this control.Even with my sparse set of

Getting Started with Flex™ 3Jack Herrington and Emily KimJava™ ThreadsPocket ReferenceSECOND EDITIONScott Guelich, Shishir Gundavaramand Gunther Birzn

Figure 2-9. The YourMinis portal built into FlexYou can have multiple pages in your portal. And you can evenplace a YourMinis widget on any regu

standalone piece. This makes YourMinis not only a great por-tal, but also a great place to build widgets that can go anywhere.DashboardsControlling a

U.S. government profiles of countries and territories aroundthe world. This is shown in Figure 2-11.Figure 2-11. The CIA World FactBook viewerThis sho

Figure 2-12. The Pownce chat clientI can tell you from experience that building this type of chatapplication in Ajax is a real hassle. Cross-domain se

Figure 2-13. The eBay Desktop applicationFrom here, you can browse what is available for sale, bid onitems, watch your auctions, and so on. And it eve

CHAPTER 3Flex 101: Step by StepThis chapter will walk you step by step through the process ofconstructing a Flex application. That starts with learnin

Flex Builder is actually a bit more useful than this in that itreally manages projects, which are sets of Flex applications andcomponents, as well as

1. In the Flex Builder IDE, select File→New→Flex Projectand name the project FlickrRIA.2. Accept the default location for the project and confirmthat

Example 3-1. The Application tag<mx:Application xmlns:mx="http://www.adobe.com /2006/mxml" backgroundGradientColors="[0xFFFFFF,

Figure 3-4. The search label5. Drag the TextInput component from the Controls fold-er to the position following the Label component in theHBox. The Te

Getting Started with Flex™ 3by Jack Herrington and Emily KimCopyright © 2008 Jack Herrington and Emily Kim. All rights reserved.Printed in Canada.Publ

dler(event). The photoHandler event packages the serv-ice results. We will create the {{photoHandler}} functionlater.Example 3-2 shows the relevant co

that the HTTPService generates. You can see this in Ex-ample 3-5.Example 3-5. The second import statement<mx:Script><![CDATA[ import mx.co

Figure 3-6. The Button component in the Outline view2. To the Button component, add a click attribute with avalue of requestPhotos():<mx:Button lab

5. In the function, cancel any previous requests to photoService by using the cancel method. The instance nameof the HTTPService component is photoSer

vice call. At this point, your code should look like Ex-ample 3-9.Example 3-9. The complete script block<mx:Script><![CDATA[ import mx.col

params.tags = searchTerms.text; photoService.send(params); } private function photoHandler(event:ResultEvent) :void{

Example 3-13. The itemRenderer attribute<mx:TileList width="100%" height="100%" dataProvider="{photoFeed}">

attribute with a value of 75. The itemRenderer passesvalues to the Image component through the Image com-ponent’s data property. Add a sou

</mx:itemRenderer></mx:TileList>8. Save and then run the application. You should see aform. In the form, submit a search term

"off” horizontalAlign="center"> <mx:Image width="75" height="75" source="{dat

Adobe Developer Library, a copublishing partnershipbetween O’Reilly Media Inc., and Adobe Systems, Inc., is theauthoritative resource for developers u

var params:Object = new Object(); params.format = 'rss_200_enc'; params.tags = searchTerms.tex

As you can see from this example, it is very easy to access webservices from Flex. It’s also easy to parse their contents usingthe E4X syntax built di

CHAPTER 4Flex Controls and LayoutThe first step in building a Flex application is to create the userinterface. Flex not only has a rich set of control

absoluteDoes no automatic layout, and requires you to explicitlydefine the location of each child componentIf the Application component’s layout pro

The Box ClassThe Box class is the base class for the VBox and HBox classes:• The VBox container renders all child display objects verti-cally.• The HB

Figure 4-2. A VBox layoutExample 4-3 shows the default layout method used by theHBox container (horizontal).Example 4-3. Using the HBox contai

strating that container controls can have other containers aschildren.Example 4-4. Using both the VBox and the HBox containers<?xml version="1

Example 4-5 is some sample code for an absolutely positionedlayout.Example 4-5. An absolutely positioned layout<?xml version="1.0" encodi

application window. The container’s layout property must beset to absolute. All constraints are set relative to the edges ofthe container, not to othe

</mx:Canvas> </mx:HDividedBox></mx:Application>When you launch this application you should see somethingsimilar to Figure 4-6.You

• One or more child controls or containers, such as inputcontrolsYou can also insert other types of components into a Form con-tainer.The code in Exam

Figure 4-7. A form-based layoutCombined LayoutsContainers can hold other containers. You can nest them tocreate sophisticated layouts, and you can cre

top="30" /> <mx:Label text="Photographed by Elsie Weil" horizontalCenter="0" top="250" />

Figure 4-8 shows the result of Example 4-8.Figure 4-8. A complex layout using various types of layoutmechanismsThe Panel ContainerThe Panel c

backgroundGradientColors="[#FFFFFF, #000000]"> <mx:Panel title="Featured Photograph" backgroundAlpha=".25" borde

ControlsSo many controls are available for you to use with Flex that it’salmost hard to know where to begin. I suppose the best placeto start is wi

Data GridsWe regularly have to build tables of structured information.This is easy in Flex, thanks to two controls: the DataGrid andthe AdvancedDataGr

... </mx:XMLList> <mx:DataGrid width="100%" height="100%" dataProvider= "{employees}"> <mx:columns&g

Example 4-12. Advgrid.mxml<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/

ContentsPreface xiChapter 1: Installing Flex Builder 3 1Installing the IDE 1Having Some Image Fun 2Chapter 2: Flex in Action 7E-Commerce 7Online App

<customer><first>Jack</first> <last>Herrington</last></customer> <customer><first>Lori</f

Tabs and AccordionsSometimes you have more content than you can reasonably fiton the screen, so you need some way to let the user navigatearound group

<mx:VBox label="Tab Three"> <mx:Label text="Tab three's content" /> </mx:VBox> </mx:TabNavigato

<mx:VBox label="Tab One"> <mx:Label text="Tab one's content" /> </mx:VBox> <mx:VBox label=&qu

MenusFlex also has support for menus, including those that appearat the top of the window as well as pop-up menus. Exam-ple 4-16 shows how

Figure 4-16. An example menuThere is also a handy control called ApplicationControlBarthat gives a nice-looking control set along the top of the

Figure 4-17. An application control barOne thing I love about Flex is that even by default, it looksreally good. I’m not a graphic designer by any str

<mx:HDividedBox width="100%" height="100%"><mx:HBox backgroundColor="#ff9999" width="50%" height=&quo

Example 4-19. CSS.mxml<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml

SkinningFlex also allows you to change the look of your whole appli-cation in a process called skinning. You can use CSS to applynew skins to your Fle

The Form Container 44Combined Layouts46The Panel Container 48Controls 50Data Grids 51Tabs and Accordions 55Menus 58Divider Boxes 60CSS 61Filters and E

<mx:Panel title="Subscription form" paddingTop="20"> <mx:Form> <mx:FormItem label="First Name">

Filters and EffectsFlex supports a wide variety of filters and effects that you canapply to any user interface object. Take, for example, how easyit i

You can also apply filters based on certain events, such as roll-overs, to provide interactive effects. Example 4-22 shows abutton that glows

CHAPTER 5Working with the ServerMost Flex applications are going to work with a web server insome shape or form. Thankfully, Flex makes this very easy

Remote objectsFlex applications can also make use of Flash’s remotingcapabilities by using remote objects. To make this happenthe server code needs to

POSTing to the Server with FlexIn this example, I’ll post a simple subscription form to theserver. The Flex code for the interface appears i

Example 5-2. Formtest.php<?phpecho( "Thanks ".$_REQUEST['first'] );?>When I run this example in Flex Builder it starts up wi

a shipping weight, such as 3, into the text boxes and click theGet Shipping Options button to retrieve and display the plaintext data in a text box (s

The Flex application, which is running on the customer’s com-puter, uses the HTTPService tag to talk directly to the web serv-er. The code on the web

<![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; public function handlePlain(event

Chat Widget 114Chapter 9: Flex on AIR 119Creating an AIR Version of the Runner’s Calculator 119Chapter 10: Resources for Flex Developers 123Flex Webs

Example 5-4. The XML version of the Flex application<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="

<mx:Button x="130" y="95" label="Get Shipping Options" click="xmlRPC.send();" width="160" hei

Example 5-6. XmlHttpService.cfm<cfsetting enablecfoutputonly="true" /><cfsilent> <cfinvoke component="Shipping"

<cffunction name="getShippingOptions_CFQuery" access= "remote" returntype="query"> <cfargument

CHAPTER 6More Flex ApplicationsThis chapter will show some sample Flex applications to dem-onstrate various aspects of Flex development. You can

while( mile < miles ) { weeks += 1; mile *= 1.1; } txtWeeks.text = weeks.toString();}]]></mx:Script> <mx:Form> <mx:FormIte

Example 6-2. Runner2.mxml<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/m

<mx:Script><![CDATA[private function onMilesChange( event:Event ) : void { var miles:Number = parseFloat( txtMiles.text ); var mile:Number =

Figure 6-3. The calculator with the week tableNow I can build my training calendar using this handy tool. Ofcourse, I can put an application such as t