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:
… can be rewritten to this…
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.





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.
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:
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
@vinuth
Just do:
{..
FlexGlobals.topLevelApplication.vs.visible = true;
FlexGlobals.topLevelApplication.vs.includeInLayout = true;
..}
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??
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.
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.
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.
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.
I haven’t seen the flex dashboard example migrated to Fx4 yet. Sorry.
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.
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.
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.
Thanks, this was extremely useful to me. I use that quite a lot, so I need to know the forthcoming changes in Flex 4.
@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.
thanks for the link, was stuck on this for awhile. Is global access like this ‘ok’? Doesnt it break OOP principles?
It does break oop rules. But there are perfectly legit times to use it
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’?
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.
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.
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
Maybe the problem statement can be best summarized by saying ‘ How to best call functions in parent app mxml file from components?’
@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
yup makes sense. may be a good time for me to get into as3signals.
Hi,
I am Nitika Agarwal. Even I am working on flex and shifting my entire application from flex 3.5 to Flex 4.0. Your blog has been really helpful.
I am using lots of styling for my components which I cannot afford to change now because its a huge application and its client dependent. So I cannot change the look and field of it. I need to workaround of some styles for some controls like TextInput, Checkbox, Button. Please can you help me. Following is the list of controls for which I need a workaround.
Button – > fillColor, fillApha
Canvas -> borderThickness
ComboBox -> borderColor, fillColor, fillApha
TextArea -> backgroundColor, backgroundAlpha, cornerRadius
TextInput -> backgroundColor, backgroundAlpha,
All these properties are not allowed in mxml components and they are giving warnings in CSS files also. I have included namespaces also in the beginning of CSS file as:
@namespace “http://www.adobe.com/2006/mxml”;
@namespace mx “library://ns.adobe.com/flex/mx”;
@namespace fx “library://ns.adobe.com/flex/spark”;
@namespace flexlib “http://code.google.com/p/flexlib/”;
But it still gives the warnings and UI is not same as before. I am using FLex $ SDK with MX+Spark component set and Flex compatibility mode is unchecked.
Please help.
Thanks
Nitika
I’m not sure what your issue is. You can still use all the fx3 components that you previously used in your fx4 applications. If you are needing to add these styles to your components you can either skin them or you can extend the components and add the styles. Please let me know more about the issues you are having.
how to use FlexGlobals to get URL parameters.
In deprecated version was:
var filename:String = Application.application.parameters.filename;
but this mode don’t work in flex 4.1.
How i do it?
@jucelio odd, have you tried pulling the parameters into an object and seeing if they exist?
Thank you very much! o/