Adding title and description
Updated: Jul 9, 2010
Views: 1049
Description: This tutorial will show you how to add a title and/or a description which will be displayed when an item is selected.
1. Drag an instance of the Thumbnail Grid component onto the Stage.
2. Create an XML file and add 2 additional attributes: title and description. You can name these additional attributes whatever you like. For example, you could name them "data1" and "data2".
<?xml version="1.0" encoding="utf-8"?>
<images>
<item>
<source>images/image1.jpg</source>
<title>Image 1</title>
<description>This is the 1st image.</description>
</item>
<item>
<source>images/image2.jpg</source>
<title>Image 3</title>
<description>This is the 2nd image.</description>
</item>
<item>
<source>images/image3.jpg</source>
<title>Image 3</title>
<description>This is the 3rd image.</description>
</item>
<item>
<source>images/image4.jpg</source>
<title>Image 4</title>
<description>This is the 4th image.</description>
</item>
<item>
<source>images/image5.jpg</source>
<title>Image 5</title>
<description>This is the 5th image.</description>
</item>
</images>
<images>
<item>
<source>images/image1.jpg</source>
<title>Image 1</title>
<description>This is the 1st image.</description>
</item>
<item>
<source>images/image2.jpg</source>
<title>Image 3</title>
<description>This is the 2nd image.</description>
</item>
<item>
<source>images/image3.jpg</source>
<title>Image 3</title>
<description>This is the 3rd image.</description>
</item>
<item>
<source>images/image4.jpg</source>
<title>Image 4</title>
<description>This is the 4th image.</description>
</item>
<item>
<source>images/image5.jpg</source>
<title>Image 5</title>
<description>This is the 5th image.</description>
</item>
</images>
3. Create 2 text fields which will contain the title and the description. Name them titleField and descriptionField.
4. Add the following code:
import com.afcomponents.events.GridEvent;
myGrid.addEventListener(GridEvent.ITEM_SELECTED, itemSelectedHandler);
function itemSelectedHandler(event:GridEvent):void
{
titleField.text = "Title: " + event.data.title;
descriptionField.text = "Description: " + event.data.description;
}
myGrid.addEventListener(GridEvent.ITEM_SELECTED, itemSelectedHandler);
function itemSelectedHandler(event:GridEvent):void
{
titleField.text = "Title: " + event.data.title;
descriptionField.text = "Description: " + event.data.description;
}
The above code will display the title and description that corresponds to the item which is selected. You can get access to the additional attributes specified in the XML file using event.data. If you would add an attribute "mySpecialAttribute" you could get its value with event.data.mySpeciatAttribute.
