5 Minute Flex Data Grid

So you want a quick solution for a data grid with inline edit, add, delete, search and sorting? I’ve got just the answer for you. …..Adobe Flex.

Finished Data Grid: Demo

So lets start, The data used for the grid will be pulled from a MySQL database.

If you don’t have one ready, use this to get an idea.

CREATE DATABASE `flex_grid` ;

CREATE TABLE `flex_grid`.`grid_data` (
`user_id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`user_name` VARCHAR( 22 ) NOT NULL ,
`user_email` VARCHAR( 60 ) NOT NULL ,
`user_phone` VARCHAR( 20 ) NOT NULL ,
`user_mobile` VARCHAR( 20 ) NOT NULL ,
PRIMARY KEY ( `user_id` )
) ENGINE = InnoDB;

INSERT INTO `flex_grid`.`grid_data` (
`user_id` ,
`user_name` ,
`user_email` ,
`user_phone` ,
`user_mobile`
)
VALUES (
NULL , ''Joe Blow'', ''joe@blow.com'', ''123-456-7890'', ''321-654-0987''
);

Ok, once you get this running or if you have your own lets start.

Step 1: Creating the Flex Project

Open up Adobe Flex if you don’t already have it open…… Got it open? Ok good.

Now navigate to File > New > Flex Project

Next lets set up the project.

Create a project name and choose PHP from the dropdown list.

Hit Next,

Now create a folder where you want the project to be added as well as a URL to the project and click Validate Configuration.

Hit Next, the project will be created. Then simple hit Finish.

Step2: Create Application From Database.

You should now have a project with a blank blue canvas.

Navigate to Data > Create Application from Database…

Click “New” to setup a new connection..

Give the connection a name and hit next…

The MySQL Connection info and hit next..

Now just hit Finish.

From here it will create the grid.

Now, navigate to File > Export > Release Build.

Pretty straight forward from here on.

Finished Data Grid: Demo

I hope this helped you with learning a nice feature of Adobe Flex.