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

fig1

Next lets set up the project.

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

fig2

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.

fig3

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…

fig4

Click “New” to setup a new connection..

fig5

Give the connection a name and hit next…

fig6

The MySQL Connection info and hit next..

fig7

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.

468 ad

13 Responses to “5 Minute Flex Data Grid”

  1. fernando says:
    February 23, 2011 at 3:38 pm

    AT LAST
    I looked all over internet, and I’m doing tests with amfphp.

    And I have a very serious problem.

    Your example is the only one I found online, which respects the Latin characters such as:

    á
    “ñ”
    etc …

    How is it possible?
    What have you done?

    Please wait for your mail, I have 3 days looking for a solution
    thanks

    reply
  2. Will says:
    February 10, 2011 at 2:25 pm

    How do you add in the Search function and the ADD USER function?

    Thanks!!!

    reply
  3. architektura says:
    October 20, 2010 at 7:46 am

    Nice, very nice, just downloading flex sdk…

    reply
  4. Muhammad says:
    July 30, 2010 at 2:17 am

    Very straightforward and neat. I never knew flex builder had this feature.

    Thanks a lot for the well-written tutorial.

    reply
  5. justin says:
    June 14, 2010 at 5:23 am

    i tried it out, i get error 1088
    can someone help me out?

    reply
  6. Bhaskar says:
    March 24, 2010 at 1:17 am

    Nice Example. Exactly needed new bees learning Flex . Please come up with SOURCE CODE

    reply
  7. venkatesan says:
    January 23, 2010 at 2:54 am

    Hi,

    How to delete the record the data in the datagrid at the same time in database using flex and php

    reply
  8. venkatesan says:
    January 23, 2010 at 12:57 am

    Sir,I am started to learn flex if you guide me it will be very helpful for me.

    Thanks and Regards,
    venkat.R

    reply
  9. venkatesan says:
    January 23, 2010 at 12:55 am

    I am very much interest learning Flex with PHP.In the above explanation i have very much interest to learn.Please guide me and to learn a good quality flex developer.Please help me.

    If you give me the code it is very much useful for me.

    Thanks and Regards,
    venkatesan.R

    reply

Leave a Reply