Wade Arnold

Everyone seems to want to know what the simplest way is to populate a Flash CS3 DataGrid from AMFPHP and MySQL. This is trivial in Flex however I found that it was difficult in Flash Cs3 without a good understanding of AMFPHP. So here is the super simple example, plus a utility to help out.

First AMFPHP returns all AMF3 result resources as an ArrayCollection. This is great if you are working in Flex Builder. If you are working in Flash Cs3 AND you have not mapped your Flex library’s into Flash this is a problem.

Lets start by creating a MySQL database named products. Run the following SQL against the database to get a table Product and some data in the table. This is worth getting this database going as I am working on all the examples of remoting that mimic the BlazeDS quickstart guide!

CREATE TABLE `Product` (
  `PRODUCT_ID` int(11) NOT NULL auto_increment,
  `NAME` varchar(40) NOT NULL default '',
  `CATEGORY` varchar(40) NOT NULL default '',
  `IMAGE` varchar(40) NOT NULL default '',
  `PRICE` double NOT NULL default '0',
  `DESCRIPTION` varchar(255) NOT NULL default '',
  `QTY_IN_STOCK` int(11) NOT NULL default '0',
  PRIMARY KEY  (`PRODUCT_ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;

--
-- Dumping data for table `Product`
--

INSERT INTO `Product` VALUES(1, 'Nokia 6010', '6000', 'Nokia_6010.gif', 99, 'Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more.', 0);
INSERT INTO `Product` VALUES(2, 'Nokia 3100 Blue', '9000', 'Nokia_3100_blue.gif', 109, 'Light up the night with a glow-in-the-dark cover - when it is charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on gaming co', 99);
INSERT INTO `Product` VALUES(3, 'Nokia 3100 Pink', '3000', 'Nokia_3100_pink.gif', 139, 'Light up the night with a glow-in-the-dark cover - when it is charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on gaming co', 30);
INSERT INTO `Product` VALUES(4, 'Nokia 3650', '3000', 'Nokia_3650.gif', 200, 'Messaging is more personal, versatile and fun with the Nokia 3650 camera phone.  Capture experiences as soon as you see them and send the photos you take to you friends and family.', 11);
INSERT INTO `Product` VALUES(5, 'Nokia 6820', '6000', 'Nokia_6820.gif', 299.99, 'Messaging just got a whole lot smarter. The Nokia 6820 messaging device puts the tools you need for rich communication - full messaging keyboard, digital camera, mobile email, MMS, SMS, and Instant Messaging - right at your fingertips, in a small, sleek d', 8);
INSERT INTO `Product` VALUES(6, 'Nokia 6670', '6000', 'Nokia_6670.gif', 319.99, 'Classic business tools meet your creative streak in the Nokia 6670 imaging smartphone. It has a Netfront Web browser with PDF support, document viewer applications for email attachments, a direct printing application, and a megapixel still camera that als', 2);
INSERT INTO `Product` VALUES(7, 'Nokia 6620', '6000', 'Nokia_6620.gif', 329.99, 'Shoot a basket. Shoot a movie. Video phones from Nokia... the perfect way to save and share life’s playful moments. Feel connected.', 10);
INSERT INTO `Product` VALUES(8, 'Nokia 3230 Silver', '3000', 'Nokia_3230_black.gif', 500, 'Get creative with the Nokia 3230 smartphone. Create your own ringing tones, print your mobile images, play multiplayer games over a wireless Bluetooth connection, and browse HTML and xHTML Web pages.', 10);
INSERT INTO `Product` VALUES(9, 'Nokia 3120', '3000', 'Nokia_3120.gif', 159.99, 'Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screen', 10);
INSERT INTO `Product` VALUES(10, 'Nokia 3220', '3000', 'Nokia_3220.gif', 199, 'The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the', 20);
INSERT INTO `Product` VALUES(11, 'Nokia 6680', '6000', 'Nokia_6680.gif', 222, 'The Nokia 6680 is an imaging smartphone that', 36);
INSERT INTO `Product` VALUES(12, 'Nokia 6630', '6000', 'Nokia_6630.gif', 379, 'The Nokia 6630 imaging smartphone is a 1.3 megapixel digital imaging device (1.3 megapixel camera sensor, effective resolution 1.23 megapixels for image capture, image size 1280 x 960 pixels).', 8);
INSERT INTO `Product` VALUES(13, 'Nokia 7610 Black', '7000', 'Nokia_7610_black.gif', 450, 'The Nokia 7610 imaging phone with its sleek, compact design stands out in any crowd. Cut a cleaner profile with a megapixel camera and 4x digital zoom. Quality prints are all the proof you need of your cutting edge savvy.', 20);
INSERT INTO `Product` VALUES(14, 'Nokia 7610 White', '7000', 'Nokia_7610_white.gif', 4500, 'The Nokia 7610 imaging phone with its sleek, compact design stands out in any crowd. Cut a cleaner profile with a megapixel camera and 4x digital zoom. Quality prints are all the proof you need of your cutting edge savvy.', 7);
INSERT INTO `Product` VALUES(15, 'Nokia 6680', '6000', 'Nokia_6680.gif', 219, 'The Nokia 6680 is an imaging smartphone.', 15);
INSERT INTO `Product` VALUES(16, 'Nokia 9300', '9000', 'Nokia_9300_close.gif', 599, 'The Nokia 9300 combines popular voice communication features with important productivity applications in one well-appointed device. Now the tools you need to stay in touch and on top of schedules, email, news, and messages are conveniently at your fingert', 26);
INSERT INTO `Product` VALUES(17, 'Nokia 9500', '9000', 'Nokia_9500_close.gif', 799.99, 'Fast data connectivity with Wireless LAN. Browse the Internet in full color, on a wide, easy-to-view screen. Work with office documents not just email with attachments and memos, but presentations and databases too.', 54);
INSERT INTO `Product` VALUES(18, 'Nokia N90', '9000', 'Nokia_N90.gif', 499, 'Twist and shoot. It is a pro-photo taker. A personal video-maker. Complete with Carl Zeiss Optics for crisp, bright images you can view, edit, print and share. Meet the Nokia N90.', 12);

Here is a very simple ProductService which has two methods. The constructor that creates the DB connection and GetProducts a select * result that returns all rows. Upload the ProductService.php file into your amfphp/classes directory. Check out the service in the AMFPHP Service Browser for fun and debugging your db connection!

class ProductService {

var $dbh;

public function __construct() {

   $this->dbh = mysql_connect ("localhost", "wade", "arnold") or die ('I cannot connect to the database because: ' . mysql_error());

mysql_select_db ("product");

}

function getProducts() {

return mysql_query(sprintf("SELECT * FROM Product"));

}

}

From Flash CS3 place a DataGrid on the stage and give it an instance name of products_dg. Place a button on the stage and give it an instance name of getProducts_btn and change the label to Get Products

Create a document Main.as class and link the new fla to the class. Copy the following code into the Main.as file and update the gateway url to your AMFPHP installation.

package {

 import flash.display.MovieClip;

 import fl.events.*;

 import flash.events.*;

 import flash.net.NetConnection;

 import flash.net.Responder;

 import fl.data.DataProvider;

 import ArrayCollectionDP;

 public class Main extends MovieClip {

 	private var gateway:String = "http://localhost/amfphp/gateway.php";

 	private var connection:NetConnection;

 	private var responder:Responder;

public function Main() {

 		getProducts_btn.addEventListener(MouseEvent.CLICK, sendData);

 		responder = new Responder(onResult, onFault);

 		connection = new NetConnection;

 		connection.connect(gateway);

}

public function sendData(e:MouseEvent):void {

 		connection.call("ProductService.getProducts", responder);

 	}

 	private function onResult(result:Object):void {

 		products_dg.dataProvider = ArrayCollectionDP.toDataProvider(result);

 	}

 	private function onFault(fault:Object):void {

 		trace(String(fault.description));

 	}

}

}

Create a new ActionScript 3 file called ArrayCollectionDP.as and copy the following code into it. This class is designed to convert an AS3 ArrayCollection into a dataprovider. This is necessary until Adobe adds by default ArrayCollection to Flash Cs3. I have no idea why this class is not part of Flash but I also don’t work at Adobe.

package {

 import fl.data.DataProvider;

 public class ArrayCollectionDP {

public static function toDataProvider(myArrayCollection:Object):DataProvider {

 		var values:Array = myArrayCollection.serverInfo.initialData;

 		var category:Array = myArrayCollection.serverInfo.columnNames;

 		var aArr:Array = new Array();

 		for (var i:Number=0; i < values.length; i++) {

 			aArr[i] = new Object();

 			for (var aIndex:* in category) {

 				aArr[i][category[aIndex]] = values[i][aIndex];

 			}

 		}

 		var dp:DataProvider = new DataProvider(aArr);

 	return dp;

 	}

 }

}

This class allows you to take the ArrayCollection result from AMFPHP and pass it through the class to get a DataProvider. The datagrid’s dataprovider can now be set simply.

You end up getting something that looks like this!

You should be able to take this example and start making your application right away. The ArrayCollectionDP.as class can be reused in the future! Let me know if this helps or of course if you get stuck. I will be using this example on amfphp.org soon with more details and of course all the source files!

AMFPHP, ActionScript 3, Flash Platform