Migrating Applications to Flex 2Adobe® Flex™ 2

10 Getting StartedThe basic steps are the following: “Step 1: Find and replace” on page 10 “Step 2: Add access modifiers” on page 14 “Step 3: Add t

100 Flex Classes

1014CHAPTER 4Data ProvidersThis topic describes migrating data providers, including the dataProvider property of Flex controls and the ways you access

102 Data ProvidersThe following information briefly describes major migration issues: Because the DataProvider interface has been replaced by methods

103 The Tr e e , Menu, MenuBar, and PopUpMenuButton controls, now use a data descriptor class to access and manipulate control-specific information,

104 Data Providers

1055CHAPTER 5BindingThis topic describes the steps required to convert properties in your applications to be usable as the source for a data binding e

106 BindingThe <mx:Binding> tag must be a top-level tagIn Flex 1.5, you could place the <mx:Binding> tag in a Flex container. In Flex 2.0,

Binding from a property 107The Flex compiler automatically generates an event named propertyChange for all public properties so the properties can be

108 BindingThe following is a Flex 2 example of a getter/setter pair that uses the [Bindable] metadata tag:// Define private variable.private var _max

Binding from a property 109Dispatching binding events from a custom componentTo dispatch an event to trigger data binding for a property, the property

Step 1: Find and replace 11This section describes only the most common targets of finding and replacing. There are many other members of Flex classes

110 BindingBinding with Flex component propertiesYou can no longer use all properties of Flex components as the source of a data binding expression wi

1116CHAPTER 6EventsThis topic describes changes to the Adobe Flex 2 event model for developers who are migrating Flex applications.ContentsAbout event

112 EventsAbout eventsThe following list is a general overview of the changes to the Event model. Review all event handling in your Flex application b

Migrating the Event object 113Migrating the Event objectThis section describes migration issues related to accessing the Event object.Using the Event

114 EventsIf you try to call another method on the target (for example, the getStyle() method), Flex returns an error. The getStyle() method is a meth

Using function listeners 115To find the appropriate static constant for your event type, see the events section of the control’s entry in Adobe Flex 2

116 EventsYou must also change your code if you created a custom event handler class and defined a handleEvent() method that listened for all events.

Keyboard events 117Maintaining scopePreviously, you used the mx.utils.Delegate class to provide access to the document scope within an event handler.

118 Events

1197CHAPTER 7Styles and SkinningThis topic describes styleable objects; new skinning workflow; and CSS rules. For information about changes to individ

12 Getting StartedApplication and container initializationThe initialize event is now dispatched later in the startup and component creation life cycl

120 Styles and SkinningUsing the StyleManagerWhen you use the StyleManager to apply styles to entire classes, you must now access the class with the g

Using styles 121Changed style propertiesThe following table shows changes to the CSS style property names:Missing style propertiesIf you applied a sty

122 Styles and SkinningThe following are the valid color value formats in CSS:.b1 { color: red; }.b2 { color: #66CC66; }.b3 { color: rgb(22%,22%,77%);

Using styles 123For example:<mx:Style>// The following class selector fails in Flex 2 if // there is no associated class:myClass {color: red;}//

124 Styles and SkinningUsing unitsFlex no longer supports using the plus (+) and minus (-) unit modifiers.Flex no longer supports the em and ex unit t

Using skinning 125Skinning assetsThe assets that Flex includes for you to use as a basis for reskinning components are changed.Drawing programmatic sk

126 Styles and SkinningUsing embedded fontsYou mjust use some differences in the syntax for embedded fonts. In addition, the default font manager is c

Themes 127In Flex 1.5, you could use the following syntax to embed a bold italic font face:@font-face {src: url("GOTHICBI.TTF");font-style:

128 Styles and Skinning

1298CHAPTER 8BehaviorsThis topic describes the new architecture for behaviors in Macromedia Flex and syntax changes from Flex 1.5. For detailed inform

Step 1: Find and replace 13Replace _rootRemove the use of “_root” from your application code if you used it to access the Application instance. In Fle

130 BehaviorsOverviewFlex implements effects using an architecture in which each effect is represented by two classes: Factory class Creates an objec

New Behaviors syntax 131New Behaviors syntaxThis section describes the syntax changes to behaviors.The name property is now the id propertyYou now use

132 BehaviorsUse binding in MXML to specify the effect In Flex 1.5, you assigned the effect to an effect trigger property with no data binding:<mx:

New Behaviors syntax 133Change to the range of several effect properties For the Zoom, Fade and Dissolve effects, the range of the alpha, scaleX, scal

134 BehaviorsNew events for effect classesYou can now associate event listeners with effects, rather than with effect targets. All effect classes now

1359CHAPTER 9Data ServicesThis topic describes how to migrate HTTPService, WebService, and RemoteObject components.ContentsAbout Data Services . . . .

136 Data ServicesFlex 2 separates the definitions of services into a new file, services-config.xml. This file contains definitions of the services and

Migrating RemoteObject components 137Channels are defined in the channels section of the services-config.xml file. There are several predefined channe

138 Data ServicesThe syntax for statefulness has changed. In Flex 1.5, you set the type to either stateless-class or stateful-class. In Flex 2, you se

Migrating RemoteObject components 139Named RemoteObjectThis section describes how to migrate your named RemoteObject tags from Flex 1.5 to Flex 2.Flex

14 Getting StartedEffects/behaviorsFor each effect, such as Fade, Sequence, and Parallel, change the name property to id. Also, remove the <mx:Effe

140 Data ServicesMigrating HTTPService componentsThis section describes how to migrate your HTTPService from Flex 1.5 to Flex 2.0 syntax.For HTTPServi

Migrating HTTPService components 141Flex 1.5 syntaxIn Flex 1.5, you added a URL pattern to the whitelist that matched the url of the HTTPService tag.M

142 Data ServicesNamed HTTPServiceThis section describes how to migrate named HTTPService tags from Flex 1.5 to Flex 2 syntax.Flex 1.5 syntaxIn Flex 1

Migrating WebService components 143Migrating WebService componentsThe default value of the useProxy property is false. The WebService tags are now con

144 Data ServicesMXML tag:<mx:WebService id="MyService" wsdl="http://myServer.com/services/my.wsdl" useProxy="true"/&

Migrating secure data services 145Flex 2 syntaxIn Flex 2, you refer to named WebServices with the destination attribute of the <mx:WebService> t

146 Data ServicesFlex 1.5 syntaxIn Flex 1.5, you specified run-as credentials as user and password attributes to pass through credentials to a service

Migrating secure data services 147Migrating services that use Basic authenticationFor Basic authentication, you must change the value of the security

148 Data ServicesFlex 2 syntaxIn Flex 2, you specify the URI of the channel endpoint for which you want to require authentication as the url-pattern.

Migrating secure data services 149Flex 1.5 syntaxIn Flex 1.5, you specified the type of authentication and the role in the named service definition in

Step 3: Add types 15The default access modifier for methods, variables, and classes is internal. This means that all classes in the same package can a

150 Data ServicesLogin commandsFor custom authentication, Flex uses a custom login adapter, known as a login command, to check a principal’s credentia

Mapping Java types for RemoteObject 151Object.registerClass() is not available in Flex 2. ActionScript 3 provides the flash.net.registerClassAlias. To

152 Data ServicesAccessing request/response data with RemoteObjectA Java object that you call using the <mx:RemoteObject> tag has access to requ

15310CHAPTER 10Configuration and Command Line ToolsThe flex-config.xml file has undergone significant changes for Adobe Flex 2. In addition, the mxmlc

154 Configuration and Command Line ToolsConfiguration filesThe Flex server relied on configuration files in the WEB-INF/flex directory. The following

Security 155The following configuration files were renamed since Flex 2 Beta 2:SecurityThis section describes changes to Flex security.Flex changesYou

156 Configuration and Command Line ToolsCommand-line compilersThe mxmlc and compc compilers are changed for Flex 2. This section describes these chang

Command-line compilers 157In addition, because the data services subsystem changed, mxmlc no longer takes the following options: gatewayurl gatewayh

158 Configuration and Command Line Toolsfdb debuggerThis section describes changes to the fdb debugger. For more information on using fds, see Chapter

fdb debugger 159run commandOn Windows, you can enter either run foo.swf, in which case fdb launches Flash Player, or run, in which case fdb displays t

16 Getting StartedStep 4: Update eventsThe Event model changed in Flex 2. However, you can migrate most event handlers with minimal effort. This secti

160 Configuration and Command Line Tools

16111CHAPTER 11Customizing ComponentsThis topic describes modifications to the process of creating components in ActionScript in Adobe Flex. This topi

162 Customizing ComponentsSpecifying the packageDefine your custom components within an ActionScript package. The package reflects the directory locat

Renamed invalidateStyle() 163Overriding a methodIf the method is overriding a method in a superclass, add the override keyword as the first attribute:

164 Customizing Components

16512CHAPTER 12Additional Migration IssuesThis topic describes miscellaneous migration issues, including charting and Runtime Shared Libraries (RSLs).

166 Additional Migration IssuesSkinsSkins are now called renderers. For example, the CandlestickSkin class is now CandlestickRenderer.RenderersSome fu

Charting 167In Flex 2, you set the value of the series’ itemRenderer property to a skin class that draws the ChartItem’s icon:<mx:PlotSeries itemRe

168 Additional Migration IssuesLegendsYou now enclose the data provider for Legend controls in curley braces; for example:Flex 1.x:<mx:LineChart id

Cell renderers 169Cell renderersIn Flex 1.5, a cell renderer had to implement the setValue() method to access the data passed to the cell renderer:<

Step 6: Put all ActionScript components in packages 17Step 5: Import classes for package-level functionsWhen you use package-level functions, you must

170 Additional Migration IssuesValidatorsIn Flex 1.5, validators were usually triggered in response to an update of the destination of a data binding

Validators 171In ActionScript, you can use the following constants: CreditCardValidatorCardType.AMERICAN_EXPRESS CreditCardValidatorCardType.DINERS_

172 Additional Migration IssuesEmbedding resourcesIn Flex 1.5, embedded resources were bound to Strings that were used to reference the individual ima

17313CHAPTER 13Migration PatternsThis topic describes some common patterns in migrating ActionScript in Adobe Flex applications.ContentsInstantiating

174 Migration PatternsInstantiating Flex controlsIn Flex 1.x, you created a Flex control in ActionScript by first including a reference to that contro

Using mixins 175Using mixinsYou can no longer attach a function to a class, unless that class has prior knowledge of that function. For example, you c

176 Migration PatternsVariable enumeration and object introspectionIn Flex 1.x (ActionScript 2.0), using a for-in loop on an object let you enumerate

Variable enumeration and object introspection 177// List accessors as properties:for each (var a:XML in classInfo..accessor) {ta1.text += "Proper

178 Migration PatternsUsing the drag-and-drop featureWhen you convert drag-and-drop code, be aware of the following changes: The doDrag() method take

Using the drag-and-drop feature 179Flex 2:<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[impor

18 Getting StartedStep 7: Update data servicesThe RemoteObject, HTTPService, and WebService MXML services are now known as RPC services. The RemoteObj

180 Migration PatternsOther issuesIn addition to the changes shown here, you might also encounter the issues described in this section when you conver

Using the drag-and-drop feature 181Controlling the feedback indicatorTo control the feedback indicator that accompanies a drag proxy, you now use the

182 Migration PatternsUsing TimerThe setInterval() and clearInterval() methods were deprecated in favor of the Timer class. You can still use these me

Accessing request data 183Using the PreloaderThe Application container supports an application preloader that uses a download progress bar to show the

184 Migration PatternsIn Flex 2, you must use the Application.application.parameters property to get the values of these variables. The parameters pro

Step 11: API updates 19Step 10: BindingTo make a user-defined variable bindable, you must now explicitly identify it by adding the [Bindable] metadata

© 2006 Adobe Systems Incorporated. All rights reserved.Migrating Applications to Flex™ 2If this guide is distributed with software that includes an en

20 Getting Started Expanded abbreviations. Abbreviations in property and method names have been expanded where practical. For example, the hPosition

212CHAPTER 2ActionScript 2.0 to 3.0The ActionScript language has undergone a complete redesign. It is now a more robust, type-safe, and usable languag

22 ActionScript 2.0 to 3.0 A subclass cant have a var with the same name as one visible from the superclass, and you can’t override a var. You must

Usability improvements 23Capitalization of identifiersThe ActionScript 3.0 naming conventions match the Flex application model and the ECMAScript stan

24 ActionScript 2.0 to 3.0ActionScript 2.0 had many instances where getter and setter methods existed rather than accessors. Now, ActionScript 3.0 use

Classes and packages 25AbbreviationsActionScript 3.0 contains fewer abbreviations in method and property names. The names are as descriptive as possib

26 ActionScript 2.0 to 3.0Using packagesThe package statement syntax has changed. In addition, you are now required to put custom ActionScript compone

Classes and packages 27Using classesThis section describes changes to ActionScript classes.Access modifiersThe new internal access modifier refers to

28 ActionScript 2.0 to 3.0Using external filesThis section describes changes to embedding, including, and importing external resources with ActionScri

Initializing variables 29Doing the latter results in a “Type annotation is not a compile-time constant” error.EmbedThe Embed syntax in ActionScript is

3ContentsAbout Flex Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Using this manual . . . . . . . . . . . . . . . .

30 ActionScript 2.0 to 3.0Default valuesThe following example shows the default values for variables of different types:var dog:int; // defaults to 0v

Initializing variables 31About undefinedIn general, ActionScript 2.0 allowed accessing undeclared variables whose value had not yet been set. By defau

32 ActionScript 2.0 to 3.0If you previously checked against undefined for a Number, you use a similar syntax; for example:if (n == undefined) // Actio

Typing 33Type detectionTo perform type detection, you should use is rather than typeof or instanceof. The is function examines types, whereas the inst

34 ActionScript 2.0 to 3.0(hintString ? String:Number) is the non-assignment expression. The variable myVar is dynamically typed to be String if hintS

Global functions 35Function changesSome global functions have been removed and replaced with new functions. The following table shows removed global f

36 ActionScript 2.0 to 3.0MiscellaneousThis section describes miscellaneous changes to the ActionScript language.MovieClipMovieClip has been replaced

Miscellaneous 37ArraysArrays no longer automatically update if you change the data. This means that you should no longer databind to an Array unless y

38 ActionScript 2.0 to 3.0ConstantsYou can use the const keyword to define constants in ActionScript 3.0. First, you determine which class and instanc

Miscellaneous 39__proto__ActionScript 3.0 does not support “hacking” the prototype chain. The use of __proto__ is no longer supported. For example: Ac

4ContentsEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84Formatters. . . . . .

40 ActionScript 2.0 to 3.0newstring2.prop = 1;trace(newstring2.prop); // prints '1' ActionScript 3.0:newstring = new String("hello"

413CHAPTER 3Flex ClassesThis topic describes API changes to the Flex class library in Adobe Flex 2 SDK, including class-level changes to containers, c

42 Flex ClassesCore classesThe UIObject and UIComponent classes have been combined. As a result, references to the UIObject class should be replaced b

Core classes 43mx.core.ContainerThe class as been moved to the mx.core package.createLater addToCreationQueuedirectionThe direction property has been

44 Flex ClassesThe following table describes changes to the Container class:Member Change descriptionallChildrenList rawChildrenbackgroundAlphaDepreca

Core classes 45If you set the background style, Flex ignores any value that is supplied for backgroundAlpha, backgroundColor, backgroundImage, or back

46 Flex Classesmx.core.MovieClipLoaderAssetThe following table describes changes to the mx.core.MovieClipLoaderAsset class:mx.core.MXMLUIObjectThe MXM

Core classes 47mx.core.Skin*The mx.core.Skin* classes have been renamed to use the term Asset in the class name. For example, the SkinSprite class is

48 Flex ClassescreateEmptyObject()Removed. Use the new operator and the addChild() method or other methods to add new visual objects to the display li

Core classes 49mouseOverEffect rollOverEffectmouseOutEffect rollOutEffectmouseWheelOutsideThis event is now of type FlexMouseEvent instead of MouseEve

Contents 5Chapter 9: Data Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135About Data Services . . . . . . . . . . . . . . .

50 Flex ClassesThe alpha, scaleX, and scaleY propertiesThe alpha, scaleX, and scaleY properties now range from 0 to 1 instead of from 0 to 100. For ex

Core classes 51getURL() methodIn Flex 1.5, every UIObject inherited the getURL() method from the MovieClip class. This is no longer the case. You now

52 Flex ClassesEnumerated values are now constantsIn many cases, properties that took a predefined list of values (such as the Button control’s labelP

Containers 53mx.core.UITextFormatThe following table describes the changes to the UITextFormat class:mx.core.ViewThe mx.core.View class has been remov

54 Flex Classesmx.containers.AccordionThe following table describes changes to the Accordion class:mx.containers.accordionclasses.*The accordionclasse

Containers 55mx.containers.ApplicationControlBarThe following table describes changes to the ApplicationControlBar class:mx.containers.BoxThe followin

56 Flex Classesmx.containers.DividedBoxThe following table describes changes to the DividedBox class:mx.containers.dividedboxclasses.*The dividedboxcl

Containers 57mx.containers.FormItemThe following table describes changes to the FormItem class:mx.containers.gridclasses.*The gridclasses package is n

58 Flex ClassesThe following table describes changes to the LinkBar class:mx.containers.NavBarThe mx.containers.NavBar class has been moved to mx.cont

Containers 59mx.containers.TabBarThe mx.containers.TabBar class has been moved to the mx.controls package. The TabBar container now extends mx.contain

6Contents

60 Flex Classesmx.containers.TileThe following table describes changes to the Tile class:mx.containers.TitleWindowThe following table describes change

Controls 61mx.containers.ViewStackThe following table describes changes to the ViewStack class:When all children are removed from a ViewStack, Flex se

62 Flex Classesmx.controls.alertclasses.*The alertclasses package is now named alertClasses.mx.controls.ButtonThe Button class no longer inherits from

Controls 63mx.controls.ButtonBarThe following table describes changes to the ButtonBar class:mx.controls.ButtonBarButtonThe ButtonBarButton class has

64 Flex Classesmx.controls.ColorPickerThe following table describes changes to the ColorPicker class:mx.controls.ComboBaseThe following table describe

Controls 65mx.controls.ComboBoxThe following table describes changes to the ComboBox class:mx.controls.DataGridThe DataGrid class now extends the new

66 Flex ClassesIn Flex 2, when a DataGrid control’s width is not wide enough to show all columns, only the first column gets smaller. This applies to

Controls 67mx.controls.dataGridClasses.DataGridListDataThe following table describes changes to the DataGridListData class:mx.controls.DateChooserThe

68 Flex Classesmx.controls.DateFieldThe following table describes changes to the DateField class:mx.controls.HorizontalListThe following table describ

Controls 69mx.controls.HRuleThe following table describes changes to the HRule class:mx.controls.HSliderThe following table describes changes to the H

7About Flex DocumentationMigrating Applications to Flex 2 provides information on updating applications written for Flex 1.x to Flex 2.ContentsUsing t

70 Flex Classesmx.controls.ListThe following table describes changes made to the List class:mx.controls.listclasses.*The listclasses package name has

Controls 71mx.controls.listclasses.ListBaseThe following table describes changes to the ListBase class:Member Change descriptionactiveTabStyleDeclarat

72 Flex Classesmx.controls.listClasses.ListCellRendererThe ListCellRenderer class is now named ListItemRenderer.The following table describes changes

Controls 73mx.controls.MenuThe following table describes changes to the Menu class:mx.controls.MenuBarThe following table describes changes to the Men

74 Flex Classesmx.controls.menuclasses.*The menuclasses package has been renamed menuClasses.mx.controls.menuclasses.IMenuDataDescriptorThe following

Controls 75mx.controls.PopUpMenuButtonThe following table describes changes to the PopUpMenuButton class:mx.controls.RadioButtonThe following table de

76 Flex Classesmx.controls.richtexteditorclasses.*The richtexteditorclasses package is now named richTextEditorClasses.mx.controls.scrollClasses.Scrol

Controls 77mx.controls.sliderclasses.*The sliderclasses package is now named sliderClasses.mx.controls.sliderclasses.SliderToolTipThe SliderToolTip cl

78 Flex Classesmx.controls.textclasses.*The textclasses package has been renamed textClasses.mx.controls.TextInputThe following table describes change

Controls 79Flex 1.x:<mx:TileList id="myTile" dataProvider="{dataObject}" cellRenderer="ProdtThumbnail" itemWidth=&quo

8About Flex DocumentationDocumentation setThe Flex documentation set includes the following titles:Viewing online documentationAll Flex documentation

80 Flex Classesmx.controls.treeclasses.*The treeclasses package is now named treeClasses.mx.controls.treeclasses.DefaultDataDescriptorThe following ta

Effects 81EffectsThe “instance” classes (such as mx.effects.RotateInstance and mx.effects.ResizeInstance) have been moved to the mx.effects.effectClas

82 Flex Classesmx.effects.EffectInstanceThe following table describes changes to the EffectInstance class:mx.effects.MaskEffectThe following table des

Effects 83mx.effects.SoundEffectThe following table describes changes to the SoundEffect class:These changes also apply to the SoundEffectInstance cla

84 Flex ClassesEventsAll events in the mx.collections package were moved to the mx.events package.In addition to the changes listed here, the events a

Events 85mx.events.DataGridEventThe following table describes changes to the DataGridEvent class:mx.events.DateChooserEventThe following table describ

86 Flex Classesmx.events.DropdownEventThe following table describes changes to the DropdownEvent class:mx.events.EventDispatcherThis class has been mo

Events 87mx.events.ListEventThe following table describes changes to the ListEvent class:mx.events.ListItemSelectEventThe following table describes ch

88 Flex Classesmx.events.MouseEventThe MouseEvent class is now called FlexMouseEvent. Do not confuse this with the flash.events.MouseEvent class, whic

Formatters 89mx.events.TreeEventThe following table describes changes to the TreeEvent class:mx.events.UIEventDispatcherThis class has been removed.Fo

91CHAPTER 1Getting StartedThis topic describes the first steps of migrating a Macromedia Flex 1.x application to Adobe Flex 2. This topic describes st

90 Flex ClassesThe following table describes the changes to the NumberBase class:mx.formatters.SwitchSymbolFormatterThe following table describes the

Managers 91ManagersThis section describes changes to Flex classes in the mx.managers package.mx.managers.DepthManagerThis class has been removed. IFoc

92 Flex Classesmx.managers.DragManagerInstead of setting event.handled inside the dragEnter event listener, you must call the DragManager.acceptDragDr

Managers 93mx.managers.PopUpManagerThe following table describes changes to the PopUpManager class:mx.managers.SystemManagerThe SystemManager class no

94 Flex ClassesMedia controlsThis section describes changes to media controls in Flex 2.mx.controls.MediaDisplayThe MediaDisplay control has been repl

Service tags 95mx.print.PrintJobTypeThe following table describes the changes to the PrintJobType class:ResourcesThis section provides information abo

96 Flex Classesmx.servicetags.RemoteObjectThe RemoteObject class was moved to mx.rpc.remoting.RemoteObject. It now extends the mx.rpc.AbstractService

Skins 97Callback URLsCallback URLs are no longer necessary in Flex 2. Use messaging channels with endpoint mappings instead.SkinsThis section describe

98 Flex ClassesStatesThis section provides information about changes to classes in the mx.states package.mx.states.AddChildThe following table describ

Validators 99UtilitiesThis section provides information about changes to classes in the mx.utils package.mx.utils.XMLUtilThe following table describes