<?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/></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/></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" colwidth="0.60*"/><colspec colname="col2" colwidth="1.40*"/>
<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>
<table id="GUID-00226785-93CC-4514-9327-15EC9C272E18"><title>Default touch
events in grids.</title>
<tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/>
<thead>
<row>
<entry valign="top"><p>User action</p></entry>
<entry valign="top"><p>State change</p></entry>
<entry valign="top"><p>Feedback</p></entry>
</row>
</thead>
<tbody>
<row>
<entry><p>Touch down</p></entry>
<entry><p>No effect</p></entry>
<entry><p>Highlight is shown.</p><p>Tactile: Basic list effect and audio feedback
is provided with touch down event.</p></entry>
</row>
<row>
<entry><p>Touch release</p></entry>
<entry><p>Item is activated</p></entry>
<entry><p>Highlight disappears. </p><p>Tactile: Basic list effect  is provided
with touch release event.</p></entry>
</row>
<row>
<entry><p>Touch down and move outside the grid without releasing the touch
down.</p></entry>
<entry><p>Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events</p></entry>
<entry><p>Tactile: Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events.</p></entry>
</row>
<row>
<entry><p>Touch down, move outside and back.</p></entry>
<entry><p>Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events</p></entry>
<entry><p>Tactile: Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events.</p></entry>
</row>
<row>
<entry><p>Touch down and move vertically</p></entry>
<entry><p>Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events</p></entry>
<entry><p>Tactile: Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events.</p></entry>
</row>
<row>
<entry><p>Touch down and move horizontally</p></entry>
<entry><p>Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events</p></entry>
<entry>Highlight stays on the item while it is touched and disappears when
moving outside of it.<p>Tactile: Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging
and flicking</xref> events.</p></entry>
</row>
</tbody>
</tgroup>
</table>
<section id="GUID-D51BDE18-D03E-42DC-BC41-551BB0DBBAD7"><title>Using
grids in applications</title><p>The APIs to use for grids are
the <xref format="html" href="specs/guides/Grids_API_Specification/Grids_API_Specification.html" scope="peer">Grids API</xref> and the <xref format="html" href="specs/guides/Lists_API_Specification/Lists_API_Specification.html" scope="peer">Lists API</xref>. For implementation information, see <xref format="html" href="specs/guides/Grids_API_Specification/Grids_API_Specification.html#Grids_API_Specification.topic3" scope="peer">Using the Grids API</xref> and <xref format="html" href="specs/guides/Lists_API_Specification/Lists_API_Specification.html#Lists_API_Specification.topic3" scope="peer">Using the Lists API</xref>.</p><p>The <xref href="GUID-B49E127B-09B1-3A82-B704-56373B4E1F1D.dita"><apiname>CAknGrid</apiname></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="GUID-75F5E010-D30A-37B6-B4B3-A25C1DAEAD52.dita"><apiname>AknListBoxLayouts</apiname></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 <xref format="html" href="specs/guides/Grids_API_Specification/Grids_API_Specification.html" scope="peer">specialized grid classes</xref> can be found in AVKON.</p><p>Use
the class <xref href="GUID-4A864745-EA9C-3ED6-B3B7-1DF92817A96A.dita"><apiname>CAknCaleMonthStyleGrid</apiname></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="GUID-D2166870-2ED0-3516-BE88-92FE7E9ED7BA.dita"><apiname>CAknPinbStyleGrid</apiname></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>