Migrating From Flex 3 to Flash Builder 4: mx.core.Application

Now with Flash Builder 4 out there for open use many people are already looking at their beautiful code and feeling like their code is looking a bit dated. Though Adobe has done a great job prepping your applications for a simple transition from Flex 3 to Flash Builder 4 I am guessing that if you are like me you feel like your application is “tainted” when you see those “deprecated” warnings. So let’s make the move from Flex 3 to Flash Builder 4 together.

Today I’m looking at mx.core.Application.

Not that I recommend using mx.core.Application within your Application, but there are a few times that this is a perfect solution for your coding issues. Now if you are using Flash Builder 4 you will see the warning that this is “deprecated”. But the move is simple, code that looks like this:

1
var app:Application = mx.core.Application.application as Application;

… can be rewritten to this…

1
var app:Object = FlexGlobals.topLevelApplication;

Which as livedocs explains will return:

The first application run in an ApplicationDomain is the top-level application. This property is set to a reference to the top-level application in the top-level application’s constructor. Each ApplicationDomain will have its own topLevelApplication.

  • Share/Bookmark

Comments (24)

RickiJune 13th, 2009 at 12:31 pm

Hi

I was doing this a couple of days ago with some applications.
A caveat with this approach is that code hinting is gone when you lose the type :/

I needed the height and width of my stage and ended up with something like this.

FlexGlobals.topLevelApplication.width , which works fine, but no code hinting for “width”

I cant remember(at work) what the topLevelApplication is returned as when doing the above, but addChild and other DisplayObject specific methods also works.

Jonathan CamposJune 13th, 2009 at 3:48 pm

I completely agree that it is not the “preferred” way because you lose type casting, but what Flex 4 gives you is an Object. This gives you “The first application run in an ApplicationDomain is the top-level application”, which is really helpful. This is what Adobe says:

With the addition of FxApplication there are now two root application classes. Code that calls Application.application needs to be changed to FlexGlobals.topLevelApplication. The advantage of this change is using FlexGlobals.topLevelApplication does not link the the Application class. If only FxApplication is being used, linking in Application increases the size of the application.

VinuthDecember 22nd, 2009 at 1:49 am

I have kept in main application and kept login form(component) out of viewstack
i used to call viewstack form login form in flex 3 by writing code as
login():void
{
Application.application.vs.visible=true;
Application.application.vs.selectedIndex=0;
}
now i am using flash builder 4. it is giving one Alert (use FlexGlobals….etc)and not showing view stack and not working .
would u please give me code to work my project.

thank you,
vinuth

Jonathan CamposDecember 22nd, 2009 at 9:42 am

@vinuth
Just do:
{..
FlexGlobals.topLevelApplication.vs.visible = true;
FlexGlobals.topLevelApplication.vs.includeInLayout = true;
..}

manishJanuary 18th, 2010 at 3:41 pm

ApplicationControlBar is depricated in flash 4.
I have used it in my flex 3 project.
although I can still refer to it with halo namespace it does not look the same.
any suggestions??

Jonathan CamposJanuary 18th, 2010 at 3:51 pm

You can still use flex3 (halo) components in flex 4 applications without any problem. But if you are wanting to mimic the applicationcontrolbar in flex4 just use a group and extend the group to have your required additional attributes – like docked, etc.

manishJanuary 18th, 2010 at 4:04 pm

thanks . I will try that.
I have been using a simple dashboard app based on sample dashboard
which you may have come across too
http://examples.adobe.com/flex3/devnet/dashboard/main.html
I wanted to convert it to flex 4 and use some nice features of it like states, inlcudein and skins etc which I think will make life easier.
Any idea of examples which is similar to it , that I can refer to .
Also any suggestions where I can find help on migration issues to flex 4 like one you have shown here.

Jonathan CamposJanuary 18th, 2010 at 8:33 pm

There are a variety of blogs around the web that discuss the moving from fx3 to fx4, but you can still use states with halo components in fx4. Skinning though is something specific to spark skins. Let me know if you have any other questions.

manishJanuary 19th, 2010 at 9:51 am

yes you can but migrating the above sample to flex 4 I encounter several issues .
any idea on if anybody have accomplished it?
I believe that will help many people to understand the transitioning a lot better.
thanks for your time.

Jonathan CamposJanuary 19th, 2010 at 10:01 am

I haven’t seen the flex dashboard example migrated to Fx4 yet. Sorry.

manishJanuary 19th, 2010 at 3:10 pm

I get an error when using spark application container and when trying to use a viewstack.
I have checked the namespace and all .
I even tried the code from tour deflex but I get same error in my environment.
“Could not resolve to a component implementation.”
I am using the latest SDK build 4.0.0.13619 as per suggestion in one of the blogs.
I have also enabled flex 3 compatibility mode.
Can you suggest what might be the issue or is it something with the build.?
I tried previous builds and got resolve with TabBar control issue.
thanks a lot in advance.

Jonathan CamposJanuary 19th, 2010 at 3:21 pm

Without doing a lot of testing it sounds like a build bug. Sadly when working with beta software you get lots of strange issues. An older build might have a part working just fine for you, and a newer build breaks it. Sorry you are having such a hard time.

manishJanuary 19th, 2010 at 3:30 pm

thanks I have spend half a day already on this.
If I use older builds I get error in TabBar.
well at least I know what the issue is now. will wait for new build..
thanks again.

PabloMarch 14th, 2010 at 4:24 pm

Thanks, this was extremely useful to me. I use that quite a lot, so I need to know the forthcoming changes in Flex 4.

schjlatahMarch 26th, 2010 at 12:40 pm

@manish With regards to the Flex Dashboard app, my guess as to why they haven’t rewritten it in Flex 4 is because it looks like the original Flex Charting package have been dropped in support of the iLog charting packages.

jeffApril 22nd, 2010 at 1:26 am

thanks for the link, was stuck on this for awhile. Is global access like this ‘ok’? Doesnt it break OOP principles?

Jonathan CamposApril 22nd, 2010 at 9:21 pm

It does break oop rules. But there are perfectly legit times to use it :)

jeffApril 23rd, 2010 at 12:22 pm

My particular case is trying to call from a MXML component, back to the main application (where I am trying to keep most of my AS.) What would be a ‘better’ way to do it? Or does it even matter as ‘as long as it works’? :)

Jonathan CamposApril 23rd, 2010 at 12:27 pm

Definitely in that case you need to have your AS split out to their relavent views/controllers and components. I’ve seen this .Net-esk pattern before and it usually leads to memory leaks and performance issues. I’m not sure how big your application is but usually you break up applications into views and controllers, with views being a set of components. Then you can also have commands to handle some of your heavy lifting. It does separate the code out – which ‘seems’ harder to read. But in the long run is better for code encapsulation and readability.

Jonathan CamposApril 23rd, 2010 at 12:28 pm

Also, think about using events more. If you are referencing your application in a component to execute a function, more than likely you need to make an event that the component releases, then the application’s event handlers can handle that event for the action that took place.

jeffApril 23rd, 2010 at 4:50 pm

The specific example I am taking about is having a LoginScreen (which is an mxml component) that checks to see if you are logged in, then will change the application state (in the main application MXML file) to show a datagrid (another separate MXML component file). Just trying to work through best practices on how to architect my app, how to separate it into different parts, where to have the actionscript etc…

code example (simplifying my problem, 2 components trying to change app currentState) here:

http://www.jeffguthrie.com/dl/temp/StateManagment.fxp.zip

jeffApril 23rd, 2010 at 4:51 pm

Maybe the problem statement can be best summarized by saying ‘ How to best call functions in parent app mxml file from components?’

Jonathan CamposApril 23rd, 2010 at 4:56 pm

@jeff For that the answer is simple, use events. The component shouldn’t be calling functions of its parent. Instead it should release an event that says “login” and the main event will be listening for that event. When the event handler receives the event then it will be time for the main application to handle it’s logic and make state changes as necessary.

HTH

jeffApril 26th, 2010 at 4:59 pm

yup makes sense. may be a good time for me to get into as3signals. :)

Leave a comment

Your comment