« Burst Labs on FWA
Command Line MAMP »

GridLayout - Part 1

GridLayout (com.bumpslide.util.GridLayout) is a class I originally created to simply manage the attachment and positioning of a series of MovieClips. I began using it to build all my data grids, thumbnail lists, and various types of menus. Recently, I have refactored it to support scrolling and/or paging via an index offset as well as paged data loading via the AS2 DataProvider API. The end result is an all purpose utility that can be used to build everything from simple menus to custom data grids. This post is just a quick introduction to using the code. Parts 2, 3, and 4 (to come) will go into more details about scrolling and data loading as well as alternative uses of the GridLayout class.

You can get a sneak peak at the examples here.

Example 1: Color Boxes

For our first example, I'm going to demonstrate how to lay out a series of clips using the GridLayout class. This class is not a movie clip, but a utility that is usually instanciated by a movie clip in order to achieve datagrid-like functionality. For now, we are not concerned with paging, scrolling, or any of the GridLayout events. We are just placing a series of clips on the stage and passing to them data pulled from an array that we will pass to the gridLayout instance as a dataProvider. We'll start by creating a grid from within a class we'll call SimpleGrid.

PLAIN TEXT
Actionscript:
  1. import com.bumpslide.util.ClassUtil;
  2. import com.bumpslide.util.Debug;
  3. import com.bumpslide.util.GridLayout;
  4.  
  5. /**
  6. * GridLayout example #1 - Simple Grid
  7. *
  8. * In this example, we are using the GridLayout helper to create a grid of
  9. * gray  boxes.
  10. *
  11. * @author David Knape
  12. */
  13. class SimpleGrid extends MovieClip {
  14.    
  15.     // dynamically created empty movie clip
  16.     public var grid_mc:MovieClip;
  17.    
  18.     // our grid renderer
  19.     private var gridLayout:GridLayout
  20.    
  21.     // the instance name of our grid item
  22.     static private var GRID_CLIP:String = "GridItem";
  23.    
  24.     // array of colors to be used as dataprovider for our grid
  25.     private var gridDataProvider:Array = [
  26.         0x000000, 0x111111, 0x222222, 0x333333, 0x444444, 0x555555,
  27.         0x666666, 0x777777, 0x888888, 0x999999, 0xaaaaaa, 0xbbbbbb
  28.     ];
  29.    
  30.     /**
  31.     * Constructor - just calls init method
  32.     */
  33.     function SimpleGrid() {
  34.         init();
  35.     }
  36.    
  37.     /**
  38.     * Initialization - grid setup and population
  39.     */
  40.     function init() {
  41.        
  42.         // create empty holder clip in which to place our grid items
  43.         createEmptyMovieClip('grid_mc', getNextHighestDepth() );
  44.         grid_mc._x = 10;
  45.         grid_mc._y = 20;
  46.  
  47.         // create gridlayout intance that will attach clips with linkage ID 'GridItem'
  48.         // into our grid item holder (grid_mc)
  49.         gridLayout = new GridLayout( grid_mc, GRID_CLIP );
  50.  
  51.         // define grid size
  52.         gridLayout.rowHeight = 102;
  53.         gridLayout.columnWidth = 152;
  54.         gridLayout.rows = 3;
  55.         gridLayout.columns = 4;
  56.  
  57.         // populate grid with array of colors, triggers redraw
  58.         gridLayout.dataProvider = gridDataProvider;
  59.        
  60.     }   
  61. }

As you can see, in the GridLayout constructor, we are passing in an empty movie clip to which we will attach our child item clips. The second argument to the constructor is the instance name of the clip we would like to attach. The next step is to define the grid's size and spacing. Finally, we set the dataProvider which triggers the rendering process.

Now, the clip that is being attached will find itself placed in an appropriate place, and it will have data passed to it during attachment in the form of an instance variable called _gridItemData which is simply the item data from the grid's data provider that is associated with the current grid index. This is very similar to a cell renderer interface, and can also be compared to the process of using a Repeater in Flex. So, our grid item just needs to update itself by referencing its _gridItemData and/or the _gridIndex properties.

PLAIN TEXT
Actionscript:
  1. /**
  2. * Simple Grid Item
  3. *
  4. * _gridItemData and _gridItemIndex are given to us via
  5. * the initObj when this clip is attached by the GridLayout class
  6. *
  7. * @author David Knape
  8. */
  9. class GridItem extends MovieClip {
  10.        
  11.     // our grid item index and data
  12.     private var _gridIndex:Number;
  13.     private var _gridItemData:Object;
  14.        
  15.     // timeline clips
  16.     public var box_mc:MovieClip;
  17.     public var index_txt:TextField;
  18.    
  19.     // onload, update our display
  20.     private function onLoad() : Void {
  21.         super.onLoad();
  22.         update();
  23.     }
  24.    
  25.     // updates the display for this clip
  26.     public function update() : Void {
  27.        
  28.         // display our index position
  29.         index_txt.text = "Index #"+_gridIndex;   
  30.                
  31.         // colorize our box using this value
  32.         var c:Color = new Color( box_mc );
  33.         c.setRGB( Number(_gridItemData) );
  34.     }
  35. }

Demo: Color Boxes

The source for all of this is included in the 'com.bumpslide.example.gridlayout' package of my Bumpslide Actionscript library. As always, your best bet is to grab the latest from SVN.

This entry was posted on Wednesday, June 13th, 2007 at 4:15 am and is filed under Actionscript, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “GridLayout - Part 1”

  1. Lucia Saura Says:
    February 20th, 2008 at 8:35 am

    Hallo!

    This is really interesting stuff, but surely enough i could use the next to come parts of the tutorial to put it in use. Would it be possible to create those movie clips and possition them with your class based on the data of an xml file?

  2. david Says:
    February 24th, 2008 at 8:18 pm

    Lucia. Once your XML loads, parse it into array of value objects. Use that as your dataProvider.

    Sorry about the lack of parts 2 3. (Maybe I'll just rename this post.)
    Anyway, grab my code from SVN for examples of the other concepts:
    https://bumpslide.svn.sourceforge.net/svnroot/bumpslide/trunk/src/com/bumpslide/example/gridlayout/

    This code is constantly in flux, but it is still an invaluable tool for me on almost every project. The latest version of this class as well as much of my newest code is all in the AS3 branch of my Bumpslide code library.

    https://bumpslide.svn.sourceforge.net/svnroot/bumpslide/trunk/src_as3/

  3. Phong Says:
    June 6th, 2008 at 9:43 am

    Hello,

    I had a quick question on your AS3 gridlayout and class. If I wanted to load several dynamic images of different widths and heights into the grid and wanted to butt them right next to each other, is that possible.

    So instead of specifying a specific item width and height, they would just take on the size of the image.

    Thanks! It's a great utility!

  4. david Says:
    June 6th, 2008 at 1:57 pm

    http://bumpslide.googlecode.com/svn/trunk/as3/examples/gridlayout/

    I've added some AS3 examples showing custom layout routines in response to image load events. There are a number of ways to do what you're asking, phong. It really depends on your needs. Also, if you haven't already seen them, you should check out the Yahoo Astra Layout containers.

    http://developer.yahoo.com/flash/astra-flash/layout-containers/examples.html

Leave a Reply