Conociendo Flex XVI: Procesando archivos XML

.

El siguiente ejemplo muestra como leer un archivo XML remoto y extraer sus atributos. Esto se realiza a partir de alojar sus campos en una estructura interna de programa tipo lista. El archivo a recuperar ("contenidos.xml") es el siguiente:


<?xml version="1.0" encoding="utf-8"?>
<contenido>
<pagina location="inicio">
<title>Inicio</title>
<text>Contenido perteneciente a la sección "Inicio".</text>
</pagina>
<pagina location="acerca">
<title>Acerca de</title>
<text>Contenido perteneciente a la sección "Acerca de"</text>
</pagina>
<pagina location="enlaces">
<title>Enlaces Recomendados</title>
<text>Contenido perteneciente a la sección "Enlaces Recomendados"</text>
</pagina>
</contenido>


Y el programa es


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="datosexternos.send()">
<mx:Script>
<![CDATA[
private var listacontenidos:XMLList;
private function showPage(targetPage:String):void{
//Extrae el título de la página
listacontenidos = datosexternos.lastResult.pagina.(@location==targetPage).title;
//Copia el título a variable de publicación
header.text=listacontenidos;
//Extrae el cuerpo de la página
listacontenidos = datosexternos.lastResult.pagina.(@location==targetPage).text;
//Copia el cuerpo a variable de publicación
body.text=listacontenidos;
}
]]>
</mx:Script>
<!-- Definición del origen de los datos a cargar -->
<mx:HTTPService url="contenidos.xml" id="datosexternos" resultFormat="e4x"/>
<!-- Visualización de los contenidos -->
<mx:VBox>
<mx:Label fontSize="22" id="header" text="Ejemplo de Sitio" />
<mx:Label id="body" text="Seleccione su opción de navegación!" />
<mx:HBox>
<mx:Button label="Inicio" click="showPage('inicio')"/>
<mx:Button label="Acerca de" click="showPage('acerca')"/>
<mx:Button label="Enlaces Externos" click="showPage('enlaces')"/>
</mx:HBox>
</mx:VBox>
</mx:Application>


Flex Links

.
Algunos enlaces útiles sobre Flex

http://flex.org/

http://www.adobe.com/products/flex/

http://www.adobe.com/devnet/flex/

http://www.flex.org/blogs/

http://weblogs.macromedia.com/flexteam/

http://blogs.adobe.com/aharui/

http://www.onflex.org/

http://quietlyscheming.com/blog/

http://butterfliesandbugs.wordpress.com/

Conociendo Flex XIV: Validando el acceso

.
En ciertas ocasiones es necesario que la interface que se está desarrollando tenga acceso reservado a usuarios previamente registrados. El ejemplo siguiente habilita que el usuario pueda acceder a un estado reservado u oculto siempre y cuando su nombre y clave sean validadas. Se utiliza una aplicación adicional php que nos permite conectarnos con una BD para valiar los datos del usuario.

Aplicación Flex

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

<!-- El siguiete bloque se ejecuta si el usuario se validó (estado "validado"-->
<mx:states>
<mx:State name="validado">
<mx:SetProperty target="{panel1}" name="width" value="95%"/>
<mx:SetProperty target="{panel1}" name="height" value="95%"/>
<!-- Se eliminan objetos de la pantalla -->
<mx:RemoveChild target="{password}"/>
<mx:RemoveChild target="{username}"/>
<mx:RemoveChild target="{label1}"/>
<mx:RemoveChild target="{Submit}"/>
<mx:RemoveChild target="{label2}"/>
<!-- Se agregan elementos a la pantalla -->
<mx:SetProperty target="{panel1}" name="title" value="Usuario validado"/>
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:Label x="10" y="10" text="Bienvenido!" />
</mx:AddChild>
</mx:State>
</mx:states>

<!-- Función que setea el estado luego de la consulta a la BD-->
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
private function checkLogin(evt:ResultEvent):void
{
if(evt.result.loginsuccess == "yes") {currentState = "validado";}
if(evt.result.loginsuccess == "no") {mx.controls.Alert.show('Error en Acceso!');}
}
]]>
</mx:Script>


<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://127.0.0.1/login.php" useProxy="false">
<mx:request xmlns="">
<username>
{username.text}
</username>
<password>
{password.text}
</password>
</mx:request>
</mx:HTTPService>

<!-- Se solicitan datos de acceso -->
<mx:Panel resizeEffect="Resize" width="250" height="200" layout="absolute" title="Ingreso al sistema" horizontalCenter="0" verticalCenter="-2" id="panel1">
<mx:Label x="10" y="10" text="Usuario:" id="label1"/>
<mx:TextInput x="10" y="36" id="username"/>
<mx:Label x="10" y="66" text="Clave:" id="label2"/>
<mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
<mx:Button x="10" y="122" label="Enviar" id="Submit" click="login_user.send();"/>
</mx:Panel>

</mx:Application>

Aplicación PHP


[php]<?php

//Conexión a la BD
$mysql = mysql_connect("localhost", "root", "tasistro") or die(mysql_error());
mysql_select_db( "flex");

//Se instancian variables locales con datos pasados por Flex
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);

//Consulta a la BD
$query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysql_fetch_array(mysql_query($query));

//Armado e impresión de la respuesta
$output = "<loginsuccess>";
if(!$result) { $output .= "no"; }else{ $output .= "yes";}
$output .= "</loginsuccess>";
print ($output);

?>[/php]




Conociendo Flex XII: Usando filtros dinámicos

.

Los filtros dinámicos son elementos de suma utilidad a la hora de construir interfaces interactivas. En este ejemplo se usa un slider horizontal que determina el rango de valores de stock a mostrar para el depósito seleccionado por el usuario.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="inicio();">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;

private function inicio():void {
if (checkBox.selected) {
arreglo.filterFunction = sliderFilterFunc;
arreglo.refresh();
}
}

private var comb : Array =
[{label:"Deposito A",data:0},
{label:"Deposito B",data:1},
{label:"Deposito C",data:2}];

private function checkBox_change(evt:Event):void {
if (checkBox.selected) { arreglo.filterFunction = sliderFilterFunc;}
else { arreglo.filterFunction = null; }
arreglo.refresh();
}

private function slider_change(evt:SliderEvent):void {arreglo.refresh();}

private function sliderFilterFunc(item:Object):Boolean {
var bool:Boolean;
switch(vx.selectedItem.data){
case 0:
bool = checkData(item.Stock_Deposito_A);
break;
case 1:
bool = checkData(item.Stock_Deposito_B);
break;
case 2:
bool = checkData(item.Stock_Deposito_C);
break;
}
return bool;
}


private function checkData(num:Number):Boolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;
}

]]>
</mx:Script>

<mx:ArrayCollection id="arreglo">
<mx:source>
<mx:Array>
<mx:Object elemento="Tornillo 3/4" Stock_Deposito_A="11" Stock_Deposito_B="120" Stock_Deposito_C="33"/>
<mx:Object elemento="Tornillo 1/2" Stock_Deposito_A="22" Stock_Deposito_B="10" Stock_Deposito_C="98"/>
<mx:Object elemento="Lima" Stock_Deposito_A="433" Stock_Deposito_B="17" Stock_Deposito_C="30"/>
<mx:Object elemento="Escofina" Stock_Deposito_A="54" Stock_Deposito_B="40" Stock_Deposito_C="11"/>
<mx:Object elemento="Serrucho" Stock_Deposito_A="50" Stock_Deposito_B="23" Stock_Deposito_C="89"/>
<mx:Object elemento="Sierra" Stock_Deposito_A="122" Stock_Deposito_B="130" Stock_Deposito_C="80"/>
<mx:Object elemento="Martillo" Stock_Deposito_A="70" Stock_Deposito_B="66" Stock_Deposito_C="30"/>
<mx:Object elemento="Maza" Stock_Deposito_A="34" Stock_Deposito_B="50" Stock_Deposito_C="120"/>
<mx:Object elemento="Tenaza" Stock_Deposito_A="19" Stock_Deposito_B="92" Stock_Deposito_C="35"/>
<mx:Object elemento="Pinza" Stock_Deposito_A="15" Stock_Deposito_B="10" Stock_Deposito_C="89"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:ApplicationControlBar dock="true">
<mx:HBox width="100%">
<mx:Label text="filtro activo" />
<mx:CheckBox id="checkBox" selected="true" change="checkBox_change(event);" />
<mx:Label text="filtrar por" />
<mx:ComboBox id="vx" dataProvider="{comb}"/>
<mx:Label text="Defina rango de valores" />
<mx:HSlider id="slider"
minimum="0" maximum="200"
values="[0,200]" labels="[0,100,200]"
thumbCount="2" showTrackHighlight="true"
snapInterval="1" tickInterval="25"
liveDragging="true" change="slider_change(event);" />
</mx:HBox>
</mx:ApplicationControlBar>

<mx:Panel status="{arreglo.length}/{arreglo.source.length} objetos">
<mx:DataGrid id="grilla" dataProvider="{arreglo}" verticalScrollPolicy="on" width="600"/>
</mx:Panel>

</mx:Application>


Conociendo Flex XIII: Cargando páginas en marcos

.
Es posible cargar páginas web externas en marcos propios de una aplicación Flex. Para ello se utiliza el componente "iframe" desarrollado por Rutherford y disponible aquí.


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

<mx:TabNavigator id="tab" width="60%" height="100%" >
<local:IFrame id="uba"
label="UBA" source="http://www.uba.ar" />
<local:IFrame id="unlp"
label="UNLP" source="http://www.unlp.edu.ar" />
<local:IFrame id="quilmes"
label="Quilmes" source="http://www.unq.edu.ar" />
<local:IFrame id="Sur"
label="Sur" source="http://www.uns.edu.ar" />
</mx:TabNavigator>

</mx:Application>




Conociendo Flex XI: Uso del control de video

.
Aplicación ejemplo que muestra como manejar una interfase simple que controla un video.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
import mx.controls.VideoDisplay;

]]>
</mx:Script>

<mx:Panel title="Ejemplo de uso del control de video">

<mx:VideoDisplay autoPlay="false" id="video" height="200" width="240">
<mx:source>http://download.macromedia.com/pub/developer/darwin.flv</mx:source>
</mx:VideoDisplay>
<mx:HBox>
<mx:Button label="Play" click="video.play();"/>
<mx:Button label="Pause" click="video.pause();"/>
<mx:Button label="Stop" click="video.stop();"/>
</mx:HBox>

</mx:Panel>

</mx:Application>



Videos Flex del 360Flex San Jose 2008

.

• Filthy Rich Flex Clients by Chet Haase - One of the great things about the Flex platform is that you can get up and running with good-looking GUIs quickly.
• Exploring the Open Source Flex SDK by Matt Chotin - Adobe has told you to “file a bug” so many times you want to throw things at them. Wouldn’t it be better if you could just fix the thing yourself and show the rest of the world how brilliant you are?
• Diving in the Data Binding Waters with Michael Labriola - Just about everyone who uses Flex uses data binding. Now come learn what you are actually doing when you add those curly brackets to your application.
• See the Data, Be the Data by Tony Hillerson & Juan Sanchez - Numbers, statistics, search results and focused information mean nothing without a sound way for immersing a user in exploration.
• Humor: Deepa’s Skinning Screencast - 360Flex San Jose keynote video.
• Day 1 Keynote by Mark Anders - Mark Anders tells us about Flex, Thermo, etc.
• High Definition Video & Flex Hands On by Christopher Keeler - This session covers the tools and workflows you need to produce and stream great HD video in the Flash player and Flex.
• PlexiGlass (OpenFlux 3D Components) by Ryan Campbell - PlexiGlass is a sub-project of OpenFlux using the same reusable MVC based components but replaces the view with a 3D renderer.
• Introduction to the Swiz Framework for Flex by Chris Scott - In this session Chris Scott will introduce, Swiz, a framework for Adobe Flex that aims to bring complete simplicity to RIA development. Swiz provides Inversion of Control, event handing, and simple life cycle for asynchronous remote methods.
• Mate Flex Framework by Laura Arguello - Using Mate Framework to build decoupled Flex applications by Laura Arguello. Join Laura as she walks you through how to build an application using Mate framework.
• Flex on Rails with RubyAMF by Tony Hillerson - Using RubyAMF to build AMF services in Rails and how to use these services in Flex.
• How to Build a Framework by Ben Stucki - In this talk, Stucki will cover all the various aspects of what goes into a framework.
• Case Study of An Internal Flex App At Yahoo! - Case Study of An Internal Flex Application At Yahoo! by Hien Luu & Subhadeep Chatterjee
• Advanced ActionScript APIs by Jacob Wright - Learn how to craft ActionScript libraries using advanced techniques. Use custom metadata to make your code easier to read and provide greater code-reuse. And harness the power of the Proxy class to give subclasses an easier way to access data.
• E4X by Marc Bir - What is E4X? How do I use it? Why would I use it? When should I use it?
• Flex and ColdFusion Using VO’s and CFC’s by Kevin Schmidt - Flex and ColdFusion Using VO’s and CFC’s
• Flex and Accessibility by Giorgio Natili - Create accessible custom component and make existing components like ILOG elixir accessible.
• Project Workflow by Axel Jensen - How to put together a team, and ways to communicate with free tools that are in the community.
• Reading the Flex source code by Jonathan Branam - Learn how to use the open source Flex SDK to improve your programming and solve problems. Introduction to the Flex source code explaining the class hierarchy, compositional classes, and the importance of interfaces.
• Creating Reusable Components by Ben Clinkinbeard - This session will talk about what to keep in mind when creating components that go beyond a single use.
• Ticketmaster Kiosk by Kevin Fauth - A high-level overview of the new Ticketmaster Kiosk. Covers items ranging from internationalization, security and other items.

• Advanced State management by Troy Gardner - Cogs is a heirarchical statemachine library for use with AS3.0 projects.
• Reflective Programming by Eric Ko - This is not only a session to introduce Reflection in Flex, but also will provide the technical details how to implement it.
• Using the Flex Builder 3 Profiler by Jun Heider - During the session the functionality of the Flex Builder 3 Profiler will be explored through both background lecture, and most importantly various Flex Builder projects tuned to highlight key features of the Profiler.
• Polishing Components for the Unwashed Masses by Josh Tynjala - You built a custom Flex component! Now, you want to sell it, or you might want to release it open source

• Flash Player 10 (Astro) Preview by Justin Everett-Church - This demo-oriented session will showcase the new features that are coming in Flash Player 10, code-named “Astro.”
• Diving Deep w/ the Flex Component Lifecycle by Owen & Umbaug
  

Vía Flex Generation

Plantilla de expresiones regulares en Flex

.

.

Conociendo Flex X: Buscar cadenas en un arreglo

.
Flex posee una poderosa función de búsqueda de cadenas de texto denominada "search". En este ejemplo (original de Boyzoid) se define un arreglo, que se carga automáticamente cuando se define la interfase, y sobre éste se pueden hacer consultas con resultados tipo filtro sobre la columna "club".


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="cargaDatos()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var lista:ArrayCollection ;

private function cargaDatos():void{
lista= new ArrayCollection([
{club:"Defensores Unidos", ciudad:"Quilmes"},
{club:"Gimnasia", ciudad:"Paraná"},
{club:"Jóvenes Unidos", ciudad:"Paraná"},
{club:"Club Amanecer", ciudad:"Mercedes"},
{club:"Gimnasia", ciudad:"Mercedes"},
{club:"Club Unidos", ciudad:"Pilar"},
{club:"Defensores", ciudad:"Paraná"},
{club:"Saladero", ciudad:"Paraná"},
{club:"Sacachispas", ciudad:"Pilar"},
{club:"Juventud Palermitana", ciudad:"Paraná"},
])
}


private function filterDemo():void{
lista.filterFunction = searchDemo;
lista.refresh();
}

private function searchDemo(item:Object):Boolean{
var isMatch:Boolean = false
if(item.club.toLowerCase().search(search.text.toLowerCase()) != -1){
isMatch = true
}
return isMatch;

}


private function clearSearch():void{
lista.filterFunction = null;
lista.refresh();
search.text = '';
}
]]>

</mx:Script>
<mx:Form>
<mx:FormItem label="Buscar" direction="horizontal">
<mx:TextInput id="search" change="filterDemo()" />
<mx:Button label="Limpiar" click="clearSearch()" />
</mx:FormItem>
</mx:Form>
<mx:DataGrid dataProvider="{lista}" width="300" height="300">
<mx:columns>
<mx:DataGridColumn headerText="Club" dataField="club" />
<mx:DataGridColumn headerText="Ciudad" dataField="ciudad" />
</mx:columns>
</mx:DataGrid>


</mx:Application>



Conociendo Flex IX: Galería de imágenes

.
Galería de imágenes de construcción sencilla. Se puede observar como se generan los efectos de transición de fotos utilizando la orden "sequence". Este es un ejemplo adaptado de Fabían, gracias por compartir. En un próximo post modificaré el código para tomar los datos de la galería desde una ubicación remota.


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

<!-- Estructura de datos que define los metadatos de las imágenes -->
<mx:XML id="misimagenes">
<imagenes>
<imagen>
<title>"Silencio!, Burgués"</title>
<source>imagen/1.jpg</source>
</imagen>
<imagen>
<title>"Terror en la guerra"</title>
<source>imagen/2.jpg</source>
</imagen>
<imagen>
<title>"Que nos está pasando"</title>
<source>imagen/3.jpg</source>
</imagen>
</imagenes>
</mx:XML>

<!-- Imágenes en la galería -->
<mx:Number id="cantidad">2</mx:Number>
<!-- Número de imagen inicial -->
<mx:Number id="actual">0</mx:Number>

<mx:VBox horizontalCenter="0">
<mx:Canvas width="500" height="550" clipContent="true">
<!-- Se muestra la imagen -->
<mx:Image id="galeria" data="{misimagenes.imagen.source[actual]}"/>
</mx:Canvas>
<!-- Se muestra el título de la foto -->
<mx:Text text="{misimagenes.imagen.title[actual]}"/>
<mx:HBox>
<!-- Se habilitan los botones de navegación, bajo condiciones -->
<mx:Button id="prevBtn" label="Anterior"
click="{previousImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}"
enabled="{actual > 0}"/>
<mx:Button id="nextBtn" label="Siguiente"
click="{nextImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}"
enabled="{actual < id="previousImage" target="{galeria}" alphafrom="1" alphato="0" duration="100" effectend="{actual = actual - 1}" alphafrom="0" alphato="1" duration="100" id="nextImage" target="{galeria}" alphafrom="1" alphato="0" duration="1000" effectend="{actual = actual + 1}" alphafrom="0" alphato="1" duration="1000">

Conociendo Flex VIII: Insertando videos en grillas

.
A continuación, un sencillo ejemplo, tomado de Mjcprasad´s Blog , donde se ve como se puede insertar videos en celdas de una estructura datagrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

<mx:Script>

<![CDATA[
private var dataList:XMLList =
<>
<Item id="1">
<File>http://www.rtve.es/resources/TE_CULTUR/flv/1/3/1239112859631.flv</File>
<Detail>Andres Calamaro</Detail>
</Item>
<Item id="2">
<File>http://videosfla.uigc.net/canal13/2009/04/29/mclqp290409malnati.flv</File>
<Detail>Ibarra paseando por las calles</Detail>
</Item>
<Item id="3">
<File>http://videos.icnetwork.co.uk/liverpoolecho/Video-100252-23596902.flv</File>
<Detail>Un tercer ejemplo</Detail>
</Item>
</>;

private function init():void
{ dgSample.dataProvider = dataList; }

]]>
</mx:Script>

<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
<mx:DataGrid id="dgSample" rowHeight="200">
<mx:columns>
<mx:DataGridColumn id="dgColumnArchiveSession" headerText="Video" width="250">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="100%" rollOver="showControls()" rollOut="hideControls()">
<mx:Script>
<![CDATA[
private function showControls():void
{outerDocument.fadeIn.play([controls]);}

private function hideControls():void
{outerDocument.fadeOut.play([controls]);}

private function playPauseButton_click(evt:MouseEvent):void
{
if (vdoDisplay.playing)
{vdoDisplay.pause();}
else
{vdoDisplay.play();}
}

private function stopButton_click(evt:MouseEvent):void
{vdoDisplay.stop();}
]]>
</mx:Script>
<mx:VideoDisplay id="vdoDisplay" left="0" right="0" bottom="0" top="0" source="{data.File}" autoPlay="false" />
<mx:HBox id="controls" styleName="controllerStyle" alpha="0.0" bottom="0" left="0" right="0">
<mx:Button id="playPauseButton" label="Play" styleName="playPauseStyle" toggle="true" selected="{vdoDisplay.playing}" click="playPauseButton_click(event)"/>
<mx:Button id="stopButton" label="Stop" styleName="stopStyle" click="stopButton_click(event)" />
<mx:HBox width="100%" paddingTop="3">
<mx:ProgressBar width="100%" id="progressBar" label="" height="10" labelPlacement="center" mode="manual" />
</mx:HBox>
</mx:HBox>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Comentarios" width="300" dataField="Detail" />
</mx:columns>
</mx:DataGrid>

</mx:Application>


Conociendo Flex VII: Insertando enlaces en grillas

.

Las grillas son un poderoso componete que ofrece Flex para crear aplicaciones. En el siguiente ejemplo se observa como crear una grilla de datos, a partir de una estructura colección de arreglos, donde la última columna es un hipervínculo. Aparte nótese el efecto de degradado del fondo de pantalla, definido al inicio de la aplicacion.


<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" backgroundGradientColors="[0xAAFFAA, 0xFFFFCC]">

<mx:Script>

<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var coleccion_de_arreglos:ArrayCollection = new ArrayCollection([
{universidad:"UNCU",nombre:"Universidad Nacional de Cuyo",url:"http://www.uncu.edu.ar"},
{universidad:"UNLZ",nombre:"Universidad Nacional de Lomas de Zamora",url:"http://www.unlz.edu.ar"},
{universidad:"UNRC",nombre:"Universidad Nacional de Río Cuarto", url:"http://www.unrc.edu.ar"},
{universidad:"UNVM",nombre:"Universidad Nacional de Villa María",url:"http://www.unvm.edu.ar"}
]);

]]>

</mx:Script>
<mx:DataGrid id="grilla" width="600" height="200" dataProvider="{coleccion_de_arreglos}">
<mx:columns>
<mx:DataGridColumn dataField="universidad" headerText="Sigla"/>
<mx:DataGridColumn dataField="nombre" headerText="Universidad"/>
<mx:DataGridColumn dataField="url" headerText="Sitio">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton
label="Visitar Sitio"
click="navigateToURL(new URLRequest(data.url), 'blank');"
/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</mx:Application>


Conociendo Flex VI: Usando web services vía WSDL

.

El siguiente ejemplo de código Flex utiliza la API del servicio web de meteorología del USA Weather Forecast que permite consultar datos acerca de una población dada.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="loadWebService()">

<!--Código original de http://www.holaflex.com -->


<mx:Script>

<![CDATA[

  import mx.rpc.Fault;
  import mx.rpc.events.FaultEvent;
  import mx.rpc.events.ResultEvent;
  import mx.rpc.soap.LoadEvent;
  import mx.rpc.soap.WebService; 

  private var webService : WebService = new WebService();
  private function loadWebService ( ) : void
  {
    // Carga el WSDL y agrega un listener que indica cuando está listo

    webService.wsdl = "http://www.webservicex.net/WeatherForecast.asmx?WSDL";
    webService.addEventListener(LoadEvent.LOAD, onWSDL);
    webService.addEventListener(FaultEvent.FAULT, onWebServiceFault);
    webService.loadWSDL( );
  }


  //listener que avisa cuando se han obtenido los datos
  private function onWSDL ( event : LoadEvent ) : void
  {
     webService.GetWeatherByZipCode.addEventListener(ResultEvent.RESULT,       onGetWeatherByZipCode);
     webService.GetWeatherByZipCode("01010");
  }

  private function onGetWeatherByZipCode ( event : ResultEvent ) : void
  {
  // se acomodan los datos recibidos para su visualizacion
    textArea.text += "La temperatura maxima del día de hoy en " + event.result.PlaceName + " , "+ event.result.StateCode + " es : " + event.result.Details[0].MaxTemperatureC + "C";
  }

  // Si hubo error en la llamada al web service.
  private function onWebServiceFault(event:FaultEvent):void {
    var fault: Fault = event.fault;
    var message:String = "Error: " + fault.faultCode;
    message += "\ndetalles: " + fault.faultDetail;
    trace("Error en el Web Service:" + message);
  }

]]>
</mx:Script>

<mx:TextArea id="textArea" width="500" height="100" />

</mx:Application>


El siguiente ejemplo muestra como usar la operación "GetWeatherByPlaceName" del mismo servicio que el programa anterior, la cual me trae el pronóstico asociado a la ciudad para los próximos cinco días, los datos se selccionan de un combo y se muestran sobre una grilla.

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

<mx:WebService id="myDocLiteralWS" wsdl="http://www.webservicex.net/WeatherForecast.asmx?WSDL" useProxy="false" result="processResult(event)">

<mx:operation name="GetWeatherByPlaceName">
    <mx:request>
         <PlaceName>{cbxGetWeather.selectedItem}</PlaceName>
    </mx:request>
</mx:operation>
</mx:WebService>
<mx:Script>
           <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.rpc.events.ResultEvent;
                
                [Bindable]
                private var myDp:ArrayCollection;              

                private function processResult( event:ResultEvent ) : void
                {
                     myDp = event.result.Details;
                }
           ]]>
      </mx:Script>

<mx:Panel x="64" y="53" width="617" height="330" layout="absolute" title="Pronóstico para los próximos 5 días">

  <mx:ComboBox id="cbxGetWeather" prompt="Seleccione Ciudad" width="150" x="10" y="10" change="myDocLiteralWS.GetWeatherByPlaceName(cbxGetWeather.selectedItem);">
      <mx:ArrayCollection>
       <mx:String>Montevideo</mx:String>
          <mx:String>La Paz</mx:String>
          <mx:String>Las Vegas</mx:String>
          <mx:String>Bogota</mx:String>
          <mx:String>Santiago de Chile</mx:String>
          <mx:String>Montevideo</mx:String>
          <mx:String>Houston</mx:String>
      </mx:ArrayCollection>
  </mx:ComboBox>

  <mx:DataGrid x="10" y="93" id="myDG" width="500" dataProvider="{myDp}">
  <mx:columns>
      <mx:DataGridColumn headerText="Fecha" dataField="Day"/>
      <mx:DataGridColumn headerText="Temper. Maxima" dataField="MaxTemperatureC" width="120"/>
      <mx:DataGridColumn headerText="Temper. Minima" dataField="MinTemperatureC" width="120"/>
  </mx:columns>
  </mx:DataGrid>
</mx:Panel>

</mx:Application>


Conociendo Flex V: Leyendo datos remotos

.

En Flex existen varias formas de acceder a datos remotos leyendo vía protocolo HTTP, accediendo a web services o recuperando objetos. HTTPService es la más popular dado que permite recuperar datosque se distribuyan con la misma aplicción o esten en otros sitios. El siguiente ejemplo ilustra como se lee un archivo XML llamado "datos.xml" y se lo muestra contenido en un objeto grilla.

Archivo "datos.xml"


<?xml version="1.0" encoding="utf-8" ?>
<articulos>
             <articulo id="1" nombre="lapicera AAA"     ventas2009="160000" ventas2008="105000"/>
             <articulo id="2" nombre="lapicera BAB"     ventas2009="90000"  ventas2008="62000"/>
             <articulo id="3" nombre="lapiz HB"         ventas2009="143000" ventas2008="134000"/>
             <articulo id="4" nombre="goma 2 banderas"  ventas2009="72000"  ventas2008="120000"/>
             <articulo id="5" nombre="sobre A4"         ventas2009="155000" ventas2008="87000"/>              
</articulos>


Programa Flex


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    creationComplete="libreria.send()">

     <mx:HTTPService id="libreria" url="data/datos.xml" />



<mx:DataGrid x="20" y="20" dataProvider= "{libreria.lastResult.articulos.articulo}" width="100%" />


</mx:application>


Nótese que una vez que se crea la interfase se dispara la orden de lectura de datos remoto por medio del método "librería.send()", el cual puede utilizarse las veces que se quiera en un programa ya sea para leer otros datos o actualizar algunos ya previamente recuperados.

Conociendo Flex IV: Trabajando con Google Maps

.
Flex posee una API para interactuar con los servicios Google Maps. Su uso requiere de la registración previa de la aplicación que la va a utilizar (Google te da una clave de uso). Aparte hay que descargar la librería que ampliará a Flex y en el proyecto que se requiera el uso de mapas hay que indicarle en las propiedades que se agrega esta nueva librería (En el framework: propierties, Flex build path, library path, add SWC) .

Un programa muy básico para mostrar como funciona la API y el servicio es el siguiente:


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*">

   <mx:Script>

      <![CDATA[
         import com.google.maps.MapType;
         import com.google.maps.LatLng;
         import com.google.maps.MapMouseEvent;
         import com.google.maps.MapEvent;
         import com.google.maps.styles.StrokeStyle;
         import com.google.maps.styles.FillStyle;
         import com.google.maps.overlays.MarkerOptions;
         import com.google.maps.overlays.Marker;
         import com.google.maps.controls.MapTypeControl;
         import com.google.maps.controls.ZoomControl;
          
          // Función que crea el mapa a partir de datos provistos por Google

         private function mapready_mimapa(e:MapEvent):void {

         // se define donde se posicionará la imagen en pantalla, el grado de zoom y el tipo de vista

            idmapa.setCenter(new LatLng(-33, -60), 6, MapType.HYBRID_MAP_TYPE);

            //Se agrega el control de zoom
            idmapa.addControl(new ZoomControl());

            //se agrega el selector de tipo de mapa  
            idmapa.addControl(new MapTypeControl());

            // Se permite hacer scroll sobre el mapa
            idmapa.enableScrollWheelZoom();

            // se activa la deetcción delevento click sobre el mapa
            idmapa.addEventListener(MapMouseEvent.CLICK, click_gmap);

         }
   
         private var m:Marker;
        
         // Función que se lanza cadavez que alguien hace click sobre el mapa
         // En este ejemplo se agregará un objeto tipo marcador
       
         private function click_gmap(e:MapMouseEvent):void {

            // Se crea el objeto marcador
            m = new Marker(e.latLng,
               new MarkerOptions({
                  // se instancia el color
                  fillStyle: new FillStyle({ alpha: 0.5,  color: 0xBBCCDD }),
                  // se define el tamaño y se aplica sombra
                  radius: 6, hasShadow: true,
                  // Fnalmente se añade un tooltip al objeto marcador
                  tooltip: "Estoy en " + e.latLng.toString()
               })
            );
            
            //Se añade el marcador al mapa
            idmapa.addOverlay(m);
         }

      ]]>

   </mx:Script>

   <!-- Se muestra el mapa en pantalla -->
   <!-- Con mapready_mimapa se llama a las funciones AS  que lo definen y crean -->
   <!-- Nótese que idmapa es el identificador del objeto geográfico -->
  
   <maps:Map id="idmapa" width="100%" height="100%" mapevent_mapready="mapready_mimapa(event)"  key="Clave de uso del servicio" />

</mx:Application>


Y la correspondiente salida de pantalla es

Conociendo Flex III

.

Mientras estudio este framework sigo utilizando este blog como un block de notas de lo que voy viendo.

Como vimos  Flex es un framework de adobe orientado a la creación de aplicaciones web del tipo Rich Internet Applications (RIA). Las aplicaciones Flex corren de forma autónoma o en un browser que tiene el plugin "Flash Player", al ejecutarse un programa puede interactuar con facilidades o servicios remotos tales como bases de datos, web services y objetos en otros lenguajes  entre otros. En Flex se usan dos lenguajes de programación  MXML y ActionScript. Donde  MXML es un lenguaje de marcas XML utilizado para definir la interfase de usuario, provee una serie de etiquetas que ayudan a esta tarea tales como grillas, manejadores de pestañas, menues y botones.  Por otro lado ActionScript es un lenguaje de programación orientado a objetos que se usa para escribir la lógica de negocios de la aplicación.

Observe la siguiente aplicación 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Hello World!"  >

    <mx:Label text="Hello World!"/>
    <mx:Label text="Hello World!" color="#003366" fontSize="40"/>


</mx:Application>


Es un simple y clásico "Hola Mundo!" donde se ve claramente el uso de el lenguaje de marcas MXML. Todo programa se escribe entre la marca "mx:application", allí se definen una serie de parámetros adicionales como ser el título de la ventana por ejemplo. Luego se usaron las etiquetas mx:Label que permiten mostrar texto formateado por pantalla. Ahora se presenta un ejemplo más ccompleto, donde se usa la llamada a una función escrita en ActionScript


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  pageTitle="Conversor de Grados Fahrenheit a Celsius"  >

   <mx:Script>
       function convert() : void { celsius.text=frmt.format((Number(fahrenheit.text)-32)/1.8); }
   </mx:Script>

   <mx:NumberFormatter id="frmt" precision="2"/>
   <mx:Label text="Temperatura en Fahrenheit:" fontSize="24" color="#003366" />
   <mx:TextInput id="fahrenheit" width="200" fontSize="24" />
   <mx:Button label="Convertir" click="convert()" fontSize="24" />
   <mx:Label text="Temperatura en Celsius:" fontSize="24" />
   <mx:Label id="celsius" width="250" fontSize="24" color="#003366" />

</mx:Application>


Nótese que hay un ingreso de datos con la etiqueta "mx:TextInput" y luego se define un botón con "mx:Button" que al ser clickeado se llama a la función de conversión escrita en ActionScript.

 El siguiente programa muestra el uso de botones en Flex, donde claramente se observa que a cada definición de botón se le asocia un ID que servirá para identificarlo posteriormente.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
        <![CDATA[
           import mx.controls.Alert;
            private function buttonClick(event:Event):void
            {
                if(event.target.id == "buno")
                { Alert.show("Se clickeo el boton 1") }
                else
                { Alert.show("Se clickeo el boton 2") }
            }
        ]]>
    </mx:Script>

<mx:HBox width="300" height="300">
     <mx:Button click="buttonClick(event)" label="BOTON 1" id="buno"/>
     <mx:Button click="buttonClick(event)" label="BOTON 2" id="bdos"/>
</mx:HBox>

</mx:Application>


Conociendo Flex II

.

Bueno, como dije el otro día voy a tartar de ir comentando mis rimeros pasos en Flex de Adobe. Antes de ir directamente a códigos ejemplo, que es mi forma natural de aprender, me gustaría tirar algunos datos de la herramienta.

Flex está pensado para el desarrollo de RIA (Rich Internet Applications) y no animaciones como pasa con Flash. Aquí se pueden desarrollar formularios, interfases de usuario de bases de datos,  graficaciones varias y demás tareas propias de la lógica de negocio de una aplicación web tradicional.

Con Flex se programa sobre  archivos MXML donde se dispone llamadas a  componentes, vistas, estados y demás.  Los componentes pueden ser desarrollados por Adobe o ser propios. La programacíón adicional se hace  en Actionscript 3 (un lenguaje bastante fácil de entender y usar). Hay dos formas de correr las aplicaciones, en tiempo de ejecución en un Flex Server o con un SDK. En modo server se suben los archivos .mxml y desde el browser se cargan archivos binarios swf. El SDK se lo  baja del sitio de Adobe y es open source. Para desarrollar se  puede utilizar "Flex Builder" un plugin de  Eclipse orientado a la produccción. Las aplicaciones se ejecutan en el cliente utilizando el  Flash player 9 normal.

Herramientas competidoras o alternativas a Adobe  Flex son Ajax,  Google Web Toolkit,  OpenLaszlo y Microsoft Silverlight.

Conociendo Flex

.

Flex es un framework de Adobe, especializado y optimizado para el diseño de aplicaciones Flash de tipo RIA (Internet Rich Applications). Una aplicación Flex corre autónomamente o en un browser ( extensión swf) si posee el plugin de Flash. Es una evolución del entorno Flash tradicional, más orientado a animaciones y presentaciones, en Flex se realizan desarrollos orientados a la programación web tradicional.

El Framework de Flex  se distribuye de forma gratuita, esto permite que cualquier usuario, una vez instalado el SDK, pueda editar y correr sus programas en cualquier editor de textos. Con Flex, de forma alternativa, se distribuye  de forma paga un  IDE (basado en Eclipse) que lleva por nombre "Flex Builder". 

Un primer ejemplo

Un primer ejemplo (original de Pete Freigtag) permite ilustrar las potencialidades de Flex. Se trata de un utilidad destinada a leer los últimos pots de un blog, vía su canal de RSS. Para ello se diseño la siguiente interfase:

Los elementos utilizados son:

- "Panel" contenedor que habilita un área gráfica de pantalla para disponer otros elementos.

- "DataGrid" control que muestra información en forma de grilla de datos, cada línea corresponde a una entrada en el blog.

- "TextArea" control que habilita un área de texto donde se muestra el contenido de la entrada sobre la cual se está realizando foco.

- "Buttom" Control tipo botón que dispara el evento de lectura del canal RSS remoto.

Código fuente de la aplicación descripta:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute">


<mx:HTTPService id="httpRSS" url="http://ferbor.blogspot.com/rss.xml" resultFormat="object" />

<mx:Panel id="reader" title="Lector de Blogs" width="800" height="450">

  <mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.lastResult.rss.channel.item}"
              click="{body.htmlText=httpRSS.lastResult.rss.channel.item[entries.selectedIndex].description}">

    <mx:columns>
      <mx:Array>

        <mx:DataGridColumn dataField="title" headerText="Titulo" />
        <mx:DataGridColumn dataField="pubDate" headerText="fecha" />

      </mx:Array>
    </mx:columns>
  </mx:DataGrid>

  <mx:TextArea id="body" editable="false" width="{reader.width-15}" height="200" />
  <mx:Button label="Cargar entradas" click="{httpRSS.send()}" />

  
</mx:Panel>
</mx:Application>


Lo primero que se declara en el programa es su definición propiamente dicha, la cual se la hace con la marca  "mx:Application", la cual indica que la aplicación va a ser corrida en un browser. Luego se define el servicio HTTP de donde se van a tomar las últimas entradas del blog, esto se hace con el componente "mx:HTTPService". Ahora se define una grilla, con el control DataGrid, donde se acomodarán las entradas del blog, en una columna el título y en la otra la fecha de creación.  En el área de texto se muestra el contenido de la noticia sobre la cual se hace foco en la grilla de datos, para ello se usa el control "mx:TextArea", finalmente un boton tiene asociado un disparador de la lectura del canal RSS.

Direcciones útiles

API Flex de ESRI

Ejemplos de la API Yahoo Maps y Flex

Ejemplo de mapamundi hecho con flex