flash builder 4 and php
TRANSCRIPT
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 1/28
Flash Builder 4 and PHP ± Part 1: Data-centric
development
New features in Flash Builder 4 makes it easier than ever for PHP developers to connect a Flex
application to their PHP servers on the back end. Flex is a great companion to a PHP application. By
using Flex and the Flash Platform you can incorporate video, add rich interactive data visualizations
such as charts, and take advantage of real-time features that aren't available with HTML.
In Part 1 of this three-part series of tutorials, I'm going to show you how to consume a basic XML
document that is generated by PHP and walk you through some of the new data-centric development
features that are available in Flash Builder 4.
In Part 2, I'll show you how Flash Builder 4 makes it easier to use Flash Remoting to connect your
Flex and PHP application.
In Part 3, I will provide an overview of some of the advanced data features in Flash Builder 4 for implicit paging and data management, which you can use to make your applications more intuitive
and more robust.
Flash Builder 4 is Flex Builder 3 with new functionality
If you've been using the Flex framework and PHP for a while you may be confused about this new
tool with the same version number as the newest version of Flex. While working on the next
generation of Flex Builder, Adobe realized that it was being used for a lot more than just
applications with the Flex framework. For example, developers who were creating applications using
only ActionScript 3.0 used Flex Builder to edit their ActionScript code.
Adobe also introduced Flash Catalyst, which allows designers to create interactive content from aPhotoshop or Illustrator document without writing code. Behind the scenes Flash Catalyst generates
Flex code and the projects it creates can be easily opened in the next generation of Flex Builder.
In order to bring the tools under the same brand and acknowledge that not everyone who used Flex
builder was building a Flex application, Adobe chose to rename Flex Builder to Flash Builder for the
next version. It has all the features of Flex Builder plus all of the new ones added in this version±just
with a different name.
Setting up your environment
To follow the steps in this tutorial, you¶ll need Flash Builder 4 installed. You¶ll also need access to a
web server with PHP support and an SQL database. If you don¶t already have such an environmentconfigured, you¶ll likely want to set up Apache, MySQL, and PHP together. See Setting up a PHP
development environment for Dreamweaver or Building your first dynamic website ± Part 1: Setting
up your site and database connection for help in setting up XAMPP on Windows or MAMP on Mac
OS X. For Linux, see Setting up your PHP server environment using Linux, Apache, MySQL, and
PHP. While these articles cover Dreamweaver, you do not need Dreamweaver for the purposes of
this tutorial, just the Apache, MySQL, and PHP technology stack.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 2/28
Unpacking the sample files
After downloading and unzipping the sample files for this article, place the create_xml.php file in
your web server¶s root folder (typically htdocs for Apache). The file uses ³root´ for both the
username and password, so you may need to edit the file if you are using a different username or
password for MySQL.
You can use the included php_demos.sql file to create the database and table used in this tutorial. If
you¶re using MySQL, follow these steps:
1. From the command line type mysql -u root -p and enter your password when prompted.
2. To build the database, at the mysql prompt, type SOURCE php_demos.sql; and press Enter.
3. Type quit and press Enter .
Wor king with PHP Devel o per s and Zend Studi o
Flash Builder 4 supports a seamless workflow with Zend Studio. If you're using the plug-in version
of Zend Studio you can just install it right into the standalone version of Flash Builder 4 and have
your Flex development and PHP development side by side in the same tool.
Your first Flex/PHP application
I'm going to walk you through how to get started with Flex and PHP by bringing in some XML from
a PHP application using some of the data centric development features of Flash Builder 4.
Set up the Flex proj ect
Follow these steps to create a new Flex project:
1. In Flash Builder 4, choose File > New > Flex Project
2. Type a name for the project; I used MyFirstFlexPHPApplication.
When you start a new project you give it a name, specify if you want to create a browser or desktop
application, and select the version of the Flex SDK you want to use. You also have the option to
select a server type. If you're just consuming an XML document or any other REST API, you don't
need to select a server. In Part 2 of this series you'll select PHP, but for this project, just keep
None/Other selected.
3. Leave the other settings as they are (see Figure 1) and click Next.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 3/28
Figure 1. Creating a new Flex project
The next screen allows you to customize the output location of your project, which can be helpful if
you're running a local server and you want to test your Flex application in a web server directory
without copying the Flex source code files there.
4. Click Next.
The final screen allows you to add libraries and link projects, which you don't need for this project.
5.
Click Finish.
E xamine the PHP code
One of the most straightforward ways to bring data into a Flex application is with XML. The sample
files include create_xml.php, which accesses the database and creates an XML formatted response
based on the data. The table I'm using contains data about the National Forest system (see Figure 2).
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 4/28
Figure 2. The sample database table
The PHP code uses PHP5's DOM functionality to build and then render the query data in XML
format.
cr eate_xml.php
<?php
$username = "root";
$password = "root";
?>
<?php
$connection = mysql_connect("localhost",$username, $password)
or die ("Unable to connect to database.");
$db = mysql_select_db("php_demos",$connection)
or die ("Unable to select database.");
$result = mysql_query("select * fromnational_forests",$connection)
or die ("Unable to complete query.");
$doc = new DomDocument('1.0');
$root = $doc->createElement('national_forests');
$root = $doc->appendChild($root);
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 5/28
while($row = mysql_fetch_assoc( $result ) )
{
$forest = $doc->createElement('forest');
$forest = $root->appendChild($forest);
$id = $doc->createAttribute('id');
$id = $forest->appendChild($id);
$id_value = $doc->createTextNode($row['id']);
$id_value = $id->appendChild($id_value);
foreach( $row as $fieldname => $fieldvalue)
{
if($fieldname != "id")
{
$child = $doc->createElement($fieldname);
$child = $forest->appendChild($child);
$value = $doc->createTextNode($fieldvalue);
$value = $child->appendChild($value);
}
}
}
$xml_data = $doc->saveXML();
echo $xml_data;
?>
The code produces an XML document that looks something like this:
<national_forest>
<forest id="16">
<state>WY</state>
<area>3400000</area>
<established>1908-07-01</established>
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 6/28
<closest_city>Big Piney, WY</closest_city>
<name>Bridger-Teton National Forest</name>
</forest>
</national_forest>
Data-centric development
If you're familiar with Flex 3 and you¶ve worked with XML, then you may know that you'd be able
to use an HTTPService class to take the data and bind it to a DataGrid component pretty easily. That
approach, however, creates some unfortunate dependencies. If your XML data model has to change
then you'll need to go through your entire user interface and change it to reflect the new XML data
model.
With data-centric development, in contrast, it's easy to keep the user interface completely separate
from the data model. The data-centric development tools use higher level objects and collections that
are then bound to the user interface. If your model changes, you only need to change those objects² the UI elements that use them will automatically be updated.
Follow the steps to see how it works:
1. In Flash Builder 4 select the Data/Services panel near the bottom of the screen or choose Window >
Data/Services.
2. Click Connect to Data/Service to start the Data Services wizard, which supports multiple service
types.
3. Select HTTP (see Figure 3) and click Next.
I will talk cover the PHP option in Part 2. You'll also see an XML option, which provides an easy,
quick way to connect XML data. The XML option is a subset of the HTTP option. Selecting HTTPlets you connect to any HTTP REST service on the web whether it's using JSON, XML, or some
other format. It provides a good overview of how the new data-centric development wizards work,
so it¶s the best choice for an introductory tutorial.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 7/28
Figure 3. Selecting HTTP as the service type
4. After making sure the create_xml.php file, which generates the XML, is in a web-accessible location
(either on a local web server or somewhere on the Internet), type the URL of that file in the URL
column under Operations.
5. Rename the operation to getForests instead of Operation1 , and leave the method as GET.
If you were dealing with a service that required parameters you could use the Parameters options to
set them. This is helpful if you are dealing with more complex APIs.
6. For the Service Name, type ForestsService; a default package name is automatically supplied for
you (see Figure 4).
7. Click Finish.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 8/28
Figure 4. Configuring the HTTP Service
Flash Builder 4 will generate all of the ActionScript code you need to connect to the server and grab
the data. Using Flash Builder 4 you can take it one step further and define the data type that your
Flex application will use to represent the data. By specifying the data types you will define the data
model in one part of your application and make it independent from the user interface you¶re about
to build.
To define a data type, follow these steps:
1. In the Data/Services panel, right-click the getForests() method and select Configure Return
Type.
2. In the Configure Return Type dialog box, you can specify whether you want to use an existing data
type or call the service and define the data type with live data. Select Auto-detect The Return Type
From Sample Data (see Figure 5) and click Next.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 9/28
Figure 5. Configuring the return type
You have three options for auto-detecting the return type in Flash Builder 4. You can provide
specific parameters to a service and call it, enter a complete URL with the parameters added on, or
enter a sample response to define the data set.
3. For this basic example there are no parameters so you can just leave the first option selected (see
Figure 6) and click Next.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 10/28
Figure 6. Choosing how to auto-detect the return type
After Flash Builder 4 calls the service it will inspect the XML result and try to figure out what the
properties are. You can use select a root to define exactly which part of the XML you want to use as
the data type. You can also go through and specify the types for the individual properties.
4. In this case, select forest as the root so you get back an array of forests.
5. Next change the properties to their correct data types. Specifically, change the id type
to int,area to Number, and established to Date. (see Figure 7).
6.
When you're done, click Finish to generate the code for the data type definition.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 11/28
Figure 7. Selecting the root and specifying property types
Building the user interface
Now you're ready to start building the application¶s user interface. With the data-centric
development wizards you have created a data model that is easily adjustable if your XML response
changes. No UI controls are dependent on it right now and the ones you're about to generate are
going to use the model code you created to help them define the UI instead of being based directly
on the XML data.
Display the data
To start creating the UI:
1. Switch to Design view.
2. Drag a DataGrid from the Components panel to the main area of the screen.
3. Drag the getForests() operation from the Data/Services panel to your DataGrid.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 12/28
4. You'll be presented with a dialog box where you can define the service to use (see Figure 8). You
can either create a new service or use an existing one. In this case, you've already defined the
ForestsService and the operation so just click OK.
Figure 8. Selecting new service call
Update the data in a f or m
Now you've generated the code to call that XML page and the DataGrid has changed to represent thedata from your model. The last step is to create an option to modify the data. Flash Builder 4 lets you
quickly create a master-detail form to do just that.
1. Right-click the DataGrid and select Generate Details Form.
2. In the Generate Form dialog box, you can define which service calls to use, what kind of form to
generate, and whether or not to make it editable. Since you've already defined the service call and
the return type, simply accept the defaults and click Finish.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 13/28
Figure 9. Generating the master -detail form
3. Click the master-detail form that Flash Builder 4 created and drag it below the DataGrid (see Figure
10).
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 14/28
Figure 10. The DataGrid and master -detail form in Flash Builder 4
4. Choose File > Save to save your changes.
5. Choose Run > Run MyFirstFlexPHPApplication to run the application.
You'll see the XML data load and populate the DataGrid. Any data you select in the DataGrid will
appear in the form below and you can even make changes to it by editing the data in the form and
clicking Submit. That won't change the data in your database (more on that in Part 3) but it willchange it within your Flex application. With the data-centric development features in Flash Builder 4
any UI element that depends on that data will be updated because you're changing the underlying
model.
Where to go from here
Part 1 focused on Flash Builder 4 data-centric development features. In Part 2 I'll walk you through
using a Zend AMF connection, and in Part 3 you¶ll use that connection to create a CRUD (Create,
Read, Update, and Delete) application so you can modify the data in the database from a Flex
application.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 15/28
Flash Builder 4 and PHP ± Part 2: Zend AMF
and Flash Remoting
In Part 1 of this series I covered some of the new data-centric development features in Flash Builder
4. I showed how Flash Builder 4 can help you bring any XML document or other HTTP REST
service into your Flex application. In this article I'll show you how Flash Builder 4 makes it easier to
use Flash Remoting to connect your Flex and PHP application.
In Part 3, I will provide an overview of some of the advanced data features in Flash Builder 4 for
implicit paging and data management, which you can use to make your applications more intuitive
and more robust.
What is Flash Remoting?
When you¶re using XML to send data to your client applications, much of the data you¶retransferring is not absolutely necessary. Think of all of the extra characters that are in an XML
document. Think of how many times you have to send the attributes and nodes, as well as both the
beginning tags and the end tags. XML is a great format but there is a great deal of overhead when
you think of raw size.
Acti on Message F or mat
Action Message Format (AMF) works over HTTP like XML but instead of sending lots of extra
information, AMF essentially strips out the extra characters to a bare minimum, or serializes it, into
a binary format that uses much less bandwidth and space than XML does for the same data. This
becomes very helpful when you're sending large sets of data. Instead of sending multiple redundant
tags in XML, you're sending the smaller, serialized AMF records. Another benefit of AMF is that it's
a native data type for Flash Player. As a result, Flash Player doesn't have to parse the results to pull
out the information; it's available to Flash Player as native ActionScript objects as soon as it is
received from the server.
Flash Remoting uses AMF to expose objects and web services on an application server as if they
were local ActionScript objects.The only catch is that to use AMF you have to be working with PHP
objects. The AMF gateway helps translate those PHP objects into ActionScript objects in Flash
Player. As a result you can create your own typed objects in PHP and work with those exact custom-
typed objects in ActionScript.
Flash Remoting and the Zend F r amewor k
Recently Adobe partnered with Zend to provide support for Flash Remoting with AMF in the Zend
Framework. There are other projects out there, including AMFPHP for other PHP frameworks, but
Zend AMF has the most up-to-date support for Flash Remoting. The Zend Framework is a very
robust PHP framework that can be used for some very complex projects. For some PHP developers
who just want to connect PHP with Flex it may seem like a lot to chew off. You don't have to use the
entire Zend Framework or change the structure of your project to use Zend AMF. Zend AMF relies
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 16/28
on a small but powerful subset of the Zend Framework that can be easily integrated into any PHP
project.
Your first Flash Remoting PHP application
Follow these steps to start creating your Flash Remoting PHP application:
1. Choose File > New > Flex Project.
2. TypeMyFirstZendAMFApplication as the Project Name.
3. Instead of selecting None/Other as you did in Part 1, select PHP as the Application Server Type.
4. Click Next.
Since you are targeting a specific language now, you need to tell Flash Builder 4 a bit about the
server.
5. Select the web root of a web server with PHP installed and then provide the root URL (see Figure 1).
Leave the default Output folder and click Finish.
Figure 1. Configuring the PHP server
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 17/28
T he PHP code
In the sample files for this tutorial, you¶ll find ForestService.php and NationalForest.php.
The ForestService.php file contains all the code for a PHP service that implements the CRUD
operations you'll need for Part 3 in this series.
The NationalForest.php code, shown below, is the PHP object type, which is based on the database
described in Part 1.
Place both of these files in the web root of your PHP server.
NationalForest.php
<?php class NationalForest
{
public $id;
public $state;
public $area;
public $established;
public $closest_city;
public $name;
public function __construct()
{
$this ->id = 0;
$this ->state = "";
$this ->area = 0;
$this ->established = date("c");
$this ->closest_city = "";
$this ->name = "";
}
}
?>
C onnect t o the PHP ser vice
Follow these steps to connect to the service:
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 18/28
1. In the Data/Services panel, click Connect to Data/Service and then select the PHP option and click
Next.
Note: If you don¶t have an existing PHP class, you can use the data-centric development wizards to
generate an entire PHP class structure based on your database.
2. In this case you already have the PHP class, so simply browse to ForestService.php (see Figure 2).
3. Click Next.
Figure 2. Specifying the location of the PHP class file
Flash Builder 4 will first check to see if the Zend Framework is installed. If it isn't, you will be prompted to install it so you can use Zend AMF. Note that you won't have to change your PHP file
at all. Flash Builder 4 puts the Zend Framework files in the correct place and adds a gateway.php file
to the bin-debug folder of the project. If you want to see how Zend AMF and the Zend Framework
fit together, that's where you'll find the code that facilitates the connection between your PHP code
and the Flex application using Flash Remoting.
After Flash Builder 4 introspects the PHP file, it shows you the methods that the code includes.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 19/28
4. Click Finish. Flash Builder 4 will generate the code to connect to the PHP service.
At this point you can configure the data types, create some UI components, and bind the service
operations to them. The workflow is exactly the same as in Part 1.
Where to go from here
In Part 2, you saw how to connect to a PHP service using Flash Remoting. In Part 3, you¶ll build on
these steps to create an application that allows the user to update the database. Part 3 also covers
some of the more advanced data features in Flash Builder 4 and how you can use them to make your
applications more responsive and more intelligent.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 20/28
Flash Builder 4 and PHP ± Part 3: Implicit
paging and data management
Part 1 of this series covered the basics working with data using the new data-centric development
features of Flash Builder 4. Part 2 took it a step further by introducing Flash Remoting and Zend
AMF to exchange data with a PHP back end. In this article I will provide an overview of some of the
advanced data features in Flash Builder 4 for implicit paging and data management, which you can
use to make your applications more intuitive and more robust.
Implicit paging
Think about an application that will be dealing with thousands of database records. How should that
data appear to the user? Does the user need to be able to see every row? Could a DataGrid fit
thousands of rows? Does it make sense to send thousands of rows at a time to your application fromthe server? Implicit paging can help your application handle these issues.
With implicit paging, a Flex application requests only the rows from the server that the user is going
to see. As the user scrolls down a DataGrid, for example, Flex automatically figures out which
records are visible and requests those from the server. To the user, it appears that all of the data is
already in the application. Your application, though, is only requesting exactly what the user sees.
Looking through the f or ests
Take a look at the methods from the PHP ForestService class you used in Part 2. You'll see that
some of the methods that correspond to basic CRUD (create, read, update, delete) operations. You'll
also notice a couple of extra methods, including getForestsPaged() andcount() .
ThegetForestsPaged() method takes two parameters that help request the correct
records:startIndex and numItems . That method allows you to specify a starting point and a
specific number of records to bring back. When you attach this method to a Flex DataGrid, it will
automatically be called with the correct parameters based on how the user scrolls through the data.
E nabling implicit paging
Starting with where you left on in Part 2, follow these steps to enable implicit paging:
1. Choose Window > Data/Services to display the Data/Services panel.
2. In the Data/Services panel, right-click the getForestsPaged() method and select Configure
Input Types.3. Select int as the type for both startIndex and numItems and click OK.
If the return type for getForestsPaged() is Object, you¶ll need to configure the return type
as well.
4. Right-click the getForestsPaged() method again and select Configure Return Type.
5. Follow the procedure for auto-detecting the return type as outlined in Part 1. This time you¶ll need to
supply parameters for the call; you can use 1 and 2 for startIndex andnumItems ,
respectively.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 21/28
Now you¶re ready to enable implicit paging.
6. Right-click the getForestsPaged() method and select Enable Paging.
7. Select id as the property that uniquely identifies this data type.
8. Click Next.
9. Select count() as the Count Operation; this function provides the application with the total
number of records.
10. Set the Page Size to 5 and click Finish (see Figure 1).
Figure 1. Enabling paging
C onnecting t o a DataG r id
You can now bind the getForestsPaged() operation to a user interface element.
1. Switch to Design view.
2. Drag a DataGrid from the Components panel to the main area of the screen.
3. Drag the getForestsPaged() operation from the Data/Services panel to your DataGrid.
4. In the Bind To Data dialog box, click OK to generate a new service call.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 22/28
5. Choose File > Save to save your project changes.
6. Choose Run > Run MyFirstZendAMFApplication to run the application.
When you run your application and scroll through the data, your server will send only the rows that
you're currently on. As a result your application is much more responsive because it is not dealing
with (potentially) thousands of rows. Another bonus is that this works with any of the data-centric
development service types, including HTTPService.
Creating a better master-detail form
Now that you¶ve create a paged DataGrid, the next step is to let users modify the data. Just as you
did in Part 1, you can create a master-detail form to enable a user to display and update the data:
1. Right-click the DataGrid and click Generate Details Form.
2. In the Generate Form dialog box, keep the defaults and click Finish (see Figure 2).
Figure 2. Generating the master -detail form
As before, when you run the application your DataGrid will automatically fill with data, and as you
scroll down it will grab records from the server in increments that you set on
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 23/28
thegetForestsPaged() operation. Now, when you click on a row, that record¶s data will fill the
form.
When you change data in the form and click Submit it will change in the DataGrid, but no calls are
made to the server, so the database remains unmodified. For that you'll need to dive into some code.
Up to now the code has all been generated by Flash Builder 4. In this case you're going to write a bitto save changes that are made in the DataGrid to the server.
1. In Design view, drag a button next to the master-detail form.
2. Select the button in Design view so you can use the Properties panel to make changes.
3. For the button¶s id, type btn_save.
4. For its label, type Save.
5. Click the lightning bolt next to On Click and select Generate Service Call (see Figure 3).
6. In the Generate Service Call dialog box, select updateForest() as the operation to call when the
button is clicked. Click OK.
Figure 3. Selecting Generate Service Call
7. When Flash Builder 4s witches to Code view, edit the event handler so that it makes the following
call:
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 24/28
updateForestResult.token =
forestService.updateForest(nationalForest);
8. Save the project.
For the call to updateForest() in the event handler for the button, you need to provide a
variable that represents the object to be updated. The form and the DataGrid are using a powerful
Flex feature called data binding. There is a central object that represents the data in the form. In thisapplication the code for that object is:
<valueObjects:NationalForest fx:id="nationalForest" />
When an item is selected in the DataGrid, it updates this object and the form is bound to the object.
So all the save function has to do is send that object to the server, because it represents the updated
values in the form. The code below shows the event handlers and the service/object code:
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function
dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getForestsPagedResult.token =
forestService.getForestsPaged();
}
protected function button_clickHandler(event:MouseEvent):void
{
nationalForest.id = parseInt(idTextInput.text);
nationalForest.area = parseFloat(areaTextInput.text);
nationalForest.name = nameTextInput.text;
nationalForest.closest_city = closest_cityTextInput.text;
nationalForest.state = stateTextInput.text;
nationalForest.established =
establishedDateField.selectedDate;
}
protected function btn_save_clickHandler(event:MouseEvent):void
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 25/28
{
updateForestResult.token =
forestService.updateForest(nationalForest);
}
]]]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getForestsPagedResult"/>
<forestservice:ForestService id="forestService"
fault="Alert.show(event.fault.faultString + '\n'
+ event.fault.faultDetail)"
showBusyCursor="true"/>
<valueObjects:NationalForest fx:id="nationalForest"/>
<s:CallResponder id="updateForestResult"/>
<!-- Place non-visual elements (e.g., services, value objects) here
-->
</fx:Declarations>
Now your application can retrieve paged records, modify them locally, and send them to the server
when you make changes. This is a good introduction to data management. When the user edits a
form field to change a record, it is changed in the DataGrid, but it is not sent to the server. The only
time a record on the server will be changed is when the user clicks the Save button. It would be
helpful if the user could queue up several changes and then either send them all to the server when
finished or revert back to the original data without ever making changes on the server. That is where
data management comes in.
Introducing data management
There are many situations in which a user may want to manipulate the data before actually sending it
to the server. For example, the user may be offline or they may simply want to test some ideas out
with different data sets. This is where data management can help. Flash Builder 4 makes it easy toadd client-side data management to a Flex application. You can enable your users to make changes
to data within the Flex application and then submit those changes in a batch or roll back changes to
the data from the server.
This can also be an advantage in terms of reducing network traffic. When the user has to make a
request to the server and receive a response each time they want to change the data that can add up to
heavy network traffic. Data management makes it possible to make multiple changes in one batch.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 26/28
It can also take a lot of code to manage multiple objects. Not only do you have to write the code for
the CRUD methods for each object, you also have to write the code that handles the operations.
Think about the code to deal with the results and faults with each operation. The data management
features in Flash Builder 4 simplify much of this. Instead of thinking about handlers, the UI
components bind to the objects themselves and the operations map to specific tasks for those objects.
Follow these steps to enable data management for this application:
1. As a preliminary step, you need to configure the input type for deleteForest() operation.
2. Right-click deleteForest() in the Data/Services panel and select Configure Input Types.
3. Select int as the type for the id parameter and click OK.
4. In the Data/Services panel, right-click the getForestsPaged() operation and select Enable
Data Management.
5. In the Data Management dialog box, select id as the identity property and click Next.
6. You¶ll now to need to map the operations of the service to the typical CRUD operations. It should be
fairly obvious which operations map to each item in the list (see Figure 4).
7. Click Finish.
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 27/28
Figure 4. Mapping data management operations
One handy feature of the Flex DataGrid is the ability to edit data directly in the grid. Combining this
feature and data management, you enable the user to edit data right in the DataGrid and then send all
the record changes at once.
1. In Design view, select the DataGrid. Then, in the Properties panel, set its Editable propertytotrue.
2. Next, switch to Code view, and edit the event handler for the Save button. Replace the existing call
to
forestService.updateForest(nationalForest) with a call
to forestService.commit() .
The commit() method was introduced when you enabled data management; it lets the user update
all of the records that have changed.
The next step is to let the user revert back and undo any changes that they've made. With data
management this can be accomplished without any trips to the server. The application keeps track of
all the changes and can go back to the original data set when needed.
3. To create a revert button, drag another button to Design view, set its id to btn_revert, and set
its label to Revert.
4. Click the lightning bolt next to On Click and select Generate Event Handler.
5. When Flash Builder 4 switches to Code view, insert a call
toforestService.revertChanges(); in the event handler.
6. Save your project.
The complete code for the Save and Revert button event handlers is shown below:
protected function btn_save_clickHandler(event:MouseEvent):void
{
forestService.commit();
}
protected function btn_revert_clickHandler(event:MouseEvent):void
{
forestService.revertChanges();
}
Where to go from here
Now you have an application that provides more responsiveness with implicit paging as well as a
more robust way to handle data with data management. These are two of the most powerful data-
centric development features of Flash Builder 4. I encourage you to explore some of the code that
Flash Builder 4 generated and examine some of the methods that were created as part of enabling
8/8/2019 Flash Builder 4 and PHP
http://slidepdf.com/reader/full/flash-builder-4-and-php 28/28