Avg. Rating 2.8

Problem

This is a short example of how to setup and develop a remoting application with Flex frontend with a Oracle XE backend and AMFPHP

Solution

Oracle XE Database, Flex 2.0 and AMFPHP remoting

Detailed explanation

This is a very simple example to demonstrate how to use AMFPHP with Oracle XE database.  Let me demonstrate how to display a the employee table from a oracle database using remoting components

Please download and install AMFPHP 1.9 beta from here.
Assuming that your installation is successful lets delve into the coding part of the services

The EMPLOYEES  table from HR schema has the following structure in Oracle XE Database , Lets create a corresponding class Employee in PHP.

<?php

class Employee
{
    var $EMPLOYEE_ID;
    var $FIRST_NAME;
    var $LAST_NAME;
    var $EMAIL;
    var $PHONE_NUMBER;
    var $HIRE_DATE;
    var $JOB_ID;
    var $SALARY;
    var $COMMISSION_PCT;
    var $MANAGER_ID;
    var $DEPARTMENT_ID;      
  
    var $_explicitType = "project.Employee";
}
?>


The $_explicitType assumes that we will have a corresponding class in Actionscript for mapping the Employee in Actionscript.

Here is the code  for the EmployeeService which should be placed under the services folder of AMFPHP installation.  I have created a top level directory called Project and placed all the services under it.

<?php
require_once('./Employee.php');

class EmployeeService
{

var $myconnection=null;
    var $statement=null;

function getEmployees()
{

    $myconnection = oci_connect('hr','hr', "//localhost/xe");
        # Check Oracle connection"
        if (!myconnection) {
            # Dont use die (Fatal Error), return useful info to the client
            trigger_error("AMFPHP Remoting 'EmployeeService' class could not connect: " . oci_error());
        }
        $query="SELECT * FROM EMPLOYEES";
        # Return a list of all the employees
        $statement=oci_parse($myconnection,$query);
        if (!$statement) {
            oci_close($myconnection);
            trigger_error("AMFPHP Remoting 'EmployeeService' class database SELECT query error: " . oci_error());
        }
        oci_execute($statement);
        while ($row = oci_fetch_array($statement,OCI_RETURN_NULLS)) {
            $data_array[] = $row;
        }
        return($data_array);
    }

}
?>

You can check the service using the Service brower located at browser folder of your AMFPHP installation for testing ther services.

Now lets look at the Flex bulider part of it to Display the data in nice looking UI

Remoting in flex requires you a service-config file.  Please add the service-config file into your flex project as below.  You may need to modify the location and port number of your Webserver. Nothing else should be modified.

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amfphp">
                <channels>
                    <channel ref="my-amfphp"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
            <endpoint uri="http://localhost:9999/amfphp2/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>


This service-config file should be registered with the following steps
Project -> Properties
Under the Flex Compiler section add -services service-config.xml after

-locale en_US

So that it looks like
-locale en_US -services service-config.xml

Click on Apply for the settings to take effect.

Lets create a Actionscript class to hold the remote objects. Here is the code

package project
{
    [RemoteClass(alias="project.Employee")]
    public class Employee
    {
        public var EMPLOYEE_ID:Number;
        public var FIRST_NAME:String;
        public var LAST_NAME:String;
        public var EMAIL:String;
        public var PHONE_NUMBER:Number;
        public var HIRE_DATE:Date;
        public var JOB_ID:Number;
        public var SALARY:Number;
        public var COMMISSION_PCT:Number;
        public var MANAGER_ID:Number;
        public var DEPARTMENT_ID:Number;       
    }
}

Here is the MXML Code for calling a remote method, getting the results and displaying it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:RemoteObject id="myservice" source="project.EmployeeService" destination="amfphp" fault="faultHandler(event)" showBusyCursor="true">
    <mx:method name="getEmployees" result="resultHandler(event)" fault="faultHandler(event)">
      
    </mx:method>
</mx:RemoteObject>

<mx:Script>
    <![CDATA[
        import project.Employee;
        import mx.utils.ArrayUtil;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.controls.Alert;
      
        [Bindable]
        private var dp:ArrayCollection;
      
        private function faultHandler(event:FaultEvent):void
        {
            Alert.show(event.fault.faultString, event.fault.faultCode.toString());
          
        }
        private function resultHandler(event:ResultEvent):void
        {
            dp=new ArrayCollection(ArrayUtil.toArray(event.result));
        }
    ]]>
</mx:Script>
    <mx:Canvas x="0" y="0" width="100%" height="100%">
        <mx:Button x="10" y="10" label="Get data" click="myservice.getOperation('getEmployees').send()"/>
        <mx:DataGrid x="10" y="40" width="100%" height="100%"  dataProvider="{dp}">
            <mx:columns>
                <mx:DataGridColumn headerText="EMPLOYEE_ID" dataField="EMPLOYEE_ID"/>
                <mx:DataGridColumn headerText="FIRST_NAME" dataField="FIRST_NAME"/>
                <mx:DataGridColumn headerText="LAST_NAME" dataField="LAST_NAME"/>
                <mx:DataGridColumn headerText="EMAIL" dataField="EMAIL"/>
                <mx:DataGridColumn headerText="PHONE_NUMBER" dataField="PHONE_NUMBER"/>
                <mx:DataGridColumn headerText="HIRE_DATE" dataField="HIRE_DATE"/>
                <mx:DataGridColumn headerText="JOB_ID" dataField="JOB_ID"/>
                <mx:DataGridColumn headerText="SALARY" dataField="SALARY"/>
                <mx:DataGridColumn headerText="COMMISSION_PCT" dataField="COMMISSION_PCT"/>
                <mx:DataGridColumn headerText="MANAGER_ID" dataField="MANAGER_ID"/>
                <mx:DataGridColumn headerText="DEPARTMENT_ID" dataField="DEPARTMENT_ID"/>
              
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>
  
</mx:Application>


The above code is pretty much self explantory.  On click of Get Data button I am sending a remote request and getting the results of the data and populating the Datagrid.


For any queries feel free to drop me an email at sankar.paneer.selvam@gmail.com

Cheers,
Sankar Paneerselvam
Flex Evangelist
INDIA
Report abuse

Related recipes