Grid of Items Container

This post introduces to you a container that can help you create a grid of items that list in horizontal or vertical direction.

You can customize the ItemRenderer and ScrollBar by passing the name of it's Linkage Class.

HORIZONTAL CANVAS:

VIEW

VERTICAL CANVAS:

VIEW

EXAMPLE CODE:

import binhdocco.containers.canvas.Canvas; import binhdocco.containers.events.ItemEvent; var canvas: Canvas = new Canvas(); // dataProvider is an array of objects, contains information of an item canvas.dataProvider = [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 4, 4, 4]; canvas.itemRenderer = SampleItemRenderer; canvas.vScrollbar = vScrollBar; //canvas.hScrollbar = hScrollBar; canvas.limitValue = 5; canvas.viewWidth = 475; canvas.viewHeight = 280; canvas.x = 60; canvas.y = 60; //canvas.itemPaddingX = 30; //canvas.itemPaddingY = 5; //canvas.direction = "horizontal"; this.addChild(canvas); canvas.addEventListener(ItemEvent.ITEM_CLICK, onItemClick); canvas.addEventListener(ItemEvent.ITEM_ROLL_OVER, onItemOver); canvas.addEventListener(ItemEvent.ITEM_ROLL_OUT, onItemOut); function onItemClick(e: ItemEvent) {     output_txt.text = "Item Clicked: " + e.itemRenderer.name + "\n";     (output_txt as TextField).appendText("Item data info: " + e.itemRenderer.data.toString()); } function onItemOver(e: ItemEvent) {     output_txt.text = "Item Over: " + e.itemRenderer.name + "\n";     (output_txt as TextField).appendText("Item data info: " + e.itemRenderer.data.toString()); } function onItemOut(e: ItemEvent) {     output_txt.text = "Item Out: " + e.itemRenderer.name + "\n";     (output_txt as TextField).appendText("Item data info: " + e.itemRenderer.data.toString()); }

Checkout SVN: https://flashtraining.googlecode.com/svn/trunk/AS3/BDCFramework