<?xml version="1.0" encoding="utf-8"?>
<!--
    Copyright 2009 Adam Bergman (adambergman.com).  
    
    You are free to use this code in any personal or commercial projects.
    I only ask that if you intend to use this code in any commercial project, 
    please contact me via adambergman.com and let me know.
-->
<s:Application viewSourceURL="/lab/pagedlayout/srcview/index.html" creationComplete="init()" 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:adam="com.adambergman.ui.layout.*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            // The data provider for our DataGroup
            Bindable] private var itemList:ArrayCollection = new ArrayCollection();
            
            // creationComplete function, generates 15 buttons and adds them to our DataGroup
            private function init():void
            {
                for(var i:Number = 0; i < 15; i++)
                {
                    // this is obviously a dirty way to add labels to our
                    // buttons in the item renderer, it will cause warnings
                    // because the Object doesn't interface IEventDispatcher
                    // but this was done out of convenience/laziness.
                    itemList.addItem({label: "Button " + i});
                }            
            }

        ]]>
    </fx:Script>
    
    <!-- NOTE: This rectangle is only here to show the boundries of the DataGroup -->
    <s:Rect  height="123" verticalCenter="0" width="{hslider.value}" horizontalCenter="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0x999999" />
                <s:GradientEntry color="0xD8D8D8" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- Our DataGroup bound to our itemList data provider with the Paged Layout applied -->
    <s:DataGroup id="datagroup" height="123" verticalCenter="0" dataProvider="{itemList}" itemRenderer="itemRenderer" width="{hslider.value}" horizontalCenter="0">
        <s:layout>
            <adam:PagedLayout id="myLayout" itemPadding="{hsliderPadding.value}" />
        </s:layout>
    </s:DataGroup>
    
    <!-- Notice that you can bind properties of the layout such as totalPages and currentPage -->
    <mx:Label text="{'Number of Pages: ' + myLayout.totalPages}" verticalCenter="114" horizontalCenter="2"/>
    <mx:Label text="{'Current Page: ' + myLayout.currentPage}" verticalCenter="88" horizontalCenter="2"/>
    
    <!-- Use the next() and previous() methods to move through the pages -->
    <s:Button label="&lt;&lt; Prev" horizontalCenter="-35" verticalCenter="149" click="myLayout.previous()"/>
    <s:Button label="Next &gt;&gt;" horizontalCenter="40" verticalCenter="149" click="myLayout.next()" />
    
    <!-- The HSliders allow us to resize the container and change padding for testing purposes -->
    <s:HSlider  id="hslider" value="{this.width - 20}" verticalCenter="-80" width="228" maximum="{this.width - 20}" minimum="175" stepSize="5" liveDragging="true" horizontalCenter="-150"/>
    <s:HSlider  id="hsliderPadding" value="10" verticalCenter="-80" width="228" maximum="50" minimum="0" stepSize="1" liveDragging="true" horizontalCenter="160"/>
    <mx:Label text="Item Padding:" verticalCenter="-103" horizontalCenter="85"/>
    <mx:Label text="Container Width:" verticalCenter="-103" horizontalCenter="-215"/>
</s:Application>