Galería de imágenes en Flex

Por: Skatos + 28.08.2007

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

flex

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario