Grids

Grids are UI controls similar to the lists seen earlier in this chapter, 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. Figure 7-18 shows an example of a grid control.

Figure 7-18. Grid control.

Each item in a grid occupies one cell , and each row contains multiple cells . As with lists, Series 60 provides a number of different types of grid. Table 7-4 shows the available grid types.

The functionality of each grid type is analogous with that of the list types previously described.

Table 7-4. Grid Types

Type	Flags to Use in the GRID Resource
Selection	EAknListBoxSelectionGrid
Markable	EAknListBoxMarkableGrid
Multiselection	EAknListBoxMarkableGrid
Menu	EAknListBoxMenuGrid

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.

The following subsections contain information you may find useful about some partially complete concrete grid classes that are available.

Monthly Calendar Grid

This type of grid, detailed in Table 7-5, is used in calendar applications. It displays the days in a single month, as shown in Figure 7-19. 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).

Figure 7-19. Monthly calendar grid.

Table 7-5. Calendar Grid

Class	CAknCaleMonthlyStyleGrid
Dimensions	8 by 7 cells with 1 pixel between cells
Example Item String	"0\t1\t2" where: = 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, detailed in Table 7-6, 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, as shown in Figure 7-20.

Figure 7-20. Pin-board grid.

Table 7-6. Pin-Board Grid

Class	CAknPinbStyleGrid
Dimensions	5 by 5
Example Item String	" 0\t1\t2 ", where: = 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, detailed in Table 7-7, 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 , as shown in Figure 7-21.

Figure 7-21. GMS grid.

Table 7-7. GMS Grid

Class	CAknGMSStyleGrid
Dimensions	2 by 4 as default, but can be changed in ConstructL()
Example Item String	"0\t1" , where: = 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