#1 (permalink)  
Old 20-04-08, 09:05
Administrator
Living At The FlepStudio!
 
Join Date: Jul 2007
Location: Cesenatico
Posts: 4,917
Rep Power: 6
Flep is on a distinguished road
Arrow Flex manages the back-end and Flash displays the data

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:
Attached Files
File Type: zip DataGrid_tut.zip (1.09 MB, 150 views)
__________________
_________________________________________
VIDEO CORSI ACTIONSCRIPT 3.0 creati da FlepStudio
I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread please !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !

Last edited by Flep; 05-06-08 at 17:38.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
sponsor links
Flashmint flash templates FlippingBook-PDF publisher Flash Media Server Hosting
  #2 (permalink)  
Old 20-04-08, 22:21
Member
Settled In
 
Join Date: Jan 2008
Posts: 39
Rep Power: 0
Maldor is on a distinguished road
Re: Flex manages the back-end and Flash displays the data

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.......
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 04-05-08, 07:36
johnrlhunter
Settled In
 
Join Date: May 2008
Location: Salisbury, England
Posts: 2
Rep Power: 0
johnhunter is on a distinguished road
Re: Flex manages the back-end and Flash displays the data

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 02-08-08, 08:50
Junior Member
Settled In
 
Join Date: Aug 2008
Posts: 1
Rep Power: 0
karnprakash is on a distinguished road
Re: Flex manages the back-end and Flash displays the data

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
sponsor links
Reply

Bookmarks

Tags
backend, data, displays, flash, flex, manages

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Retrieve data from mySQL with Flash CS3 Flep Tutorials 7 09-06-09 02:59
Storing data in DataBase with Flash CS3 Flep Tutorials 8 22-03-09 20:31
Flex Builder 3 Bubble Chart and Using Salesforce Data Mike_Green FLEX builder 3 2 04-01-09 20:48
Flex gestisce la parte di back-end e Flash visualizza i dati Flep FLEX builder 3 0 20-04-08 08:56
put complex data from php to flash nootropic.kint Actionscript 3.0 avanzato 3 15-10-07 21:52



Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0
vBulletin Skin developed by: vBStyles.com
FlepStudio 2007-2009