Ejemplo calculadora en Guasax

Después del primer ejemplo de HolaMundo de guasax , vamos a desarrollar un segundo articulo en el que podremos ver un ejemplo, un poquito más elaborado en el que se trabajan otro tipo de llamadas al framework para que ejecute una acción.Veremos como trabajamos con una clase ModelLocator, y como pasamos objetos tipo Value Object a una acción Guasax, y trabajamos con estos.
Al final del articulo podéis encontrar todos los enlaces necesarios para descargaros el código fuente del ejemplo, observar el ejemplo online(con la opción ViewSource habilitada), y la documentación actual de guasax.
Al igual que en el ejemplo anterior , hemos grabado un video tutorial de 5 minutos, que podéis ver online o descargar aqui


Algunos cambios en guasax

En primer lugar comentar que hemos llevado a cabo algunos cambios en guasax, para poder definir varios ficheros xml de configuración por separado, y hemos cambiado la forma de cargar el fichero principal de configuración para que sea aún más sencilla la inicialización del framework. Estos cambios están ya en el repositorio SVN y hemos compilado una nueva librería de guasax , v0.9.2a, para poder descargar aparte del código fuente.

Fichero de configuración de Guasax

En el fichero de configuración para esta aplicación definimos las acciones que queremos invocar. La estructura del fichero XML es esta:

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





[/ftf]

Tenemos un componente calculator, con una sola action, calculate.

Inicio de la aplicación.Cargamos la configuración

La carga de la configuración de la aplicación la hacemos a través de una llamada al metodo init() , a través del evento creationComplete. En este método llamamos al método parseConfFile(“./conf/guasax-conf.xml”,onLoadComplete); pasando el path al fichero de configuración y una función de callBack que será invocada cuando se termine la carga del fichero de configuración. Desde esta función podremos realizar las primeras llamadas al framework para ejecutar acciones.

[ftf w=”450″ h=”150″]
private var classForCompile:Array = [CalculatorBO,CalculatorWindow];
public function init():void{
GuasaxContainer.getInstance().parseConfFile(“./conf/guasax-conf.xml”,onLoadComplete);
}
[/ftf]

En este caso en el función onLoadComplete de nuestro código no tenemos que llevar a cabo ninguna operación.

Ejecutando una operación en la calculadora

Para hacer uso de esta acción hemos preparado diversos escenarios donde la podemos invocar. En primer lugar la llamamos del interface principal.

[ftf w=”450″ h=”260″]
/**
* Lanza la accioon de ‘operar’, con el parametro OperacionVO
*/
public function operar():void{
var operationVO:OperationVO = new OperationVO();
operationVO.operando1 = Number(op1Txt.text);
operationVO.operando2 = Number(op2Txt.text);
operationVO.operador = “+”;
var response:ResponseActionVO = guasaxContainer.executeAction(Constants.CALCULATE_ACTION,
[operationVO]);
}
[/ftf]

Con esta llamada ejecutamos la action, calculate, recibimos el VO con los datos de la operación en el BO , llevamos a cabo el calculo y el resultado de la operación lo guardamos en el ModelLocator.

[ftf w=”450″ h=”300″]
public class CalculatorBO
{
public var model:ModelLocator = ModelLocator.getInstance();
public function calculate(operationVO:OperationVO):OperationVO {
try{
var result: Number;
if(operationVO.operador == “+”){
result = operationVO.operando1 + operationVO.operando2;
}else if(operationVO.operador == “-“){
result = operationVO.operando1 – operationVO.operando2;
}else if(operationVO.operador == “*”){
result = operationVO.operando1 * operationVO.operando2;
}else if(operationVO.operador == “/”){
result = operationVO.operando1 / operationVO.operando2;
}
operationVO.result = result;
// update model
model.operationVO = operationVO;
}catch(error:CalculatorError){
Alert.show(“Se ha producido un error:”+error.message);
}
return operationVO;
}
}
[/ftf]

Como en el GUI principal tenemos la variable del modelo bindada con un control en el que mostramos el resultado, este se visualiza inmediatamente en el interface principal.

Reutilizando el BO entre varias vistas de la calculadora

Otra de las formas de invocar a la acción en este ejemplo, es lanzar la operación desde una ventana calculadora , y a su vez que el resultado de la operación se visualice en esta misma ventana. Para ello creamos una ventana calculadora y desde su botón calculateHere, hacemos la siguiente llamada:

[ftf w=”450″ h=”300″]
/**
* Calculamos la operacion y el resultado lo mostramos en esta vista
* a través del update metodo.
*/
public function calculateHere():void{
var operationVO :OperationVO = new OperationVO();
operationVO.operador = operadorCmb.selectedLabel;
operationVO.operando1 = Number(operando1Txt.text);
operationVO.operando2 = Number(operando2Txt.text);
// —————————–
var response:ResponseActionVO =
guasaxContainer.executeActionWithView(
Constants.CALCULATE_ACTION,
[operationVO],
[this],
Constants.UPDATE_VIEW,
[null]);//pasamos la vista y el metodo de la vista que queremos invokar, sin parametros en este caso.
}
[/ftf]
En la llamada a la accion , executeActionWithView , vemos que en este caso le pasamos además de la acción a ejecutar, y los parametros, un array de vistas(en este casos this, es decir, la actual), el método a llamar de esa vista, y en caso necesario los parametros de ese metodo en la vista.
Con esta llamada lo que conseguimos es que una vez se ejecute el metodo del BO se llame a ese metodo de esa/s vistas. Es en estos metodos donde podemos continuar con la visualización de los resultados, transiciones, efectos, etc…
En el metodo que vemos mas abajo , recogemos los datos a visualizar del Modelo de nuestra aplicación, actualizamos el interface y lanzamos un efecto.
[ftf w=”450″ h=”150″]

public function updateView():void {
resultadoTxt.text = model.operationVO.result.toString();
glowcombo.target = resultadoTxt;
glowcombo.play();
}
[/ftf]

Como vemos en este ejemplo, un mismo método de un BO lo podemos ejecutar desde varios escenarios de uso. Dependiendo de cómo llamemos a esta action a través del contenedor obtendremos un comportamiento u otro.
Así mismo, vemos que trabajando conjuntamente con el concepto de BO , y ModelLocator como almacenador de nuestros datos de modelo y estado de nuestra aplicación en un momento dado, conseguimos desacoplarnos de la vista, desde la que lanzamos los casos de uso de nuestra aplicación.

Video tutorial con el ejemplo

Como en el ejemplo anterior, hemos creado un video tutorial de 5 minutos , donde mostramos el ejemplo, puedes ver el video online aquí, y lo puedes descargar para ver en tu ordenador aquí.

Enlaces, recursos, y codigo

Enlace al ejemplo Guasax Calculator online con viewSource

Descargar el codigo fuente del proyecto aquí , listo para importar en Flex Builder

Enlace al video tutorial para visualizar online

Enlace al video tutorial para descargar en zip

Enlace a googlecode, SVN, wiki, etc…

Enlace al blog de guasax

Esperamos que os haya resultado interesante, en posteriores ejemplos veremos las funciones que nos aporta guasax para desarrollar aplicaciones que hagan uso de Flex Data Services, crearemos un ejemplo de mantenimiento típico en base de datos de una entidad de nuestro modelo de negocio, y nos queda mucho por explorar de guasax, interceptors, roles, componentes reutilizables, … un montón de funciones que esperamos os resulten muy interesantes. Un saludo.

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/

9 Comentarios

  1. Pingback: Segundo ejemplo de guasax.La Calculadora « think different, think flex

  2. lmanuel

    Hola Angel, admiro realmente tu iniciativa, aunque aún guardo recelo no valla a pasar como con el MTASC, pero igual así se comienzan las cosas buenas con iniciativas y te felicito por ello.

    Ahora bien, tengo una duda, pues deseo hacer un desarrollo en Flex que pueda portarlo a Apollo, se que esto es posible y es parte de la fortaleza de Apollo, pero te pregunto:

    ¿Es posible esta portabilidad con casi el mismo código, al emplear frameworks como Cairngorn o Guasax?

    Gracias.

  3. Angel Blesa

    Hola lmanuel, gracias por tu apoyo.
    En el caso de guasax, es totalmente utilizable bajo Apollo. En concreto el ejemplo del hola mundo lo pase a Apollo cuando salio la Alpha y no tuve ningun problema. La idea es 100% que se pueda programar con guasax en ambos entornos.
    Probaré también a pasar los ejemplos que tengo con uso de Remote Objects para determinar si es necesario algún cambio. En posteriores ejemplos, más elaborados ,intentaré sacar las dos versiones, la versión Flex digamos “Standard” y bajo Apollo.
    un saludo.

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

  5. Dvilla

    Hola, no tiene desperdicio ninguno de los tutoriles que colgais felicidades por el site, es de gran ayuda.
    Vamos al tema. Estoy intentando hacer una plicación con flex y j2ee, y el problema me a surgido al intentar incluir las libreria de guasax al proyecto me da error. Estoy trabajandop con Eclipse 3.2 y el pluging de Flex Builder 2..0.143459. El error es el siguiente:

    *1017: No se encuentra la definición de la clase base.
    *Could not resolve to a component implementation.
    *unable to load SWC GuasaxLibrary.swc: multiple points
    *unable to load SWC GuasaxLibrary.swc: multiple points

    ps: Estoy utilizando la 0.9.2.a del freamwork de guasax.

    Gracias por adelantado.

  6. ablesa

    Hola Dvilla,
    Puede ser por varios motivos. Has creado un proyecto en Eclipse WTP con el plugin de Flex builder, y el plugin de Peter Martin para eclipse para crear proyectos FDS?,
    Y el error exactamente donde te lo da? al importar la libreria en el Flex Build Path –> Library Path?
    Te animo de todas maneras a que pongas la duda en http://groups.google.com/group/guasaxcoders
    y a través de esta lista tratemos de resolverlo,
    un saludo ,espero que lo podemos resolver y que disfrutéis de guasax.

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