By: Dan Orlando
This article provides a complete
demonstration of how to get up and running with Adobe Flash
Builder 4 Beta (formerly Adobe Flex Builder) and PHP. Learn
how to take advantage of the new data-centric features of
Flash Builder to increase your workflow efficiency.
Setting Up the Right Environment
When developing Flash Builder
applications that are complemented by PHP services, it's
most effective to install either the PHP Development Tools
(PDT) version of Eclipse or Zend Studio, then install the
plug-in version of Flash Builder. Additionally, Zend Server
is the ideal default server platform because of the ease of
use you gain through its integration with Flash Builder.
However, you can also use a Windows, Apache, MySQL, PHP
(WAMP); Linux, Apache, MySQL, PHP (LAMP); Mac, Apache,
MySQL, PHP (MAMP); or XAMPP environment setup, depending on
your local desktop platform. Although this article uses
MAMP, there are few differences between the various platform
configurations.
If you follow the method
recommended here, you will install the Flash Builder plug-in
into its own folder. But you must also specify the instance
of the Eclipse integrated development environment (IDE) that
you want Flash Builder plugged into, as Figures 1 and 2
show.
Click here for larger image
Figure 1
Click here for larger image
Figure 2
When you first open Eclipse, from
the Window menu, point to Open
Perspective, and then click
Other. Then, choose
Flex Development. You
should then see the Flash Builder start page, which includes
links to various resources. If you have worked with Flex
Builder before, you will also notice a couple of new tabs in
Flash Builder: Data/Services and
Network Monitor. You'll learn more about
these new tabs and their respective functionalities shortly.
Setting Up the Project
To set up a new project, from the
File menu, point to New,
and then click Flash Builder Project. You
can name your project whatever you like, but for the
application server type, select PHP from
the drop-down menu, then click Next. Your
next step is to choose the root path and URL of your local
Apache/PHP runtime. After entering these values, validate
your configuration, and then click Finish.
If Flash Builder sees that you do not already have the Zend
Framework installed, it will ask you if you want it to be
installed. This is a handy little feature that makes rapid
data communications between Flash Builder and PHP a cinch
through the Zend_Amf module, and I strongly
suggest taking advantage of it. If your project is using
Hypertext Transfer Protocol (HTTP) requests or SOAP, Flash
Builder can easily accommodate these protocols, as well.
Simply choose the respective protocol when the list of
options appears.
The first thing you may notice
when your main MXML application file is generated is that
things have changed a bit architecturally specifically with
regard to namespaces. You now have three
namespaces instead of one: fx,
mx, and s. The
s stands for Spark, which
is the new component and graphics library included in
version 4 of the Flex framework. Many of the Flex 3
Halo components have been extended significantly
for Spark. You may also notice that the Package Explorer has
been enhanced. If you've ever done any Java development in
the Eclipse IDE, you've probably seen the extensive level of
code-hinting and class introspection that is available. Most
of these features are now available for development in Flash
Builder, as well.
Generating New Services
Whenever you want to connect to a
PHP service, begin by clicking the Connect to
Data/Service link in the
Data/Services tab, as Figure 3 shows. The
default location for this tab is at the bottom of the IDE.
Click here for larger image
Figure 3
In the first window that appears,
you have the option of connecting to a PHP service, an
HTTPService, or a Web Services Description Language (WSDL)
service. These three types of services are made available,
because you chose PHP for your server type when you set up
your project. Click the PHP icon in this
window, and then click Next. The
Configure PHP Service dialog now appears,
as shown in Figure 4.
Click here for larger image
Figure 4
For this example, Flash Builder
generates the PHP stub for the service. Enter a name in the
Service Name field, and select
Generate sample PHP class as well as the
Use default location check box. Then, click
Finish.
After you finish configuring your
service, you see a new folder called
services in the Package Explorer at the
root of your project. Additionally, a new services package
should appear in the src directory.
Finally, the PHP file that Flash Builder generated
automatically opens, and the class outline appears in the
Outline window in Eclipse. Flash Builder
displays the Using Remote Services message,
shown in Figure 5, which outlines your next steps.
Click here for larger image
Figure 5
Coding the Service
Make sure that the PHP service
that was generated is currently selected in the main window.
If you are working in the full version of Flash Builder
without having installed a PHP editing plug-in, Flash
Builder opens the generated service with a different
application on your computer (most likely Adobe Dreamweaver,
if it is installed on your local machine; otherwise, it
defaults to the application that is associated with the PHP
file format).
The PHP class that was generated
for you is a stub for basic Create, Replace, Update, and
Delete (CRUD) operations that are typically part of a remote
service. Uncomment the code within the operations of the
class. You can use this code as a template for your
services, or remove the code entirely and create the code
for the operations from scratch. However, if this is your
first time testing the new data-centric features of Flash
Builder, I strongly recommend sticking with the stub code
for now. The service class used for this article was only
slightly modified: Basically, I replaced
item with user wherever it
appeared. You will also need to change the database
parameters accordingly as well as table names and fields
where they appear so that they correspond with your actual
database. The application built in this article pulls
contact information from a table called
User, so I had to modify the service stub
accordingly.
When you are finished coding the
service, you must configure the return types for each
operation. However, before you do that, this is a good time
to open the package that was added to the Package Explorer
for your project earlier. The package is named
services.UserService,
where UserService is the name that
you assigned to your service. In this
package, you will find two classes. The one that holds the
same name as your PHP service that is intended for
customization. Notice that the class extends your service's
super class. The name of the super class will have
_Super_ attached to the beginning of the
service name. Do not modify this class. You can override any
of the methods in the super class as necessary.
Configuring Return Types
Your Flash application must know
what to expect for the data type that will be sent and
returned for each method. To configure your method return
types, right-click one of the operations from the
Data/Services tab, then click
Configure Return Type.
This process can be a bit tricky
if you aren't aware of a few things. First, it is best to
configure the
getAllUsers method first.
Assuming that your service does not have any errors, you
should get a response with an object that has more objects
in the payload, provided that you inserted a few entries
into your database for testing purposes. Next, enter a name,
such as User, as shown in Figure 6.
Click here for larger image
Figure 6
This is the new process for
creating value objects. You can still code value objects the
way you did with Flex Builder, but it would be
counterintuitive to use the same methodology with Flash
Builder, considering the speedier workflow you gain by
letting Flash Builder automate this process for you. Plus,
the value objects that Flash Builder generates are more like
value objects on steroids, in that they do a whole lot more
than just wrap a bunch of values for strong data typing
between the client and server. For example, the return type
set for
getAllItems is a User
object, even though it is actually a collection of
User objects. This is because the auto-
generated result handlers are smart enough to know the
difference between a single User object that is
returned versus a collection of User objects.
In other words, you don't have to type the result to an
ArrayCollection and go through the whole
typing, binding, and object-mapping process as you would
have done with Flex Builder. When configuring the
getAllUsers and getUsers_paged
methods, you'll have to shift the paradigm that you may have
gotten used to with previous versions of Flex. In the past,
you would have declared an ArrayCollection,
typed the response data to it, and then bound your list or
data grid to the variable. There were also things like class
mapping, which made the process even more difficult.
Luckily, that's all in the past. So, the code that was generated
when your value object was created is smart enough to figure
out when it has a collection of User objects as opposed to a
single User object. Therefore, as you can see in Figure 7,
the return types for
getAllUsers,
getUser, and getUsers_paged are
all of type User.
Click here for larger image
Figure 7
When you configure the
updateUser operation, you could send the ID and
user details as a single object or two separate objects' it
really doesn't matter. The main thing to understand is that
you are not sending a User object here. The PHP
service does not care about the strongly typed
User object you have on the client side, nor
does it need to. Just send the data as an Object, as seen in
Figure 8.
Click here for larger image
Figure 8
The reasoning for sending the new
user data over as a generic Object is clear upon reviewing
the Structured Query Language (SQL) statement that was auto-
generated for the PHP service stub:
public function updateUser($userId, $user) {
$this->connect();
$sql = "UPDATE User SET last_name = '$user->last_name', first_name = '$user->first_name',
email = '$user->email', phone = '$user->phone', company = '$user->company', job_title =
'$user->job_title', person_type = '$user->person_type', lead_source = '$user->lead_source',
tags = '$user->tags' WHERE id = $userId->id";
mysqli_query($this->connection, $sql)
or die('Query failed: ' . mysqli_error($this->connection));
mysqli_close($this->connection);
}
As you can see, there is no reason
for a
User.php class that wraps all the
associated variables and maps to a corresponding Adobe
ActionScript class. The values are pulled directly from the
$user variable that is sent over as a generic
Object using the $user->value syntax.
Drag-and-Drop Data Binding
Make sure you have the Application
MXML file open and the Design view selected. Next, drag a
VDividedBox onto the stage. Then, drag a
DataGrid into it from the
Components window. Now select and drag the
getAllUsers() method from the
Data/Services tab and drop it on top of the
DataGrid. Switch to the Source view, and take a
look at the new code that was just generated for you. Now, run the application.
Hopefully, without having made any modifications, your
browser window displays something similar to Figure 9. Of
course, if you didn't bother to take the time to insert data
into your database, now might be a good time to go back and
do that; then, try running the application again.
Click here for larger image
Figure 9
Generating a Master Details Form
Next, auto-generate a
Master/Details form. With the main MXML
application file open, select the Design view again. Then,
right-click on the data grid and click Generate
Details Form. In the first window
that appears, select the form options. Make sure you select
Master control from the first drop-down
list; the Make form editable check box
should already be selected. (Clear this check box if you do
not want the details of the selected item in the
DataGrid to be editable.) Next, select the
Make a new service call to get details
check box. The service you created earlier should already be
selected. In the Operation drop-down list,
select the getUser(userId:String):User[]
operation, as seen in Figure 10. When an item is selected in
the data grid, the corresponding information will be
displayed in the form that appears below it.
Click here for larger image
Figure 10
After clicking
Next, you will see a window that looks like
Figure 11. As you can see, the check box for the
id property has been cleared so that no ID is
displayed in the form. However, you also have the option of
displaying the value of a field without making it editable
by selecting Text instead of
TextInput for the corresponding
Control type. Now, click
Finish.
Click here for larger image
Figure 11
When you switch to Code view now,
you'll notice that your application file is starting to be
somewhat lengthy. Figure 12 demonstrates what the
application looks like when an item is selected from the
DataGrid.
Click here for larger image
Figure 12
Using the Network Monitor
The Network Monitor is one of the
most prolific features of Flash Builder. To give it a spin,
from the Properties menu, click
Project. Then, select Flash Builder
Compiler in the left navigation pane of the project
Properties dialog. Select the
Enable Network Monitor check box, and then
click Finish. Next, run the application
debugger, and click the Network Monitor tab
so that it becomes the selected tab in the bottom pane of
the IDE. Now, move the browser window so that it is not
covering the Network Monitor window, and select an item from
the grid. A new service call should appear. Select the
service call in the Network Monitor window to view more
details. This is a very handy utility for troubleshooting
issues with remote services.
Conclusion
The new data-centric features alone make Flash Builder one of the most prolific advancements for rich Internet application (RIA) development. Interestingly, we hardly scratched the surface of the features and functionalities built into Flash Builders' features such as support for themes, enhancements to Cascading Style Sheets (CSS), integrated unit testing with FlexUnit, an enhanced component kit, seamless integration with the up-and-coming Flash Catalyst program, as well as significant enhancements to the profiler and debugger. With so much left to be experienced, I encourage you to continue learning how to develop RIAs with Flash Builder. I have included a list of resources to help guide your research below.
Resources
- Adobe Flash Builder 4 beta download page on Adobe Labs
- What's new in Flash Builder 4 beta by Time Buntel
- Differences between Flex 3 SDK and Flex 4 SDK beta by Joan Lafferty
- What's new in Flex 4 SDK beta by Matthew Chotin
- Building a data-centric application using Flash Catalyst beta and Flash Builder 4 beta by Andrew Shorten
- Tutorial and Demonstration Videos on Adobe Labs
- Lee Brimelow's Flash Builder 4 beta and Flash Catalyst beta video tutorial
- Adobe Flash Builder 4 beta and Flex SDK user forum
- Adobe Flash Builder 4 beta and Flex SDK documentation on Adobe LiveDocs
About the Author
Dan Orlando is a
recognized Flash Platform Architect and Consultant
specializing in the enterprise space. As an advocate for
RIA, Dan has been published in magazines and web sites such
as PHP Architect, Flash and Flex Developer
Magazine, IBM developerWorks, Amazon Web Services, and
the Adobe Developer Connection.