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

DialogExample01.mxml

@PROJECT_BLOCK@

-->
<!---
* A sample of the PopUp class adding IDialog instances with custom contentRenderers.
* 
* @title Dialog Example 1
* @tip Use the <code>contentRenderer</code> to easily create custom content for a
* PopUp dialog.
* @source
* @mobile
* @image assets/examples/common/DialogExample01_160.png 
* A non modal IDialog with custom content created by an IFactory contentRenderer component.
* @image assets/examples/DialogExample01_1_160.png 
* A modal IDialog with custom content created by an IFactory contentRenderer component.
* @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="DialogExample01"
        xmlns:components="com.teotigraphix.ui.components.*">

    <fx:Declarations>
        
        <fx:Component className="MyRenderer">

                <s:VGroup horizontalAlign="center" width="100%" height="100%"
                          paddingTop="8" paddingRight="8" paddingBottom="8" paddingLeft="8">
                    
                    <fx:Script>
                        <![CDATA[
                            import com.teotigraphix.ui.events.DialogEvent;
                            
                            protected function button_clickHandler(event:MouseEvent):void
                            {
                                button.dispatchEvent(new DialogEvent(DialogEvent.DIALOG_CLOSE, true, true))
                            }
                        ]]>
                    </fx:Script>
                    
                    <!--- @private -->
                    <s:Label text="A message" styleName="message"/>
                    
                    <!--- @private -->
                    <s:Button id="button" label="OK" 
                              click="button_clickHandler(event)"
                              width="100%"/>
                    
                </s:VGroup>

        </fx:Component>
        
        <fx:Component className="MyModalRenderer">
            
            <s:VGroup horizontalAlign="center"
                      paddingTop="20" paddingRight="20" paddingBottom="20" paddingLeft="20"
                      gap="20"
                      width="100%" height="100%">
                
                <fx:Script>
                    <![CDATA[
                        import com.teotigraphix.ui.events.DialogEvent;
                        
                        protected function button_clickHandler(event:MouseEvent):void
                        {
                            button.dispatchEvent(new DialogEvent(DialogEvent.DIALOG_CLOSE, true, true))
                        }
                    ]]>
                </fx:Script>
                
                <!--- @private -->
                <s:Label text="A message in a modal IDialog" 
                         styleName="message"/>
                
                <!--- @private -->
                <s:Button id="button" label="OK" 
                          click="button_clickHandler(event)"
                          width="200"/>
                
            </s:VGroup>
            
        </fx:Component>
        
        <!--- @private -->
        <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) {
            
            .nonModalDialogStyles #titleDisplay {
                color:#242424;
                fontWeight:bold;
            }
            
            .nonModalDialogStyles #contentGroup .message {
                color:#FFFFFF;
            }
            
            .nonModalDialogStyles {
                
                dropShadowVisible:true;
                borderThickness:4;
                borderColor:#FFFFFF;
                
                cornerRadiusTL:8;
                cornerRadiusTR:8;
                cornerRadiusBL:0;
                cornerRadiusBR:0;
            }
            
            .modalDialogStyles #contentGroup .message {
                color:#FFFFFF;
                fontWeight:bold;
                fontSize:25;
            }
            
            .modalDialogStyles {
                borderThickness:3;
                borderColor:#7DA21E;
            }
        }
        
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import com.teotigraphix.ui.components.IDialog;
            import com.teotigraphix.ui.components.PopUp;
            
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;
            
            import spark.events.PopUpEvent;
            
            private var dialog:IDialog;
            
            /**
             * Add a non modal dialog with title, titleIcon and custom contentRenderer.
             */
            protected function nonModalButton_clickHandler(event:MouseEvent):void
            {
                if (dialog)
                    return;
                
                var popup:PopUp = PopUp.makeDialog(new ClassFactory(MyRenderer), "Foo Bar Baz Goo", iconClass);
                dialog = popup.dialog;
                dialog.addEventListener(PopUpEvent.CLOSE, dialogCloseHandler);
                IStyleClient(dialog).styleName = "nonModalDialogStyles";
                popup.show(navigator);
            }
            
            /**
             * Add a modal dialog with custom contentRenderer.
             */
            protected function modalButton_clickHandler(event:MouseEvent):void
            {
                if (dialog)
                    return;
                
                var popup:PopUp = PopUp.makeDialog(new ClassFactory(MyModalRenderer));
                dialog = popup.dialog;
                dialog.addEventListener(PopUpEvent.CLOSE, dialogCloseHandler);
                IStyleClient(dialog).styleName = "modalDialogStyles";
                
                popup.show(DisplayObjectContainer(FlexGlobals.topLevelApplication), true);
            }
            
            /**
             * Remove the IDialog with the PopUpManger.
             */
            protected function idButton3_clickHandler(event:MouseEvent):void
            {
                if (!dialog)
                    return;
                
                PopUpManager.removePopUp(IFlexDisplayObject(dialog));
                dialog.removeEventListener(PopUpEvent.CLOSE, dialogCloseHandler);
                dialog = null;
            }
            
            /**
             * @private
             */
            private function dialogCloseHandler(event:PopUpEvent):void
            {
                dialog.removeEventListener(PopUpEvent.CLOSE, dialogCloseHandler);
                dialog = null;
            }
            
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" 
                          gap="10" 
                          horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>
    
    <s:Label text="This IDialog pops up over the navigator"/>
    
    <!--- PopUp a non modal dialog. -->
    <s:Button id="nonModalButton" 
              label="Add non modal TitleIconDialog"
              click="nonModalButton_clickHandler(event)"/>
    
    <s:Label text="This IDialog pops up over the application"/>
    
    <!--- PopUp a modal dialog. -->
    <s:Button id="modalButton" 
              label="Add modal MessageDialog"
              click="modalButton_clickHandler(event)"/>
    
    <!--- @private -->
    <s:Button id="idButton3" 
              label="Remove from stage" 
              click="idButton3_clickHandler(event)"/>
    
</s:View>