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> 

我有兩個解析XML的AS3類;這裏是裝載機：

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

所以，有兩個方面對您的請求

首先，顯示縮略圖，你將不得不使用一個帶有自定義項目渲染器的List組件。建立名單是最容易的部分：

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

它是由你來決定哪種方法最適合你的情況。第一個假設你調解包含列表的視圖（即列表的選定項目需要從視圖傳遞到另一個對象），第二個假設列表和選定的項目細節由相同的視圖（即你只需要在同一個視圖中的兩個兄弟組件之間傳遞信息）。

祝您有美好的一天。