Grid Layout

Each level (Branch) of the zoomMenu Component can contain a series of child branches, each branch is displayed visually in the zoomMenu component as a colored square. These squares are arranged in a grid. Each square is a cell in the grid. A grid consists of rows and columns (much like a html table). In the case of the zoomMenu component, the grid always has an equal number of rows and columns. By default the grid is a 2 * 2 grid . It has 2 rows and2 columns. Therefore it has 4 available cells:

2 * 2 = 4

This setting can be changed, by modifying the Grid Size parameter in the Component Configuration

You can also modify this setting for each individual menu item by changing the value in the Grid Size field.

The minimum Grid Size is 2 because a menu item with Grid Size of 1 would only have one available cell and would make the child menu item the same size as the parent menu item.

Each cell can contain one Menu Item. If you attempt to add a menu item to a cell that is already occupied it will fail.

When you create a Menu item using actionscript, the cell in which it is displayed is determined by the values you pass for the 'row' and 'column' parameters:

parentBranch.addItemAt(row,column,label,backgroundColor[,labelColor])

When you create a Menu item using the Component Inspector, by default the cell that a menu item occupies is decided automatically.

However you can choose to specify a particular cell by entering values in the 'Row' and 'Column' fields.

If the values entered in the Row or Column fields are greater than or equal to the value you entered for the Grid Size. Then the Ok button will be disabled. Fix the value you entered in Row and/or Column field by ensuring that the number you entered is less than the Grid Size.

In the example above we want the Services menu item to occupy the second cell along in the first column.

The following picture shows the associated row (r) and column (c) values for each cell in a 3 * 3 grid (Default Grid).

The larger the Grid Size, the smaller each cell will be. The size (width/height) of each of the cells is determined as follows:

with of cell = ( ( width of component / number of rows ) / 100 ) * ( 100 / number of rows )
height of cell = ( ( height of component / number of rows ) / 100 ) * ( 100 / number of rows )

The width of the component and the height of the component will always be the same to ensure that the menu item's are always square.

If you would rather not specify a specific row or column, you can call the addItem method instead of addItemAt and the next available grid cell will be used:

parentBranch.addItem(label,backgroundColor[,labelColor])