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` (
NULL , 'Joe Blow', 'email@example.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.
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.
I hope this helped you with learning a nice feature of Adobe Flex.