Flex 的HorizontalList创建简单的图片展示

http://blog.minidx.com/2008/03/09/558.html
当用户点击了HorizontalList控件中的缩小图片时，如何显示其完整的图片的问题。
解决方案是将缩小图片和原始图片的URL作为提供的数据，绑定在HorizontalList控件的selectedItem属性中。
下面是具体的例子以及源代码：
main.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4. layout="vertical"
5. verticalAlign="top"
6. backgroundColor="white">
7.
8. <mx:Array id="arr">
9. <mx:Object label="Flex"
10. thumbnailImage="assets/fx_appicon-tn.gif"
11. fullImage="assets/fx_appicon.jpg" />
12. <mx:Object label="Flash"
13. thumbnailImage="assets/fl_appicon-tn.gif"
14. fullImage="assets/fl_appicon.jpg" />
15. <mx:Object label="Illustrator"
16. thumbnailImage="assets/ai_appicon-tn.gif"
17. fullImage="assets/ai_appicon.jpg" />
18. <mx:Object label="Dreamweaver"
19. thumbnailImage="assets/dw_appicon-tn.gif"
20. fullImage="assets/dw_appicon.jpg" />
21. <mx:Object label="ColdFusion"
22. thumbnailImage="assets/cf_appicon-tn.gif"
23. fullImage="assets/cf_appicon.jpg" />
24. <mx:Object label="Flash Player"
25. thumbnailImage="assets/fl_player_appicon-tn.gif"
26. fullImage="assets/fl_player_appicon.jpg" />
27. <mx:Object label="Fireworks"
28. thumbnailImage="assets/fw_appicon-tn.gif"
29. fullImage="assets/fw_appicon.jpg" />
30. <mx:Object label="Lightroom"
31. thumbnailImage="assets/lr_appicon-tn.gif"
32. fullImage="assets/lr_appicon.jpg" />
33. <mx:Object label="Photoshop"
34. thumbnailImage="assets/ps_appicon-tn.gif"
35. fullImage="assets/ps_appicon.jpg" />
36. </mx:Array>
37.
38. <mx:Panel title="{horizontalList.selectedItem.label}"
39. height="100%"
40. horizontalAlign="center">
41. <mx:Image id="img"
42. source="{horizontalList.selectedItem.fullImage}"
43. maintainAspectRatio="true"
44. horizontalAlign="center"
45. width="{horizontalList.width}"
46. height="100%" />
47. <mx:ControlBar horizontalAlign="center">
48. <mx:HorizontalList id="horizontalList"
49. labelField="label"
50. iconField="thumbnailImage"
51. dataProvider="{arr}"
52. itemRenderer="CustomItemRenderer"
53. columnCount="4"
54. columnWidth="125"
55. rowCount="1"
56. rowHeight="100"
57. horizontalScrollPolicy="on" />
58. </mx:ControlBar>
59. </mx:Panel>
60.
61. </mx:Application>
CustomItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image- allery-with-the-flex-horizontallist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.thumbnailImage}" />
<mx:Label text="{data.label}" />
</mx:VBox>