Top hiccups when migrating from Flex 3 to Flex 4

I just sent off a draft today of an article about “Differences between Flex 3 and Flex 4”. It should be going out on Adobe’s Dev Net when we release our first public beta of Flex 4. I was supposed to keep the article between 1500 and 3000 words, but, I couldn’t! There was just too much information to cover. Hopefully, the editors don’t end up chopping it up and it gets to all of you in one cohesive piece.

Anyways, I thought I would highlight some of the things you might run into when you try to compile a Flex 3 application in Flex 4. Note, this will not be a complete list, but, hopefully, I’ll get the majority of big items covered.

1) Default theme has changed from Halo to Spark.

Who will this affect? This will affect just about every Flex application that did not compile with its own custom theme.

What’s the difference? See my last post about the differences between the Spark theme and the Halo theme.  Your application will likely size differently from a different default font, styles not working the same and various other changes.

How do I fix this? The Halo theme is included in Flex 4, so, you can compile with the an additional compiler argument “-theme” and point to the halo.swc in the frameworks/themes/Halo directory of the SDK.

2) Type selectors stop working.
Who will this affect? Applications using type selectors to style components in CSS. Here is an example: Button { color: #FFFFFF};

How do I fix this? Add a default namespace from the top of your CSS definition. Here is an example:

<mx:Style>

@namespace “http://www.adobe.com/2006/mxml

Button {

color: #FFFFFF;

}

</mx:Style>

3) The default preloader changed.

Who will this affect? Applications that are not using a custom preloader.

What’s the difference? The default preloader is not mx.preloaders.SparkDownloadProgressBar. The preloader has not “loading…” text. It has no text at all, just a progress bar.

How do I fix this? If you want the old preloader, you just need to add the following to your root tag: preloader=”mx.preloaders.DownloadProgressBar”

4) Flex 4 only supports player 10

Who will this affect? All Applications compiled in Flex 4.

How do I fix this? If you are using Flex Builder 3 with a Flex 4 SDK to create a Flex 4 project, you will need to change your compiler settings in the property panel. Be sure that your minimum player settings is at least 10.0.0. When you create a new project in Flex Builder 3, the minimum player version is 9.

playersetting

There are many other changes that are minor bug fixes that might affect you. If you have questions about compiling a Flex 3 application in Flex 4… post a comment. Thanks and Good luck!

27 responses

  1. Another change:
    Code run in flex like this:

    Application.application.name=”FlexDemo”;

    Is now wrong becouse:

    3608: ‘application’ has been deprecated since 4.0. Please use ‘FlexGlobals.topLevelApplication’.

    Must use:

    FlexGlobals.topLevelApplication = “FlexDemo;

    Gratings 😉

  2. @Artifex: Good point! I forget about this change. I will be sure its in the Flex article I’m writing too.

  3. […] Top hiccups when migrating from Flex 3 to Flex 4 « Flex Butterflies and Bugs (tags: flex4) […]

  4. […] Top hiccups when migrating from Flex 3 to Flex 4 « Flex Butterflies and Bugs (tags: flex4) […]

  5. Hi

    Im trying to migrate our application to flex 4.
    When i try to use a sample CSS file, it wont apply the modifications on the application.
    The skin im trying to use is here:
    http://www.scalenine.com/themes/moxy/moxy.html
    (its just a CSS file and 1 image.)
    I put this in the first line of the css file:
    @namespace “http://www.adobe.com/2006/mxml”;
    and in the main application:

    But it still wont apply the skins to most elements, like panels.
    If it helps heres my application tag:

    Thanks for help!

  6. … it cut out my mxml code, ill ty to post it again.
    So here are the first few lines of my app: (without greater/smaller signs)

    mx:Application
    layout=”absolute” horizontalAlign=”left”
    creationComplete=”initApp()”

    xmlns=”http://ns.adobe.com/mxml/2009″
    xmlns:s=”library://ns.adobe.com/flex/spark”
    xmlns:mx=”library://ns.adobe.com/flex/halo”

    Style source=”../style/moxy/moxy.css”

  7. @sydd: I’m guessing that the new Spark theme doesn’t support some of the styles you are setting in CSS. Try to compile using the Halo theme instead. In your compiler arguments add -theme=/frameworks/themes/Halo/halo.swc. (substitute with the location of your Flex SDK.

  8. Thanks it worked 🙂
    here’s the compiler argument, if anyone else needs it (with default install directory. )
    -theme “C:\Program Files\Adobe\Flash Builder Beta\sdks\4.0.0\frameworks\themes\Halo\halo.swc”

    you were right, somehow with the new skin properties like headerColors for v.3.2 Panel arent recognised.

  9. word wrap?

    1. @worked: What about word wrap? Are you looking for word wrap in a text component? The RichEditableText component should support word wrap.

    2. @worked,

      Word wrap is now controlled by the “lineBreak” style. By default text wraps (lineBreak=toFit), but if you want to disable word wrapping you can set the lineBreak style to ‘explicit’.

      <s:RichEditableText id=”lineBrToFit” text=”lineBreak=toFit The quick brown fox jumps over the lazy dog” lineBreak=”toFit” width=”100″ height=”60″ />

      <s:RichEditableText id=”lineBrExplicit” text=”lineBreak=explicit The quick brown fox jumps over the lazy dog” lineBreak=”explicit” width=”100″ height=”60″ />

      There is currently an open bug where the lineBreak style isn’t available on the Spark TextArea control when using MXML. But you can set the lineBreak style using ActionScript, advanced CSS, or using a custom skin.

      Hope that helps,
      Peter

      Peter

      1. You may also need to set the width to either 100% or a fixed width all they way up the chain (display list).

  10. Hi, I’m trying to update this project to CF9 and FlashBuilder/Flex 4 and mySQL db
    http://askjayvir.blogspot.com/2009/07/coldfusion-9-air-sqlite-offline-support.html

    mx.automation.tabularData.DataGridTabularData is no longer in Flex 4 — what to do, as I’m just learning (flex/air) and this project does exactly what I need to learn but it’s borked in Flex 4. Thanks for anyone who can update the project in the name of RIA love.

  11. Hi I am trying to compile my app with flex sdk 4 in flex builder 3. I am getting “Access of Undefined property null” error. and location/ line number is coming as unknown.

    1. @krishna: Can you compile in debug mode, you should get a more detailed runtime error. Also, be sure you are targeting minimum player version 10. (This is the most common problem when compiling with flex builder 3).

      1. I added compiler argument in flex compiler properties in project properties. i also added the same in flex SDK’s flex-config.xml. where it will log the information? Also i targetted to flex player 10.0.0 in both flex builder and flex SDK.

  12. one more information i am using flash builder 4.

  13. Hi I moved my code which is in flex 3.0 to flex 4.0. I encountered lot of errors related to the Styles such as border thickness,theme color, color etc. If i add the theme compiler argument does this going to clear all those errors.I want to give a try.

    1. @kumar: Yes, adding the theme argument or compiling with Flex 3 compatibility mode will clear this up. Styles such as themeColor are not supported on the new Spark theme.

  14. Hi, i’m compiling using Halo theme. I’m adding a child to another and getting some padding on all sides of child Panel; have tried to explicitely define the padding(Left,Right,Top,Bottom) as 0 but not successful. Can somebody please suggest as to what is wrong here…?

  15. Anyone know why this is?
    VerifyError: Error #1053: Illegal override of isRelatedObjectInaccessible in .RemappedMouseEvent.

    An existing flex 3 project switching to flex 4, still in flex builder.

  16. […] Top hiccups when migrating from Flex 3 to Flex 4 « Flex Butterflies and Bugs (tags: flex4) […]

  17. […] Top hiccups when migrating from Flex 3 to Flex 4 « Flex Butterflies and Bugs (tags: flex4) […]

  18. I migrated from Flex 3 to Flex 4. In flex 4 when I compile i am getting no errors but nothing comes appears on the screen. Can somebody please help.

    1. @hashin: Maybe your browser needs a newer Flash Player version. Go to: http://www.adobe.com/software/flash/about/ and see what version you have. It should be at least 10.2. Version 10.3 is the latest.

  19. […] components. To use the Halo component skins you need to set the “theme=halo.swc” (see Joan’s post). If you are using CSS you may also want to set the namespace so that it is recognised for your […]

  20. I like the helpful info you provide on your articles. I will bookmark your weblog and take
    a look at again here frequently. I’m quite sure I’ll learn
    a lot of new stuff right right here! Good luck for the following!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: