In this tutorial, you are going to
create
a Flex and PHP mobile application that retrieves, displays, and modifies
database records (see Figure 1). A Flex application does not connect directly
to a remote database. Instead, you
connect
it to a data service written in PHP. You will build the front-end
Flex mobile application,
the
database and a
PHP class,
which is the server-side code used to manipulate database records. You
will also
run
a PHPUnit Test to run and test the methods in your PHP Service to
ensure they work properly.
In this module, you are going to build a Flex mobile application that
retrieves data from a database and displays it. A list of employees will
be displayed in one application view and employee details in another.
First, you build the user interface, and then
test
the application using a desktop emulator.
Figure 1: The completed application.
Prerequisites
- Install Flash Builder 4.5 for PHP
- For more information see the Flash Builder 4.5 for PHP
Installation Guide.
- Zend Server
5.x or above, or a compatible PHP web application server.
You will need a PHP application server to debug your application. Go
to http://www.zend.com/en/downloads/ to downlaod
Zend Server 5.x, the Zend PHP application server. For more information
see the Zend
Server Installation Guide.
The Zend Server
Installer includes optional components that can be downloaded as a
part of the installation process.
The two components you will need for this tutorial are:
Note:
Make sure to save the username and password for your
Zend Server. If you
installed the optional components MySQL and phpMyAdmin, the credentials
are by default “root” as the username with no password.
- Download the Building_A_PHP_App.zip file
and put the files somewhere accessible. These are all the resources
you will need to complete this tutorial.
Step
1: Create a MySQL Databse Using phpMyAdmin
Important Note:
If you already completed Build
a Web (PHP) Application, you do not have to repeat this step. The
database you created in that tutorial is identical to the database you
will be creating here.
phpMyAdmin is a component that comes bundled with Zend Server
in order to handle the administration of your MySQL databases. For more
information see
Working with phpMyAdmin to Manage
MySQL in the
Zend Server
online documentation. Creating a database in MySQL is necessary in
order to debug your Flex/PHP application. The PHP code in your project
will use the database to access the information when needed, as defined
by the code.
|
|
|
- You will need the test_db.sql file located in the Database
folder of the Building_A_PHP_App.zip
file.
- Open your Zend Server UI by entering “http://localhost:10081”
into a browser, and enter your username and password.
If this is your first time opening Zend Server see Getting Started with Zend Server.
- Go to Monitor | Dashboard
and in the Tasks area click Open
phpMyAdmin.
Figure 2: Open phpMyAdmin via Zend Server's
Dashboard tab
- phpMyAdmin opens in a new browser.
- Enter the username “root” and leave the password empty
(as defined when setting up your phpMyAdmin during Zend Server
installation) and click Go.
Figure 3: Import tab in phpMyAdmin GUI
- Go to the Import tab, browse to the test_db.sql file
and click Go.
Figure 4: Import tab
- The database has been created, and is already
located on your machine.
|
To
see the tables located in your database, select the database from
the left menu of the phpMyAdmin UI and go to the Structure tab.
|
Step 2:
Create a Flex Mobile and PHP Project
In Flash Builder 4.5 for PHP,
use the New Flex Mobile and PHP Project wizard to create a PHP project
named PHPMobileService and a Flex project named MobileGettingStarted.
Store the project files locally (see Figure 6) and use the default Mobile
Settings (see Figure 5).
|
|
|
- In Flash Builder 4.5 for PHP
select File | New | Flex Mobile and PHP Project
to create a new Flex Mobile and PHP project.
Figure 5: Create PHP Project dialog
- Call the PHP project PHPMobileService and be sure to
set the appropriate web root and root URL for a local application
server, and validate the configuration (see figure 5).
Example server settings:
- Web Root: /usr/local/zend/apache2/htdocs
- Root URL: http://localhost
- Output folder: bin-debug (see figure 6).
- Click Next and
name your Flex project MobileGettingStarted. Leave all other
settings as the default.
The compiled Flex application location, the output folder,
is the bin-debug folder of your Flex project
Figure 6: Create Flex Project dialog
- Click Next and select a View-Based Application with
an initial view title of HomeView and specify application
settings to reorient and scale automatically for different
screen densities with an application DPI of 160 dpi (see Figure
7).
Figure 7: Specify mobile settings.
- Locate and open the MobileGettingStarted-app.xml file that
was created and change the id to com.adobe.samples.MobileGettingStarted
(see Figure 8). The application ID is used by the AIR runtime
and the operating system to identify the application. In order
to guarantee a unique application ID, a common naming convention
is to use reverse domain name notation as used here. You will
modify additional attributes in this file in a later tutorial.
Figure 8: Assign a unique application
ID.
What You Created
Flex
When you create a new Flex Mobile project, Flash Builder 4.5 for PHP
creates three files: two MXML files and one XML file (see Figure
9). You create Flex applications using two languages: ActionScript
and MXML. Typically, you use MXML and Flex components to lay out
application interfaces and ActionScript to program application
logic. MXML tags and ActionScript code can reference each other,
similar to HTML tags and JavaScript code. When you compile an
application, the MXML is parsed and converted to ActionScript
in memory, and then the ActionScript is compiled into bytecode.
The result, a SWF file, is rendered by Flash Player for web applications
and the Adobe AIR runtime for mobile and desktop applications.
Flex mobile applications require the Adobe AIR 2.5 runtime which
is available in the Android Marketplace.
Figure 9:View the MobileTestDrive project
files in the Package Explorer view.
MobileGettingStarted.mxml is the main application file. The
first line of code is the XML declaration for the parser. The
next line is the MobileApplication tag, which is the root container
for the Flex mobile application. It has a firstView attribute
set to views.MobileGettingStartedHomeView (the second MXML file
automatically generated). This is the view that displays on the
device when you launch the application. Unlike desktop or web
applications built in Flex, you typically do not put much content
in the application container. For mobile applications, most content
is placed in individual views.
The third file created, MobileGettingStarted-app.xml, is the
application descriptor file that is used by the AIR runtime when
installing and launching the application. It includes info about
the application (including its name, id, associated icons, what
the initial window should look like and more).
PHP
When you create a PHP project Flash Builder 4.5 for PHP
creates a container where you can create and manage all your PHP
resources for your Flex Mobile/PHP application. Your PHP project
is created with Zend Framework already built in, along with a
services, public and library folder.
Your services folder is where you will create and manage all
the PHP Services you will use in your application. A PHP Service
is a PHP class containing PHP methods. The PHP methods you define
in your PHP Service are used as operations for the Flex side of
your application.
The library folder will contain the business logic of your application.
The public folder holds all the public resources of your application,
which are all the resources that will be visible to the client.
Also included in the public folder is the Gateway script. The
gateway is responsible for converting objects and translating
the results from PHP methods into native ActionScript objects
used in the Flex User Interface.
The Zend Framework library is included
in the Include Path of your PHP project automatically. You can
see this and the resources contained within it by opening the
PHP Explorer view (see figure 10).
Figure 10: PHP Explorer view
|
|
Did you know...
Step 3:
Download the Mobile Test Drive Assets
|
|
|
Add
the assets folder (available in the Building_A_PHP_App.zip
file) under the src folder (see Figure 11).
The assets folder contains graphics that you will use in the application.
Figure 11: Add the assets folder to your
project.
|
|
Step
4: Add a TextInput to the Title Area of the ActionBar
|
|
|
- Switch to Design mode for MobileGettingStartedHomeView.mxml
and from the Components view, drag out a TextInput and place
it in the title area (titleContent) of the ActionBar (see
Figure 12). Use the Properties view to assign an id of searchTxt,
the text of Employee Name, and a width of 100% (see Figure
14).
Figure 12: Add a TextInput to the title
area of the ActionBar container.
- Flex applications are built from components such as
Buttons, CheckBoxes, and Lists. The Flex 4.5 framework includes
over 70 components, including user interface controls to display
content and provide user interaction, and containers to manage
the layout. The latest version of the framework includes components
and component skins that are optimized for mobile use and
in some cases, enhanced to enable touch and throw scrolling.
It also contains several new components specifically designed
for mobile development including MobileApplication, View,
ViewNavigator, and ActionBar. The Flash Builder Component
view displays a subset of Flex components recommended for
mobile use.
- The root container of your application, the MobileApplication
container, has a single child, a ViewNavigator. The ViewNavigator
manages an ActionBar and a set of View instances using a stack-based
history mechanism. The ActionBar component is displayed at
the top of the application and appears above the views and
consists of three areas: a navigator area, a title area, and
an action area (see Figure 13).
Figure 13:The parts of the ActionBar container.
- Typically, you place components that let the user navigate
the content (like back or home buttons) in the navigator area,
a string or other components (like the TextInput used in this
application) in the title area, and components that let users
take an action (like buttons to search or add employees in
this application) in the action area.
- For each component, you can set properties and styles.
Properties apply only to that particular component instance.
Styles can be set inline or using CSS to create style rules
to apply to your components. You can view and set object properties,
styles, and more using the Properties view (see Figure
14).
Figure 14: Use the Properties view to
set object properties, styles, and more.
- Switch to Source mode and take a look at the generated
code.
|
|
Step
5: Add Buttons to the Action Area of the ActionBar
|
|
|
- Using the Components view, add two Button instances
to the action area (actionContent) of the ActionBar (see Figure
15). Assign the first Button an id of searchBtn, delete the
label, click the folder icon and select Multi-Resolution Bitmap,
and embed search48x48.jpg located in the assets folder for
all the dpi's (see Figure 16).
Assign the second button an id of addBtn, delete the label,
click the folder icon and select Multi-Resolution Bitmap,
and embed add48x48.jpg for all the dpi's (see Figure 16).
Figure 15: Add Buttons to the action area
of the ActionBar container.
- In the default Properties view (the Standard view),
you will not see a way to set the button's icon property.
The Standard view displays a graphical interface for setting
common attributes of the selected object. To see all the attributes
you can set for an object, switch to either the Category or
Alphabetical view by clicking one of the buttons in the upper-right
corner of the Properties view.
Figure 16: Specify multi-resolution bitmaps.
- If the design area does not update to show the changes
made to an object (like the icons you just specified), you
can click the Refresh button at the top of the Design mode
window to have Flash Builder 4.5 for PHP
re-render the screen.
|
|
Step
6: Use Spacer Components to Fine-Tune the Layout
|
|
|
- From the Layout folder in the Components view, drag
out two Spacer components and drop them to left and right
of the TextInput control in the title area. Set widths to
15 and heights to 100% (see Figure 17).
Figure 17: Use the Spacer components to
finetune the layout.
|
|
Step
7: Add a List Control to the View's Content Area
|
|
|
- Using the Components view, drop a List control below
the ActionBar. Assign an id of empList and set constraints
so that it fills the entire view area (see Figure 18).
Figure 18: Set the size and position of
a component using constraints.
- The layout of a container determines how its children
are positioned within it. Some containers have a preset layout
mechanism (like the VGroup and HGroup containers). For others,
like the View container, you can set the layout yourself.
For example, you could specify a vertical layout, a horizontal
layout, a basic layout , or more. Basic layout uses absolute
positioning in which the positions of objects are set using
x and y values (the upper-left corner of the container is
0,0) or constraints. Constraints allow you to "pin"
an object to a specific location in a container, providing
a way to build flexible interfaces. You set constraint properties
(top, bottom, left, right, verticalCenter, horizontalCenter)
to the number of pixels the object should be from that part
of the container.
|
|
Step 8: Change
Component Attributes in MXML
|
|
|
- Switch to Source mode and use Flash Builder 4.5 for PHP
Content Assist to select and set values for various properties
and styles.
- When you place your cursor inside a tag and press the
spacebar or Ctrl+Spacebar, you get code hinting with Content
Assist (see Figure 19). It shows a list of all the attributes
you can set for that tag, including properties, styles, events,
and more. Different symbols are used for each different type
of attribute. This is the same list you see in the Alphabetical
view of the Design mode Properties view.
Figure 19: Use Content Assist to see a
list of all possible tag attributes.
|
|
Step 9: Create Your PHP Project Resources
|
|
|
In
your Library folder, create two PHP file's by going to File |
New | PHP File and name them Employee and Department. Copy the
Employee.php
and Department.php
code into the files and save the project.
Figure 20: The PHP Explorer view showing
your PHP Service and the Department and Employee files.
|
|
Step 10: Create Your PHP
Service
|
|
|
- In the PHP Explorer view select the services folder
in your PHPMobileService project, and from the Right Click
Menu select New | Class (see figure 21). Call the file EmployeeService
(enter the name in the Class Name text field). Mark the Constructor
and the Generate PHPDocBlocks checkboxes (see figure 22),
which creates a skeleton in the file in which to add your
methods.
Figure 21: Select Class from the Right
Click Menu of your services folder.
Figure 22: The Create New PHP Class dialog.
- Copy the EmployeeService
example code into the file.
As
this code includes details about your database, edit
the values represented in the "" according to the
details of your database.
|
|
Step 11: Run a PHPUnit
Test on Your PHP Service
Running a PHPUnit test will allow you to test the methods in your
PHP service, ensuring that individual methods are working properly. In
the same way that you can debug an application to diagnose problems within
it, you can run a PHPUnit test to help you diagnose any problems or errors
in your PHP class. Testing an individual method is one option (see figure
28), but running a PHPUnit Test will allow you to test all of the methods
in the class simultaneously.
In this case, we are using this resource to ensure that our PHP class is
working smoothly to prevent any future errors.
|
|
|
- Go the PHP Explorer view and select the EmployeeService
class. From the Right Click Menu select New | Other | PHP
| PHPUnit | PHPUnit Test Case (see figure 23).
Figure 23: Select PHPUnit Test Case from
the New wizard.
- Click the 'Click here to add PHPUnit to the Include
Path' option, which will allow the PHPUnit Test to be aware
of the resources in your project and functionalities such
as Content Assist. In the Element to test field click Browse
and write EmployeeService in the search field and select EmployeeService
from the list.
A file named EmployeeServiceTest has now been created in the
services folder of your PHPMobileService project (see
figure 24). This file includes methods that are created specifically
to run and test the methods in your EmployeeService class.
Figure 24 You can see the new test file
created for your PHPUnit Test in the PHP Explorer view.
- Still in the PHP Explorer view select your new EmployeeServiceTest
file and from the Right Click Menu select Run as | Run Configurations
and double click PHPUnit. Name the configuration EmployeeServiceTest
and open the PHP Script tab and select the Alternate PHP option
and select the PHP 5.3.3 (CGI) (Zend 5.3.3 CGI) option (see
figure 25).
Click Apply and Run to run the application.
Figure 25: Run the file as a PHPUnit Test
to run and test the methods in your PHP Service.
The PHPUnit view opens with the results of the test. For a successful
test you will see a green bar and the covered lines in the Code
Coverage tab (see figure 26). For a failed test, there is a red
bar with a list in the Trace failure tab of the specific lines
in the code that failed.
Figure 26: A successful PHPUnit Test with
the lines covered in the Code Coverage tab.
|
|
Step
12: Introspect and Bind
After you have created your PHP services, you need to connect it to
your Flex project. This makes the methods in the PHP service easily accessible
for binding while developing the Flex side of your application. Once you
have introspected your PHP service, you can use the methods contained
within it as operations for the Flex component's in your applications
GUI.
Introspecting PHP services in Flash Builder 4.5 for PHP
can be done in two ways; using the Right Click Menu or using the Data/Services
view. Here we will go through the process using the Right Click Menu.
|
|
|
- From the Right Click Menu of EmployeeService select
Create PHP Service for Flex.
- The service details (service name, service package,
and data type package) are automatically generated according
to the PHP class.
- Click Next and Finish to complete the PHP Introspection.
Your PHP Service is now connected to your Flex project.
- Select your Flex project in the Package Explorer view,
and open the Data/Services view to see all the public methods
included in the PHP Service (see figure 27).
Figure 27: See all the public methods
included in your PHP service in the Data/Services view.
- Test the method in your service to make sure it is functioning
properly by selecting the getEmployee method in the Data/Services
view and select Test Operation from the Right Click Menu.
In the Test Operation view make sure getEmployee is selected
in the Operation dropdown menu and click Test. The test run
will show you all the response names and values received (see
figure 28). In this case it is the details of each of the
employees in the database.
Figure 28: The Test Operation view lists
all of the names and values received from the specific method
you tested.
- Binding is the process of consuming the PHP methods into
your Flex Mobile project by binding the data. This is achieved
by tying your existing Flex components to an operation (a
PHP method). Flash Builder 4.5 for PHP
allows you to bind your data in the following ways: using
the drag and drop functionality (see figure 27), by going
to Data | Bind to Data after selecting code in
the Source view or a component in the Design view, by selecting
Bind to Data from the Right Click Menu of a Flex
component in the Design view, or by inserting it directly
in the code.
To bind the data using the drag and drop, open the MobileGettingStartedHomeView.mxml
file in Design mode and the Data/Services view. Select the
getEmployees function and simply drag into the list you inserted
when creating the UI (see figure 29).
Figure 29: Use the drag and drop functionality
to drag a method directly into the UI.
- In the Bind to Data dialog select firstname from the Label
Field dropdown menu before clicking OK.
|
|
Step 13: View a Component's
API
|
|
|
- Select Help | Dynamic Help and then click a component
tag in your code. In the Help view, click the component's
API link to view its API (see Figure 30).
- The Adobe Help AIR application opens, which allows you
to view help content (including the ActionScript Language
Reference, ASDocs) when you are online or offline (once the
content has been downloaded and saved locally). A component's
API, its application programming interface, lists everything
you can set for that component and includes descriptions and
code examples. If you do not see the class explorer on the
left side, click the Show Packages and Class List link in
the upper-left corner of the window.
Figure 30: View a component's API.
|
|
Step
14: Preview the Mobile Application Using the Desktop Emulator
|
|
|
- From the Right Click Menu of your MobileGettingStarted
project select Run As | Mobile (PHP) Application. In the Run
Configurations dialog box, launch the application on the desktop
for a specific mobile device (see Figure 31).
Figure 31: Create a run configuration
to emulate the application on a specific mobile device.
- Your application runs in the AIR Debug Launcher (ADL)
(see Figure 32). The ADL provides a way for you to run and
debug mobile and desktop applications without having to first
install them on a computer or device.
Figure 32: Preview the application in
the AIR Debug Launcher.
- The ADL also provides menu items in the Device menu
to emulate devices and device actions, such as rotating the
device or pressing the Back button (see Figure 33). Simulate
rotating the device and see the ActionBar automatically resizes
to fit the screen. Note that in the emulation the view may
look somewhat large because the pixel density of mobile devices
is higher than that of desktop monitors.
Note:
If you do not see the ADL menu, click on Flash
Builder and then return to your application and click it. You
should now see the ADL menu.
Figure 33: Use the ADL Device menu to
simulate device actions.
- Next, simulate the application on a device with a different
pixel density. Return to Flash Builder 4.5 for PHP,
select Run | Run Configurations, and then in the launch method
area click Configure. You should see a table listing screen
sizes and densities for common mobile devices (see Figure
34). You can also modify this list to add your own device
configurations. Notice the Motorola Droid Pro has a lower
PPI and will thus use the 160 dpi assets you specified. The
other Motorola Droids will use the 240 dpi assets.
Figure 34: View device configurations.
- Return to the run configuration dialog box and rename the
existing configuration to specify a dpi. For example, if it
is using the Motorola Droid Pro device, call it MobileGettingStarted
(160). Click the New Launch Configuration button in the upper-left
corner and create a second launch configuration for a device
with a different pixel density, for example MobileGettingStarted
(240) for the Motorola Droid X. Run the application. You will
see a different size window with an application scaled to
the appropriate size and using the appropriate multi-resolution
assets.
|
|
Step 15: Debug Your Application
|
|
|
- Set breakpoints on the getEmployee method in your MobileGettingStarted
and EmployeeService files. You are placing breakpoints in
both the Flex and PHP code so that the debugger can debug
both the server side and client side of your application simultaneously.
- From the Right Click Menu of your MobileGettingStarted
project select Debug As | Mobile (PHP) Application. In the
Debug perspective, you will see that the debugger has stopped
at the first breakpoint (see figure 35). Click ,
and then click it again after the next breakpoint is hit.
Figure 35: When debugging your Flex Mobile
and PHP application, you will see the results in the Debug perspective.
|
Post a Comment
Silahkan anda tulis komentar di bawah ini !