ATTENZIONE - Sono arrivati i VIDEO CORSI Actionscript 3.0 creati da FlepStudio

Flep · #1 (**permalink**) 20-04-08, 08:56

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

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)

?>

Demo Flex

Demo Flash

Files sorgente: