<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initVars()" viewSourceURL="srcview/index.html">

<mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
        //holds all the records in the query returned by the CFC function    
        private var submissionsAllAryCol:ArrayCollection;
        
        //holds all the records in an Array
        //so we can use Array methods to
        //get a subset of the records for paging
        private var submissionsAllAry:Array;
        
        //The subset of the records for the current page
        private var submissionsSlicedAry:Array;
        
        //The subset of the records in the ArrayCollection
        //that is the dataprovider for the datagrid
        [Bindable]
        private var submissionsViewAryCol:ArrayCollection;
        
        [Bindable]
        private var start:int; //what record to start with on the current page
        
        private var increment:int ; //how many records to show per page
        
        [Bindable]
        private var end:int ; //what record (end-1) to end with on the current page
        
        [Bindable]
        private var total:int ; //how many total records
        
        
      
        
        // initialize the variables and get all submissions
        private function initVars():void {
            
            //initial start and end positions for slicing the Array
            start = 0;
            increment = 10; //how many records to display
            end = 0;
                    
           //Call the CFC method to get the submissions        
           myService.getAllSubmissions(139);
        
        }  //end function initVars()    
            
         /*Handles the result returned by calling the getAllSubmissions method
            of the CFC
            */
            public function handleQueryResult(event:ResultEvent):void{
                
                //place the query results into an ArrayCollection
                submissionsAllAryCol = event.result as ArrayCollection;
                
                //convert ArrayCollection to a standard Array
                //so we can use Array slice function
                submissionsAllAry = submissionsAllAryCol.toArray();
                
                //how many total submissions?
                total = submissionsAllAry.length;
                
                //determine initial value for end (cannot exceed total)
                
                if ( total < increment) {
                    
                    end = total;
                    
                } else {
                    
                    end = increment ;
                    
                }//end if
                
                
                //take out of the array records start to end (includes records from start to end-1)
                submissionsSlicedAry = submissionsAllAry.slice(start, end);
                
                //Create an ArrayCollection using the subset of our Array
                //and assign it to the data provider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );
                
                //determine if Next button should be enabled
                //as its possible that the number or records returned
                //is less than our number per page (increment)
                nextBtn.enabled = isNextBtnEnabled();
                
                    
            } //end function
                
            /*Get the next increment of records for display in the datagrid
            */
            private function getNext():void {
                
                //going forward so
                //increase start and end by the increment
                
                start = start + increment ;
                end = end + increment ;
                
                //don't let the value of end be larger than the
                //total number of records
                if (end > total) {
                    
                    end = total;
                    
                }
                
                //create a subset of the Array that is holding all the submissions
                submissionsSlicedAry = submissionsAllAry.slice(start, end);
                
                //update the dataprovider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );
                
                //determine if Next button should be enabled
                
                nextBtn.enabled = isNextBtnEnabled();
                
                //enable previous button
                //since we have gone to a next page of records
                previousBtn.enabled = true;
                
                
            }//end getNext
            
          
           /*Get the previous increment of records for display in the datagrid
           */
           private function getPrevious():void {
              
                
                   //going backwards
                   end = start;
                
                //decrease start by the increment
                
                start = start - increment ;
                
                //create a subset of the Array that is holding all the submissions
                submissionsSlicedAry = submissionsAllAry.slice(start, end);
                
                //update the dataprovider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );
                
                //determine if previous button should be enabled
                previousBtn.enabled = isPreviousBtnEnabled();
                
                //enable next button
                //since we have gone to a previous page of records
                nextBtn.enabled = true;
                
                
            }//end getPrevious
            
            /*Return true if button should be enabled
            */
            private function isNextBtnEnabled():Boolean {
                
                var enableBtn:Boolean = false ;
                
                if ( end < total ) {
                    
                    enableBtn = true ;
                    
                }
                
                return enableBtn;
            
                
            }//end function isNextBtnEnabled
            
            
            /*Return true if button should be enabled
            */
            
            private function isPreviousBtnEnabled():Boolean {
                
                var enableBtn:Boolean = false ;
                
                if ( start >= increment ) {
                    
                    enableBtn = true ;
                    
                }
                
                return enableBtn;
                
                
                
            }//end function isNextBtnEnabled
            
            
        ]]>
</mx:Script>            
            
    <!--setup connection to the CFC-->
    <mx:RemoteObject
        id="myService"
        destination="ColdFusion"
        source="flex.pagingdatagrid.SubmissionsGateway"
        showBusyCursor="true"
        >  
            <mx:method name="getAllSubmissions" result="handleQueryResult(event)"
            fault="Alert.show(event.fault.message)"/>
                
    </mx:RemoteObject>
    
    <!--setup user interface-->
    <mx:Panel width="80%" height="80%" layout="vertical" title="Page Through The Submissions"
        horizontalAlign="center" verticalAlign="top">
        
        <mx:VBox width="100%" height="100%" verticalAlign="top" horizontalAlign="left">
        
        <mx:Label text="Use the Previous and Next buttons to Get More Submissions"/>
        
        <mx:HBox width="100%">
            
            <!--this button's enable value will be changed by the getPrevious() and getNext functions-->
            <mx:Button label="Previous" id="previousBtn" enabled="false"
                click="getPrevious()"/>
                
            <mx:Spacer width="50%"/>
            
            <!--must use start+1 since array elements start at array position 0-->
            <mx:Label text="Viewing Submissions {start+1} - {end} of {total} Submissions" />
            
            <mx:Spacer width="50%"/>
            
             <!--this button's enable value will be changed by the getPrevious() and getNext functions-->
            <mx:Button label="Next" id="nextBtn" enabled="true"
                click="getNext()"/>
            
        </mx:HBox>
        
        <!--The dataProvider will be updated each time the user clicks the next and previous buttons-->    
        <mx:DataGrid width="100%" height="100%" id="submissionsDG" dataProvider="{submissionsViewAryCol}"
            fontFamily="Verdana" fontSize="10">
            <mx:columns>
                <mx:DataGridColumn dataField="submissionid" width="80" headerText="Sub #"/>
            
                <mx:DataGridColumn dataField="presenter" width="100" headerText="Main Presenter" />
                
                <mx:DataGridColumn dataField="title" width="220" headerText="Title" wordWrap="true"/>
            </mx:columns>
        </mx:DataGrid>
            
        </mx:VBox>
        
    </mx:Panel>

   <!--setup user interface-->
</mx:Application>