Galería de imágenes en Flex

Esta es una simple galería en Flex que se carga desde xml. Para los novatos como yo, es un lindo aprendizaje.
Usé FlashDevelop 3 Beta 2 y el Flex SDK Open Source para compilar esto.
Primero el MXML:

Código :

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

Cuando se termina de crear la aplicación se llama al método send del conf que es el id del siguiente objeto httpservice que usamos para cargar el xml.

Código :

<mx:HTTPService id="conf" url="config.xml" useProxy="false" result="httpResult(event)"/>

Cuando haya cargado satisfactoriamente, el xml pide un resultado y llama a httpResult con el parámetro event que es un indicador del evento que tuvo lugar durante la llamada

Código :

<mx:Style source="estilos.css"/>

Incluímos la hoja de estilos para estilizar cada componente

Código :

<mx:Parallel id="efecto" target="{imago}">

Creamos una composición de efectos, vamos a usar los siguientes Blur y Fade en paralelo:

Código :

<mx:Blur id="desenfoque" blurXFrom="0" blurXTo="0" blurYFrom="50" blurYTo="0"/>
<mx:Fade id="entrar" target="{imago}" alphaFrom="0" alphaTo="1" duration="700"/>
</mx:Parallel>

Algo de código, vamos por partes como decía mi amigo Jack:

Código :

<mx:Script>
         <![CDATA[
          import mx.rpc.events.ResultEvent;
          import mx.controls.Alert;
          import mx.effects.Fade;
          import mx.effects.easing.Bounce;

Importamos cuatro clases para manejar el ResultEvent del HTTPService, un cuadro de alerta, para desvanecer y para el movimiento de rebote.

Código :

          private var desvanecer:Fade = new Fade();

hacemos un objeto efecto Fade

Código :

          private function httpResult(event:ResultEvent):void
          {
            gals.selectedIndex = 0;
            dg.selectedIndex = 0;
          }

Al inicio está seleccionada la primera imagen en el datagrid:

Código :

          private function prueba():void
          {
            dg.selectedIndex = 0;
            //Alert.show("hola", "Alerta");
          }
         ]]>
     </mx:Script>

Listo con el script, no hace falta más que para eso en este caso específico.

Código :

   <mx:Panel title="{conf.lastResult.encabezado}" top="10" left="20" right="20" width="500" height="400" layout="absolute" horizontalAlign="center">

Recuerdan que el id del httpService era conf? Bueno, en el resultado, que es un xml, buscamos el tag <encabezado> y lo ponemos como título del panel.

Código :

      <mx:Image id="imago" dataChange="efecto.end();efecto.play();" data="{gals.selectedItem.carpeta}/{dg.selectedItem.fuente}" horizontalAlign="center" left="20" right="210" top="20" bottom="20"/>

Bloque de la imagen, cuando cambie el origen de datos, primero finaliza el efecto Fade Blur por si estaba a la mitad de uno y luego lo arranca de nuevo. El dato lo obtiene primero: tomando como carpeta la etiqueta <carpeta> dentro del item seleccionado en la datagrid de galerías, (ya verán más abajo), y el nombre de archivo, del item seleccionado que se encuentra dentro de la galería, que lo cargamos en otra data grid.

Código :

      <mx:TextArea id="ta" text="{dg.selectedItem.describe}" textAlign="left" height="100" right="20" left="300" top="20" />

Una simple descripción de la imagen, miren que se toma del item seleccionado, de su etiqueta <describe>

Código :

      <mx:DataGrid id="gals" itemClick="prueba()" dataProvider="{conf.lastResult.galerias.galeria}" height="70" top="130" left="300" right="20">

Aquí se pone áspero, esta es la DataGrid, un componente del FlexSDK, que funciona como repositorio de datos, aquí vamos a almacenar las galerías que tengamos, no las imágenes que contenga. Cuando seleccionemos una, nos carga en la DataGrid de más abajo las imágenes dentro de esa galería y pone la primera imagen, según la función prueba().
Lo siguiente es sencillo, carga el título general "Seleccione una galería" (ya verán en el xml) como título de este bloque DataGrid y el título de cada galería en las filas (por más que dice columnas:)

Código :

         <mx:columns>
            <mx:DataGridColumn headerText="{conf.lastResult.galerias.titulo}" dataField="titulo"/>
         </mx:columns>
      </mx:DataGrid>

En este siguiente DataGrid es donde almacenamos las imágenes de cada galería, pueden ver que se carga como título del bloque DataGrid el título de la galería y en cada fila los nombres de imagen

Código :

      <mx:DataGrid id="dg" dataProvider="{gals.selectedItem.imagen}" height="120" top="210" left="300" right="20">
         <mx:columns>
            <mx:DataGridColumn headerText="{gals.selectedItem.titulo}" dataField="titulo"/>
         </mx:columns>
      </mx:DataGrid>
   </mx:Panel>
</mx:Application>

Los estilos que van en estilos.css, no hace falta explicar estos, son bastante autoexplicables:

Código :

Panel {
   borderColor: #663300;
   borderAlpha: 0.6;
   backgroundAlpha: 0.45;
   borderThicknessLeft: 0;
   borderThicknessTop: 0;
   borderThicknessBottom: 10;
   borderThicknessRight: 0;
   roundedBottomCorners: true;
   cornerRadius: 6;
   headerHeight: 20;
   dropShadowEnabled: false;
   titleStyleName: "mypanelTitle";
}

.mypanelTitle {
   letterSpacing: 1;
   color: #00ccff;
   textAlign: left;
   fontFamily: "Trebuchet MS";
   fontSize: 12;
   fontWeight: bold;
}

DataGrid {
   headerColors: #663300, #663300;
   borderThickness: 1;
   headerStyleName: "mydataGridHeaderStyle";
   dropShadowEnabled: true;
   backgroundAlpha: 0.5;
}

.mydataGridHeaderStyle {
   color: #00ccff;
   fontFamily: "Trebuchet MS";
   fontSize: 12;
   fontWeight: bold;
}

TextArea {
   borderStyle: outset;
   dropShadowEnabled: true;
}

Esta parte es la única que voy a comentar, y es porque aquí pueden ver que cargué un fondo hecho con Inkscape, que tira lindos y compatibles svg, pero también pueden crear un swf a modo de librería de fondos y marcarlos en los fotogramas clave, por ejemplo, este es el que se distribuye con la aplicación flex libre Adobe Flex Style Explorer. Si no tienen un svg a mano quitan la línea. También sirven imágenes como jpgs pero usé un svg porque se escala bien.

Código :

Application {
   backgroundImage: Embed(source="fondo.svg")/*Embed(source="fondos.swf#bluestripe")*/;
   backgroundSize: "100%";
}

Y el esquema de xml para cargar las imágenes que se llama config.xml
El bloque galería contendrá las imagenes, y el galerías las galerías donde están cada imagen, bah, se entiende...

Código :

<?xml version="1.0" ?>
<encabezado>SKATOS Gallery</encabezado>
<galerias>
   <titulo>Seleccione una galeria</titulo>
   <galeria>
      <titulo>Galeria de Plantas</titulo>
      <carpeta>plantas</carpeta>
      <imagen>
         <titulo>Spring</titulo>
         <fuente>lapacho2.jpg</fuente>
         <describe>Afiche de primavera sobre los lapachos.</describe>
      </imagen>
      <imagen>
         <titulo>Summer</titulo>
         <fuente>bambooLueg.jpg</fuente>
         <describe>Bosque de bamboo al atardecer.</describe>
      </imagen>
      <imagen>
         <titulo>Autumn</titulo>
         <fuente>arboles.jpg</fuente>
         <describe>Pintura de unos arboles reflejados en un lago.</describe>
      </imagen>
      <imagen>
         <titulo>Where butterflies fly...</titulo>
         <fuente>LapachoMariposas.jpg</fuente>
         <describe>Lapacho con mariposas en las horas postreras del dia.</describe>
      </imagen>
      <imagen>
         <titulo>Creciendo</titulo>
         <fuente>pollito5.jpg</fuente>
         <describe>Toma de la animacion de un pollito del corto Creciendo.</describe>
      </imagen>
   </galeria>
   <galeria>
      <titulo>Infografia e historia</titulo>
      <carpeta>historia</carpeta>
      <imagen>
         <titulo>Imagen</titulo>
         <fuente>imagen.jpg</fuente>
         <describe>Una foto.</describe>
      </imagen>
      <imagen>
         <titulo>Hindenburg</titulo>
         <fuente>infografia.jpg</fuente>
         <describe>Infografia sobre la tragedia del Hindenburg.</describe>
      </imagen>
      <imagen>
         <titulo>Wall·E</titulo>
         <fuente>January-Tease-2-thumb.jpg</fuente>
         <describe>Imagen promocional de Wall·e.</describe>
      </imagen>
      <imagen>
         <titulo>Emir Kusturica anime</titulo>
         <fuente>pajarraco.jpg</fuente>
         <describe>Afiche para Emir Kusturica.</describe>
      </imagen>
   </galeria>
</galerias>

Como ven en este xml las imágenes se pueden organizar en carpetas.
El link de las releases de FlashDevelop es éste:
FlashDevelop Releases
Y builds más a menudo
Builds

Descarga los archivos del tip
Saludos

 

Tweet