Hi all !
As already announced, I created a new section of FlepStudio about Adobe Flex Builder.
I still firmly believe that Flex is only useful for applications such as back-end CMS or for applications that need to manage large data moles.
For everything else (always in my humble opinion) Flash and PHP are still unbeatable!
With this article I want to inaugurate the new section by publishing an example of how Flex can manage data using PHP and mySQL then displays these data via Flash.
What I have done:
Created a table in the database that contains a list of customers (name, first name, address, Telephone and email)
Created a Flex form that allows to add a customer to the database table by calling a PHP script
2 PHP scripts created, one enters a new customer into database and other retrieves data of all customers (to be called by Flash)
Created with Flash an SWF that retrieves the customer list from the database by calling a PHP and displays data through a simple component DataGrid
Essentially Flex manages the back-end and Flash displays the data.
This is because I believe that Flash certainly has the right characteristics to "recite" the viewer could use as many animations.
Clearly this is a small example of what could be done with Flash associated with Flex ... it opens a new world!
mySQL ( creates database table )
HTML Code:
CREATE TABLE `datagrid_tut` (
`ID` int(11) NOT NULL auto_increment,
`name` text NOT NULL,
`surname` text NOT NULL,
`address` longtext NOT NULL,
`phone` int(11) NOT NULL,
`email` text NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=12 ;
--
-- Dumping data for table `datagrid_tut`
--
INSERT INTO `datagrid_tut` VALUES (1, 'Mario', 'Rossi', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 345645646, 'info@mariorossi.com');
INSERT INTO `datagrid_tut` VALUES (2, 'Luca', 'Verdi', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 2147483647, 'info@lucaverdi.com');
INSERT INTO `datagrid_tut` VALUES (3, 'Andrea', 'Bianchi', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 2147483647, 'info@andreabianchi.com');
INSERT INTO `datagrid_tut` VALUES (4, 'Giuseppe', 'Neri', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 23225242, 'info@giuseppeneri.com');
INSERT INTO `datagrid_tut` VALUES (5, 'Antonio', 'Gialli', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 24524525, 'info@antoniogialli.com');
INSERT INTO `datagrid_tut` VALUES (6, 'Alessandro', 'Marroni', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 56563565, 'info@alessandromarroni.com');
INSERT INTO `datagrid_tut` VALUES (7, 'Franco', 'Azzurri', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 53563635, 'info@francoazzurri.com');
INSERT INTO `datagrid_tut` VALUES (8, 'Alberto', 'Viola', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 564563453, 'info@albertoviola.com');
INSERT INTO `datagrid_tut` VALUES (9, 'Francesco', 'Grigio', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 563737454, 'info@francescogrigio.com');
INSERT INTO `datagrid_tut` VALUES (10, 'Marco', 'Porpora', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 876765667, 'info@marcoporpora.com');
INSERT INTO `datagrid_tut` VALUES (11, 'Giovanni', 'Arancione', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 98769766, 'info@giovanniarancione.com');
addCustomer.mxml
HTML Code:
<?xml version="1.0" encoding="macintosh"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="600" layout="absolute" applicationComplete="positionObjects()">
<mx:Panel id="my_panel" title="Add a customer" layout="absolute" width="400" height="400">
<mx:Label id="name_label" text="Name:" fontWeight="bold" x="10" y="10"/>
<mx:TextArea id="name_input" width="360" height="20"/>
<mx:Label id="surname_label" text="Surname:" fontWeight="bold" x="10"/>
<mx:TextArea id="surname_input" width="360" height="20"/>
<mx:Label id="address_label" text="Address:" fontWeight="bold" x="10"/>
<mx:TextArea id="address_input" width="360"/>
<mx:Label id="phone_label" text="Phone:" fontWeight="bold" x="10"/>
<mx:TextArea id="phone_input" width="360" height="20"/>
<mx:Label id="email_label" text="Email:" fontWeight="bold" x="10"/>
<mx:TextArea id="email_input" width="360" height="20"/>
<mx:Button id="send_button" label="SEND" click="customer.send()"/>
</mx:Panel>
<mx:HTTPService id="customer" url="http://flex.flepstudio.org/tutorials/DataGrid/addCustomer.php" useProxy="false" method="POST" result="getEchoFromPHP(event)" resultFormat="text">
<mx:request xmlns="">
<name>{name_input.text}</name>
<surname>{surname_input.text}</surname>
<address>{address_input.text}</address>
<phone>{phone_input.text}</phone>
<email>{email_input.text}</email>
</mx:request>
</mx:HTTPService>
<mx:Script>
import mx.controls.Text;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
private var a:Alert;
private function positionObjects():void
{
my_panel.x=stage.stageWidth/2-my_panel.width/2;
my_panel.y=stage.stageHeight/2-my_panel.height/2;
name_input.x=name_label.x;
name_input.y=name_label.y+name_label.height;
surname_label.y=name_input.y+name_input.height+20;
surname_input.x=10;
surname_input.y=surname_label.y+surname_label.height;
address_label.y=surname_input.y+surname_input.height+20;
address_input.x=10;
address_input.y=address_label.y+address_label.height;
phone_label.y=address_input.y+address_input.height+20;
phone_input.x=10;
phone_input.y=phone_label.y+phone_label.height;
email_label.y=phone_input.y+phone_input.height+20;
email_input.x=10;
email_input.y=email_label.y+email_label.height;
send_button.x=my_panel.width-send_button.width-30;
send_button.y=email_input.y+email_input.height+20;
}
private function getEchoFromPHP(evt:ResultEvent):void
{
var s:String=evt.result as String;
if(s==="ok")
{
var tf:Text=new Text();
tf.text="success!";
tf.x=430;
tf.y=80;
this.addChild(tf);
}
else
{
a=Alert.show("An error occurred","System error");
}
}
</mx:Script>
</mx:Application>
Main.as ( document class di main.fla )
Code:
package
{
import flash.display.MovieClip;
import flash.events.*;
import flash.xml.*;
import flash.net.*;
import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import caurina.transitions.Tweener;
import fl.controls.listClasses.*;
public class Main extends MovieClip
{
private const PHP_URL:String="http://flex.flepstudio.org/tutorials/DataGrid/getCustomers.php";
private var labels_array:Array=new Array('id','name','surname','address','phone','email');
private var obj_array:Array;
private var container_mc:MovieClip;
public function Main()
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(evt:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE,init);
stage.frameRate=31;
loadXML();
}
private function loadXML():void
{
var loader:URLLoader=new URLLoader();
loader.addEventListener(Event.COMPLETE,completeHandler);
var request:URLRequest=new URLRequest(PHP_URL+"?cachebuster="+new Date().getTime());
try
{
loader.load(request);
}
catch(error:Error)
{
trace('Impossibile caricare il documento.');
}
}
private function completeHandler(event:Event):void
{
obj_array=new Array();
var result:XML=new XML(event.target.data);
var myXML:XMLDocument=new XMLDocument();
myXML.ignoreWhite=true;
myXML.parseXML(result.toXMLString());
var node:XMLNode=myXML.firstChild;
var nodes:int=int(node.childNodes.length);
for(var i:int=0;i < nodes;i++)
{
var obj:Object=new Object();
var childs:int=int(node.childNodes[i].childNodes.length);
for(var j:int=0;j < childs;j++)
{
if(j==0)
obj.id=int(node.childNodes[i].childNodes[j].firstChild.nodeValue);
if(j==1)
{
var n:String=node.childNodes[i].childNodes[j].firstChild;
if(n==null)
n="empty";
obj.name=n;
}
if(j==2)
{
var s:String=node.childNodes[i].childNodes[j].firstChild;
if(s==null)
s="empty";
obj.surname=s;
}
if(j==3)
{
var a:String=node.childNodes[i].childNodes[j].firstChild;
if(a==null)
a="empty";
obj.address=a;
}
if(j==4)
{
var p:String=node.childNodes[i].childNodes[j].firstChild;
if(p==null)
p="empty";
obj.phone=p;
}
if(j==5)
{
var e:String=node.childNodes[i].childNodes[j].firstChild;
if(e==null)
e="empty";
obj.email=e;
}
}
obj_array.push(obj);
}
createContainer();
createDataGrid();
}
private function createContainer():void
{
if(container_mc!=null)
removeChild(container_mc);
container_mc=new MovieClip();
container_mc.x=25;
addChild(container_mc);
}
private function createDataGrid():void
{
if(dg!=null)
removeChild(dg);
var dg:DataGrid=new DataGrid();
dg.move(0,50);
dg.width=750;
dg.rowCount=labels_array.length;
dg.columns=labels_array;
dg.verticalScrollPolicy=ScrollPolicy.ON;
for(var i:int=0;i < obj_array.length;i++)
{
dg.addItem(obj_array[i]);
}
container_mc.addChild(dg);
Tweener.addTween(dg.getColumnAt(0),{width:30,time:0.3,transition:"easeOutQuad"});
Tweener.addTween(dg.getColumnAt(1),{width:70,time:0.3,transition:"easeOutQuad"});
Tweener.addTween(dg.getColumnAt(2),{width:70,time:0.3,transition:"easeOutQuad"});
Tweener.addTween(dg.getColumnAt(3),{width:280,time:0.3,transition:"easeOutQuad"});
Tweener.addTween(dg.getColumnAt(4),{width:100,time:0.3,transition:"easeOutQuad"});
}
}
}
addCustomer.php
PHP Code:
<?php
$server='localhost';
$username='root';
$password='root';
$dbname='db name';
$mysql = mysql_connect($server,$username,$password);
mysql_select_db($dbname);
$name=$_POST["name"];
$surname=$_POST["surname"];
$address=$_POST["address"];
$phone=$_POST["phone"];
$email=$_POST["email"];
$Query = "INSERT INTO `".$dbname."`.`datagrid_tut` (`ID`, `name`, `surname`, `address`, `phone`, `email`) VALUES (NULL, \"".$name."\", \"".$surname."\", \"".$address."\", \"".$phone."\", \"".$email."\");";
if(mysql_query($Query))
{
echo('ok');
}
?>
getCustomers.php
PHP Code:
<?php
$server='localhost';
$username='root';
$password='root';
$dbname='db name';
$mysql = mysql_connect($server,$username,$password);
mysql_select_db($dbname);
$Query="SELECT * from datagrid_tut";
$Result=mysql_query( $Query );
$Return="<?xml version=".'"1.0"'." encoding=".'"UTF-8"?>'."\n"."<customers>";
while($customer=mysql_fetch_object($Result))
{
$Return.="<customer><id>".$customer->ID."</id><name>".$customer->name."</name><surname>".$customer->surname."</surname><address>".$customer->address."</address><phone>".$customer->phone."</phone><email>".$customer->email."</email></customer>";
}
$Return.="</customers>";
mysql_free_result($Result);
echo ($Return)
?>
Flex demo
Flash demo
Source files:
20-04-08, 10:05
Linear Mode
