×
Namespaces

Variants
Actions

Grids

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: eswar_illuri (28 May 2007)
Last edited: hamishwillee (23 Jul 2012)
Reviewer Approved    Thumbs up icon sm.jpg

Contents

Introduction

Grids are UI controls similar to the lists, in that they display a number of items that can be individually focused and selected. The difference between grids and other kinds of list is that a grid may contain more than one item on a single line. In other words, a grid displays a two-dimensional set of items, a list only a one-dimensional set.

Each item in a grid occupies one cell, and each row contains multiple cells. As with lists, S60 provides a number of different types of grid.

Type Flags to Use in the GRID Resource Example
Selection EAknListBoxSelectionGrid Selecgrid.JPG
Markable EAknListBoxMarkableGrid Markgrid.JPG
MultiSelection EAknListBoxMultiSelectionGrid Selecgrid.JPG
MenuSelection EAknListBoxMenuGrid Menugrid.JPG


Each cell within a grid can contain one or more graphics or pieces of text. Each is referred to as a sub-cell. As with list item fields, a sub-cell is not individually selectable: it is just a component part of the cell, which displays a particular type of data. For example, a grid whose cells contain an icon and a text caption would consist of two sub-cells: one for the icon and one for the text.

The grid's orientation refers to the plane in which items append to it—this can be either horizontal or vertical. You can control the order in which items focus programmatically, such that the focus loops around rows and columns, snakes from row to row or column to column, or stops at particular points. The focus scrolls along rows or columns. When reaching an edge, it can loop, snake or stop. Looping means that if the user attempts to scroll past an edge, it returns to the opposite end of the row or column. Snake means that it moves to the opposite end of the next row or column. Stop means that it will stay at the edge.

As with lists, grid items can be defined dynamic or statically. Unlike lists, you usually determine a grid's layout by calculating exact values, such as the size of the cells and the sub-cells within them, in your own concrete grid class.

Grid Classes

There are a few almost complete grids, and these are Monthly Calender Grid, Pin Board Grid and GMS Grid.

Monthly Calender Grid

This type of grid is used in calendar applications. It displays the days in a single month. The first row shows the days, and the first column the week numbers. The remaining cells show six rows of weeks (to allow for days falling in the previous and next month).

MonthlyCalenderGrid.GIF


Class CAknCaleMonthStyleGrid
Dimensions 8 by 7 cells with 1 pixel between cells
Example Item String "0\t1\t2" where:

0 = 21 by 19 icon occupying the whole cell—use this for outlining a cell, for example, with a border or colored box

1 = 5 by 5 icon occupying bottom right of cell—use this for marking a day

2 = day number. This should be a maximum of 2 characters wide. Any more and it will show the first character followed by an ellipsis, for example, "123" shows as "1…"

Orientation Vertical


Pin Board Grid

This grid type represents a pin board used to display shortcuts. A possible example use would be in a favorites application, which stores shortcuts to a user's preferred applications and files.

PinBoardGrid.GIF


Class CAknPinbStyleGrid
Dimensions 5 by 5
Example Item String "0\t1\t2", where:

0 = 29 by 25 icon occupying center of cell, showing the application for which this is a shortcut, or an icon representing an application instance

1 = 13 by 13 icon occupying top right of cell, used for marking the item

2 = 13 by 13 icon occupying bottom left of cell, used to show the application for which this is a shortcut, if this is a instance of an application

Orientation Vertical



GMS Grid

This type of grid is a markable graphic grid. It could be used, for example, by a graphics messaging application to show a grid of picture messages that can be marked.

GMSGrid.GIF

Class CAknGMSStyleGrid
Dimensions 2 by 4 as default, but can be changed in ConstructL()
Example Item String "0\t1", where:

0 = 74 by 28 icon occupying background of whole cell

1 = 13 by 13 icon occupying foreground in top right of cell, used for marking the item

N.B.: A 13 by 13 unmarked item icon should also be supplied and will be shown by default until the item is marked

Orientation Vertical

Resources

Grid example

Using Grids API's

This page was last modified on 23 July 2012, at 08:44.
97 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×