Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Thanked 79 Times in 77 Posts

    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

    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` ,
    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.

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

  2. The Following 3 Users Say Thank You to seco For This Useful Post:

    avizhome (04-13-2010), Inigoesdr (04-13-2010), Nightfire (04-16-2010)

  3. #2
    New Coder
    Join Date
    Mar 2010
    Thanked 0 Times in 0 Posts
    Thanks, nice post

  4. #3
    Senior Coder Inigoesdr's Avatar
    Join Date
    Mar 2007
    Florida, USA
    Thanked 406 Times in 398 Posts
    Great post, thanks!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts