Notes about Migrating from Flex 3 to Flex 4 (4.1 or 4.5 SDK)

The main incentive for the migration was to support RTL languages namely Hebrew and Japanese. Fact is that Flex 3 does not handle RTL writing properly – try writing Hebrew and English together.

 

After finalizing the long and fragmented process, I found that the migration had two main parts – handling the visual aspects (styling, skins etc) and handling the application logic (components and AS). I found a workaround that helped me to split the process into these two parts – i.e. set the styling to backward compatibility mode and handle the logic first. Then, once the application compiles and runs ‘properly’, disable the compatibility mode and go thru the styling issues.

 

So, to set the backward compatibility with Halo you should do the following:

 

  • Go to the sdk 4.x directory -> frameworks -> flex-config.xml
  • Edit the file (as administrator) and add the following line in the <themes> section
    <filename>themes/Halo/halo.swc</filename>
  • This will prevent all the errors related to style properties such as borederThikness, cornerRadius that are not supported in Flex 4.

     

 

Main Issues Handled in the Logic Part

  1. RTL - To support native RTL writing, all text-based components were switched from MX to Spark – Label, TextInput, TextArea, and custom components based on them
  2. DataGrid itemRenderers – most of my renderers were based on the mx:Label component. None of the renderers worked and I had to base all the renderers on the s:MXDataGridItemRenderer class and include in it a Lable component (read this). The rest of the code was untouched.
  3. Datagrid – I started the migration process with 4.5 SDK. This was premature because the s:DataGrid component was missing some critical properties which prevented the application to compile. Therefore, I switched to 4.1 SDK (not sure what is the status today as the migration was done less than a year ago)
  4. RTL popups – this issue is not related to the migration specifically but since RTL mode has been QA-ed extensively, it worth mentioning. Alert and other views poped up using the PopupManager class were placed out of the main screen in RTL mode. Namely, their x and y properties sent the popup out of the screen. If you did not implement the ESC key to close the popup, the impression was like the application is stuck (glass pane) while the popup is there but you cannot see it.

 

Issues Handled in the Visual Part

First, remove the line <filename>themes/Halo/halo.swc</filename> from flex-config.xml.

Then, get handful of compilation errors related to usage of styles such as cornerRadius, borderThikness, borerColor inline within components. Another example is the icon property of Button class – not supported in 4.x SDK. If used in CSS file, these styles were ‘just’ ignored.

So, after removing these (inline) styles, the application compiled and the main effect is that the application looked completely different style-wise.

 

This was a contribution of:

  1. Flex 4 components default styling is different from Flex 3
  2. Usage more of CSS styling and less of skins caused the unsupported styles to vanish and therefore components adapted their default styles

 

Several action took place in order to bring some life to the new app

  1. Start over with new CSS file and add to it only the supported styles (i.e. clean it)
  2. Implement new skins introduced by 4.1 SDK
  3. In some skin files, implement backward compatibility for old styles such as borderThickness and cornerRadius by overriding updateDisplayList() in the skin file. Same done for the icon property of the Button class (today, I’m familiar with skin part and this is the right solution)
  4. Implement a RTL-specific css file and load it dynamically using tyleManager.loadStyleDeclarations() when the app switched to RTL (and unload otherwise).
Developer