<?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>