Flex Горизонтальный список

Question

Я пытаюсь разместить мои миниатюры в горизонтальном списке в Flex. То, что я до сих пор прекрасно работает, но я хотел бы стилизовать его там, где строка миниатюр при индивидуальном нажатии отображает большее изображение и другую информацию.

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

У меня есть два класса AS3, анализирующих XML; вот погрузчик:

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; 
     }  
    } 
} 

А вот рендер:

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

Итак, есть два аспекта вашей просьбе

First, чтобы отобразить эскизы, вы должны будете использовать компонент «Список» с настраиваемым визуализатором элементов. Настройка списка самая легкая часть:

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

Вот что средства визуализации элемента, для элемента оборудования может выглядеть следующим образом:

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

Это работает, передавая каждый объект поставщика данных списка для экземпляр средства визуализации элементов, через свойство data.

Это должно решить первую часть вашей проблемы. Теперь, чтобы получить щелкнутый элемент и его рендеринг, вам нужно поймать событие, отправленное при изменении выбранного элемента списка. Есть два основных способа сделать это:

1) диспетчерская пользовательское событие с выбранным элементом в списке годов, когда изменения выбора:

Чтобы сделать это, сначала установить обработчик изменения в списке:

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

затем пользовательский класс событий может выглядеть следующим образом:

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; 
    } 
} 

Вы можете слушать для этого события, непосредственно в представлении, которое содержит список.

2) Второе решение для прослушивания событий щелчка, пересылаемых в списке, и получить его выбранный элемент, чтобы отобразить информацию о нем:

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 
} 

Это до вас, чтобы решить, какой метод лучше всего работает для ваша ситуация. Первый предполагает, что вы опосредуете представление, которое содержит список (т. Е. Выбранный элемент списка должен быть передан из представления на какой-либо другой объект), а второй предполагает, что список и данные выбранного элемента обрабатываются посредством тот же вид (т. е. вам просто нужно передать информацию между двумя родственными компонентами, которые находятся в одном представлении).

Отличный день.