RIM’s BlackBerry GitHub Shows BlackBerry 10 Grid Lists Implementation

This is a feature that will be on Blackberry 10 devices and for the Playbook only. It is a different way to view your info, a little bit more involved and pleasing to the eyes.

RIM explain how it is setup:

If you have multiple images to show you can arrange them in groups and rows. A grouping of information can have a header title which will be the color provided by the bb10AccentColor property used in the bb.init() function. Highlights of items will use the bb10HighlightColor.

Each group has one or more rows. Each row can have up to 3 items. The layout by default assumes that images are a 16:9 aspect ratio, or you can set the data-bb-style=”square” attribute to make the images be scaled to a 1:1 aspect ratio. NOTE: The “square” aspect ratio is currently only available in the “next” branch

If a row has only one item in it, it’s width will be the full width of the size of the grid. A row with 2 items will be 1/6, and 3 items will be 1/9 the height of the screen. All images are currently set to be stretched to the size of their container.

Every item in the grid has an image, a title and a sub-title which is provided as the contents of the

. Each item can also provide an onclick handler for when the user selects the item.

For more info and source codes check out the GitHub page.