14 of at least one display for showing output to mobile device users and keys |
14 of at least one display for showing output to mobile device users and keys |
15 that allow mobile device users to enter input. The number, size, and resolution |
15 that allow mobile device users to enter input. The number, size, and resolution |
16 of displays varies among <xref href="http://www.forum.nokia.com/devices/matrix_s60_1.html" scope="external">legacy |
16 of displays varies among <xref href="http://www.forum.nokia.com/devices/matrix_s60_1.html" scope="external">legacy |
17 S60 devices and devices based on the Symbian platform</xref>, as do the |
17 S60 devices and devices based on the Symbian platform</xref>, as do the |
18 keys available for input.</p> |
18 keys available for input.</p> |
19 <fig id="GUID-84A0AF11-85F9-45E1-B723-47A696C42619"><title>Symbian UI</title><image href="GUID-CA7B2B53-B0DD-4830-90CF-15FD101C66F1_d0e45876_href.png"/></fig> |
19 <fig id="GUID-84A0AF11-85F9-45E1-B723-47A696C42619"><title>Device display and keypad controls</title><image href="GUID-CA7B2B53-B0DD-4830-90CF-15FD101C66F1_d0e40313_href.png"/></fig> |
20 <p>The display consists of the following elements:</p> |
20 <p>The display consists of the following elements:</p> |
21 <ul> |
21 <ul> |
22 <li><p><b>Window</b> - An area on the display. There are windows |
22 <li><p><b>Window</b> - An area on the display. There are windows |
23 that take up the entire display, and other windows that only take up part |
23 that take up the entire display, and other windows that only take up part |
24 of the display. For example, pop-up windows do not cover the entire display. |
24 of the display. For example, pop-up windows do not cover the entire display. |
29 to a specific purpose. Windows may contain several panes, and panes may contain |
29 to a specific purpose. Windows may contain several panes, and panes may contain |
30 sub-panes. </p></li> |
30 sub-panes. </p></li> |
31 </ul> |
31 </ul> |
32 <section id="GUID-4D941E4F-5954-4132-AAB4-CD4A725862EE"><title>Windows</title> |
32 <section id="GUID-4D941E4F-5954-4132-AAB4-CD4A725862EE"><title>Windows</title> |
33 <p>The following figure illustrates a typical window for an application:</p> |
33 <p>The following figure illustrates a typical window for an application:</p> |
34 <fig id="GUID-4707694E-3017-4CD2-A5EC-63B3C624C6DF"><title>Symbian UI window</title><image href="GUID-72262200-B940-4D0C-8FA0-6628E9894E8F_d0e45911_href.png"/></fig> |
34 <fig id="GUID-4707694E-3017-4CD2-A5EC-63B3C624C6DF"><title>Symbian UI window</title><image href="GUID-72262200-B940-4D0C-8FA0-6628E9894E8F_d0e40348_href.png"/></fig> |
35 <p>Typically, a window contains a status pane, a main pane, and a control |
35 <p>Typically, a window contains a status pane, a main pane, and a control |
36 pane.</p> |
36 pane.</p> |
37 <note> |
37 <note> |
38 <p>Symbian UI can rotate between portrait and landscape layouts. For more |
38 <p>Symbian UI can rotate between portrait and landscape layouts. For more |
39 information on the design implications of this feature, see <xref href="GUID-685C3F33-1530-4984-B125-E4EF8EBB2EE8.dita">Symbian |
39 information on the design implications of this feature, see <xref href="GUID-685C3F33-1530-4984-B125-E4EF8EBB2EE8.dita">Symbian |
43 <ul> |
43 <ul> |
44 <li><p>occupies the top part of the display</p></li> |
44 <li><p>occupies the top part of the display</p></li> |
45 <li><p>shows information on the current application and state, and |
45 <li><p>shows information on the current application and state, and |
46 general information about the device status, such as signal and battery strength</p> |
46 general information about the device status, such as signal and battery strength</p> |
47 </li> |
47 </li> |
48 <li><p>contains five sub-panes: <i>title pane</i>, <i>context pane</i>, <i>navi |
48 <li><p>contains <i>title pane</i>, <i>context pane</i>, <i>navi |
49 pane</i>, <i>signal pane</i>, and <i>battery pane/universal indicator pane</i></p> |
49 pane</i>, <i>signal pane</i>, <i>battery pane</i>, <i>universal indicator |
50 </li> |
50 pane</i> and <i>clock pane</i> sub-panes.</p></li> |
51 </ul> |
51 </ul> |
52 <p>The <i>main</i> pane is in the middle of the display. Applications display |
52 <p>The <i>main</i> pane is in the middle of the display. Applications display |
53 their application state in the main pane.</p> |
53 their application state in the main pane.</p> |
54 <p>By default, the <i>control</i> pane:</p> |
54 <p>By default, the <i>control</i> pane:</p> |
55 <ul> |
55 <ul> |
56 <li><p>occupies the bottom part of the display</p></li> |
56 <li><p>occupies the bottom part of the display</p></li> |
57 <li><p>displays the labels associated with the two softkeys</p> |
57 <li><p>displays the labels associated with the two softkeys</p> |
58 </li> |
58 </li> |
59 <li><p>appears even when pop-up windows are on the display, although |
|
60 they are not contained in the pop-up window.</p></li> |
|
61 </ul> |
59 </ul> |
62 <p>Mobile device users navigate through applications based on input from |
60 <p>Mobile device users navigate through applications based on input from |
63 selections in the <i>control pane</i> or key presses. The traditional hierarchical |
61 selections in the <i>control pane</i> or key presses. The traditional hierarchical |
64 tree structure forms the basis for navigation, with mobile device users moving |
62 tree structure forms the basis for navigation, with mobile device users moving |
65 from one node, which represents a state, to another. </p> |
63 from one node, which represents a state, to another. </p> |
66 <p>The figure below illustrates an example of a basic state hierarchy.</p> |
64 <p>The figure below illustrates an example of a basic state hierarchy.</p> |
67 <fig id="GUID-C8A1E4B5-8737-4378-A44A-21EB14882EF5"><title>Example of a basic state hierarchy in an application</title><image href="GUID-BAABB057-5C48-4991-A283-DAC5D54562C1_d0e46002_href.png"/></fig> |
65 <fig id="GUID-C8A1E4B5-8737-4378-A44A-21EB14882EF5"><title>Example of a basic state hierarchy in an application</title><image href="GUID-BAABB057-5C48-4991-A283-DAC5D54562C1_d0e40442_href.png"/></fig> |
68 </section> |
66 </section> |
69 <section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title> |
67 <section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title> |
70 <p>The Symbian UI supports tabs, which allow you to collect information |
68 <p>The Symbian UI supports tabs, which allow you to collect information |
71 for a state onto different pages. These tabs exist in the same node of the |
69 for a state onto different pages. These tabs exist in the same node of the |
72 navigation hierarchy. The concept of tabs is related to the term <xref href="GUID-DAC32BB9-C0EB-42FF-A596-C2F1A90A4BD7.dita"><i>view</i></xref>.</p> |
70 navigation hierarchy. The concept of tabs is related to the term <xref href="GUID-DAC32BB9-C0EB-42FF-A596-C2F1A90A4BD7.dita"><i>view</i></xref>.</p> |
73 <p>The following figure illustrates the use of tabs in an application.</p> |
71 <p>The following figure illustrates the use of tabs in an application.</p> |
74 <fig id="GUID-7090D372-4DB7-43E6-95CA-22E39FE20752"><title>Windows with tabs</title><image href="GUID-65365507-5773-4FE9-B63E-450CC2DD7570_d0e46022_href.png"/></fig> |
72 <fig id="GUID-7090D372-4DB7-43E6-95CA-22E39FE20752"><title>Windows with tabs</title><image href="GUID-65365507-5773-4FE9-B63E-450CC2DD7570_d0e40462_href.png"/></fig> |
75 <p>The following figures illustrates how tabs appear in the navigation |
73 <p>The following figures illustrates how tabs appear in the navigation |
76 hierarchy.</p> |
74 hierarchy.</p> |
77 <fig id="GUID-F595A77A-00A2-484F-85E5-3318749979E7"><title>Example of a hierarchy with tabs</title><image href="GUID-ADB3FA27-1DC0-4A04-A443-A174EDADF49D_d0e46030_href.png"/></fig> |
75 <fig id="GUID-F595A77A-00A2-484F-85E5-3318749979E7"><title>Example of a hierarchy with tabs</title><image href="GUID-ADB3FA27-1DC0-4A04-A443-A174EDADF49D_d0e40470_href.png"/></fig> |
78 <p>See also:</p> |
76 <p>See also:</p> |
79 </section> |
77 </section> |
80 </conbody></concept> |
78 </conbody></concept> |