Para aplicaciones "muy pequeñas", se puede poner todos los componentes que forman la aplicación en un solo archivo "mxml". En este caso todos los componentes son "visibles" y se puede crear los métodos necesarios para manejar todas las opciones de la aplicación.

Para aplicaciones normales es necesario separar todos los componentes principales en distintos archivos "mxml", es decir usar componentes customizados. En este esquema tenemos el problema de: cómo hacer que la aplicación principal pueda recibir la información acerca de lo que ha ocurrido en cada uno de estos componentes. La solución es usar eventos. De esta manera cada componente publica los eventos que puede lanzar y en la aplicación principal sólo se coloca el código necesario para atender los mismos.

Ejemplo

Tenemos una aplicación que necesita que el usuario se loguee antes de usar el sistema. En este caso tendríamos los siguientes componentes:
    – Aplicación
    – Panel de Logueo
    – Panel Principal 

La lógica sería:
a) La aplicación muestra el panel de logueo.
b) El panel de logueo lanza el evento de LOGUEO_EXITOSO.
c) La aplicación captura el evento LOGUEO_EXITOSO y activa el panel principal de la aplicación.

Panel del login

Acá se debe ver que dentro del tag “<mx:Metadata>” se está definiendo el evento que este componente puede lanzar “LoginEvent”, y con el código: “dispatchEvent(new LoginEvent());” se está lanzando el evento.

<?xml version="1.0"?>
<mx:Canvas width="260" height="200"
           xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Metadata>
        [Event(name="login", type="com.aw.msgweb.client.event.LoginEvent")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
        import com.aw.msgweb.client.event.LoginEvent;
        private function login():void {
            ......... 
            // login exitoso
            dispatchEvent(new LoginEvent());
        }
    ]]>
    </mx:Script>
    <mx:Panel title="Login" layout="vertical"
              color="0xffffff" borderAlpha="0.15" width="240" height="180" paddingTop="10" paddingRight="10"
              paddingBottom="10"
              verticalScrollPolicy="off" paddingLeft="10" horizontalAlign="center">
        ......................................................
        <mx:HBox>
            <mx:Button id="btnAceptar" label="Login" labelPlacement="right" paddingLeft="2"
                       color="0x323232" enabled="true" click="login()"/>
        </mx:HBox>
    </mx:Panel>
</mx:Canvas>

Definición del evento LoginEvent

package com.aw.msgweb.client.event {
import flash.events.Event;

public class LoginEvent extends Event{

    public static const LOGIN:String = "login"

    public function LoginEvent() {
        super(LOGIN);
    }
}
}

Aplicación Principal

Acá lo importante a notar es que con el código:

<views:Login id="loginView" login="handleLogin(event)"/>

Se está indicando que cuando el componente “views:Login” lance el evento “login” se debe llamar al método “handleLogin(event)” que a su vez ya podrá actualizar el panel principal de la aplicación, ya que el usuario ya está logueado

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:views="com.aw.msgweb.client.views.*" >
    <fx:Script>
        <![CDATA[
        import com.aw.msgweb.client.event.LoginEvent;
        private function handleLogin(e:LoginEvent):void {
            showMain();
        }
        private function showMain():void {
            ................
        }

        ]]>
        </fx:Script>
    <s:layout>
        <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
    </s:layout>
    <mx:Panel x="0" y="0" width="100%" height="100%"
              layout="absolute">
        <mx:ViewStack x="0" y="0" id="vsAppLevel" width="100%" height="100%">
            <views:Login id="loginView" login="handleLogin(event)"/>
            <views:MainView id="appView"/>
        </mx:ViewStack>
    </mx:Panel>
</s:Application>