|
1 <?xml version="1.0" encoding="utf-8"?> |
|
2 <!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. --> |
|
3 <!-- This component and the accompanying materials are made available under the terms of the License |
|
4 "Eclipse Public License v1.0" which accompanies this distribution, |
|
5 and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". --> |
|
6 <!-- Initial Contributors: |
|
7 Nokia Corporation - initial contribution. |
|
8 Contributors: |
|
9 --> |
|
10 <!DOCTYPE concept |
|
11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
|
12 <concept id="GUID-FE922294-380D-447D-AC46-A46EFAD79168" xml:lang="en"><title>Order |
|
13 of items and browsing in grids</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <p>In a grid, the available items are in a rectangular arrangement of cells |
|
15 and browsing is possible in four directions. In addition to the up and down |
|
16 functions, the user can press the Arrow right key to move the focus one step |
|
17 to the right, or the Arrow left key to move the focus one step to the left.</p> |
|
18 <p>The number of items can be larger than what fits in the view, so the grid |
|
19 items may scroll in the view when browsing.</p> |
|
20 <ul> |
|
21 <li><p>The preferred scrolling dimension is vertical; this means that when |
|
22 more items are added, the number of items in a grid grows downwards line by |
|
23 line, but not outside the window to the left or right. </p></li> |
|
24 <li><p> A grid should not be scrollable in both dimensions; it is acceptable |
|
25 only in cases where the grid has a natural geometry that cannot be changed. |
|
26 Calendar's Month view is an example of this kind of geometry (but even in |
|
27 that case it is better to fit the whole month on the screen rather than make |
|
28 it scrollable in both dimensions).</p></li> |
|
29 <li><p>The default filling order of choice items in a grid is first left to |
|
30 right, then top-to-bottom. In right-to-left languages, the order is flipped |
|
31 horizontally.</p></li> |
|
32 </ul> |
|
33 <table id="GUID-B2580444-D5A5-4E29-A33E-F4C8B0EA9B69-GENID-1-8-1-6-1-1-5-1-9-1-1-7-1-2-4"><title>Default grid-filling |
|
34 order: Left-to-right UI languages </title> |
|
35 <tgroup cols="3"><colspec colname="col2" colwidth="0.99*"/><colspec colname="col3" colwidth="1.02*"/><colspec colname="col4" colwidth="0.98*"/> |
|
36 <tbody> |
|
37 <row> |
|
38 <entry><p>1</p></entry> |
|
39 <entry><p>2</p></entry> |
|
40 <entry><p>3</p></entry> |
|
41 </row> |
|
42 <row> |
|
43 <entry><p>4</p></entry> |
|
44 <entry><p>5</p></entry> |
|
45 <entry><p>6</p></entry> |
|
46 </row> |
|
47 <row> |
|
48 <entry><p>7</p></entry> |
|
49 <entry><p>8</p></entry> |
|
50 <entry><p>9</p></entry> |
|
51 </row> |
|
52 </tbody> |
|
53 </tgroup> |
|
54 </table><table id="GUID-B2580444-D5A5-4E29-A33E-F4C8B0EA9B69-GENID-1-8-1-6-1-1-5-1-9-1-1-7-1-2-5"><title>Default |
|
55 grid-filling order: Right-to-left UI languages </title> |
|
56 <tgroup cols="3"><colspec colname="col7" colwidth="0.99*"/><colspec colname="col8" colwidth="1.02*"/><colspec colname="col9" colwidth="0.98*"/> |
|
57 <tbody> |
|
58 <row> |
|
59 <entry><p>3</p></entry> |
|
60 <entry><p>2</p></entry> |
|
61 <entry><p>1</p></entry> |
|
62 </row> |
|
63 <row> |
|
64 <entry><p>6</p></entry> |
|
65 <entry><p>5</p></entry> |
|
66 <entry><p>4</p></entry> |
|
67 </row> |
|
68 <row> |
|
69 <entry><p>9</p></entry> |
|
70 <entry><p>8</p></entry> |
|
71 <entry><p>7</p></entry> |
|
72 </row> |
|
73 </tbody> |
|
74 </tgroup> |
|
75 </table> |
|
76 <p>In certain cases, it is possible that a grid is not filled completely. |
|
77 Depending on the application, the grid can be auto-filling (for example, the |
|
78 cells are moved within the grid so that empty cells in the middle get filled), |
|
79 in which case there can only be empty cells on the rightmost part of the last |
|
80 line. Other applications may allow empty cells anywhere, so that the grid |
|
81 can be sparse.</p> |
|
82 <p>Browsing in grids that scroll vertically resembles traditional scrolling |
|
83 in text editors, based on the idea that the user can always move to the correct |
|
84 row first and then move within the row to the correct item. The following |
|
85 rules are applied:</p> |
|
86 <ul> |
|
87 <li><p>Empty cells are skipped: the focus is never on an empty cell.</p><p>Note: |
|
88 An exception to this occurs when the user is moving items around in a grid; |
|
89 in that case, all cells are accessible. </p></li> |
|
90 <li><p>When browsing up or down, the focus is moved to the adjacent cell directly |
|
91 below or above the current cell if that cell is filled. In case it is empty, |
|
92 the nearest cell towards the beginning of the same row gets the focus. If |
|
93 all cells on the row are empty, the search continues on the next row in the |
|
94 same direction, and so on, until a filled cell is found. </p></li> |
|
95 <li><p>When browsing towards the end of a row, the focus moves to the following |
|
96 filled cell on the same row. If there are no filled cells in that direction |
|
97 on the row, the search continues from the beginning of the next row, and so |
|
98 on, until a filled cell is found. </p></li> |
|
99 <li><p>Browsing towards the beginning of a row moves the focus to the previous |
|
100 filled cell on the same row, or continues searching from the end of the previous |
|
101 row. Using only the Arrow right or Arrow left key, the user can thus go through |
|
102 every item in the grid, regardless of the distribution of items in it.</p><p>Note: |
|
103 In right-to-left UI languages, such as Arabic and Hebrew, the end of a row |
|
104 is on the left-hand side. Respectively, the beginning of the line is on the |
|
105 right. </p></li> |
|
106 <li><p>The grid is scrolled (moved within the view) only when the item that |
|
107 is becoming focused is not fully visible already. </p></li> |
|
108 <li><p>A grid may also loop vertically within the same column. When browsing |
|
109 down from the cell at the bottom of a column, the focus moves to the choice |
|
110 item at the top of the next column and vice versa. If the focus is in the |
|
111 last column when applying the previous rule, the focus loops over to the top |
|
112 of the first column and vice versa.</p></li> |
|
113 </ul> |
|
114 <fig id="GUID-62A2FAE4-565B-4938-9581-3BBA80F9567E"> |
|
115 <title>Examples of moving the focus in a grid. a) Left-to-right UI language; |
|
116 only scroll down commands used. b) Left-to-right UI language; only scroll |
|
117 right commands used. c) Right-to-left UI language; only scroll |
|
118 down used. d) Right-to-left UI language; only scroll right used.</title> |
|
119 <image href="GUID-93FFE6EF-9F6D-46BD-846C-CAC03F26E643_d0e59044_href.png" scale="40" placement="inline"/> |
|
120 </fig> |
|
121 </conbody></concept> |