StableXUI Grid Widget

A vertical scrolling custom grid widget for StableXUI.

Note

• All grid items must be the same width and height
• Any StableXUI widget type can be added to the grid (not just buttons)
• Custom Widgets will add to the grid without issue
• Grid currently only supports vertical scrolling

Usage

Create the grid

		//Create the grid
		var grid = new GridWidget(totalGridWidth, totalGridHeight, itemWidth, itemHeight);

Add any number of StableXUI Widgets

		//Create some test data
		for (i in 0...120)
		{
			//Add the widget to your grid
			grid.addWidget(new ru.stablex.ui.widgets.Button());
		}

Refresh the grid after you've added items

		//redraw/organize the grid
		grid.refresh(); 

Display the grid

        
Lib.current.addChild(grid);

Add an item dynamically to the front of the grid

//This button will be in the first row and first column of the grid
grid.addToStartOfGrid(new ru.stablex.ui.widgets.Button())

Add an item to the end of the grid

//This button will be in the last row and last column of the grid
grid.addToEndOfGrid(new ru.stablex.ui.widgets.Button())

Add an item to about the middle of the grid

//This button will be in the mid row and first column of the grid
grid.addToMiddleOfGrid(new ru.stablex.ui.widgets.Button())

Remove an item from the grid

//This button will be in the mid row and first column of the grid
grid.removeWidget(new ru.stablex.ui.widgets.Button())

Performance Tips

• Using addWidget(x) only adds the data to the data structure of the grid, it doesn't update the display.
  • Use this when adding multiple widgets, calling grid.refresh() afterwards to update the display only once.
• Using addToEndOfGrid(x), addToStartOfGrid(x), addToMidOfGrid(x) or removeWidget(x) causes an immediate display update, meaning if you do this repeatedly performance will suffer...although you'll probably only notice it if your grid list has many items (> 100) or the grid items are complicated widgets.