11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
12 <concept id="GUID-0F593BE1-1220-4403-B04E-B8E8A9A49701" xml:lang="en"><title>UI concepts</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
12 <concept id="GUID-0F593BE1-1220-4403-B04E-B8E8A9A49701" xml:lang="en"><title>UI concepts</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
13 <p>The UI (User Interface) in devices based on the Symbian platform consists |
13 <p>The UI (User Interface) in devices based on the Symbian platform consists |
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">devices based on the Symbian platform</xref>, as do the keys available for input.</p> |
16 of displays varies among <xref href="http://www.forum.nokia.com/devices/matrix_s60_1.html" scope="external">legacy |
17 <fig id="GUID-84A0AF11-85F9-45E1-B723-47A696C42619"><title>Symbian UI</title><image href="GUID-FE89E799-4F19-4C22-96B7-8006EB55812E_d0e66955_href.png"/></fig> |
17 S60 devices and devices based on the Symbian platform</xref>, as do the |
18 <p>The display consists of different elements, for which the following |
18 keys available for input.</p> |
19 terms are used:</p> |
19 <fig id="GUID-84A0AF11-85F9-45E1-B723-47A696C42619"><title>Symbian UI</title><image href="GUID-CA7B2B53-B0DD-4830-90CF-15FD101C66F1_d0e73514_href.png"/></fig> |
|
20 <p>The display consists of the following elements:</p> |
20 <ul> |
21 <ul> |
21 <li><p>window - an area on the display. There are windows that take |
22 <li><p><b>Window</b> - An area on the display. There are windows |
22 up the entire display, and other windows that only take up part of the display. |
23 that take up the entire display, and other windows that only take up part |
23 For example, pop-up windows do not cover the entire display. Pop-up windows |
24 of the display. For example, pop-up windows do not cover the entire display. |
24 have frames and typically the underlying window is partly visible behind the |
25 Pop-up windows have frames and typically the underlying window is partly visible |
25 pop-up window. Access to windows is gained through <xref href="GUID-5944FFF1-79C6-4F5E-95C8-F4833AFC64AB.dita"><i>controls</i></xref>.</p> |
26 behind the pop-up window. Access to windows is gained through <xref href="GUID-5944FFF1-79C6-4F5E-95C8-F4833AFC64AB.dita"><i>controls</i></xref>.</p> |
26 </li> |
27 </li> |
27 <li><p>pane - this is a subelement of a window that is dedicated |
28 <li><p><b>Pane</b> - This is a sub-element of a window that is dedicated |
28 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 |
29 subpanes. </p></li> |
30 sub-panes. </p></li> |
30 </ul> |
31 </ul> |
31 <section id="GUID-4D941E4F-5954-4132-AAB4-CD4A725862EE"><title>Windows</title> |
32 <section id="GUID-4D941E4F-5954-4132-AAB4-CD4A725862EE"><title>Windows</title> |
32 <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> |
33 <fig id="GUID-0E232F07-32AC-42B7-B94C-D959FF35AB68"><title>Symbian UI window</title><image href="GUID-657CAC8A-5524-4D76-9CAB-056191D3A318_d0e66986_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_d0e73549_href.png"/></fig> |
34 <p>Typically, windows contain a status pane, a main pane, and a control |
35 <p>Typically, a window contains a status pane, a main pane, and a control |
35 pane.</p> |
36 pane.</p> |
36 <p>Note that the Symbian UI can rotate between portrait and landscape layouts. |
37 <note> |
37 For more information on the design implications of this feature, see Chapter |
38 <p>Symbian UI can rotate between portrait and landscape layouts. For more |
38 7 of the S60 UI Style Guide available for download from <xref href="http://www.forum.nokia.com/info/sw.nokia.com/id/04c58d5a-84c3-42db-83d5-486c1cf3e6b3/S60_UI_Style_Guide_v1_3_en.pdf.html" scope="external">Forum Nokia</xref>.</p> |
39 information on the design implications of this feature, see <xref href="GUID-685C3F33-1530-4984-B125-E4EF8EBB2EE8.dita">Symbian |
|
40 UI with rotation</xref>.</p> |
|
41 </note> |
39 <p>By default, the <i>status</i> pane:</p> |
42 <p>By default, the <i>status</i> pane:</p> |
40 <ul> |
43 <ul> |
41 <li><p>occupies the top part of the display</p></li> |
44 <li><p>occupies the top part of the display</p></li> |
42 <li><p>shows information on the current application and state, and |
45 <li><p>shows information on the current application and state, and |
43 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> |
44 </li> |
47 </li> |
45 <li><p>contains five subpanes: <i>title pane</i>, <i>context pane</i>, <i>navi |
48 <li><p>contains five sub-panes: <i>title pane</i>, <i>context pane</i>, <i>navi |
46 pane</i>, <i>signal pane</i>, and <i>battery pane/universal indicator pane</i></p> |
49 pane</i>, <i>signal pane</i>, and <i>battery pane/universal indicator pane</i></p> |
47 </li> |
50 </li> |
48 </ul> |
51 </ul> |
49 <p>The <i>main</i> pane is in the middle of the display and is where applications |
52 <p>The <i>main</i> pane is in the middle of the display. Applications display |
50 show their application state.</p> |
53 their application state in the main pane.</p> |
51 <p>By default, the <i>control</i> pane:</p> |
54 <p>By default, the <i>control</i> pane:</p> |
52 <ul> |
55 <ul> |
53 <li><p>occupies the bottom part of the display</p></li> |
56 <li><p>occupies the bottom part of the display</p></li> |
54 <li><p>displays the labels associated with the two softkeys</p> |
57 <li><p>displays the labels associated with the two softkeys</p> |
55 </li> |
58 </li> |
59 <p>Mobile device users navigate through applications based on input from |
62 <p>Mobile device users navigate through applications based on input from |
60 selections in the <i>control pane</i> or key presses. The traditional hierarchical |
63 selections in the <i>control pane</i> or key presses. The traditional hierarchical |
61 tree structure forms the basis for navigation, with mobile device users moving |
64 tree structure forms the basis for navigation, with mobile device users moving |
62 from one node, which represents a state, to another. </p> |
65 from one node, which represents a state, to another. </p> |
63 <p>The figure below illustrates an example of a basic state hierarchy.</p> |
66 <p>The figure below illustrates an example of a basic state hierarchy.</p> |
64 <fig id="GUID-C8A1E4B5-8737-4378-A44A-21EB14882EF5"><title>Example of a basic state hierarchy in an application</title><image href="GUID-7BE7AC77-4EF5-46BD-A491-1DDBBA20AFE6_d0e67074_href.png"/></fig> |
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_d0e73640_href.png"/></fig> |
65 </section> |
68 </section> |
66 <section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title> |
69 <section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title> |
67 <p>The Symbian UI supports tabs, which allow you to collect information |
70 <p>The Symbian UI supports tabs, which allow you to collect information |
68 for a state onto different pages. These tabs exist in the same node of the |
71 for a state onto different pages. These tabs exist in the same node of the |
69 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> |
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 <p>The following figure illustrates the use of tabs in an application.</p> |
73 <p>The following figure illustrates the use of tabs in an application.</p> |
71 <fig id="GUID-19AFDF8B-AC92-4214-BC40-DFEC8F32B6FE"><title>Windows with tabs</title><image href="GUID-BA13D0D6-DE42-43D3-BCA8-5B83181B009E_d0e67094_href.png"/></fig> |
74 <fig id="GUID-7090D372-4DB7-43E6-95CA-22E39FE20752"><title>Windows with tabs</title><image href="GUID-65365507-5773-4FE9-B63E-450CC2DD7570_d0e73660_href.png"/></fig> |
72 <p>The following figures indicates how tabs appear in the navigation hierarchy.</p> |
75 <p>The following figures illustrates how tabs appear in the navigation |
73 <fig id="GUID-F595A77A-00A2-484F-85E5-3318749979E7"><title>Example of a hierarchy with tabs</title><image href="GUID-ADB3FA27-1DC0-4A04-A443-A174EDADF49D_d0e67102_href.png"/></fig> |
76 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_d0e73668_href.png"/></fig> |
74 <p>See also:</p> |
78 <p>See also:</p> |
75 <ul> |
|
76 <li><p><xref href="GUID-A4560E99-C124-49A1-ADA1-D1B1F18EE539.dita">Relationship |
|
77 between framework and applications</xref></p> |
|
78 </li> |
|
79 <li><p><xref href="GUID-B02C762B-C452-4184-ABEA-4753E6CD47D2.dita">Scalability</xref></p> |
|
80 </li> |
|
81 <li><p><xref href="GUID-A1DBE03F-728E-4F31-BE74-5BDA3906C8DD.dita">Themes</xref></p> |
|
82 </li> |
|
83 </ul> |
|
84 <p>The following concepts are also relevant in this context:</p> |
|
85 <ul> |
|
86 <li><p><xref href="GUID-FD2CDEB8-0784-4BE5-A775-170F57D71BBC.dita">UI controller</xref></p> |
|
87 </li> |
|
88 <li><p><xref href="GUID-5944FFF1-79C6-4F5E-95C8-F4833AFC64AB.dita">Controls</xref></p> |
|
89 </li> |
|
90 <li><p><xref href="GUID-DAC32BB9-C0EB-42FF-A596-C2F1A90A4BD7.dita">Views</xref></p> |
|
91 </li> |
|
92 </ul> |
|
93 </section> |
79 </section> |
94 </conbody></concept> |
80 </conbody></concept> |