xml - whatwg - html spec

Lista horizontal de Flex

Question

Estoy tratando de colocar mis miniaturas en una lista horizontal en Flex. Lo que tengo hasta ahora funciona bien, pero me gustaría estilizarlo donde la fila de miniaturas, cuando se hace clic individualmente, muestra la imagen más grande y otra información.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="main()" backgroundColor="#FFFFFF">
<fx:Style source="AgileWidget.css"/>
<s:states>
<s:State name="State1"/>
<s:State name="thumbViewer"/>
</s:states>
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.events.ListEvent;
import scripts.Equipment;
import scripts.EquipmentXmlLoad;
private var equipAC:Array = new Array();
private var equipXL:EquipmentXmlLoad;
private var myEquipment:ArrayList;
private function main():void{
this.equipXL = new EquipmentXmlLoad("content/labEquipment.xml");
equipXL.addEventListener("XmlLoadedCompleteEvent",xmlCompleted);
this.equipCbo.addEventListener(ListEvent.CHANGE, cbChangeEvent);
}
private function xmlCompleted(e:Event):void{
this.equipAC = this.equipXL.returnArray();
myEquipment = new ArrayList(equipAC);
this.equipCbo.dataProvider = myEquipment;
}
private function cbChangeEvent (evt:Event):void{
var EquipmentClicked:Equipment=Equipment(evt.currentTarget.selectedItem);
this.titleLbl.text = EquipmentClicked.title;
this.descripLbl.text = EquipmentClicked.description;
this.curImg.source = EquipmentClicked.imageThumbnailURL;
this.lgImg.source = EquipmentClicked.imageURL;
this.replaceLbl.text = EquipmentClicked.replacementCost;
this.categoryLbl.text = EquipmentClicked.equipmentCategory;
this.yrLbl.text = EquipmentClicked.yearOfPurchase;
this.mtDayLbl.text = EquipmentClicked.maintenanceDay;
this.mtCostLbl.text = EquipmentClicked.maintenanceCost;
this.avgLifeLbl.text = EquipmentClicked.averageHourlyLife;
}
public function addListListener():void{
myList.addEventListener(MouseEvent.CLICK, function():void
{
updateItemInfo(myList.selectedItem as Equipment);
});
}
public function updateItemInfo(equipmentItem:Equipment):void
{
}
]]>
</fx:Script>
<s:List id="myList" itemRenderer="org.renderer.EquipmentItem"
width="400"
height="200"
horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>
<s:ComboBox id="equipCbo" x="385" y="11" width="364" contentBackgroundColor="#FFFFFF"/>
<s:Label id="titleLbl" x="521" y="294" text="Select Equipment"/>
<s:Label id="descripLbl" x="339" y="403" width="465" height="89"/>
<s:Image id="curImg" x="757" y="10" width="47" height="42"/>
<s:Image id="lgImg" x="480" y="84" width="175" height="187"/>
<s:Label id="replaceLbl" x="700" y="328" text="Replacement Cost"/>
<s:Label id="categoryLbl" x="339" y="328" text="Category"/>
<s:Label id="yrLbl" x="339" y="348" text="Year Purchased"/>
<s:Label id="mtDayLbl" x="706" y="348" text="Maintainence Day"/>
<s:Label id="mtCostLbl" x="700" y="368" text="Maintainence Cost"/>
<s:Label id="avgLifeLbl" x="339" y="368" text="Average Life"/>
</s:Application>

Tengo dos clases de AS3 analizando el XML; aquí está el cargador:

package scripts {
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class EquipmentXmlLoad extends Sprite{
private var docXML:XML;
private var urlLoader:URLLoader;
public function EquipmentXmlLoad( XMLFileName:String ) {
this.urlLoader = new URLLoader;
this.urlLoader.addEventListener( Event.COMPLETE, completeListener );
this.urlLoader.load( new URLRequest( XMLFileName ) );
}
public function completeListener( e:Event ) : void {
this.docXML = new XML( this.urlLoader.data );
this.dispatchEvent( new Event( "XmlLoadedCompleteEvent" ) );
}
public function returnArray() : Array{
var tempArray:Array = new Array();
for( var i:int = 0; i < this.docXML.equipment.length(); i++ ){
var tempEquip:Equipment = new Equipment();
tempEquip.title = this.docXML.equipment[ i ].title;
tempEquip.imageThumbnailURL = this.docXML.equipment[ i ].imageThumbnailURL;
tempEquip.imageURL = this.docXML.equipment[ i ].imageURL;
tempEquip.description = this.docXML.equipment[ i ].description;
tempEquip.replacementCost = this.docXML.equipment[ i ].replacementCost;
tempEquip.equipmentCategory = this.docXML.equipment[ i ].equipmentCategory;
tempEquip.yearOfPurchase = this.docXML.equipment[ i ].yearOfPurchase;
tempEquip.maintenanceDay = this.docXML.equipment[ i ].maintenanceDay;
tempEquip.maintenanceCost = this.docXML.equipment[ i ].maintenanceCost;
tempEquip.averageHourlyLife = this.docXML.equipment[ i ].averageHourlyLife;
tempArray.push( tempEquip );
}
return tempArray;
}
}
}

Y aquí está el renderizador:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Image source="{data.imageThumbnailURL}" width="50" height="50" />
<s:Label text="{data.title}" width="120" textAlign="center"/>
</s:ItemRenderer>

Answer 1

Por lo tanto, hay dos aspectos en su solicitud

En primer lugar, para visualizar las miniaturas, deberá usar un componente List, con un renderizador de elementos personalizado. Configurar la lista es la parte más fácil:

<s:List id="myList" itemRenderer="org.renderer.EquipmentItem">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>

A continuación, se muestra el aspecto del elemento que se muestra para un artículo de Equipo:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Image source="{data.imageThumbnailURL}" />
</s:ItemRenderer>

Esto funciona pasando cada objeto en el proveedor de datos de la lista a una instancia del renderizador de elementos, a través de la propiedad de data .

Esto debería resolver la primera parte de tu problema. Ahora, para obtener el elemento cliqueado y renderizarlo, necesita capturar el evento enviado cuando se cambia el elemento seleccionado de la lista. Básicamente hay dos formas de hacer esto:

1) Despachar un evento personalizado con el elemento seleccionado de la lista, cuando la selección cambie:

Para hacer esto, primero configure un controlador de cambio en la lista:

change="dispatchEvent(new EquipmentEvent(EquipmentEvent.ITEM_CLICKED, myList.selectedItem as Equipment))"

Entonces, la clase de evento personalizado podría verse así:

public class EquipmentEvent extends Event
{
static public const ITEM_CLICKED:String = "itemClicked";
public var equipmentItem:Equipment;
public function EquipmentEvent(type:String, item:Equipment, bubbles:Boolean = false, cancelable:Boolean = false)
{
super(type, bubbles, cancelable);
this.equipmentItem = item;
}
}

Luego puede escuchar ese evento directamente en la vista que contiene la lista.

2) La segunda solución es escuchar eventos de clics enviados por la lista y obtener su elemento seleccionado para mostrar la información sobre él:

public function addListListener():void
{
myList.addEventListener(MouseEvent.CLICK, function():void
{
updateItemInfo(myList.selectedItem as Equipment);
});
}
public function updateItemInfo(equipmentItem:Equipement):void
{
// item info display logic goes here
// all the info about the selected item is in the equipmentItem parameter
}

Depende de usted decidir qué método funciona mejor para su situación. El primero asume que media la vista que contiene la lista (es decir, el elemento seleccionado de la lista debe pasar, desde la vista, a algún otro objeto), y el segundo asume que la lista y los detalles del elemento seleccionado son manejados por la misma vista (es decir, solo necesita pasar información entre dos componentes hermanos, que están en la misma vista).

Que tengas un gran día.