Comunidad de diseño web y desarrollo en internet

Conectar Flex 3 con PHP usando WebORB

Si bien es cierto existen tutoriales sobre Flex, weborb y acceso a datos en Cristalab. Decidí hacer este tutorial con Flex3, debido a los cambios que hay en su configuración, intentando explicar al detalle cada paso apoyandome de imágenes para que sea más fácil de entender. Es necesario tener conocimientos previos y estar familiarizado con el entorno Flex.

Para empezar necesitamos descargar WebORB de su respectivo website. Yo tengo el AppServ instalado y el root sería así:


Haremos el ejemplo con Flex Builder 3 (no Flex 1.5, Flex 2 u otros). Para saber que todo esta funcionando en nuestro webOrb, abrimos nuestro navegador y colocamos la siguiente dirección: http://localhost/Weborb/weborb.php, debe aparecer: WebORB v2.0.2

Para empezar creamos un proyecto nuevo.

En la nueva ventana que aparecerá, colocaremos un nombre al proyecto, en este caso HelloWord, escogeremos un lugar en nuestro disco duro donde guardaremos los archivos fuentes de nuestra aplicación y en la parte de Server technology, seleccionaremos Other.

Al dar Next, veremos la pantalla de Configuración del OutPut, esto quiere decir, donde guardaremos los archivos swf generados desde flex, como trabajaremos con un lenguaje de servidor, es necesario que lo coloquemos en nuestro localhost; para tener un poco de orden, coloqué los archivos en una carpeta ejemplosFlex.

En la siguiente ventana, agregaremos la ruta del output con la dirección de nuestro proyecto.

Quedando así nuestro proyecto:

Y listo, tenemos nuestro Flex listo para empezar a trabajar con webOrb, para eso veremos que contiene nuestra carpeta:

Sólo nos debe interesar trabajar sobre la carpeta Services, que contendrá las clases php que iremos generando según nuestras necesidades.

En este tutorial usaremos la Clase HelloWorld.php que ya viene en la carpeta Services al momento de descargar WebOrb.

<?php

class HelloWorld
{

  public function testMethod()
  {
    return 7;
  }

  public function helloWorld()
  {
    return "hello world";
  }
}

?>

Volvamos a Flex, abrimos nuestro mxml generado al momento de crear el proyecto y agregamos la etiqueta RemoteObject.

Explicaremos un poco cada elemento de la etiqueta RemoteObject:

  • id: Especifica un identificador para nuestra etiqueta y lograr poder invocarlo después.
  • destination: Configura las referencias a nuestras clases php, en este caso usaremos el GenericDestination que nos permite utilizar cualquier ruta dentro de la carpeta Services.
  • source: Identifica la clase php que usaremos.
  • showBusyCursor: Nos muestra el reloj mientras se procesa o accede a data del servidor.
  • result: Método donde la información llegará.
  • fault: Si existe algún problema o error, este método se ejecutará.

Como verán en la imagen, las marcas rojas con una X, es porque aun no creamos los métodos, para eso usaremos este código dentro de la etiqueta Script:

<mx:Script>
    <![CDATA[

        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        
        private function onResult(event:ResultEvent):void{
            trace("<<>>",event.result)
        }
        private function onFault(event:FaultEvent):void{
            trace("ERROR: ",event.fault.faultString)
        }
        
    ]]>
</mx:Script>

Ahora sólo nos falta invocar al RemoteObject (Service) apuntando al método del php, colocaremos este código dentro de un método actionScript para llamarlo al momento de iniciar la aplicación:

private function init():void{
    Service.helloWorld();
}

Así tendremos la etiqueta Application para llamar al método init

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="init()"
    >

Nuestro código completo sería así:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="init()"
    >

    <mx:RemoteObject
        id="Service"
        destination="GenericDestination"
        source="HelloWorld"
        showBusyCursor="true"
                    
        result="onResult(event);"
        fault="onFault(event);"
    />

    <mx:Script>
        <![CDATA[
            
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            
            private function onResult(event:ResultEvent):void{
                trace("<<>>",event.result)
            }
            
            private function onFault(event:FaultEvent):void{
                trace("ERROR: ",event.fault.faultString)
            }
            
            private function init():void{
                Service.helloWorld();
            }
        ]]>
    </mx:Script>

</mx:Application>

Hemos acabado todo lo que es código, sólo nos queda un par de pasos más. Necesitamos copiar el archivo services-config.xml a nuestro proyecto, para eso vamos a la carpeta C:\AppServ\www\weborb\Weborb\WEB-INF\flex y copiamos el archivo.

y pegamos el archivo en nuestro proyecto dentro de la carpeta src.

Abrimos el xml y pegamos este código ya editado para no morir en el intento.

<?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="GenericDestination">
        <channels>
          <channel ref="my-amf"/>
        </channels>
        <properties>
          <source>*</source>
        </properties>
      </destination>
    </service>
  </services>

  <channels>
    <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
      <endpoint uri="http://localhost/webOrb/Weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint"/>
    </channel-definition>
    
  </channels>

</services-config>
 

En la línea 21 tenemos la dirección web donde apunta a nuestro webOrb

<endpoint uri="http://localhost/webOrb/Weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint"/>

Es aquí donde tenemos nuestro weborb, eso quiere decir que cuando subamos nuestros archivos al servidor, cambiaremos esta url.

Ahora un paso importante es decirle a Flex que lea nuestro xml, para eso vamos al menú project/properties:

Y en la pestaña Flex Compiler, en Additional compiler arguments agregamos: -services "services-config.xml"

Damos click en OK y listo, tenemos todo para ejecutar. Como usamos un trace para ver la respuesta de nuestro servicio, hacemos click en el botón de Debug:

En nuestra consola, si todo está bien, se leerá:

Con esta forma, que no es la única de configurar flex con weborb, podemos conectarnos sin problemas y trabajar haciendo RIA's interesantes.

Bug en WebOrb

Es posible que al momento de dar click te salga este mensaje:

ReferenceError: Error #1056: No se puede crear la propiedad isError en mx.messaging.messages.AcknowledgeMessage.

La solución está en este tip.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate