在Flex中使用XML完成创建时填充TileList

2023-07-03 21:18:04 184

TileList是一组元素的一部分，允许您以特定的顺序和方向添加组件。TileList控制显示为图块的许多项目的显示，因此最适合将图像显示为缩略图。

有很多方法可以做到这一点，但是Flex站点上的所有示例似乎都不是非常有用或没有得到很好的解释。我想要做的是创建一个TileList，以某种方式显示图块，并使用XML文件用图像填充项目列表，每个图像都具有与之关联的标签。

首先要做的是创建TileList元素。

这包含三个重要的属性，我已经在这里进行了描述。

itemRenderer=“CustomItemRenderer”
此属性用于告诉TileList如何显示列表中的每个元素。CustomItemRenderer引用一个CustomItemRenderer.mxml包含以下内容的文件：

这告诉TileList每个项目都应保存在VBox元素中，该元素包含一个Image元素以包含该图像和一个Label元素，其中Label包含该图像的标签。Image和Label元素的source和text属性分别用于告诉元素什么数据将到达何处。

dataProvider=“{theImages}”
这是对ArrayCollection元素的引用，它提供了一种机制来访问TileList元素内的数据。该ArrayCollection元素如下所示，需要作为Application元素的直接子元素放置。

creationComplete=“initList();”
这是一个事件调用，它使我们可以在将TileList添加到应用程序之后立即对其进行填充。该initList()函数调用这里的一切都放在一起。

下一步是添加对XML文件的引用，该引用包含我们要用来填充TileList的信息。将其放置为Application元素的子级。

这引用了一个名为items.xml的文件，该文件具有以下内容。



 
    Image 1
    one.png
 
 
    Image 2
    two.png
 	
 
    Image 3
    three.png
 	
 
    Image 4
    four.png

最后，我们准备编写一些代码来使此功能正常运行。我们需要做的第一件事是创建一个小的帮助器类，该类将使我们能够将XML转换为可用格式。创建一个名为的文件ItemListObject.as，并将以下内容放入其中。

package
{
 [Bindable]
 public class ItemListObject extends Object
 {
  public function ItemListObject() {
   super();
  }
 
  public var title:String = new String();
  public var strThumbnail:String = new String();
 }
}

接下来，您可以创建Script元素，其中包含两个主要部分。第一个是使ItemListObject（来自ItemListObject.as）文件可用于其他函数的命令，第二个是对该initList()函数的所有重要调用。


 import ItemListObject;
 
 public function initList():void
 {
  for each ( var node:Object initems.image) {
   var temp:ItemListObject = new ItemListObject();
  temp.strThumbnail= node.strThumbnail;
  temp.title= node.title;
   theImages.addItem(temp);
  }
 }

该initList()函数通过获取项目XML文件并将其转换为数组来工作。对于团队项目，它将创建一个ItemListObject并添加Image和Label部分，然后再将其添加到TileList数据提供程序中。如果一切正常，则应产生以下结果。

在Flex中使用XML完成创建时填充TileList

热门推荐

随机推荐