Flex manages the back-end and Flash displays the data

[Flep]

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 )

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

<?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 )

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
    $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
    $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:

[Maldor]

thanx alot flep!!!!! been seeing alot of very nice interactive sites completley done in flex lately...i saw some quick examples on the adobe site of the use of the built in components in flex ....it looked awsome.......

[johnhunter]

This looks good, it brings up the data with some style. I have built php mysql database driven website for work. How could this method be used to say add media, mp3, images, video, and blob text? My website (under reconstruction) at this time is pure flash using xml playlists, which leaves me with uncentralised data that is hard to manage. The next step has to be combining flex, flash, mysql with a little bit of papervision thrown in.

These are exciting times

[karnprakash]

hi,
i go tried your code but it shows error message
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

can you assist me the what is the problem