| ThinkDigit Home |
|
||||||||||||
|
|||||||||||||
|
|||||||||||||
|
||||||||||||
|
STEP 5: Now we add the list. Inside the <s:Application> – if you created a web project – or the <s:WindowedApplication> – if you created a Desktop application – add the List element.
<s:List id="imagesList" dataProvider="{index}" width="100%" height="100%" >
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
This creates a list inside our application which has an id / name imagesList, and fills up to take 100% of the width and 100% of the height of the application. The <s:TileLayout /> tag inside the <s:layout> tag specifies that the list will display content in a tiled layout, as rows and columns of images.
The 'dataProvider="{index}" ' bit is telling the list to use the “index” object we defined earlier as the source for populating this list. The list will automatically create one list item for each image in the index. It will automatically handle displaying and scrolling in the list. Right now however the list is not geared to handle images, it will simply display informaiton about each image as text.
STEP 6: What we need to add to this list, is an item renderer. As the name suggests, an item renderer defines how each item in the list is to be rendered / displayed. You can create complicated structures with multiple controls and set it as an itemrenderer for a list. You could for example actually create an image editor, and put it as an item renderer to have an editable image gallery! We will however do something much simpler. We will add the following inside the list declaraiton:
<s:itemRenderer>
<fx:Component>
<mx:Image source="{data.itemThumbnailImage}" />
</fx:Component>
</s:itemRenderer>
Usually you will declare an item renderer in a separate file and provide that to the list, however this example is simple enough for an inline declaration. We are defining the Image component as the item renderer for the list.
The list passes the data associated with each list item, i.e. the contents of the <image> tag to the each item in the list as the “data” object. The image to be used for each list item is then accessible through data.itemThumbnailImage. This property as you can see from the XML format of the index file, has the releative path to the thumbnail of the image.
After adding this, you will notice that you can already see a gallery by running the project!
Right now though, you cannot view any images in their full-sized versions, which seriously hampers the usability of the gallery.
|
|
| xml, adobe, adobe flash, flash, picasa, flex, flash builder, actionscript, flash builder 4 |
