<?xml version="1.0" encoding="utf-8"?>

<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->

<!-- This component and the accompanying materials are made available under the terms of the License 

"Eclipse Public License v1.0" which accompanies this distribution, 

and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->

<!-- Initial Contributors:

	Nokia Corporation - initial contribution.

Contributors: 

-->  <!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"><concept id="GUID-1955F591-2D2C-42EE-AF03-7BBBEE1A4005" xml:lang="en"><title>Grid

types</title><prolog><metadata><keywords></keywords></metadata></prolog><conbody>

<p>Grids are in many ways analogous to lists. However, there are some things

worth noticing:</p>

<ul>

<li>In grids, the Arrow left and Arrow right keys are always used for moving

the focus; they cannot be used in any other way that may be possible with

lists. <p></p></li>

<li><p>Grid layouts are not as standardized as lists; the layouts must be

designed case by case for the applications. Typically, grid items occupy less

screen space than list items. This results in grid items having fewer elements

than list items. A grid item may in general have one text, or one graphic,

or a text and a graphic.</p></li>

</ul>

<p>The following grid types can be used, and they are analogous to the corresponding

list types:</p>

<table id="GUID-77A41D48-C4F8-4E2D-8BCC-11C8A233EC89"><title>Grid types</title>

<tgroup cols="2"><colspec colname="col1"></colspec><colspec colname="col2"></colspec>

<thead>

<row>

<entry>Grid</entry>

<entry>Description</entry>

</row>

</thead>

<tbody>

<row>

<entry><p>Menu grid</p></entry>

<entry><p>For selecting one item; no Options menu.</p></entry>

</row>

<row>

<entry><p>Selection grid</p></entry>

<entry><p>Permanent state; can be left pending, the Options menu is available.</p></entry>

</row>

<row>

<entry><p>Markable grid</p></entry>

<entry><p>A selection grid with the marking function.</p></entry>

</row>

</tbody>

</tgroup>

</table>

<p>There are no grid types corresponding to a multi-selection list, a setting

list or a form.</p>

<section id="GUID-D51BDE18-D03E-42DC-BC41-551BB0DBBAD7"><title>Using

grids in C++ applications</title><p>The APIs to use for grids are the Grids

API and the Lists

API. For implementation information, see Using

the Grids API and Using

the Lists API.</p><p>The <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknGrid.html" format="application/java-archive"><codeph>CAknGrid</codeph></xref> class

is used to set up the basic parameters of a layout in terms of number of columns

and rows, cell size, and orientation. After this, <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classAknListBoxLayouts.html" format="application/java-archive"><codeph>AknListBoxLayouts</codeph></xref> is used to set up detailed parameters for

graphics and text in the cell. The following cell parameters can be set:</p><ul>

<li><p>Location and size of bitmaps</p></li>

<li><p>Location and size of text string</p></li>

<li><p>Font and its color </p></li>

<li><p>Text align in the allocated space</p></li>

</ul><p>Bitmaps are loaded manually, as an icon array.</p><p>Other parameters

of visual elements (for example, highlighted text color) are used from the

Symbian Developer Platform standard look and feel module; these

should not be overridden unless you've instantiated your own class. </p><p>Several specialized

grid classes can be found in Avkon.</p><p>Use the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknCaleMonthStyleGrid.html" format="application/java-archive"><codeph>CAknCaleMonthStyleGrid</codeph></xref> to show a month view. The

first row shows the day and the first column shows the week number. The following

data can be set for an item:</p><ul>

<li><p>Outlined icon to show border, dimension 21 x 9 pixels</p></li>

<li><p>Marking icon in the bottom right corner of a cell, dimension 5 x 5

pixels</p></li>

<li><p>Two-digit number</p></li>

</ul><p>Use the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknPinbStyleGrid.html" format="application/java-archive"><codeph>CAknPinbStyleGrid</codeph></xref> to show application shortcuts in a 5 x 5 cells grid. For every item, an

icon is specified that is displayed in the center of a cell. In addition,

two small icons, 13 x 13 pixels, can be specified. The first one is displayed

in the top-right corner for marking. The second one is displayed in the bottom-left

corner to show the target application. </p></section>

</conbody></concept>