Part 2 - Programming the GUI 

Okay so we"re done with the easy part, here comes the tricky part. If you"re not too familiar with programming in Flex then you might have to read a few lines over but if you have some experience you should be set. I"ll try to make it as descriptive as possible.

Let"s start by creating a simple web request that will send the form data to the PHP file. 

<mx:HTTPService

id="login_user"

result="checkLogin(event)" //This is the function that will be called after a result comes

method="POST"

url="http://www.vipercreations.com/flex/login.php"

useProxy="false">

<mx:request xmlns="">

<username>{username.text}</username>

<password>{password.text}</password>

</mx:request>

</mx:HTTPService>

Explanation:

Creating a web request is rather simple in Flex. All you have to do is call the <mx:HTTPService> command and throw in the right parameters and you"re set!

Some of the more important parameters are the ID, method, and obviously, the url. The id is the unique name given to the service and is used to call the service later in the script. The method is the way the service communicates with the PHP script. You can use either the GET or POST method, but I choose POST. Lastly, setting useProxy to true or false specifies whether to use the Flex proxy service or not.

After we setup the service, we setup the request. This tells the service what to send to the script. If you changed <username> to <user_name>, you would have to change it in your PHP script too. {username.text} simply means that the value of $_POST["username"] will be the value of the text in the username field of the GUI(what the user has entered). Same goes for the password.

Not too hard, right?

The next thing to do is tell the submit button what to do when it is pressed. Under the submit buttons properties (Flex Properties->On click:), type in the following: login_user.send();

This tells it to send an http request to the login script. 

Once the service has finished executing, a function named "checkLogin" will be called. 

<mx:Script>

<![CDATA[



private function checkLogin(evt:ResultEvent):void

{

	if(evt.result.loginsuccess == "yes")

	{

	currentState = "Logged In";

	}

	if(evt.result.loginsuccess == "no")

	{

		mx.controls.Alert.show("Invalid username/password");

	}		

}

]]>

</mx:Script>

Explanation:
This isn"t as bad as it looks . After we tell Flex that we"re writing some code (typing in <mx:Script>), we create our custom function called checkLogin();. All this function does is check if the login was successful or not! To see the result of the request, we use "login_user.lastRequest". You cannot pass a variable directly from PHP to Flex so you must output it as XML and then parse it through Flex. Once we write the PHP script, all this will become clear, I promise!

If the result of the request was successful, the the script returned "yes", then we change the current state to "Logged In". View States is a really nice feature of Flex. Think of them as different pages, but all in one application. We"ll create the Logged In View State right after the PHP script, so you don"t get too confused.

However, if the result was "no", Flex pops up an alert box(just like a JavaScript alert) saying that the username/password entered was wrong. And that"s it for the function!

That pretty much sums up Part 2, we"ll be adding a bit more to this later on in Part 4. Now we must create the PHP script.