<?xml version="1.0" encoding="utf-8"?>
<!--
@LICENSE@
-->
<!--

AlertExample01.mxml

@PROJECT_BLOCK@

-->
<!---
* A sample of the PopUp.makeAlert() method which creates a modal AlertDialog.
* 
* @image assets/examples/common/AlertDialogExample01_160.png 
* The image shows the use of PopUp.makeAlert() method.
* @mobile
* @source
* @tip Use the PopUp.makeAlert(title, icon, message, messageIcon) to quickly show modal Alert popups.
* @tip The ButtonBar can be replaced as well as new skins created for the buttons as would
* be done on a regular spark.components.ButtonBar (say if you wanted all corners 0).
* @tip Listen for the AlertDialogEvent.ACCEPT_CLICK and AlertDialogEvent.ACCEPT_CLICK
* events of the dialog.
* @tip Completly restyle the AlertDialog with using just CSS.
* @see com.teotigraphix.ui.components.PopUp#makeAlert()
* @author Michael Schmalle
* @copyright Teoti Graphix, LLC
* @front
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="AlertDialogExample01">
    
    <fx:Declarations>
        
        <!--- The multi DPI AlertDialog.icon. -->
        <s:MultiDPIBitmapSource id="iconClass"
                                source160dpi="@Embed(source='assets/common/emblem-important-160.png')"
                                source240dpi="@Embed(source='assets/common/emblem-important-240.png')"
                                source320dpi="@Embed(source='assets/common/emblem-important-320.png')"/>
        
    </fx:Declarations>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace components "com.teotigraphix.ui.components.*";
        
        @media (application-dpi: 160) {
            
            .dialogStyles #titleBar {
                chromeColor:#7DA21E;
                backgroundAlpha:0.8;
                borderColor:#C8E776;
                borderAlpha:0.8;
            }
            
            .dialogStyles #titleDisplay {
                color:#FFFFFF;
                fontWeight:bold;
                fontSize:20;
            }
            
            .dialogStyles #buttonBar {
                chromeColor:#97C024;
            }
            
            .dialogStyles #contentGroup {
                color:#FFFFFF;
            }
            
            .dialogStyles {
                borderThickness:4;
                cornerRadius:2;
                cornerRadiusBR:10;
                cornerRadiusBL:10;
                backgroundColor:#242424;
                backgroundAlpha:0.7;
                borderColor:#97C024;
                borderAlpha:0.7;
                
                modalTransparency:0.5;
                modalTransparencyBlur:5;
                modalTransparencyColor:#000000;
            }
        }
        
        @media (application-dpi: 240) {

        }
        
        @media (application-dpi: 320) {

        }
        
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import com.teotigraphix.ui.components.PopUp;
            import com.teotigraphix.ui.events.AlertDialogEvent;
            
            [Embed(source='assets/common/android_normal.png')]
            /**
             * The message icon.
             */
            private var droid:Class;
            
            /**
             * Click to popup the modal AlertDialog.
             */
            protected function button1_clickHandler(event:MouseEvent):void
            {
                var title:String = "The title of the AlertDialog";
                var icon:Object = iconClass;
                var message:String = "A message that the dialog will show. and wrap at newline \n" +
                    "foo bar baz goo!";
                var messageIcon:Object = droid; 
                
                var popup:PopUp = PopUp.makeAlert(title, icon,    message, messageIcon);
                popup.dialog.addEventListener(AlertDialogEvent.ACCEPT_CLICK, dialogEventHandler);
                popup.dialog.addEventListener(AlertDialogEvent.CANCEL_CLICK, dialogEventHandler);
                
                if (styleCheckBox.selected)
                    ISimpleStyleClient(popup.dialog).styleName = "dialogStyles";
                
                popup.show();
            }
            
            /**
             * @private
             */
            private function dialogEventHandler(event:AlertDialogEvent):void
            {
                statusLabel.text = event.type + " Dispatched";
            }
            
        ]]>
    </fx:Script>
    
    <s:VGroup horizontalCenter="0" top="25" horizontalAlign="center">
        
        <!--- Show the Alert -->
        <s:Button id="idButton" label="Show Alert"
                  click="button1_clickHandler(event)"/>
        
        <!--- @private -->
        <s:CheckBox id="styleCheckBox"
                    label="Custom AlertDialog styles"/>
        
    </s:VGroup>
    
    <!--- @private -->
    <s:Label id="statusLabel" 
             text="Behind the Alert" 
             verticalCenter="0" horizontalCenter="0"/>
    
</s:View>