5 Minute Flex Data Grid Tutorial

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 (http://www.blueicestudios.com/datagrid/)

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

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig1.jpg

Next lets set up the project.

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

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig2.jpg

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.

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig3.jpg

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…

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig4.jpg

Click “New” to setup a new connection..

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig5.jpg

Give the connection a name and hit next…

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig6.jpg

The MySQL Connection info and hit next..

http://www.blueicestudios.com/wp-content/uploads/2009/07/fig7.jpg

Now just hit Finish.

From here it will create the grid.

Now, navigate to File > Export > Release Build.

Pretty straight forward from here on.

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

Thanks, nice post :)

Great post, thanks!