<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (C) 2003-2011 Teoti Graphix, LLC http://www.teotigraphix.com/eula 
All Rights Reserved. The following is Source Code and is subject to all 
restrictions on such code as contained in the End User License Agreement 
accompanying this product.
-->
<!--

VerticalMenu04_Sample.mxml

-->
<!---
* The sample shows the use of the Scroller and adds scrolling to the 
* VerticalMenu.
* 
* @tip Use of the Scroller component to create a viewport for the VerticalMenu.
* @tip Use of the itemClick event to trace the selected label.
* @title Scrolling VerticalMenu
* 
* @front
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               xmlns:tg="http://tg.teotigraphix.com/flex4">
    
    <fx:Declarations>
        <s:XMLListCollection id="menu"> 
            <fx:XMLList>
                <menu label="Posts" icon="star">
                    <item label="Edit"/>
                    <item label="Add New"/>
                    <item label="Post Tags"/>
                    <item label="Categories"/>
                </menu>
                <menu label="Media" icon="circle">
                    <item label="Library"/>
                    <item label="Add New"/>
                </menu>
                <menu label="Links" icon="star">
                    <item label="Edit"/>
                    <item label="Add New"/>
                    <item label="Link Categories"/>
                </menu>
                <menu label="Pages" icon="star">
                    <item label="Edit"/>
                    <item label="Add New"/>
                </menu>
                <menu label="Comments" icon="star">
                </menu>                
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import org.teotigraphix.ui.api.menu.IComplexMenuItem;
            
            import mx.events.ItemClickEvent;
            
            [Embed(source="/assets/star.png")]
            private var star:Class;
            
            private function myIconFunction(item:Object):Class
            {
                if (item.@icon == "star")
                    return star;
                return null;
            }
            
            protected function vmenu_itemClickHandler(event:ItemClickEvent):void
            {
                textArea.text = event.item.@label;
            }
            
        ]]>
    </fx:Script>
    
    <s:layout><s:VerticalLayout horizontalAlign="center"
                                paddingTop="20"/></s:layout>
    
    <s:BorderContainer dropShadowVisible="true"
                       width="250" height="250">
        
        <!--- @tip Create a scroller instance to hold the VerticalMenu. -->
        <s:Scroller id="scroller" 
                    top="2" bottom="2" left="2" width="150"
                    focusColor="#FF0000"
                    tabChildren="true" tabEnabled="true" focusEnabled="false">
            
            <s:Group width="100%" tabChildren="true">
                
                <!--- 
                * The VerticalMenu instance.
                -->
                <tg:VerticalMenu id="vmenu" 
                                 dataProvider="{menu}"
                                 labelField="@label"
                                 iconField="@icon"
                                 iconFunction="myIconFunction"
                                 itemClick="vmenu_itemClickHandler(event)"
                                 width="100%">
                    
                </tg:VerticalMenu>
                
            </s:Group>
            
        </s:Scroller>
        
        <!--- TextArea trace field. -->
        <s:TextArea id="textArea" 
                    left="160" top="5" bottom="5" right="5"/>
        
    </s:BorderContainer>
        
</s:Application>