<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.controls.Alert;

            private var alert:Alert;

            private function init():void {
                Alert.buttonWidth = 100;
                Alert.yesLabel += " (" + Alert.YES + ")";
                Alert.noLabel += " (" + Alert.NO + ")";
                Alert.okLabel += " (" + Alert.OK + ")";
                Alert.cancelLabel += " (" + Alert.CANCEL + ")";
            }

            private function showAlert():void {
                var flags:uint = 0;
                if (yesCheckBox.selected) flags += Alert.YES;
                if (noCheckBox.selected) flags += Alert.NO;
                if (okCheckBox.selected) flags += Alert.OK;
                if (cancelCheckBox.selected) flags += Alert.CANCEL;
                if (nonModalCheckBox.selected) flags += Alert.NONMODAL;
                alert = Alert.show("The quick brown fox jumped over the lazy dog.",
                                    "title",
                                    flags,
                                    null,
                                    alert_close);
            } 

            private function alert_close(evt:CloseEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Show alert"
                click="showAlert();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

    <mx:HBox width="100%">
        <mx:CheckBox id="yesCheckBox"
                label="Alert.YES"
                width="20%" />
        <mx:CheckBox id="noCheckBox"
                label="Alert.NO"
                width="20%" />
        <mx:CheckBox id="okCheckBox"
                label="Alert.OK"
                width="20%" />
        <mx:CheckBox id="cancelCheckBox"
                label="Alert.CANCEL"
                width="20%" />
        <mx:CheckBox id="nonModalCheckBox"
                label="Alert.NONMODAL"
                width="20%" />
    </mx:HBox>

</mx:Application>