From the category archives:

Adobe Flash

Esta es una pequeña prueba de concepto de como se pueden llamar objetos remotos java desde Flex usando Linux y Tomcat del lado del servidor.

Creación de la aplicación web en Tomcat

1. Dentro del directorio webapps, creamos el directorio de nuestro proyecto (p.e. blazeds):

mkdir webapps/blazeds

2. Bajamos la distribución binaria de BlazeDS de su página de Internet y la desempaquetamos en un directorio temporal.

3. Copiamos el archivo blazeds.war al directorio de nuestro proyecto y lo desempaquetamos.

4. Borramos el archivo .war.

5. Opcionalmente, agregamos la siguiente línea al archivo de configuración conf/server.xml dentro del tag de Host, para que tengamos bien definido el directorio de nuestra aplicación:

<Context path="/blazeds" docBase="blazeds" debug="0" reloadable="true" />

6. Agregamos el archivo de seguridad crossdomain.xml donde este el directorio raíz de nuestro dominio:

<cross-domain-policy>
        <allow-access-from domain="*" />
</cross-domain-policy>

Creación del Objeto Remoto en Java

Para este ejemplo, creamos una pequeña clase en Java, en el directorio WEB-INF/src que simplemente nos de la hora:

import java.util.Date;

public class Sereno {

        public String getTime() {
                Date now = new Date();
                return "The time is: " + now;
        }

}

La compilamos con:

javac Sereno

La copiamos al directorio classes.

Ahora que todo esta listo del lado del servidor, declaramos nuestra clase agregando las siguientes lineas al tag service del archivo flex/Remoting-config.xml:

<destination id="blazeds">
  <properties>
    <!-- El nombre de nuestra clase -->
    <source>Sereno</source>
  </properties>
</destination>

Creación de la aplicación Flex

Del lado del cliente, necesitamos crear un archivo de configuración services-config.xml que más adelante se utilizará como un parámetro del comando mxmlc que compila nuestro código.

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
   <services>

      <service id="remoting-service" class="flex.messaging.services.RemotingService"
                    messageTypes="flex.messaging.messages.RemotingMessage">

         <adapters>
            <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true" />
         </adapters>

         <!-- Con este id, llamamos al java desde flex -->
         <destination id="blazeds">
            <channels>
               <channel ref="my-amf" />
            </channels>
         </destination>
      </service>

   </services>

   <channels>
      <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
         <!-- Aqui tengo la ruta de donde se va a jalar las cosas, proviene del war de flex -->
            <endpoint uri="http://192.168.1.100:8080/blazeds/messagebroker/amf"
                            class="flex.messaging.endpoints.AMFEndpoint"/>

      </channel-definition>
   </channels>
</services-config>

Aquí tenemos el mxml (blazeds.mxml ) que vamos usar como ejemplo:

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

        <mx:Script>

                <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.events.ResultEvent;

            // Esta función se llama cuando se llamo exitosamente a nuestro objeto:

            public function onMethodResult(event:ResultEvent):void {

                bo.label = "Result "+event.result

                bo.label += "nDataType "+ typeof(event.result)

            }

                ]]>
        </mx:Script>

    <mx:RemoteObject id="ro" destination="blazeds" fault="Alert.show(event.fault.faultString, 'Error')" result="{onMethodResult(event)}">

      <!-- Aquí declaramos todas las funciones que vamos a llamar del objeto Java -->

      <mx:method name="getTime" result="{onMethodResult(event)}" />

    </mx:RemoteObject>

    <mx:Label id="bo" label="" click="ro.getTime()" />

</mx:Application>

Lo compilamos con la siguiente línea de comando:

~/flex/bin/mxmlc blazeds.mxml -services "services-config.xml"

Al ejecutar el mxml, veremos una etiqueta vacia que al darle doble click, nos imprimirá la hora del servidor.

Conclusiones

De aquí en adelante, ya todo es creatividad. Por supuesto que se pueden usar frameworks como Spring para acelerar el desarrollo del lado del servidor. Pero lo importante de este post, era comprobar con una prueba de concepto lo bien que se llevan estas tecnologías y hacerlo "a manita" para aprender más. No es muy díficil hacer esto mismo con Flex Builder para el cliente y Eclipse para el servidor.

{ 6 comments }

Ciudad Konec-t fué uno de los proyectos en el cual participé por mi paso por Interalia (8 años). Fue muy divertido colaborar en la programación de la parte del servidor y hacer que soportara a más de 2600 usuarios simultáneos con tan solo dos maquinitas.


Así era en un principio
Así era en un principioFue creciendoUno de los cuartos populares

Las imagenes anteriores son de la primera versión. Después le cambiaron los fondos a un diseño más actual y más 3D.

Actualización

Fue una campaña publicitaria muy exitosa, duró desde octubre de 2004 a finales de Diciembre de 2009 y se extendio a varios paises latinoamericanos.

{ 2 comments }

En el pasado, programar aplicaciones en Flash significaba un problema para los usuarios de Linux por el poco soporte que daba Macromedia/Adobe. Afortunadamente, las cosas han cambiado un poco debido a que ahora esta disponible un compilador de AS3 en nuestra plataforma favorita. En este post trato brevemente como hacer películas "swf" en Linux desde la línea de comandos:

Instalación

1. Bajar el Adobe Flex 3 SDK de Adobe (flex_sdk_3.zip) de la siguiente URL: http://www.adobe.com/products/flex/flexdownloads/index.html

2. Como usuario root, desempaquetar el archivo flex_sdk_3.zip y poner algunos permisos para que todos los usuarios lo puedan utilizar:

mkdir /usr/local/bin/flex3
cp flex_sdk_3.zip /usr/local/bin/flex3
cd /usr/local/bin/flex3
unzip flex_sdk_3.zip
chmod a+r * -Rf
chmod a+x bin
chmod a+x bin/*
chmod a+x lib
chmod a+x frameworks
chmod a+x frameworks/libs
chmod a+x frameworks/libs/player
chmod a+x frameworks/locale

O bien, si se quiere evitar problemas, como usuario local en su home:

mkdir flex3
cp flex3_sdk_3.zip flex3
cd flex3
unzip flex3_sdk_3.zip

Escribiendo un programa de prueba

Para ilustrar la compilación, hacemos un pequeño programa de dos archivos que lo único que hace es desplegar un texto y un circulo en la pantalla. El primer archivo llamado SphericCow.as se encargada de dibujar un círculo negro (sobrecargando la clase "Shape"):

package {

    import flash.display.Shape;

    //

    public class SphericCow extends Shape {

       public function SphericCow() {

          graphics.beginFill( 0x000000, 1 );
          graphics.drawCircle( 80 , 70 , 30 );

       }

    }
   
}

El segundo archivo, llamado MyFirstProgram.as, es la aplicación en sí, que utiliza nuestra clase anterior y pone también un pequeño texto:

package {

    import flash.display.Sprite;
    import flash.text.TextField;

   
    //  Main class

    public class MyFirstProgram extends Sprite {
       
        public function MyFirstProgram() {

            var title:TextField = new TextField();
            title.text = "My first Program!";
            addChild(title);

            var sphericCow:SphericCow = new SphericCow( );
            addChild( sphericCow );

        }

    }

}

Compilando nuestro programa

Se compila con:

/usr/local/bin/flex3/bin/mxmlc MyFirstProgram.as

o si lo instalamos en nuestro home:

$HOME/flex3/bin/mxmlc MyFirstProgram.as

El cual creará un archivo MyFirstProgram.swf, el cual podemos arrastrar a nuestro navegador firefox para verlo en acción. Por supuesto, podemos agregar la ruta al archivo .bashrc para evitar el tener que escribir las rutas completas al compilar.

{ 2 comments }


Un juego de fútbol soccer multiusuario implementado usando java y flash. Por cierto, muchas gracias a Xquizo por los screenshots.

{ 0 comments }