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="http://www.adobe.com/2006/mxml"
Replace xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

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.
Declarations_multiline
<fx:Declarations>
${line_selection}
</fx:Declarations>



Declarations_singleLine
<fx:Declarations>
${word_selection}
</fx:Declarations>

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"
  c:\p.f\adobe\Flashbuilder\sdk\framework\theme\Halo.swf
• Flex Build Path -> Source Path -> Add Folder -> ${DOCUMENTS}\themes
• update the compiler settings to include:
   -theme=Halo/halo.swc

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:

http://www.actionscripterrors.com/?p=2186

http://www.jonathanrowny.com/journal/migrating-flex-4-stylemanager

http://squaredi.blogspot.com/2011/10/multiple-initializers-for-property.html

Multiple initializers for property 'dataprovider'

So, while migrating from Flex 3 to Flex 4, I'm going through the

• change namespaces
• move mx: to fx:
• wrap non-UIComponents into <fx:Declarations>

The next round of compiler errors is

"Multiple initializers for property 'dataProvider'. (note: 'dataProvider' is the default property of 'mx.controls.ComboBox').

Super useful error message here. 

Thanks to the hint at http://www.freeflowingcode.com/blog/flex/flex-multiple-initializers I noticed that there where still non-visual elements inside these components. 

Wrapping these elements into <fx:Declarations> made the error go away. 

So I guess that the take-away is, for components that use a dataProvider, and whose default property is dataProvider, you get a cryptic error message when your <Declarations> are not inside the correct tag. 

Showing more errors in Flash Builder / Eclipse

Have you had a task, like repackaging, migrating from Flex 3 to Flex 4, or anything that generated 100s of errors. Did you ever notice that eclipse had a "convenient" way of displaying 100 of (x+100) errors? I just discovered the simple way to show ALL of your errors.

Problems View -> Preferences (via down arrow on right hand side) -> Use Marker Limit = false;

Focusing on the spark Datagrid

From my presentation at 360Flex Unconference at Max.

The Slide Deck

Here is the blog that talks about the demo and has the source code:
The demo and source code

Precision focus control within the Spark DataGrid

So, in preparation for my MAX 360Flex Unconference presentation on Tues Oct 4th at 2pm (http://www.360flex.com/blog/2011/08/360max-the-schedule-2/) I've put together this demo about how to get precision focus control within the Spark Datagrid.

In this example you can see:

• Set focus to first editable item
• Tab through occasionally editable fields
• Focus with a mixture of multiple occasionally editable fields within a record
• Focus on a particular data item
• Focus using Tab, Shift+Tab, Arrows, and Page-Up and Page-Down
• Remove Focus
• Focus by clicking on a row

(Note, I've left the "disabled" cells editable, as I'm only changing the alpha. This is so that you can see that even if you click in to the non-editable fields directly, that the editing sessions (via the "Dashboard") doesn't get set)

view source

The slide deck for the preso will be coming soon.

DataGrids performance tests

 So my mission is to try to performance test the 3 Flex grids. mx:DataGrid, s:DataGrid and mx:AdvancedDataGrid.

I feel like my tests are incorrect and looking to you to point out my flaws.

Each grid has the same dataprovider and columns defined. I'm only using the default renderers
I have a StopWatch class, that will getTimer() from a start() method, until the next Event.RENDER from the grid under test.
I remove the data provider by setting it to null.
Once the screen is blank, I start the stopwatch and add the dataprovider.

The average of these tests over ten samples is:

Spark DataGrid: 207 ms
mx DataGrid: 176ms
AdvancedDataGrid: 171ms

I feel like my testing method is invalid, as I don't trust that

   1. The ADG is the fastest at rendering
   2. Spark is the worst at rendering
   3. That the difference in rendering between the 3 grids is negligible

Anyone to offer any insight?

HierarchicalCollectionView and Sorting Discovery

More woes around HierarchicalCollectionView. This was discovered while trying sort from the columns in the AdvancedDataGrid.

The usual case is that you click on a column and the sorting gets applied based on that column's datafield. In our case though, the datafield was a placeholder, as the item renderer took care of collecting the needed data out of the local cache based on the materialId.

Soooo... for sorting, we applied a sortCompareFunction to the column to account for this - so far so good.... until.....

HierarchicalCollectionView

 private function sortCanBeApplied(coll:ICollectionView):Boolean
    {
        if (sort == null)
            return true;
        
        // get the current item
        var obj:Object = coll.createCursor().current;
        
        if (!obj || !sort.fields)
            return false;
        
        // check for the properties (sort fields) in the current object
        for (var i:int = 0; i < sort.fields.length; i++)
        {
            var sf:SortField = sort.fields[i];
            if (!obj.hasOwnProperty(sf.name))
                return false;
        }
        return true;
    }

Notice line 16: if (!obj.hasOwnProperty(sf.name)) Well, if you trace everything back, it is essentially saying that the data HAS to have the property of the datafield of the column, otherwise no sorting.

Drat... now we have to add all of these [Transient] property placeholders to our vos, just to get sorting to work. (While messy, the other alternatives seemed even more messy and risky. Please comment if you have suggestions).

Here is a list of ideas that we considered but decided that it would make the code base less readable and understandable

Override hasOwnProperty on the VO

Override AdvancedDataGrid.addSortField() to change the sortField.name