MXML vs ActionScript 3.0

Flex components can be added to an application using MXML or ActionScript 3.0. Both code examples below display the same results.

MXML

Components are implicitly initialized when the user runs the application.

The Application class is a container
Components are added to an application as children objects.
MXML is compiled to ActionScript 3.0

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0">

    <mx:Image source="assets/animals03.jpg" />

    <mx:Label text="Photographed by Elsie Weil" />

</mx:Application>

ActionScript 3.0

Components are created and added to the display though an explicit call to the addControls() function when the user runs the application.

You need to add an initialize listener to the application object to call the function that adds the components (initialize="addControls()").
You need to explicitly attach the components to application object (this.addChild(photo))

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    initialize="addControls()">

	<mx:Script>
	   <![CDATA[
            import mx.controls.Image;
            import mx.controls.Label;

            private function addControls():void {
                createImage();
                createPhotographer();
            }

            private function createImage():void {
                var photo:Image = new Image();
                photo.source = "assets/animals03.jpg";
                this.addChild(photo);
            }

            private function createPhotographer():void {
                var photographer:Label = new Label();
                photographer.text = "Photographed by Elsie Weil";
                this.addChild(photographer);
            }

	   ]]>
	</mx:Script>

</mx:Application>

Learn more

Rendered Samples

Both applications render the same even though one adds components using MXML and the other using ActionScript 3.0 code.

Resources