Ejemplo HolaMundo en guasax

Despues de la presentación de guasax , vamos a comenzar unas serie de capítulos mostrando las diferenes posibilidades que nos ofrece el framework a la hora de programar aplicaciones Flex/Apollo.

En este primer capitulo de la saga comenzaremos con el ejemplo del HolaMundo. Aunque el ejemplo es trivial, nos permitirá introducir una serie de cuestiones necesarias para preparar cualquiera de nuestros futuros programas en guasax.

Al final del articulo podeis encontrar todos los enlaces necesarios para descargaros el código fuente del ejemplo,
observar el ejemplo online(con la opción viewSource), y la documentación actual de guasax tanto en googlecode, como en el blog.

Preparando el entorno

En cuanto al entorno de programación nos vale tanto FlexBuilder 2.0.1 standalone como Eclipse WTP + Plugin Flex Builder.

Particularmente recomiendo y os animo a que utiliceis la segunda opción. Hace tiempo
publicamos un tutorial para llevar a cabo la instalación de todas las herramientas necesarias. Para posteriores ejemplos y trabajo con FDS nos resultará muy util.

Creando el proyecto

Para seguir este tutorial podemos bajar el codigo fuente del proyecto e importarlo en nuestro entorno de programación. Podeís descargar el proyecto aquí .

Una vez importado el proyecto en nuestro Flex Builder , o al crear un proyecto nuevo, tenemos que tener en cuenta 3 cosas principalmente.

  1. Tenemos que cargar la librería GuasaxLibrary.swc en build path de flex.
  2. Tenemos que copiar el directorio locale, con el fichero mensajes, al root de nuestro proyecto.
  3. Tenemos que actualizar las opciones de compilación para leer el fichero de mensajes del directorio adecuado.

Estos pasos a seguir los hemos
descrito también aquí

Si partimos del codigo de ejemplo del programa HolaMundo que os comento más arriba ya tendremos resultos estas cuestiones, la unica salvedad puede ser actualizar algunas rutas absolutas de directorios que nos coloca FlexBuilder, cuestión que podemos resolver editando las propiedades del proyecto y actualizando el Flex Build path -> Libray path.

El fichero principal de nuestra aplicación

Este ejemplo tenemos un minimo numero de ficheros para llevar a cabo la función del holamundo,
en primer lugar tenemos un fichero MXML principal en el que definiremos el interface necesario para invocar
la operación mediante un botón. Desde la función que maneja el “click” del botón realizaremos la invocación del metodo mediante guasax.
Además en el evento “creationComplete” de la aplicación , iniciaremos el framework cargado el fichero de configuración de nuestros componentes en el contenedor.

Aquí podemos ver el codigo del fichero MXML.

[ftf w=”450″ h=”200″]

creationComplete="init()"
viewSourceURL="srcview/index.html">

import conf.Constants;
import es.guasax.container.GuasaxContainer;
import es.guasax.samples.helloworld.bo.HelloWorldBO;
import mx.controls.Alert;
// iniciamos el framework
public function init():void{
var helloWorldBO : HelloWorldBO;
GuasaxContainer.getInstance().parseConfFile(xmlfile);
}
// invocamos la accion mediante guasax.
public function sayHello():void{
try{
var params:Array = null;
GuasaxContainer.getInstance().
executeAction(Constants.SAY_HELLO_ACTION, params);
}catch(error:Error){
Alert.show("An error occurred");
}
}
]]>



title="Hello World Guasax Sample" fontSize="10"
horizontalAlign="center" verticalAlign="middle">



[/ftf]

Configurando las acciones en XML

Una vez que sabemos que acciones queremos invocar tenemos que definir las mismas en un fichero XML que agrupe las mismas en componentes. La estructura del fichero XML para este ejemplo es esta:

[ftf w=”450″ h=”200″]






[/ftf]

En este ejemplo solamente tenemos un componente con una acción. En la definición del componente además de darle un identificador, tenemos que proporcionarle el nombre cualificado de la Clase que va a implementar los metodos de las acciones que vamos a invocar.
Dentro del elemento “component” definimos las acciones.
En este ejemplo tenemos una sola acción con un identificador id=”sayHello”, por el cual será invocada a través del guasax container, y un nombre de metodo method=”sayHello” , que identifica el nombre del metodo real que vamos a ejecutar cuando disparemos esta acción.
En este ejemplo se llaman igual pero esto no tiene porque ser así.
Hay una serie de atributos que pueden tener los elementos action y component que trataremos en posteriores ejemplos.

Creando la logica de negocio. Los BO

Como hemos comentado arriba , las acciones se invocan de un determinado componente , representado por una clase que denominamos Bussiness Object, u objeto de negocio, en la que delegamos la logica de nuestra aplicación relacionada con el tratamiento, acceso y trasformación de datos dentro de nuestra aplicación. Igualmente desde este tipo de clases conectaremos con el FDS cuando tengamos que invocar este tipo de servicios.

Para lo cual tambíen tenemos en guasax una clase de utilidad , ServiceLocator, que nos ayudará en este fin.
Como podemos ver en la clase HelloWorldBO , esta es una clase que en Java denominariamos un POJO (Plain Old Java Object), es decir una clase que no recibe la intrusión del framework en forma de implementación de interfaces o extensión de clases, ligándola a un determinado entorno de ejecución o contenedor. Es una clase simple utilizable en cualquier otra parte de nuetro programa/s sin necesidad de estar bajo el control del framework guasax.

[ftf w=”450″ h=”200″]

package es.guasax.samples.helloworld.bo
{
import mx.controls.Alert;
import es.guasax.view.ViewLocator;

public class HelloWorldBO
{
public function sayHello():void{
Alert.show("Hello World!, the guasax way :)");

}
}
}
[/ftf]

En esta clase simplemente definimos un metodo que como podemos ver se llama sayHello(), igual que el nombre que hemos indicado en el fichero de configuración en XML , en el atributo method="sayHello"

Invocando la acción

Para invocar cualquier acción siempre tenemos que pensar que la vamos a llamar a través del framework, que como veremos en posteriores ejemplos, nos ayudará a dotar de más posibilidades a la ejecución de un método de nuestra lógica. Para realizar la llamada de una acción tenemos varios metodos, dependiendo del comportamiento que deseemos en la ejecución.

En este ejemplo, simplemente ejecutamos la acción, pasándole, si fuera necesario, los parametros de entrada que recibe el metodo que se ejecuta para esta acción. Como podemos ver en el método de atención al evento "click" del botón , a través del GuasaxContainer , llamamos al método executeAction, pasándole el identificador (un String) de la acción que queremos ejecutar, y un Array de parametros , en este caso null ya que el método no recibe parametros. Si recibiera parametros , estos se pasarían en el array en el mismo orden en que se reciben los parametros formales del método a ejecutar.

[ftf w="450" h="200"]
public function sayHello():void{
try{
var params:Array = null;
GuasaxContainer.getInstance().
executeAction(Constants.SAY_HELLO_ACTION, params);
}catch(error:Error){
Alert.show("An error occurred");
}
}
[/ftf]

En el caso de que necesitemos recuperar en el mismo lugar de la ejecución el valor que retorna el metodo del BO que estamos ejecutando, recibimos como objeto de retorno de las ejecuciones a los métodos guasax de executeAction un objeto de tipo ResponseActionVO, en el que tenemos un metodo getResult(), del cual podemos extraer el objeto real que devuelve el método que ejecutamos del BO. Un ejemplo de esto podría ser así:

[ftf w="450" h="200"]
public function sayHello():void{
try{
var params:Array = null;
var responseVO: ResponseActionVO = GuasaxContainer.getInstance().
executeAction(Constants.SAY_HELLO_ACTION, params);
var result:Object = responseVO.getResult();
}catch(error:Error){
Alert.show("An error occurred");
}
}
[/ftf]

En este ejemplo en la ejecución del metodo, simplemente mostramos un mensaje en forma de Alert.
Desde estos metodos normalmente modificaremos el modelo de nuestra aplicación, invocaremos servicios remotos, o llevaremos a cabo célculos complejos que se realizan en local en nuestra aplicación.

En el siguiente ejemplo veremos

  • Introduccion del ModelLocator sobre guasax.
  • Como desacoplamos la vista de la logica de negocio.
  • Introducción al ViewLocator.Como redireccionar a una determinada vista despues de la ejecución de una accion.

Enlaces, recursos, y codigo

Esperamos que os haya resultado interesante, en posteriores capitulos profundizaremos en las diferentes funciones que nos aporta guasax para desarrollar nuestra funcionalidad en los proyectos Flex.

Angel es ingeniero informático especializado en el desarrollo de soluciones Web Flex - Java. Es un apasionado por la ingeniería y el análisis de procesos para el desarrollo de software, patrones de diseño, y frameworks en general para gestionar el ciclo de vida de las aplicaciones.

Sitio Web:http://ablesa.wordpress.com/

5 Comentarios

  1. Pingback: Hola Mundo guasax ejemplo y videotutorial « think different, think flex

  2. Pingback: MadeInFlex » Blog Archive » Ejemplo calculadora en Guasax

  3. Pingback: MadeInFlex » Blog Archive » Caso de estudio: FlexStore con Guasax

  4. angel

    Que tal, tengo un problema muy peculiar, seguramente es cuestion de configuración o algo por el estilo, necesito su apoyo, ya que todo el dia no he podido echar a andar un solo ejemplo de guasax debido a este problema

    El error es el siguiente:
    [SWF] C:\Desk\Ghola\bin\hola-debug.swf – 535.689 bytes after decompression
    *** Violación de la seguridad Sandbox ***
    Se ha detenido la conexión con /conf/guasax-conf.xml – no se permite desde file:///C:/Desk/Ghola/bin/hola-debug.swf
    SecurityError: Error #2148: El archivo SWF file:///C:/Desk/Ghola/bin/hola-debug.swf no puede acceder al recurso local /conf/guasax-conf.xml.
    Sólo los archivos SWF locales del sistema de archivos y de confianza pueden acceder a los recursos locales.
    at flash.net::URLStream/load()
    at flash.net::URLLoader/load()
    at es.guasax.parser::XMLConfParser/parseConfFile()[D:\PROYECTOS\GUASAX_Framework\GuasaxLibrary\src\es\guasax\parser\XMLConfParser.as:94]
    at es.guasax.container::GuasaxContainer/parseConfFile()[D:\PROYECTOS\GUASAX_Framework\GuasaxLibrary\src\es\guasax\container\GuasaxContainer.as:92]
    at hola/init()[C:\Desk\Ghola\hola.mxml:13]
    at hola/___Application1_creationComplete()[C:\Desk\Ghola\hola.mxml:2]
    at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\flex_201_borneo\sdk\frameworks\mx\core\UIComponent.as:8389]
    at mx.core::UIComponent/set initialized()[E:\dev\flex_201_borneo\sdk\frameworks\mx\core\UIComponent.as:1096]
    at mx.managers::LayoutManager/mx.managers:LayoutManager::doPhasedInstantiation()[E:\dev\flex_201_borneo\sdk\frameworks\mx\managers\LayoutManager.as:696]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher2()[E:\dev\flex_201_borneo\sdk\frameworks\mx\core\UIComponent.as:7975]
    at mx.core::UIComponent/mx.core:UIComponent::callLaterDispatcher()[E:\dev\flex_201_borneo\sdk\frameworks\mx\core\UIComponent.as:7918]

  5. ablesa

    Hola, puede ser debido a que no está bien indicado donde esta la libreria guasax.swc en tu sistema de ficheros. En las propiedades del proyecto mira en el Flex Builder Lib path , el path de la librería guasax. Si tu proyecto está en C:\Desk\GHola , debes linkar la librería desde esa ubicación.
    Prueba con eso y si no te funciona, comentamelo y lo seguimos mirando. saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase