Aprenderemos a desarrollar aplicaciones que hagan uso de uno de los LiveCycle Platform Service, aquí podemos ver información más detallada acerca de cada uno de estos servicios. Para este ejemplo haremos uso de los Collaboration Services.

Para comenzar, debemos registrarnos aquí: https://afcs.acrobat.com/ para poder acceder al uso de este servicio (es gratis, pero depende de nuestras necesidades, podemos comprar un ancho de banda mayor).

Después de proporcionar nuestros datos en el formulario de registro, y haber entrado a nuestra cuenta, podremos ver un dashboard que nos presenta nuestras aplicaciones registradas, nuestros rooms (y la url de cada uno para su acceso), y detalles de la cuenta (url de la cuenta, llave secreta, etc).

Para comenzar el desarrollo de la aplicación, debemos descargar el SDK necesario (dando clic en SDK download desde nuestro dashboard). Descargaremos el SDK Navigator Application, pues nos será de apoyo la documentación que incluye, además de tutoriales y demás funciones que nos facilitaran el uso de este SDK.

Desde la aplicación AIR que acabamos de descargar e instalar, descargaremos el SDK de los Collaboration Services, para así acceder a las demás funciones de esta aplicación. Aquí debemos tener cuidado de que la ruta en que guardamos el SDK, sea accesible durante todo el tiempo de desarrollo y entrega de la aplicación al usuario final, además de mantenernos conectados a internet todo este tiempo, puesto que al revisar las credenciales ingresadas dentro de nuestro código de ActionScript, y las modificaciones que hagamos a nuestra cuenta desde la aplicación, serán por medio de nuestra conexión a internet.

Esta aplicación nos ofrece una documentación especializada para cada versión de Flash Player en la que podamos estar trabajando (9, 10 y 10.1), además de brindarnos un swc para desarrollo en Flash y otra para desarrollo en Flex.

Dentro del apartado Developer Tools, encontraremos Room Console que es donde básicamente, encontraremos todo para administrar nuestras sesiones y los permisos de los usuarios dentro de estas. Para crear una nueva cuenta, daremos clic en el botón ADD en el panel Accounts, para así ingresar los datos necesarios para la creación de la cuenta.

La url de nuestra cuenta, la obtenemos desde el dashboard en https://afcs.acrobat.com/ en el panel Account Details. Por defecto en el panel Applications nos creara una para esta cuenta, así como también un Room, del cual debemos copiar la url.

Ya en Flash Builder, creamos un proyecto nuevo, al cual agregaremos el swc necesario para el uso del SDK que recién descargamos. Para cada versión de Flah Player, hay un swc diferente, en esta ocasión seleccionamos el swc que se encuentra dentro de la carpeta donde tenemos nuestro SDK, en libs, flash player 10.

Habiendo seleccionado el swc, debemos editar la ruta de donde tomara los recursos a utilizar (source attachment). Dentro de la misma carpeta de donde seleccionamos el swc, se encuentra una carpeta de nombre src, que es la que contiene estos recursos necesarios.

Ya en nuestra aplicación, crearemos un objeto ConnectSessionContainer el cual nos permite contener en su interior los objetos y componentes necesarios para la aplicación.

La url de nuestra sesión se obtiene desde Room Console en el panel Room Details (en el SDK Navigator Application). Para el inicio de sesión dentro del Room, necesitaremos hacer uso de authenticator, al que debemos asignarle el userName y password.

Aquí hay diferentes tipos de usuarios:

  • Viewer: Es el usuario que puede entrar a la sala pero que no puede activar todas las funciones que nosotros establezcamos en nuestra aplicación (tiene el valor 10).
  • Publisher: Es aquel usuario que puede interactuar con la aplicación completa (tiene el valor 50).
  • Owner: y el dueño de la cuenta a la cual se está accediendo por medio del servicio y nuestra aplicación (tiene el valor 100).

Para realizar algunas operaciones de la cuenta se necesitara tener en mente estos valores para cada tipo de usuario.

Debajo de este authenticator, pondremos un VGroup, el cual funcionara como contenedor para los elementos que ahora utilizaremos. Agregaremos además dentro de este VGroup, un primer panel, el cual contendrá el objeto Roster, que nos presentara el nombre de cada asistente dentro de la aplicación.

Otro segundo panel contendrá un objeto llamado WebCamera, que nos permite el acceso a la cámara web. Estos servicios son a menudo utilizados por empresas que se dedican a brindar un servicio de atención al cliente personalizado en tiempo real, con la posibilidad de compartir pantalla, hacer uso de la WebCam, micrófono, etc. En esta ocasión conectaremos algunos componentes propios de Flex, que podrán ser manipulados por dos personas al mismo tiempo, dentro de nuestra aplicación.

En caso de que el usuario o el anfitrión mismo no cuenten con una WebCam, la aplicación mostrara un error al usuario que allá intentado iniciar este servicio. Un tercer y último panel, contendrá un chat básico, que permita la comunicación entre los diferentes asistentes.

Hasta ahora, si ejecutamos la aplicación, deberíamos tener algo así:

Para “conectar” un componente de la aplicación consigo mismo, sin importar la cantidad de asistentes que existan dentro de la sesión, necesitaremos crear una clase que herede del mismo componente. Nuestro objetivo es que cuando un usuario teclee o seleccione algún dato en un componente de Flex, esta misma selección se vea reflejada para los demás asistentes.

Comenzaremos creando una clase que herede de TextInput, a la cual llamaremos TextInput_ de modo que tengamos el siguiente código:

Debajo de nuestro método constructor, declararemos una variable, que será del tipo SharedProperty a la cual llamaremos SharedText, y sobreescribiremos la función createChildren() la cual será la que conecte estos TextInput por medio de su ID.

Los Event Listeners que agregamos tanto al TextInput como a nuestra variable, serán los que se ejecuten ya sea desde la aplicación que ejecute el administrador o desde la que ejecute el usuario invitado.

En nuestra aplicación Flex, agregaremos un VGroup que contenga los componentes a partir de Authenticator. De esta forma podremos definir una posición exacta para cada componente dentro de nuestra aplicación. Comenzaremos a agregar los componentes que conectaremos entre sesiones, haciendo un pequeño formulario que permita a los asistentes compartir los datos ingresados. De modo que tengamos algo asi:

En nuestra aplicación, debemos definir los textInput de la siguiente manera:

Y de esta forma, al abrir la aplicación en dos navegadores o pestañas diferentes, podremos observar como el texto ingresado en un textInput es automáticamente reflejado en los demás. Esto debido a que los conectamos haciendo uso de su ID.

Para conectar los demás componentes (DateField, CheckBox y la DropDownList) crearemos clases similares que hereden del propio elemento, y que además de una forma similar compartan la selección de los usuarios. La única diferencia entre estas clases son los EventListener que envían o reciben el valor del componente.

EventListeners de la clase DateField_, siendo date nuestra SharedProperty:

EventListeners de la clase CheckBox_, siendo select nuestra SharedProperty:

Y los EventListeners de la clase DropDownList_, siendo SharedSelection nuestra SharedProperty:

Ahora definimos los componentes en nuestra aplicación, de acuerdo a las clases que hemos creado, sin olvidar asignar un id a cada uno:

Ahora cuando ejecutemos la aplicación desde el mismo equipo o en diferentes, los cambios realizados a un componente se verán reflejados para los demás usuarios dentro de la sesión.

Para terminar crearemos un pequeño panel, que pedirá a un nombre de usuario para cada asistente dentro de la aplicación, pues hasta ahora hemos estado haciendo modificaciones dentro de nuestra cuenta, pero es importante tener en claro que en este punto es importante cambiar las credenciales de autenticación en el componente authenticator, de modo que los asistentes no puedan realizar cambios dentro de nuestra cuenta. ¿Por qué desde el principio no se hizo esto? Porque al ejecutar nuestra aplicación hemos definido en nuestra cuenta cada componente y cada valor que puede ser ingresado en el, cuando se esté desarrollando una aplicación haciendo uso de este servicio es importante usar nuestras credenciales verdaderas, para después cambiarlas.

Solo realizaremos dos cambios en nuestra aplicación, en authenticator eliminaremos nuestra contraseña y el nombre de usuario quedara de la siguiente manera userName=”Guest”.

Al ConnectSessionContainer agregaremos la siguiente propiedad: autoLogin=”false”, esperaremos que el usuario ingrese su nombre para que pueda acceder a la aplicación, esto solo con el fin de identificar al usuario asistente.

Creamos un componente basado en panel (y al cual llamaremos panelLogin), al cual agregaremos un TextInput (normal, del package spark) y un Button (al cual agregaremos una función que envié el nombre ingresado por el usuario).

La función ira de la siguiente forma:

En nuestra aplicación principal llamaremos a este panel por medio del creationComplete, para que sea lo primero en mostrarse al usuario.

De esta forma protegemos nuestra cuenta y permitimos a cualquier usuario el acceso a nuestra aplicación. Recuerden para dominar Flex y otras tecnologías no olviden revisar la oferta de cursos que tenemos en Activ.