This page was last modified 12:36, 23 August 2007.
Grids
From Forum Nokia Wiki
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 | 
|
| Markable | EAknListBoxMarkableGrid | 
|
| MultiSelection | EAknListBoxMultiSelectionGrid |
|
| MenuSelection | 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.
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).
| Class | CAknCaleMonthlyStyleGrid |
| 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.
| 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.
| 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
| Related Discussions | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| chinese font size in grid control | lauyk001 | Symbian | 4 | 2005-07-06 08:44 |
| listbox和grid的图标问题 | xiaoyao888 | Symbian | 15 | 2005-10-17 15:12 |
| Skin and item selection bitmap | joker_pl | Symbian User Interface | 0 | 2005-09-09 11:26 |
| Calender Grid display | replytoshilpa | Symbian User Interface | 10 | 2006-12-26 12:33 |
| Where is the Grid Example for 3rd edition. | mateen_maldar | Symbian User Interface | 6 | 2006-10-31 06:57 |
