Home arrow PHP arrow Page 4 - Rich Internet Applications: Introduction to Adobe Flex and PHP

Explaining the Application - PHP

AJAX is popular for the creation of rich Internet applications, but there are good alternatives. This article will introduce you to Flex applications, rich Internet applications that run inside the Adobe Flash player.

TABLE OF CONTENTS:
  1. Rich Internet Applications: Introduction to Adobe Flex and PHP
  2. Integrating Flex and PHP
  3. Building the Application
  4. Explaining the Application
By: Mike Potter
Rating: starstarstarstarstar / 37
April 25, 2006

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Let's examine each line in detail:

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application
xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
layout="absolute" creationComplete="userRequest.send()">

These are the first two lines of each Flex application.  The first line declares that this is an XML document.  The second declares that this is an Application, provides the namespace for MX components, declares the layout to be "absolute" (meaning you can position items to the exact x and y coordinate. Other options are horizontal layouts or vertical layouts), and finally "creationComplete="userRequest.send()" says that on completion of  loading the UI, call the function send() on the MXML element with the id userRequest.

<mx:HTTPService id="userRequest"
url="http://localhost/flex/php/request.php" useProxy="false"
method="POST">
        <mx:request xmlns="">
            <username>{username.text}</username><emailaddress>
{emailaddress.text}</emailaddress>
         </mx:request>
    </mx:HTTPService>

This is where we set up the HTTPService, to send and receive data from the PHP script we created.  We set the id to userRequest, and provide a URL to our PHP script.  We set the method of submit to POST (we could also use GET, but then we'd have to change our variables in the PHP script). 

The request itself contains two variables, username and emailaddress.  The value for username is set to the text attribute of the element with id "username" (username.text) and the value for the PHP variable _POST["emailaddress"] is set to the text attribute of the element with id "emailaddress" (emailaddress.text).  The { and } bind the variables to the value of the UI elements. 

Just to be clear, if we changed <username> to <user_name>, we would have to change our PHP variable to _POST["user_name"].  If we change {username.text} to {user_name.text}, we would have to modify our MXML: the element with the ID "username" would need to have its ID changed to "user_name."

Next, we build a simple form:

<mx:Form x="22" y="10" width="493">
<mx:HBox>
        <mx:Label text="Username"/>
        <mx:TextInput id="username"/>
    </mx:HBox>
    <mx:HBox>
        <mx:Label text="Email Address"/>
        <mx:TextInput id="emailaddress"/>
    </mx:HBox>
    <mx:Button label="Submit" click="userRequest.send()"/>
</mx:Form>

Notice that we can lay out the exact x and y coordinates of the form, and set its exact width.  Then, two HBoxes surround a label and textinput, allowing them to flow from left to right, one above the other.  Finally, our Submit button appears at the end of our form.  When the button is clicked, it calls the send() function of the element with ID "userRequest" (in this case, it is our HTTPService element).

OK, so we've got the area that we submit new entries to the database, but where to we display them?  That's next:

    <mx:DataGrid id="dgUserRequest" x="22" y="128"
dataProvider="{userRequest.result.users.user}">
        <mx:columns>
            <mx:DataGridColumn headerText="User ID"
columnName="userid"/>
            <mx:DataGridColumn headerText="User Name"
columnName="username"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:TextInput x="22" y="292" id="selectedemailaddress"
text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>

In this case, we have a DataGrid, which populates itself with the XML that we get from the userRequest HTTPService.  We return an XML document, and in this case we bind the DataGrid to the user elements in the XML document that gets returned. 

The returning XML looks something like this:

<users>
<user>
<userid>1</userid>
<username>Joe Schmoe</username>
<emailaddress>joe@schmoe.com</emailaddress>
</user>
<user>
<userid>2</userid>
<username>Betty Schmoe</username>
<emailaddress>betty@schmoe.com</emailaddress>
</user>
</users>

Notice that we bind to the actual elements that get returned, not to the wrapper element around them.

The DataGrid displays the userid and usernames of people in the database.  I decided not to show the email address in the datagrid, but you could add another column with that information in it.  Notice that the columnName needs to map directly to the XML elements. The DataGrid element will take care of allowing our users to sort and highlight the rows as they are selected - we don't need to do anything for that!

Finally, we have a TextInput, which shows the email address of the selected user (dgUserRequest.selectedItem.emailaddress), and then an XML tag that closes the application.

So, there you go.  A simple Flash based application that submits and retrieves data from a MySQL database, using PHP as a back end.  I urge you to download Flex Builder 2.0 and build more complicated applications using PHP, MySQL and Adobe Flex.  Check out my blog at http://blogs.adobe.com/mikepotter/ for more information on Adobe Flex.  And please provide suggestions for future articles and what other samples you'd like to see using this set of technologies.



 
 
>>> More PHP Articles          >>> More By Mike Potter
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: