<?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-0F593BE1-1220-4403-B04E-B8E8A9A49701" xml:lang="en"><title>UI concepts</title><prolog><metadata><keywords/></metadata></prolog><conbody>
<p>The UI (User Interface) in devices based on the Symbian platform consists
of at least one display for showing output to mobile device users and keys
that allow mobile device users to enter input. The number, size, and resolution
of displays varies among <xref href="http://www.forum.nokia.com/devices/matrix_s60_1.html" scope="external">legacy
S60 devices and devices based on the Symbian platform</xref>, as do the
keys available for input.</p>
<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>
<p>The display consists of the following elements:</p>
<ul>
<li><p><b>Window</b> - An area on the display. There are windows
that take up the entire display, and other windows that only take up part
of the display. For example, pop-up windows do not cover the entire display.
Pop-up windows have frames and typically the underlying window is partly visible
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>
</li>
<li><p><b>Pane</b> - This is a sub-element of a window that is dedicated
to a specific purpose. Windows may contain several panes, and panes may contain
sub-panes. </p></li>
</ul>
<section id="GUID-4D941E4F-5954-4132-AAB4-CD4A725862EE"><title>Windows</title>
<p>The following figure illustrates a typical window for an application:</p>
<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>
<p>Typically, a window contains a status pane, a main pane, and a control
pane.</p>
<note>
<p>Symbian UI can rotate between portrait and landscape layouts. For more
information on the design implications of this feature, see <xref href="GUID-685C3F33-1530-4984-B125-E4EF8EBB2EE8.dita">Symbian
UI with rotation</xref>.</p>
</note>
<p>By default, the <i>status</i> pane:</p>
<ul>
<li><p>occupies the top part of the display</p></li>
<li><p>shows information on the current application and state, and
general information about the device status, such as signal and battery strength</p>
</li>
<li><p>contains <i>title pane</i>, <i>context pane</i>, <i>navi
pane</i>, <i>signal pane</i>, <i>battery pane</i>, <i>universal indicator
pane</i> and <i>clock pane</i> sub-panes.</p></li>
</ul>
<p>The <i>main</i> pane is in the middle of the display. Applications display
their application state in the main pane.</p>
<p>By default, the <i>control</i> pane:</p>
<ul>
<li><p>occupies the bottom part of the display</p></li>
<li><p>displays the labels associated with the two softkeys</p>
</li>
</ul>
<p>Mobile device users navigate through applications based on input from
selections in the <i>control pane</i> or key presses. The traditional hierarchical
tree structure forms the basis for navigation, with mobile device users moving
from one node, which represents a state, to another. </p>
<p>The figure below illustrates an example of a basic state hierarchy.</p>
<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>
</section>
<section id="GUID-1ADE27AA-CFB6-42C2-8AE2-E7EDD4EC627A"><title>Tabs</title>
<p>The Symbian UI supports tabs, which allow you to collect information
for a state onto different pages. These tabs exist in the same node of the
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>
<p>The following figure illustrates the use of tabs in an application.</p>
<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>
<p>The following figures illustrates how tabs appear in the navigation
hierarchy.</p>
<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>
<p>See also:</p>
</section>
</conbody></concept>