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-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

    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

    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>

    17 <fig id="GUID-84A0AF11-85F9-45E1-B723-47A696C42619"><title>Symbian UI</title><image href="GUID-FE89E799-4F19-4C22-96B7-8006EB55812E_d0e41980_href.png"/></fig>

    18 <p>The display consists of different elements, for which the following

    19 terms are used:</p>

    20 <ul>

    21 <li><p>window - an area on the display. There are windows that take

    22 up the entire display, and other windows that only take up part of the display.

    23 For example, pop-up windows do not cover the entire display. Pop-up windows

    24 have frames and typically the underlying window is partly visible behind the

    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 </li>

    27 <li><p>pane - this is a subelement of a window that is dedicated

    28 to a specific purpose. Windows may contain several panes, and panes may contain

    29 subpanes. </p></li>

    30 </ul>

    31 <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 <fig id="GUID-0E232F07-32AC-42B7-B94C-D959FF35AB68"><title>Symbian UI window</title><image href="GUID-657CAC8A-5524-4D76-9CAB-056191D3A318_d0e42011_href.png"/></fig>

    34 <p>Typically, windows contain a status pane, a main pane, and a control

    35 pane.</p>

    36 <p>Note that the Symbian UI can rotate between portrait and landscape layouts.

    37 For more information on the design implications of this feature, see Chapter

    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 <p>By default, the <i>status</i> pane:</p>

    40 <ul>

    41 <li><p>occupies the top part of the display</p></li>

    42 <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>

    44 </li>

    45 <li><p>contains five subpanes: <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>

    47 </li>

    48 </ul>

    49 <p>The <i>main</i> pane is in the middle of the display and is where applications

    50 show their application state.</p>

    51 <p>By default, the <i>control</i> pane:</p>

    52 <ul>

    53 <li><p>occupies the bottom part of the display</p></li>

    54 <li><p>displays the labels associated with the two softkeys</p>

    55 </li>

    56 <li><p>appears even when pop-up windows are on the display, although

    57 they are not contained in the pop-up window.</p></li>

    58 </ul>

    59 <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

    61 tree structure forms the basis for navigation, with mobile device users moving

    62 from one node, which represents a state, to another. </p>

    63 <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_d0e42099_href.png"/></fig>

    65 </section>

    66 <section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title>

    67 <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

    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>

    70 <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_d0e42119_href.png"/></fig>

    72 <p>The following figures indicates how tabs appear in the navigation hierarchy.</p>

    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_d0e42127_href.png"/></fig>

    74 <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>

    94 </conbody></concept>