<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="392" height="219" viewSourceURL="srcview/index.html">
    
    <mx:Script>
    
        <![CDATA[
        
            import com.ericfeminella.examples.login.service.QueryService;
            import com.ericfeminella.examples.login.vo.LoginVO;
            
            /**
             * Upon login Button click event a service object is created and responder methods 
             * are passed accordingly. A LoginVO object is instantiated with username and password
             * text valuesw passed. The service object send(); method is then invoked to make the query
             */
            private function login():void
            {
                this.setState(false);
                
                this.loginResultText.text = "";
                this.loginBtn.enabled = false;
                
                var service:QueryService = new QueryService(this.loginResult, this.loginFault);
                var user:LoginVO = new LoginVO(this.username.text, this.password.text);
                
                service.send(user);
            }
            
            /**
             * Service query result responder which handles login result callbacks
             *
             * <p>Parses data object values into an &amp; delimited array and outputs each value to
             * the loginResultText
             */
            private function loginResult(event:* = null):void
            {
                this.setState(true);
                
                var result:String = event.target.data;
                var resultArray:Array = result.split("&");

                for (var i:int = 0; i < resultArray.length; i++) {
                    this.loginResultText.text += resultArray[i];
                }
            }
            
            /**
             * Service query fault responder which handles login fault callbacks
             *
             * <p>Outputs each fault message to loginResultText TextArea</p>
             */
            private function loginFault(event:* = null):void
            {
                this.setState(true);
                this.loginResultText.text = "onFault: " + event;
            }
            
            /**
             * Sets the state of the application by enabling and disabling
             * form elements based on service state
             */
            private function setState(enabled:Boolean):void
            {
                this.loginForm.enabled = enabled
                this.loginBtn.enabled = enabled;
            }
            
        ]]>
        
    </mx:Script>
    
    <mx:Style source="css/login-styles.css" />
    
    <mx:Panel title="Simple Flex 2.0 - PHP - MySQL Login:" layout="absolute" width="377" height="199" x="7.5" y="10">
    
        <mx:Form id="loginForm" width="357" height="86">
        
            <mx:FormItem label="Username: ">
                <mx:TextInput id="username"  width="223"/>
            </mx:FormItem>
    
            <mx:FormItem label="Password: ">
                <mx:TextInput id="password" displayAsPassword="true" width="223"/>
            </mx:FormItem>

        </mx:Form>
        
        <mx:Text id="loginResultText" width="337" height="57"  x="10" y="85"/>
        
        <mx:ControlBar horizontalAlign="right" width="368" height="25">
            <mx:Button id="loginBtn" label="Login" click="this.login()" x="22" y="90"/>
        </mx:ControlBar>
        
    </mx:Panel>

</mx:Application>