Configuring our Project:
Create a new Flex Project and drag-drop a DataGrid component on the stage. Don’t bother configuring the DataGrid as of now since we’ll need to add columns manually once we bind it to a data service.
Fig. 1 - New Flex Project with DataGrid component on stage
Setting-up a PHP Service:
Create a new folder under project root and name it ‘services’. Download the php service file provided with the source of this tutorial and place it in services folder.
Note: Make sure to edit the database server settings and credentials specified in CustomerService.php file.
Setting-up a Database:
If you would examine the CustomerService.php file you can reverse engineer the database schema from it. However you can also get the schema creation script from this tutorial’s source files in db folder. Fill Customers table with some dummy data.
Note: At this point verify your database connection using a simple test php file and see if data is retrieved fine outside flash builder. It will also ensure that your local web server supports php files, otherwise you’ll have to install php support.
Setting Project’s Server Technology
Before connecting to any data service, we will need to set the project’s server technology appropriately, in our case PHP. So after selecting project in Package Explorer, select:
Project > Properties
In list of project properties groups select Flex Server option. In Flex Server properties choose PHP to be the Application Server Type, fields specific to php server configuration will appear.
Fig. 2 - Configuring Server type for a Flash Builder Project
You will be required to Validate Configuration before pressing Ok button. So make sure your Web Root and Root URL settings are correct before pressing Ok button.
Connect to Data/Service:
Once Flex Server is configured, we can connect to the data service we just created. Select from menu:
Data > Connect to Data/Service…
Fig. 3 - Connect to Data Service - selecting a service type
Pressing Next button will show Configure PHP Service dialogue. Browser to the CustomerService.php file we added to our project and Flex will automatically fill the Service details.
Fig. 4 - Configuring php data service
Note: At this point Flex will install the Zend Framework for data processing. In case Zend Framework is not installed properly or Flex is unable to access it, you won’t be able to move forward with this tutorial so you would need to troubleshoot the Zend Installation.
Pressing next button will make Flex to introspect the service and present all the operations available through this service.
Fig. 5 - Service Operations listing
Pressing Finish will make this service and its operations available to UI Components of this project. You can view this service through
Window > Data/Services panel.
Bind DataGrid to Data:
Now we are ready to bind our DataGrid to service we have just registered. Right click on the DataGrid component placed on the stage and select Bind to Data option from context menu.
Fig. 6 - Bind to data properties dialogue
We need to configure a valid return type for this service’s operation. Click on Configure Return Type button.
Fig. 7 - Configure return type of data service operation
Flex will again help you with automatically suggesting a return type, Object in our case. Press Finish and then Ok to close the ‘Bind to Data’ pop-up.
You would now see the DataGrid component is reset to zero columns. So our next step would be to configure these columns.
Configuring the Columns:
Right click on the DataGrid component and select Configure Columns option from context menu. Configure Columns wizard will appear. Press Add button and add three columns having dataField and headerText properties set to same as their column names.
Tip: Use the Advanced View in Configure Columns wizard to configure these columns.
Fig. 8 - Configure Columns for a DataGrid component
Pressing ok will update the DataGrid component on the stage. Save the project and we are good to run our application Run > Run Main (Ctrl + F11).
Fig. 9 - Flex DataGrid component populated with data using a php data service
|
