Jon Rose is an enterprise software consultant and Flex Practice Director at Gorilla Logic, Inc. (www.gorillalogic.com) located in Boulder, Colorado. He is an editor and contributor to InfoQ.com, an enterprise software community. He is the co-host of DrunkOnSoftware.com, a videocast for those who like booze and bits. He has worked with clients large and small in both the private sector and government. His love of solving problems drives him to build quality software. You can read his blog at: http://ectropic.com. Jon has posted 3 posts at DZone. View Full User Profile

A Deep Dive into Flash Builder 4

03.15.2010
| 68092 views |
  • submit to reddit

Flash Builder Project Setup

With a local/development PHP and MySQL servers running, you are ready to open Flash Builder and get started.

First, you will create a new Flex Project.  You do this by going to “File > New > Flex Project” in the Flash Builder navigation.  This will return a new project wizard.  In the initial screen, you will give the project a name of ‘flashbuilder’ and select the ‘Application server type’ of PHP, as seen in Figure 4.  Once you have completed the details, click “Next” to continue.

 

After clicking “Next,” Flash Builder will return a screen for configuring the PHP server (see Figure 5).  You will need to enter the Web root and Root URL for your local server configuration.  Then, click “Finish” to create the project. 

 

Layout Interface Components

Now, you are ready to layout the components for the user interface.   The user interface will be comprised of three Flex components:

  • Combo Box: This will display the team names in the drop down, allowing the user to select which team they would like to view.
  • Panel: This will hold the DataGrid Component, and allow us to display a heading label of “Players.”
  • DataGrid: This will display the list of players, including their first name, last name, and jersey number.

To begin laying out the user interface, you will need to make sure you are in the design view for the ‘flashbuilder.mxml’ source file of the application.  This is the default application class that the Flash Builder created for you when the project was created.  You simply need to drag the three components highlighted above from the Component View, shown in Figure 6, on to the design canvas.  In the default layout, the Component View will be in the lower left hand corner. 

Figure 7 shows the application after the components have been laid out in the design view of Flash Builder. I have edited the Panel title to be “Players,” and made sure to put the DataGrid component inside of the Panel. 

 

Connecting to the Data

Now that you have the user interface components laid out in Flash Builder, it is finally time for the fun part!

We can now integrate the application with the teams and players data in the MySQL database.  First, you will need to locate the “Data/Services” panel, as seen in Figure 8.  This is where we will configure our services for the application.  In the default Flash Builder layout, the panel will be located in the bottom center panel. 

 

To add services to our project, click on the “Connect to Data/Service…” link in the panel.  This will open a wizard for setting up the service.  Figure 9 is the initial screen of the wizard, select the PHP option and click “Next.”

 

After selecting the PHP option, Flash Builder displays a step for selecting the “PHP Class.”  Instead of providing an existing class, we are going to use the generation option hiding below the class name.  Select “click here to generate a sample” link in the wizard to open this option.

 

Once you have selected the generation option, a dialog will be opened for connecting to the MySQL database and generating the new PHP class.  Please enter your database credentials and submit the “Connect to Database” button.  Once you have successfully connected, the “Table” drop down will be populated with our tables (‘teams’ & ‘players’).  Right now, we want to access the list of teams in our Combo Box drop down, so select the ‘teams’ table and click “Ok.”

 

After finishing with the MySQL generation wizard, Flash Builder will return you to the default wizard for connecting to a PHP class, with everything configured for your newly created PHP class, as seen in Figure 12.  Click “Finish” to generate the client side service wrappers and continue. 

 

Now that you have successfully finished adding the Teams service to your project, you should see the new service and operations in the Data/Service panel, like in Figure 13.  

 

Now that the Teams service is setup in the Flex project, we can add real data to our application.  This part is pretty exciting, and is done the same way regardless of the type of service or how you created it.  To get the list of teams to be displayed in the Combo Box at runtime, you simply drag the “getAllTeams()” operation onto the Combo Box in the design view and the dialog in Figure 14 will be displayed.  All you need to do is configure the “Label Field” to use the “name” property and click “Ok.” Now, run the application and you will see the list of teams in the drop-down – Amazing!

 

Let’s take a minute to review what we have done.  We have used Flash Builder to create our application, which integrated Flex components with data in the MySQL database.  We have allowed Flash Builder to do all the work and have not had to write any code to this point. 

Next, we want to access player data.  So, you will need to repeat the steps we followed to create a Teams service, only this time use the players table to create the Players service.  On the generation dialog, seen in Figure 11, you will need to pay attention to the location of the PHP class, as we will be modifying it to allow us to lookup players by the selected team.

Once you have created the Players service (just like the Teams service), open the PlayersService.php source file with a text editor and add the function from Figure 15.  This function will lookup the players for a given team when provided the team id. 

public function getPlayersByTeam($teamID) {

$stmt = mysqli_prepare($this->connection, "SELECT * FROM $this->tablename where team_id=?");
$this->throwExceptionOnError();

mysqli_stmt_bind_param($stmt, 'i', $teamID);
$this->throwExceptionOnError();

mysqli_stmt_execute($stmt);
$this->throwExceptionOnError();

$rows = array();

mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);

while (mysqli_stmt_fetch($stmt)) {
$rows[] = $row;
$row = new stdClass();
mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);
}

mysqli_stmt_free_result($stmt);
mysqli_close($this->connection);

return $rows;
}

Figure 15 PHP Function for looking up players by team


AttachmentSize
Figure1.png25.48 KB
Figure2.png278.1 KB
Figure3.png268.5 KB
Figure4.png123.78 KB
Figure5.png87.18 KB
Figure6.png92.34 KB
Figure7.png22.82 KB
Figure8.png42.73 KB
Figure9.png86.41 KB
Figure10.png75.77 KB
Figure11.png116.61 KB
Figure12.png85.23 KB
Figure13.png46.92 KB
Figure14.png53.57 KB
Figure15.png60.69 KB
Figure16.png71.06 KB
Figure17.png42.95 KB
Figure18.png53.58 KB
Figure19.png52.35 KB
Figure20.png31.61 KB
Published at DZone with permission of its author, Jon Rose.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Harlow Ward replied on Mon, 2010/04/05 - 5:28pm

The one thing that seems to be missing here (and all other Zend AMF tutorials) is how to have objects within objects. I.E. Person has a foreign key to Team. So in the datagrid it would be nice to be able to reference the persons team via {person.team.name}.

 This would also be helpful for the Combobox when picking a persons team in the entry form. This way you could use 'selectedItem' as {person.team} instead of having to loop through the choices and select {person.team_id} when it matches the options.

 Its straight forward with Java, and Hibernate makes it even easier. But i've yet to see anyone do it with PHP yet  OO style.

Dave Keen replied on Sun, 2010/04/11 - 4:07am

Hey Harlow (and all),

Unlike Java and Coldfusion, Flex and PHP have had the short straw for a long time when it comes to data-centric ORM style development.

I have been working on a project called 'Flextrine 2' designed to address this once and for all - a Flex interface onto the upcoming Doctrine 2 library for PHP 5.3+; the project is still under development, but so far it looks extremely promising, and both I and folks I have chatted to about the project think it has the potential to change the face of Flex/PHP data-centric development :)

Please feel free to follow the project at http://code.google.com/p/flextrine2/  I am aiming for a release date of 1st September, to coincide with the stable release of Doctrine 2.

Regards,

Dave Keen
http://www.actionscriptdeveloper.co.uk

Peter Hirt replied on Fri, 2010/11/12 - 2:29am

first, I am learning Flex4, so bare with me. I run the standard tutorial with no problems, but now would like to apply it to my specific case. So, I specifically would like to add more combo boxes and get the results back depending of what I do select with those combo boxes. I seem to have troubles with the inserted PHP code pasted below. I obviously changed the fields to my specific case, but it seems not to work. My questions are: i) variable $teamID is free to choose or linked to somewhere? ii) where can I find documentation of what is exactly interacting with this PHP file many thanks Roestigraben public function getPlayersByTeam($teamID) { $stmt = mysqli_prepare($this->connection, "SELECT * FROM $this->tablename where team_id=?"); $this->throwExceptionOnError(); mysqli_stmt_bind_param($stmt, 'i', $teamID); $this->throwExceptionOnError(); mysqli_stmt_execute($stmt); $this->throwExceptionOnError(); $rows = array(); mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id); while (mysqli_stmt_fetch($stmt)) { $rows[] = $row; $row = new stdClass(); mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id); } mysqli_stmt_free_result($stmt); mysqli_close($this->connection); return $rows; }

Tony Zhao replied on Sat, 2012/06/09 - 3:15am

This would also be helpful for the Combobox when picking a persons team in the entry form. This way you could use 'selectedItem' as {person.team} instead of having to loop through the choices and select {person.team_id} when it matches the options. Its straight forward with Java, and Hibernate makes it even easier. But i've yet to see anyone do it with PHP yet OO style. http://www.china-casting.org

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.