^M Archive Flex | Andrés Villagrán Placencia

Flex

Flex Camp Chile 2008, Inscripciones

Estimados,
Pueden registrarse para Flex Camp Chile 2008 a realizarse el 10 de Diciembre en SurActivo (http://www.suractivo.cl) en http://www.villagranquiroz.cl/flexcamp_registro, también encontrarán información del evento en la misma web, rogamos inscribirse a la brevedad ya que hay cupos limitados con lo queasegurarán su entrada.
Este evento está enfocado a Desarrolladores y Diseñadores que utilicen o quieran aprender Adobe Flex, tendremos expositores de Adobe, comida y regalos para los asistentes.
Interesados en dictar charlas enviar mail a: andres@villagranquiroz.cl
Personas con dudas o consultas enviar mail a: contacto@villagranquiroz.cl

Tags: ,

Monday, September 15th, 2008 Flex, Flex Camp Chile No Comments

VQ: Checklist

Más de alguno ya ha visto la siguiente imagen:

Checklist Screenshot 2

¿Que es? Checklist es una aplicación (por ahora solo web, pronto de escritorio) que permite administrar tus tareas (Tasks), organizandolas de la forma que tu desees y pudiendo marcarlas si estan completadas.

Por ahora solo permite ingresar/editar/eliminar/reordenar (Si, arrastrar y soltar) tareas pero pronto podrá gestionar proyectos, trabajar con multiples usuarios en un proyecto determinado, alarmas, etc. la idea es que me envien sugerencias y más características que deseen en Checklist.

Checklist Screenshot 1

Página del Sistema

Tags: , , ,

Wednesday, August 6th, 2008 Flex No Comments

mx:DateField en español

Esto es un pequeño y sencillo tip para dejar en español nuestro DateField (selector de fechas) en Flex.

Componente:

  1. <mx:DateField id="fecha" creationComplete="dateChooser_init(fecha)" />

ActionScript:

  1. private function dateChooser_init(dt:DateField):void {
  2. dt.dayNames=['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
  3. dt.monthNames=[ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
  4. 'Julio', 'Agosto', 'Septiembre', 'Octubre',
  5. 'Noviembre', 'Diciembre'];
  6. dt.firstDayOfWeek = 1;
  7. dt.formatString = "DD/MM/YYYY";
  8. }

Sencillo, no?

Tags: , ,

Saturday, July 26th, 2008 Flex 15 Comments

Flex Builder 3 Linux o Eclipse + Epiphany

Tras un montón de caidas de Firefox (La versión que trae Ubuntu), probé Epiphany pero al intentar ejecutar un proyecto en Flex Builder 3 (o Eclipse) abre una nueva ventana, una lata, por lo cual hice un pequeño script en python para abrir la página en una nueva solapa:

  1. #!/usr/bin/env python
  2. import sys
  3. import commands
  4.  
  5. var = sys.argv
  6. commands.getoutput('epiphany-browser -n %s' % var[1])

Esto se debe guardar como run-epiphany.py y con permisos de ejecución, luego dentro de las Preferencias de Eclipse (General -> Web Browser) deben agregar Epiphany a la lista, seleccionar el script como ejecutable y en los parametros agregar %URL%

Ojalá les sirva

Tags: , ,

Wednesday, July 16th, 2008 Flex, Python No Comments

Flash/Flex indexable en Google y Yahoo

Hace algún tiempo investigando si realmente eran indexables los SWF en buscadores ya que, para los que han visto el sitio de mi empresa: http://www.villagranquiroz.cl esta totalmente desarrollado en Flex, y últimamente casi todos los proyectos que estoy trabajando son en este framework, y el mayor contra era para páginas web (sistemas de información no importa ya que no es visible al público) pero hoy ha anunciado Google y Yahoo que han implementado un algoritmo que permite guardar la información contenida dentro de Flash (Botones, Texto, etc) que ya está en funcionamiento (probablemente la mayoría de los sitios están siendo indexados, por lo cual hay que esperar).

Una buenisima noticia ya que tenía pensado cambiar el sitio a ExtJS , una exelente herramienta para integrarla con PHP pero obviamente no le llega ni a los talones a Flex.

Más información: googlewebmastercentral

Tags: , , ,

Wednesday, July 2nd, 2008 Flex, Google 1 Comment

Flex: Paso de variables entre Módulos

Suponiendo que necesitamos pasar de una pantalla a otra el valor de un numero por ejemplo (puede ser un id dentro de la tabla), dentro de la aplicación principal deben agregar una variable para guardar esta información (el código siguiente no esta completo):
Inicio.mxml:

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  2. <mx:Script>
  3. <![CDATA[
  4. public var id_modulo:int; // Esta es la variable donde guardaré el valor
  5. ......
  6. ]]>
  7. </mx:Script>
  8. ....
  9. </mx:Application>

Modulo1.mxml:
Ahora queremos que al hacer click en un botón "Siguiente" guarde el valor del id que necesitamos.

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  2. <mx:Script>
  3. <![CDATA[
  4. private function Funcion_Click_Boton_Siguiente():void {
  5. // Aquí guardamos nuestro valor en la aplicación principal,
  6. // después lo obtendremos de la misma forma
  7. Application.application.id_modulo = 10;
  8.  
  9. // Después de guardar, nos cambiamos al siguiente modulo
  10. Application.application.CargaModulo("Modulo2");
  11. }
  12. ......
  13. ]]>
  14. </mx:Script>
  15. <mx:Button label="Siguiente" click="Funcion_Click_Boton_Siguiente()" />
  16. </mx:Application>

Modulo2.mxml:
Ahora pedimos a la aplicación principal el valor previamente guardado y lo mostramos como una alerta cuando carga la aplicación, dentro de Application se define initialize para utilizar una función al momento de cargar un módulo.

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="CargarInicio()">
  2. <mx:Script>
  3. <![CDATA[
  4. // Necesario para poder utilizar el pop-up de alerta
  5. import.mx.controls.Alert;
  6. // Bindable se utiliza sólo si necesitan utilizar la variable
  7. // como valor en algún componente
  8. // Si no lo van a utilizar para eso, descartenlo
  9. [Bindable]
  10. private var id_a_utilizar:int;
  11.  
  12. public function CargarInicio():void {
  13. id_a_utilizar = Application.application.id_modulo;
  14. Alert.show("Mi variable tiene el valor: " + id_a_utilizar);
  15. }
  16. ......
  17. ]]>
  18. </mx:Script>
  19. ....
  20. </mx:Application>

Tags: ,

Wednesday, June 25th, 2008 Flex, Programación 10 Comments

Ejemplo básico con Flex y AMFPHP

Este es un ejemplo bastante simple de lo que se puede hacer con Flex y AMFPHP, este incluye lo siguiente:

  • Envío y recepción de mensajes simples (Típico Hola Mundo)
  • Recepción de un arreglo y representación en un DataGrid
  • Recepción de un arreglo consultado desde una base de datos (MySQL) con Zend Framework
  • Enviar información de un "Formulario" para su inserción a una Tabla (MySQL)

Son bastante simples, no entra en detalle con el manejo de Faults o Excepciones.

Archivos: WebserviceAMFPHP  - PruebaBasica-Flex - SQL - PruebaBasica

Notas:

  • WebserviceAMFPHP y PruebaBasica son Proyectos que pueden importar a Flex Builder 3
  • Deben configurar la ruta de donde se encuentra el WebserviceAMFPHP dentro de config.php en este mismo
  • Para no tener problemas, dejar estos proyectos dentro de los htdocs del webserver (recomendado Zend Core) para que la ruta web sea: http://localhost/PruebaBasica y http://localhost/WebserviceAMFPHP

Ojalá les sirva.

Tags: , , ,

Friday, June 13th, 2008 AMFPHP, Flex, PHP, Programación 5 Comments

Flex AIR + Framework SQLite ( SQLiteConnector )

Para trabajar fácilmente con algún SQL estoy acostumbrado en PHP a utilizar Zend Framework, específicamente Zend Db, y como el espectacular Flex AIR tiene soporte para SQLite había que utilizarlo, pero buscando en internet no hay un framework para realizar este tipo de operaciones, por lo cual tuve que desarrollar algo que uso en Flex Media Player, y como este es GPL acá dejo una pequeña explicación de como utilizarlo:

Descargar Código

La utilización es sencilla, primero deben crear un objeto del tipo SQLiteConnector y suponiendo que ya se creo una base de datos SQLite con la tabla Prueba que tendrá las columnas Nombre y Apellido:

  1.  
  2. // Debemos crear una instancia de la clase
  3. // definiendo en el constructor el archivo
  4. var conn:SQLiteConnector = new SQLiteConnector("base_de_datos.sqlite");
  5. // Si deseamos insertar datos
  6. conn.DoSQL("INSERT INTO Prueba VALUES('Andrés', 'Villagrán')");
  7. // Si deseamos obtener un valor
  8. var nombre:String = conn.FetchOne("SELECT Nombre FROM Prueba");
  9. // Si deseamos obtener un arreglo con los datos
  10. var datos:Array = conn.FetchArray("SELECT * FROM Prueba");
  11. // Para mostrar los datos
  12. for(var i:int = 0; i < datos.length; i++) {
  13. trace("Nombre:", datos[i]["Nombre"], "Apellido:", datos[i]["Apellido"];
  14. }

Espero que les sirva.

Tags: , , ,

Monday, May 26th, 2008 Flex, Flex Air, Flex Media Player No Comments

Flex Camp Chile

Actualmente estamos comunicándonos con gente de Adobe ya que estamos Organizando un Flex Camp para Chile (y el primero en Latino América), idealmente el evento se realizará en el 4to trimestre del 2008, por lo cual queda bastante tiempo para organizar algo bien grande y claro está, con una gran asistencia.

Adobe, dependiendo de la asistencia nos enviaría un relator de la empresa y además de regalos para los asistentes, por ahora necesitamos saber la gente que está interesada, la forma de hacerlo es registrándose en nuestro grupo en Google: http://groups.google.com/group/flexhispano cuando se tenga más información del evento se registrará en nuestro grupo.

Como un pequeño adelanto, estamos intentando tener como patrocinador a la Universidad del Bío Bío y obviamente los organizadores somos Villagrán & Quiroz

Tags: , , ,

Ejemplo Flex + AMFPHP + Zend Framework + MySQL

El siguiente ejemplo permite la creación de servicios web utilizando AMFPHP ,  Flex y Zend Framework para la conexión a la base de datos MySQL.

Lo primero es configurar services-config.xml  a la dirección que se conectará nuestro cliente, por lo tanto debemos modificar lo siguiente:  

<endpoint uri="http://andres.villagranquiroz.cl/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>

Luego de esto, debemos configurar al compilador que utilice esta configuración:Botón derecho sobre el Proyecto -> Preferencias -> Flex Compiler -> Additional compiler arguments y agregar -services "services-config.xml"

Con esto ya estamos listos para comenzar el desarrollo, solo destaco lo importante, lo demás pueden verlo en el código.Lo primero que se debe hacer es crear el servicio web dentro de (ver detalles en el ejemplo):/amfphp/services/nuestro_servicio/nuestro_servicio.php

Ahora podremos visualizarlo en el Webservice Browser que contiene AMFPHP (también debe ser compilado con services-config.xml), pueden revisar el mio: http://andres.villagranquiroz.cl/browser/index.html e intentar ejecutarlos.

Recomiendo utilizar Zend Framework para la conexión con la base de datos, en el ejemplo existe un archivo de configuración (config.php) para MySQL, para más información de la utilización de Zend_Db pueden ver la documentación del Framework o revisar la introducción que he preparado aquí: http://andres.villagranquiroz.cl/files/2008/03/01-php-java.pdf posiblemente tengan problemas con PDO_MYSQL ya que lo más probable es que no tengan instalado, recomiendo instalar Zend Core que tiene Apache + PHP y extensiones (incluye PDO) + MySQL, pueden encontrarlo en http://www.zend.com

Volviendo a la interfaz en flex:Primero debemos especificar los Métodos a los cuales queremos conectarnos de la siguiente manera:

<mx:RemoteObject id="remObj" showBusyCursor="true" source="EjemploAMFPHP.prueba_mantenedor" destination="amfphp" fault="faultHandler(event)" >

<mx:method name="Ingresar" result="ingresarHandler(event)" />

<mx:method name="Modificar" result="modificarHandler(event)" />

<mx:method name="CargarDatos" result="cargarDatosHandler(event)" />

<mx:method name="Eliminar" result="eliminarHandler(event)" />

</mx:RemoteObject>

Hemos definido los métodos y sus "Manejadores" (Handlers) los cuales tratarán la respuesta que nos da el Servicio Web luego de llamarlo, ejemplo:

private function ingresarHandler(event:ResultEvent):void {

Alert.show(event.result.toString(), "Resultado");

LimpiarFormulario();

}

Para llamar a los Métodos del Objeto Remoto:

remObj.getOperation("CargarDatos").send();

remObj.getOperation("Ingresar").send(nombre.text, apellido.text); // Si necesita parametros

Para ver el código deben importar a Flex Builder los proyectos o simplemente descomprimirlos y revisarlos.

Ejemplo en Linea - Código Fuente

Tags: , , ,

Thursday, May 15th, 2008 AMFPHP, Flex, PHP No Comments