Understanding the Processing Order of a MXML File

[scripter73]

Hi,

I hope I'm posting this in the right location. I'm a newbie to Flex, MXML and ActionScript.

I'm walking a book now on the Flex Builder framework. As I go through examples, I run the examples which are comprised of MXML and ActionScript.

I'm sort of very methodical (ColdFusion background), and as I'm looking through one example in particular, I'd like to know what comes first, etc.

I understand that when I compile my MXML code, everything is converted to ActionScript, but I'm having a hard time walking through this code. (Hopefully, when I get to the debugging portion of my book, this will be easier.)

I've posted the latest example I'm working on here. If it wouldn't be too much trouble, could someone please step through it and tell me the "order" of the process? For example, are the imports done first, or is the Panel and PopUpButton processed first.


--------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[

import mx.events.*;
import mx.controls.Menu;

public var menuItems:Object=
[
{label:'One'},
{label:'Two'},
{label:'Three'}
];

public var thisMenu:Menu = Menu.createMenu(null, menuItems, false);

public function handleItemClick(event:MenuEvent):void{
menuBtn.label = event.label; //all this does is move the
//mx.controls.Alert.show("Value picked was: " + event.label);
}
]]>
</mx:Script>

<mx:Panel width="100" height="100">

<mx:PopUpButton id="menuBtn" creationComplete="thisMenu.addEventListener('itemClick', handleItemClick)" popUp="{thisMenu}" />

</mx:Panel>
</mx:Application>

--------------------

Thanks in advance!
scripter73

[wvxvw]

For to understand what happens, add -keep additional compiler argument (this will save the generated files into directory where your document class / application class is.
The files of interest would be those which have a name of this pattern:
MyMXMLComponent.as-generated.
As to the order of execution:
// Assuming we've done all the SystemManager
// stuff and advanced to the frame #2, which your code actually is
1. Call mixins (thise are static functions called before Application is instantiated.
2. Call the top-level document constructor.
3. Call recursively initiated(document, id) on the top-level container, container's children, grand children etc.
4. Do layered instantiation and layouting of all the visual components which are children of top-level container.
5. Dispatch applicationComplete event and wait for further instructions :)
Imports aren't called, they are used by compiler as a "lazy" data base for information on how to compile the class. What this means is: when the class is compiled, the compiler, once it encounters unknown reference checks local skope, class skope, package skope, and then if the reference is not found will go to the imports and try to trace the imported source.

[scripter73]

Hi wvxvw,

Thanks for that overview. I think it's a little over my head right now until I read some more.

How about this? I was looking for something more along the lines of:
1. Panel gets created.
2. PopUpButton named "menuBtn" is created.
3. The event "creationComplete" calls an event listener function for variable thisMenu that is supposed to listen for when thisMenu (the new menu created) has an itemClicked on it.
3a. Once the event occurs, then the handleItemClick() runs, which accepts an event and changes the PopUpButton label to the item that was selected.
4. The PopUpButton is populated with the values assigned to it.

I'm just not sure what the correct order is.

Are the variables menuItems, and thisMenu created behind the scenes before any of the MXML is processed? Then that way once you get to the MXML, you already have these items available?

Sorry to dumb it down so much, but I'm trying to understand each example and build on that foundation.

Thanks!

[wvxvw]

Ah, well, then basically you're correct.
Yes, the variables are created and initialized before anything else in MXML is executed. Though, I wouldn't use one variable to initialize another... in simple cases this may work, but in more complex cases you may get a forward-reference exception (i.e. attempt to access a variable that isn't constructed yet). So, I'd populate variables after the construction of other declared stuff finishes.
Also you need [Bindable] meta tag before
public var thisMenu:Menu ...
Otherwise the compiler will complain that it is not able to bind it.

[scripter73]

Hi wvxvw,

Thanks for the information. Since I'm just learning, I think that I really need to get this concept down. I know everything is event driven, but since I'm SOOOO.... linear thinking, I have this feeling to know what's created first, what's already created behind the scenes, etc.

If you find any good tutorials on this, please send them my way.

Thanks for your help!
scripter73

[wvxvw]

http://msimtiyaz.wordpress.com/flex/adobe-flex-component-instantiation-life-cycle/
This should be something like you're probably looking for.

http://blogs.eyepartner.com/adrian/flex/flex-tip-7-using-deferred-instantiation/
Just an additional reading :)

[scripter73]

Wow! These links are great. Thanks for sending. I really appreciate it.

[wvxvw]

Happy to help :)