Flex的水平列表

我想我的缩略图放到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>

--------------解决方案-------------

因此,有两个方面对您的请求

首先,要显示缩略图,你将不得不使用一个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
}

这是由你来决定哪种方法最适合你的情况。 第一个假设你调解包含列表(即列表中的选择的项目需要传递,从视图,一些其他对象)的观点,和第二个假定列表和所选择的项目的详细信息由处理同样的观点(即你只需要两个兄弟组成部分,这是在同一个视图之间传递信息)。

祝你有美好的一天。

分类:XML 时间:2015-03-15 人气:3
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.695 (s). 10 q(s)