Working with Methods in Grid: Next /Previous Page and Items Buttons
Updated: Dec 31, 2007
Views: 1479
Description: This tutorial will show you how to use buttons to call methods of the Grid that will the select next and previous items in Grid and buttons that call next and previous pages of the Grid.
The Completed Project:
Complete Code:
import flash.events.MouseEvent;
stage.scaleMode = StageScaleMode.NO_SCALE;
// Handle previous page button
function prevPageClick(event:MouseEvent):void {
myGrid.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, prevPageClick);
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myGrid.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myGrid.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle next page button
function nextPageClick(event:MouseEvent):void {
myGrid.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);
myGrid.previewClip = "PreviewClip";
stage.scaleMode = StageScaleMode.NO_SCALE;
// Handle previous page button
function prevPageClick(event:MouseEvent):void {
myGrid.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, prevPageClick);
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myGrid.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myGrid.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
// Handle next page button
function nextPageClick(event:MouseEvent):void {
myGrid.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);
myGrid.previewClip = "PreviewClip";
Set-Up and Add Content Using through XML
Before you begin make sure that you have successfully installed the component and have been able to load content into the Grid component using XML. Also make sure that you give your Grid an instance name of myGrid.
Also make sure that you have created two buttons or dragged two instances of the Button component (Window > Components > User Interface) onto the stage. Give the button the instance names of btnNextImg, btnPrevImg, btnNextPage, and btnPrevPage.
Plan for ActionScript
We will use a little ActionScript to connect these buttons to the Grid.
- First we want to add a mouse event listener for when our next image button is clicked and then in function that is called reference a method of our Grid component which selects the next item.
- Likewise, we want to add a mouse event listener for previous image button is clicked and reference a method that will select our previous item in our Grid component in the function that our event listener calls.
- Next we need to add another event listener for next page button and then create the function for the method of the Grid component to select next page.
- Lastly the event listener for previous page button will be created and then create the function for the method that will select previous page in Grid component.
As noted in our plan, we create an event listener for when our button that created to move forward is clicked. In this event listener we call a function that calls a method of our Grid which selects the next item.
// Handle next image button
function nextImgClick(event:MouseEvent):void {
myGrid.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
function nextImgClick(event:MouseEvent):void {
myGrid.selectNextItem();
}
btnNextImg.addEventListener(MouseEvent.CLICK, nextImgClick);
Selecting Previous Item in the Grid with a Button
For the previous item we proceed similar to the next item except reference our other button, call a different function, and use the select previous item method of our Grid.
// Handle previous image button
function prevImgClick(event:MouseEvent):void {
myGrid.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
function prevImgClick(event:MouseEvent):void {
myGrid.selectPreviousItem();
}
btnPrevImg.addEventListener(MouseEvent.CLICK, prevImgClick);
Selecting Next Page in Grid with a Button
This is also similar to next item and previous item buttons with similar functions but you will need the select next page method in the Grid.
// Handle next page button
function nextPageClick(event:MouseEvent):void {
myGrid.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);
function nextPageClick(event:MouseEvent):void {
myGrid.displayNextPage();
}
btnNextPage.addEventListener(MouseEvent.CLICK, nextPageClick);
Selecting Previous Page in Grid with a Button
Just like the previous script, we will be referencing the other page button creating a similar function and method for Previous page in the Grid.
// Handle previous page button
function prevPageClick(event:MouseEvent):void {
myGrid.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, prevPageClick);
function prevPageClick(event:MouseEvent):void {
myGrid.displayPreviousPage();
}
btnPrevPage.addEventListener(MouseEvent.CLICK, prevPageClick);
Other Tutorials
