Итак, у вашего запроса есть два аспекта
Во-первых, для отображения миниатюр вам придется использовать компонент List с настраиваемым средством визуализации элементов.Настройка списка является самой простой частью:
<s:List id="myList" itemRenderer="org.renderer.EquipmentItem">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>
Вот как может выглядеть средство визуализации элементов для элемента Equipment:
<?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
}
Вам решать, какой метод лучше всего работаетдля вашей ситуации.Первый предполагает, что вы опосредуете представление, которое содержит список (т. Е. Выбранный элемент списка должен быть передан из представления другому объекту), а второй предполагает, что список и детали выбранного элемента обрабатываютсято же представление (т. е. вам просто нужно передать информацию между двумя одноуровневыми компонентами, которые находятся в одном представлении).
Хорошего дня.