Tuesday, November 10, 2009

FLEX with PHP for Beginners





Flex - Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe. --link--



Don't worry, If you already familiar with flash web designing this also same concept with different approach with MXML XML type descriptive language. Flex is so dynamic and stable via browsers because it run in flash player and speedup the development process with professional and quality outcome. Let's step back and look at what Flex is and how it compares to standard HTML development with a language like PHP. Both the traditional Web 1.0 HTML architecture and the Flex-based architecture are shown in Figure 1.



























In this simple tutorial I'm going to use GET/POST methods to communicate between Flex and PHP. If you have some what knowledge about Flex and PHP this may easy to understand.
ok..
Lets move.....

First PHP .......

open a new text document and change the name as "test.php"

paste the below code in to the page.


# Send a response back to the client
print "You submitted the following form information:\n";

<?php
#rearing all requests
foreach ($_REQUEST as $k => $v) {
print " $k = $v\n";
if($v==1)
{
print "one is entered\n";
# you can validate the input just checking if(condition)
}
#email 4 qs - xxmithilaxx@gmail.com
}
?>
wow .... ! how simple code. but the result will so power full let see..
Now PHP part is ok

Then lets move to Flex.
Do you familiar with FlexBuilder? It is the idle for flex development, but if you so smart can code directly. In here I'm using FlexBuilder3.

open a new project. and create a simple page with two textboxes, twobuttons and textarea.
figure2 will show you.


















ok then go to the code view.


create String block and enter the url for php page.




<mx:String id="phpFile">
http://localhost/flex/test.php
</mx:String>




Then create the HTTPService Block to create the request. this some what different from normal Url request. Let see..







<mx:request>
<username> {username.text} </username>
<username2> {username2.text} </username2>
</mx:request>
</mx:HTTPService>



****
username,username2 are the textbox names.
result="{textarea1.text = String(event.result) is read the result in to text area.


Lets wrire the submit button to submit the request.
<mx:Button x="178" y="99" label="Submit" click="form1.send()"/>
Next button for check the php file working properly or not.
so lets set the path to php file.This is not a must. If you want to remove it just remove.
<mx:Button x="252" y="99" label="Check if PHP file exists" click="{navigateToURL(new URLRequest(phpFile));}"/>
yah..! now its finished. just up the wamp or prefer server for php and then run your flex file and submit some thing, then you get reply from php. then enter "1" in to the text box then it return "one is entered". understand the code, then you can go for a bigger.








In this example we are not going to use databases. it will be my next post.







full flex code------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff">


<mx:HRule x="10" y="37" width="90%"/>
<mx:Text x="10" y="10" text="Submit form using get method" styleName="headerStyle" id="label1"/>

<mx:String id="phpFile">
http://localhost/flex/test.php
</mx:String>

<mx:HTTPService id="form1" url="{phpFile}" method="GET" resultFormat="text" result="{textarea1.text = String(event.result)}">
<mx:request>
<username>{username.text}</username>
<username2>{username2.text}</username2>

</mx:request>
</mx:HTTPService>

<mx:TextInput id="username" x="10" y="99"/>
<mx:TextInput id="username2" x="10" y="129"/>
<mx:Button x="178" y="99" label="Submit" click="form1.send()"/>
<mx:Label x="12" y="150" text="Result"/>
<mx:Label x="10" y="73" text="Submit form to PHP"/>
<mx:TextArea x="13" y="169" width="395" height="188" id="textarea1"/>
<mx:Button x="252" y="99" label="Check if PHP file exists" click="{navigateToURL(new URLRequest(phpFile));}"/>
<mx:Label x="42" y="360" width="333" id="lable1" alpha="1.0"/>
</mx:Application>





ENJOY FLEX.....
Like for comment about posts, and become a follower
thank you..
Mithila Karunarathna :)