Adding title and description
Updated: Jun 13, 2010
Views: 878
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 StackFlow 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>
<image source="images/image1.jpg" title="Image 1" description="This is the 1st image."/>
<image source="images/image2.jpg" title="Image 2" description="This is the 2nd image."/>
<image source="images/image3.jpg" title="Image 3" description="This is the 3rd image."/>
<image source="images/image4.jpg" title="Image 4" description="This is the 4th image."/>
<image source="images/image5.jpg" title="Image 5" description="This is the 5th image."/>
<image source="images/image6.jpg" title="Image 6" description="This is the 6th image."/>
<image source="images/image7.jpg" title="Image 7" description="This is the 7th image."/>
<image source="images/image8.jpg" title="Image 8" description="This is the 8th image."/>
<image source="images/image9.jpg" title="Image 9" description="This is the 9th image."/>
<image source="images/image10.jpg" title="Image 10" description="This is the 10th image."/>
<image source="images/image11.jpg" title="Image 11" description="This is the 11th image."/>
<image source="images/image12.jpg" title="Image 12" description="This is the 12th image."/>
<image source="images/image13.jpg" title="Image 13" description="This is the 13th image."/>
<image source="images/image14.jpg" title="Image 14" description="This is the 14th image."/>
</images>
<images>
<image source="images/image1.jpg" title="Image 1" description="This is the 1st image."/>
<image source="images/image2.jpg" title="Image 2" description="This is the 2nd image."/>
<image source="images/image3.jpg" title="Image 3" description="This is the 3rd image."/>
<image source="images/image4.jpg" title="Image 4" description="This is the 4th image."/>
<image source="images/image5.jpg" title="Image 5" description="This is the 5th image."/>
<image source="images/image6.jpg" title="Image 6" description="This is the 6th image."/>
<image source="images/image7.jpg" title="Image 7" description="This is the 7th image."/>
<image source="images/image8.jpg" title="Image 8" description="This is the 8th image."/>
<image source="images/image9.jpg" title="Image 9" description="This is the 9th image."/>
<image source="images/image10.jpg" title="Image 10" description="This is the 10th image."/>
<image source="images/image11.jpg" title="Image 11" description="This is the 11th image."/>
<image source="images/image12.jpg" title="Image 12" description="This is the 12th image."/>
<image source="images/image13.jpg" title="Image 13" description="This is the 13th image."/>
<image source="images/image14.jpg" title="Image 14" description="This is the 14th image."/>
</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.StackFlowEvent;
myStackFlow.addEventListener(StackFlowEvent.ITEM_SELECTED, itemSelectedHandler);
function itemSelectedHandler(event:StackFlowEvent):void
{
titleField.text = "Title: " + event.data.title;
descriptionField.text = "Description: " + event.data.description;
}
myStackFlow.addEventListener(StackFlowEvent.ITEM_SELECTED, itemSelectedHandler);
function itemSelectedHandler(event:StackFlowEvent):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.
