<?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-FE922294-380D-447D-AC46-A46EFAD79168" xml:lang="en"><title>Order
of items and browsing in grids</title><prolog><metadata><keywords/></metadata></prolog><conbody>
<p>In a grid, the available items are in a rectangular arrangement of cells
and browsing is possible in four directions. In addition to the up and down
functions, the user can press the Arrow right key to move the focus one step
to the right, or the Arrow left key to move the focus one step to the left.</p>
<p>The number of items can be larger than what fits in the view, so the grid
items may scroll in the view when browsing.</p>
<ul>
<li><p>The preferred scrolling dimension is vertical; this means that when
more items are added, the number of items in a grid grows downwards line by
line, but not outside the window to the left or right. </p></li>
<li><p> A grid should not be scrollable in both dimensions; it is acceptable
only in cases where the grid has a natural geometry that cannot be changed.
Calendar's Month view is an example of this kind of geometry (but even in
that case it is better to fit the whole month on the screen rather than make
it scrollable in both dimensions).</p></li>
<li><p>The default filling order of choice items in a grid is first left to
right, then top-to-bottom. In right-to-left languages, the order is flipped
horizontally.</p></li>
</ul>
<table id="GUID-B2580444-D5A5-4E29-A33E-F4C8B0EA9B69-GENID-1-10-1-6-1-1-5-1-8-1-1-6-1-2-4"><title>Default grid-filling
order: Left-to-right UI languages </title>
<tgroup align="center" cols="3"><colspec colname="col2" colwidth="100.00pt"/>
<colspec colname="col3" colwidth="100.00pt"/><colspec colname="col4" colwidth="100.00pt"/>
<tbody>
<row valign="middle">
<entry><p>1</p></entry>
<entry><p>2</p></entry>
<entry><p>3</p></entry>
</row>
<row valign="middle">

<entry><p>4</p></entry>
<entry><p>5</p></entry>
<entry><p>6</p></entry>
</row>
<row valign="middle">

<entry><p>7</p></entry>
<entry><p>8</p></entry>
<entry><p>9</p></entry>
</row>
</tbody>
</tgroup>
</table><table id="GUID-B2580444-D5A5-4E29-A33E-F4C8B0EA9B69-GENID-1-10-1-6-1-1-5-1-8-1-1-6-1-2-5"><title>Default
grid-filling order: Right-to-left UI languages </title>
<tgroup align="center" cols="3"><colspec colname="col7" colwidth="100.00pt"/>
<colspec colname="col8" colwidth="100.00pt"/><colspec colname="col9" colwidth="100.00pt"/>
<tbody>
<row valign="middle">
<entry><p>3</p></entry>
<entry><p>2</p></entry>
<entry><p>1</p></entry>
</row>
<row valign="middle">
<entry><p>6</p></entry>
<entry><p>5</p></entry>
<entry><p>4</p></entry>
</row>
<row valign="middle">
<entry><p>9</p></entry>
<entry><p>8</p></entry>
<entry><p>7</p></entry>
</row>
</tbody>
</tgroup>
</table>
<p>In certain cases, it is possible that a grid is not filled completely.
Depending on the application, the grid can be auto-filling (for example, the
cells are moved within the grid so that empty cells in the middle get filled),
in which case there can only be empty cells on the rightmost part of the last
line. Other applications may allow empty cells anywhere, so that the grid
can be sparse.</p>
<p>Browsing in grids that scroll vertically resembles traditional scrolling
in text editors, based on the idea that the user can always move to the correct
row first and then move within the row to the correct item. The following
rules are applied:</p>
<ul>
<li><p>Empty cells are skipped: the focus is never on an empty cell.</p><p>Note:
An exception to this occurs when the user is moving items around in a grid;
in that case, all cells are accessible. </p></li>
<li><p>When browsing up or down, the focus is moved to the adjacent cell directly
below or above the current cell if that cell is filled. In case it is empty,
the nearest cell towards the beginning of the same row gets the focus. If
all cells on the row are empty, the search continues on the next row in the
same direction, and so on, until a filled cell is found. </p></li>
<li><p>When browsing towards the end of a row, the focus moves to the following
filled cell on the same row. If there are no filled cells in that direction
on the row, the search continues from the beginning of the next row, and so
on, until a filled cell is found. </p></li>
<li><p>Browsing towards the beginning of a row moves the focus to the previous
filled cell on the same row, or continues searching from the end of the previous
row. Using only the Arrow right or Arrow left key, the user can thus go through
every item in the grid, regardless of the distribution of items in it.</p><p>Note:
In right-to-left UI languages, such as Arabic and Hebrew, the end of a row
is on the left-hand side. Respectively, the beginning of the line is on the
right. </p></li>
<li><p>The grid is scrolled (moved within the view) only when the item that
is becoming focused is not fully visible already. </p></li>
<li><p>A grid may also loop vertically within the same column. When browsing
down from the cell at the bottom of a column, the focus moves to the choice
item at the top of the next column and vice versa. If the focus is in the
last column when applying the previous rule, the focus loops over to the top
of the first column and vice versa.</p></li>
</ul>
<fig id="GUID-62A2FAE4-565B-4938-9581-3BBA80F9567E">
<title>Examples of moving the focus in a grid. a) Left-to-right UI language;
only scroll down commands used. b) Left-to-right UI language; only scroll
right commands used. c) Right-to-left UI language; only scroll down used.
d) Right-to-left UI language; only scroll right used.</title>
<image href="GUID-93FFE6EF-9F6D-46BD-846C-CAC03F26E643_d0e53249_href.png" scale="40" placement="inline"/>
</fig>
</conbody></concept>