Thursday, November 3, 2011

Migrating from Flex 3 to Flex 4 - A bulleted list

I know that there are lots of migration guides, but I thought I post a bulleted list. The intent of this migration is NOT to move to spark components, but to keep as much the same as the flex 3 build. So for example if you have a flex 3 dashboard, that you now want to load in flex 4 content.

1) Fix name spaces:
Search: xmlns:mx=""
Replace xmlns:fx="" xmlns:mx="library://"

2) fix MetaData
Search: mx:Metadata
Replace: fx:Metadata

3) fix Script

Search: mx:Script
Replace: fx:Script

4) fix Component

Search: mx:Component
Replace: fx:Component

5) fix Bindings

Search: mx:Binding
Replace: fx:Binding

6) Declarations wrapping
All non-visual elements need to be wrapped into the Declarations Tag.
Create a Flex Template, to make this process really easy.


Then it is just a matter of selecting the non-visual elements, hitting cntl-space and choosing the correct Declarations template

7) Adding the halo skin back into the workspace

  • Copy the Halo theme into the workspace into a folder called "themes"
  • Flex Build Path -> Source Path -> Add Folder -> ${DOCUMENTS}\themes
  • update the compiler settings to include:
8) Migrate the states.
This takes the most work, because there is not much automation that you can do

  1. Select all of the states and duplicate using cntl-alt-down
  2. cntl-shift-c, to comment out the duplicated code
  3. delete all of the nested nodes (AddChild, SetStyle, etc)
  4. Create a 2nd Editor View (Window -> new Editor), and adjust them so you can see both
  5. Keep the commented states on one side, and the version you are editing on the other
  6. Systematically add the state properties
    1. On the adds / removes, be sure to include the "includeIn" property
    2. Use the Flex4 state syntax for the properties and styles
  7. Be careful with the basedOn property of the states, you will need to make sure that your includeIn and properties reflect that as well. 
*********** At this point we should be just down to warnings ***********

9) Remove warnings about the styleManager
Manually replace "StyleManager.getStyleDeclaration" with "FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration"

You need to do this manually, as you will also need FlexGlobals imports. Also if you are within a visual element, you can just use styleManager instead of the static FlexGlobals property

10) Manually replace "Application.application" with "FlexGlobals.topLevelApplication"
You need to do this manually, as you will also need FlexGlobals imports.

11) You might still have some CSS warnings left, if so, you can select the Flex 3 compatibility mode within the Flex Compiler options

Some useful resources I found along the way:

No comments:

Post a Comment