<?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-10-1-1-7-1-2-4"><title>Default grid-filling

order: Left-to-right UI languages </title>

<tgroup cols="3"><colspec colname="col2" colwidth="0.99*"/><colspec colname="col3" colwidth="1.02*"/><colspec colname="col4" colwidth="0.98*"/>

<tbody>

<row>

<entry><p>1</p></entry>

<entry><p>2</p></entry>

<entry><p>3</p></entry>

</row>

<row>

<entry><p>4</p></entry>

<entry><p>5</p></entry>

<entry><p>6</p></entry>

</row>

<row>

<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-10-1-1-7-1-2-5"><title>Default

grid-filling order: Right-to-left UI languages </title>

<tgroup cols="3"><colspec colname="col7" colwidth="0.99*"/><colspec colname="col8" colwidth="1.02*"/><colspec colname="col9" colwidth="0.98*"/>

<tbody>

<row>

<entry><p>3</p></entry>

<entry><p>2</p></entry>

<entry><p>1</p></entry>

</row>

<row>

<entry><p>6</p></entry>

<entry><p>5</p></entry>

<entry><p>4</p></entry>

</row>

<row>

<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_d0e86749_href.png" scale="40" placement="inline"/>

</fig>