Flex gestisce la parte di back-end e Flash visualizza i dati

[Flep]

Ciao a tutti !

Come avevo annunciato, ho creato una nuova sezione di FlepStudio che riguarda Adobe Flex Builder.
Personalmente credo ancora fermamente che Flex sia utile solo per applicazioni di beck-end come CMS oppure per applicazioni che devono gestire grosse moli di dati.
Per tutto il resto ( sempre a mio umile parere ) Flash e PHP sono ancora imbattibili !
Con questo articolo voglio inaugurare la nuova sezione pubblicando un esempio di come Flex può gestire dei dati tramite PHP e mySQL per poi visualizzare questi dati tramite Flash.

Cosa ho fatto:

creato una tabella nel database che contiene una lista di clienti ( nome, cognome, indirizzo, telefono ed email )

creato una form in Flex che permette di aggiungere un cliente alla tabella del database chiamando uno script PHP

creato 2 scripts PHP, uno inserisce un nuovo cliente nel database e l' altro recupera i dati di tutti i clienti ( verrà chiamato da Flash )

creato un SWF con Flash che chiamando un PHP recupera la lista clienti dal database e la visualizza attraverso un semplice componente DataGrid



In sostanza Flex gestisce la parte di back-end e Flash visualizza i dati.
Questo perchè credo che Flash ha certamente le caratteristiche giuste per "recitare" la parte del visualizzatore dato che potremmo usare svariate animazioni.

Chiaramente questo è un piccolo esempio di quello che si potrebbe fare con Flash associato a Flex... si apre un nuovo mondo !

mySQL ( crea la tabella nel database ):

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

	
		
		
		
		
		
		
		
		
		
		
		
	
	
    	
   		{name_input.text}
   		{surname_input.text}
   		
{address_input.text}
   		{phone_input.text}
   		{email_input.text}
   		
   
	
	
		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");
			}
		}
	

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

Demo Flex

Demo Flash

Files sorgente: