Galeria de imagenes - codigo fuente

[Sergestux]

Hola colegas del foro, veran estoy haciendo una galeria de productos, que todavia no tengo los productos definitivos, pero mientras me los pasan estoy realizando una con datos de prueba.

He subido la galeria a un hosting gratuito, aunque la galeria ya es funcional me hace falta varios detalles, como por ejemplo remarcar la categoria y el producto que se estan mostrando, varios detallitos que me gustaria me ayudaran a completar entre todos a manera de aprendizaje y que sirva de ayuda para los que se estan inicando en esto de flex.
La galeria puede verse aca, y estos son los archivos del proyecto:

http://sergestux.hostei.com/galeria/estilos.css
http://sergestux.hostei.com/galeria/imagenes/
http://sergestux.hostei.com/galeria/catalogo.xml

Las imagenes y el archivo xml las tome de un ejemplo de adobe.
Este es el codigo de la galeria al momento:

Código xml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" borderColor="#FBFDFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
     creationComplete="Iniciar();">
<mx:HTTPService id="XMLCat" url="catalogo.xml" resultFormat="e4x" result="CargarCatalogo();"/>
    <mx:Blur id="blurImage" duration="1000" 
        blurXFrom="0.0" blurXTo="10.0" 
        blurYFrom="0.0" blurYTo="10.0"/>
    <mx:Blur id="unblurImage" duration="1000" 
        blurXFrom="10.0" blurXTo="0.0" 
        blurYFrom="10.0" blurYTo="0.0"/>
    <mx:WipeDown id="wipeOut" duration="1000"/>
    <mx:WipeDown id="wipeIn" duration="1000"/>    
       
<mx:Script>
    <![CDATA[
        //import mx.collections.XMLListCollection;
        import flash.events.KeyboardEvent;    //Para la cja de busqueda
        import mx.controls.Alert;
        private var Categoria:String;
 
        //Inicializo la aplicacion
        private function Iniciar():void
        {
            XMLCat.send();            //Consulto el catalogo de productos
        }
        
        //Solo se ejecuta una vez al inicio
        private function CargarCatalogo():void
        {
            myrep.dataProvider=XMLCat.lastResult.Categoria;        //Cargo todos los productos            
            myrep2.dataProvider=XMLCat.lastResult.Categoria.product;    //Cargo todos los productos
            Categoria='0';    //Todos los productos al inicio
            //Aca se podria cargar algun producto relevante por default (tendria que estar especificado en el xml)
        }    
 
        //Se activa cuando se presiona sobre algun producto en especifico            
        private function VerDetalle(Id:String):void
        {    
            Imagen.showBusyCursor=true;    //Por si tarda demasiado la carga de la imagen
            Imagen.visible=false;        //Para activar el efecto                
            txtNombre.text=XMLCat.lastResult.Categoria.product.(@productId==Id).name;
            txtDescripcion.text=XMLCat.lastResult.Categoria.product.(@productId==Id).description;
            Imagen.source=XMLCat.lastResult.Categoria.product.(@productId==Id).image;            
            Imagen.showBusyCursor=false;
            Imagen.visible=true;     //Para activar el efecto
            //Aca me hace indicar de alguna forma que este producto es el que se esta visualizando en el panel principal
        }
        
        //Se activa cuando se presiona sobre alguna categoria en especifica
        private function VerCategoria(Id:String, Item:int):void
        {    
            if(Id=='0')    //Si son todos los productos
            {
                myrep2.dataProvider=XMLCat.lastResult.Categoria.product;    //Se carga todo el catalogo
                PanelBuscar.title="Todos";
            }
            else
            {
                myrep2.dataProvider=XMLCat.lastResult.Categoria.(@id==Id).product;    //Se carga la categoria especifica
                PanelBuscar.title=XMLCat.lastResult.Categoria.(@id==Id).@descripcion;    //La descripcion de la categoria seleccionada
            }
            Categoria=Id.toString();
        //Aca se podria cargar algun producto relevante de esta categoria por default (tendria que estar especificado en el xml)
        //Aca me hace falta indicar de alguna forma que alguna categoria es la que se esta visualizando por ahora                        
        }
 
        //Se activa cuando se presiona una tecla en la caja de busqueda
        private function TeclaPres(eventObj:KeyboardEvent):void 
        {
            //if (eventObj.keyCode == 13)    //Para restringir que unicamente al presionar enter se haga la busqueda            
                if (TxtBuscar.text.length > 0)    //Solo cuando haya algo que buscar
                    Buscar(TxtBuscar.text)    
        }
        
        //Busca un producto en los actuales, regresa la cantidad de productos que coinciden
        private function Buscar(Producto:String):int
        {
            myrep2.dataProvider=XMLCat.lastResult.Categoria.product.(name.toString().toUpperCase().search(Producto.toUpperCase()) >= 0);        //Convierto ambos a mayuscula y busco
            return myrep2.dataProvider.length;
        }
 
        //Dispatched after all the subcomponents of a repeater are created
        //Se activa cada que se cambia el dataprovider del repeater de productos        
        private function UpdateCantProd():void
        {
            LblProductos.text=String(myrep2.dataProvider.length);    //Se actualiza la etiqueta de cantidad de productos
        }        
        
    ]]>
</mx:Script>  
 
<mx:Canvas width="100%" height="100%">
 
<mx:HDividedBox width="100%" height="100%">
    <mx:Panel width="100%" height="100%" title="Producto" horizontalAlign="center">
        <mx:VBox width="100%" height="100%" horizontalAlign="center">    
            <mx:Tile width="100%" direction="horizontal" horizontalAlign="center">
                <mx:LinkButton label="Todos" click="VerCategoria('0',0)"/>            
                <mx:Repeater id="myrep">
                    <mx:LinkButton id="BtnCategoria" label="{myrep.currentItem.@descripcion}"
                        click="VerCategoria(event.currentTarget.getRepeaterItem().@id, 1);"/>
                </mx:Repeater>                    
            </mx:Tile>
            <mx:Label id="txtNombre"/>
            <mx:Image id="Imagen" horizontalAlign="center" showEffect="{wipeIn}"/>            
            <mx:Text id="txtDescripcion" width="500"/>
        </mx:VBox>
    </mx:Panel>
    <mx:Panel id="PanelBuscar" title="Todos" width="200" height="100%">                
            <mx:VBox width="100%" height="100%">
                <mx:VBox  width="100%" height="59" borderStyle="solid" cornerRadius="6" verticalAlign="middle" horizontalAlign="center">
                    <mx:HBox width="100%">
                            <mx:Label  text="Buscar" />
                            <mx:TextInput id="TxtBuscar" keyUp="TeclaPres(event)" 
                                maxChars="30" restrict="A-Z a-z 0-9" width="138" />
                    </mx:HBox>
                    <mx:HBox width="100%">
                        <mx:Label text="Productos:" fontWeight="bold" color="#05004C"/>
                        <mx:Label text="0" id="LblProductos" color="#05004C" fontStyle="italic"/>
                    </mx:HBox>
                </mx:VBox>
                <mx:VBox width="100%" height="450">
                    <mx:Repeater id="myrep2" repeatEnd="UpdateCantProd();">
                        <mx:VBox width="100%" styleName="VBoxFoto" horizontalAlign="center">
                            <mx:LinkButton label="{myrep2.currentItem..name.text()}"                                
                                click="VerDetalle(event.currentTarget.getRepeaterItem()..@productId)"                                
                                />
                            <mx:Image horizontalAlign="center" width="50" height="50" source="{myrep2.currentItem..image.text()}"
                                click="VerDetalle(event.currentTarget.getRepeaterItem()..@productId)"
                                 mouseDownEffect="{blurImage}" mouseUpEffect="{unblurImage}"                                                                
                                />
                        </mx:VBox>
                    </mx:Repeater>
                </mx:VBox>
            </mx:VBox>
    </mx:Panel>
</mx:HDividedBox>
</mx:Canvas>
<mx:Style source="estilos.css"/>
</mx:Application>
 

[ramoncito]

se ve bastante bien....

un cambio que yo le haría: No puedes aplicar el efecto blur cuando pasas sobre el teléfono...

[pepebuitron]

Pregunto donde esta la galeria ???

[Sergestux]

Iniciado por ramoncito

un cambio que yo le haría: No puedes aplicar el efecto blur cuando pasas sobre el teléfono...

Si se le puede aplicar ese efecto, pero estoy tratando de dejarla completamente simple para que sea mas entendible.

Iniciado por pepebuitron

Pregunto donde esta la galeria ???

La galeria como dije al principio puedes verla aca sergestux.hostei.com/galeria/ ahora que si a lo que te refieres es al codigo fuente, el unico que no se puede ver es el de flex, por eso lo puse tambien en el post, los demas codigos son un archivo css (no necesario), un archivo xml y las imagenes.

El ejemplo de adobe de donde saque el catalogo xml y las imagenes es este

Creo que si voy a subir el codigo fuente algun lado.

[Sergestux]

Ya le agregue la opcion de ver le codigo fuente, si le dan click con el boton derecho luego en view source pueden ver el codigo.

Voy a cambiar los objetos donde muestro las imagenes por uno que se quede resaltado cuando doy click en alguna opcion, en la parte de categorias y en la del producto mismo, para no tener que programarlo. La pregunta es cual utilizo?