Hello and welcome to our community! Is this your first visit?
Register
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
    Location
    Oregon
    Posts
    687
    Thanks
    6
    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` ,
    `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.

    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)

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    Australia
    Posts
    93
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Thanks, nice post

  • #3
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,638
    Thanks
    2
    Thanked 404 Times in 396 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
    •