Symbian OS

Development using UIQ 3.x

1 Andreas Jakl, 2008 v2.0b – 22 May 2008

 Disclaimer
● These slides are provided free of charge at http://www.symbianresources.com and are used
during Symbian OS courses at the University of Applied Sciences in Hagenberg, Austria
( http://www.fh-hagenberg.at/ )
● Respecting the copyright laws, you are allowed to use them:
for your own, personal, non-commercial use
in the academic environment
● In all other cases (e.g. for commercial training), please contact andreas.jakl@fh-hagenberg.at
● The correctness of the contents of these materials cannot be guaranteed. Andreas Jakl is not
liable for incorrect information or damage that may arise from using the materials.
● Parts of these materials are based on information from Symbian Press-books published by John
Wiley & Sons, Ltd. This document contains copyright materials which are proprietary to Symbian,
UIQ, Nokia and SonyEricsson. “S60™” is a trademark of Nokia. “UIQ™” is a trademark of UIQ
Technology. Pictures of mobile phones or applications are copyright their respective
manufacturers / developers. “Symbian ™”, “Symbian OS ™” and all other Symbian-based marks
and logos are trademarks of Symbian Software Limited and are used under license. © Symbian
Software Limited 2006.

2 Andreas Jakl, 2008

 Contents

● Development for UIQ 3.x

UI Configurations
Building Blocks
Commands
Resource File-Architecture

3 Andreas Jakl, 2008

Creating layouts with

UIQ 3.x

4 Andreas Jakl, 2008

 UI Platforms: UIQ

● UIQ
Owned by SonyEricsson and
Motorola (2007)
Licensees: SonyEricsson, Benq,
Motorola, Arima
● Design
One & Two-Handed use
Touch screen and/or keys
SonyEricsson P1i
supported
5 Andreas Jakl, 2008
 UI Platforms: UIQ www.uiq.com

Sony Ericsson W960i

Sony Ericsson P1i Sony Ericsson P990

Motorola MotoRizr Z10

Sony Ericsson M600

Sony Ericsson W950

Sony Ericsson G900

Sony Ericsson G700
Motorola MotoRizr Z8
6 Andreas Jakl, 2008
 Next UIQ3-phone?

SonyEricsson P5 “Paris”
(not officially announced yet)

7 Andreas Jakl, 2008

 Performance

● Performance data of current SE UIQ-phones

(P990, W950, M600)
208 MHz ARM9 application processor
2D/3D graphics accelerator (80 MHz)
Video subsystem with JPEG and MPEG-4/H.263
encoder/decoder
Dedicated DSP
Security subsystem (three coprocessors)

8 Andreas Jakl, 2008

 Development for UIQ3

● SDK-Version changes: UIQ Symbian OS Devices

3.0 9.1 SE P1i, W960, P990, ...
3.0: use for maximum 3.1 9.2 Motorola Z8, Z10
compatibility 3.3 9.3 ?
3.1: vector graphics (SVG),
optimisations for non-touch
UI
3.3: widgets, unified
messaging platform

9 Andreas Jakl, 2008

 Overview

● UIQ 3 supports many different device types

● Write app once, run on all UIQ-phones
● new concepts for layouting
and command handling
● Extends existing Symbian OS
mechanisms (Controls, Views, …)

10 Andreas Jakl, 2008

 UI Configurations

● Combines the following properties:

Screen resolution
Orientation (rotated 180°?)
Touch Screen (yes / no)
Interaction Style (Pen / Softkey)
e.g. Flip
Resolution Orientation
Closed-Mode,
240 x 320 (QVGA) Portrait SE P990
320 x 240 (QVGA) Landscape
240 x 256 Small
256 x 240 Small Landscape
*…+ *…+

11 Andreas Jakl, 2008

UI Configurations
Softkey Style Pen Style
Small Portrait Portrait
Menu
Title bar Status bar

View context area

Application
space

Softkeys Button bar

Menu

12 Andreas Jakl, 2008

 Development

● UI Configurations can be changed through:

Hardware-Events (Flip open / close)
Software (e.g. Gallery-app switches to landscape)
● Adapt app to various UI Configurations
e.g. written for Softkeys, device only supports pen?
– App. requests Softkey-Config
– Initialized with Softkey-Config, but runs with Pen-Style
– Automated “Downgrade Path”: Better Compatibility
– Standard UI-Controls useable in all UI-Configs
Emulate Layout changes from within Emulator!
● More information:
http://www3.symbian.com/faq.nsf/0/761C1B1726A904508025726F004E5940

13 Andreas Jakl, 2008

 Building Blocks

● Container for Controls

(Compound Control)
Not visible themselves
Define layout for
contained controls
Pre-defined layouts with
multiple “slots”
(Places for controls)
Building Block
derived from
CCoeControl Control

14 Andreas Jakl, 2008

 System Building Blocks
Selection of some
of the most
ItemSlot OnelineBuildingBlock
used Building Blocks
ItemSlot – allowed to wrap
ManylinesBuildingBlock
several lines

Building Block
ItemSlot 1
CaptionedOnelineBuildingBlock Item Slot (Control)
ItemSlot 2
Icon Slot
ItemSlot 1 ItemSlot 2 HalflineHalflineBuildingBlock

ItemSlot IconOnelineBuildingBlock

ItemSlot 1
IconCaptionedOnelineBuildingBlock
ItemSlot 2

ItemSlot 1
MediumThumbnailDoubleOnelineBuildingBlock
ItemSlot 2
15 Andreas Jakl, 2008
 States

● A Building Block can be in several states:

No focus: transparent background

Highlighted when it has focus (control stand-in)

Editing mode (container pop-out)

16 Andreas Jakl, 2008

Better control over controls

Layout Manager

17 Andreas Jakl, 2008

 Layout Manager

● Layout Manager manages alignment of Controls

like Swing in Java, Qt, …
● Building Blocks
pre-defined layouts
Controls arranged using Layout Managers
Everything a standard app. needs
● … if needed, you can also use Layout Managers directly
(can be assigned to a compound control)

18 Andreas Jakl, 2008

 Available Layouts
RowLayoutManager GridLayoutManager

FlowLayoutManager ColumnLayoutManager

Compound Control with Layout Manager

Control

19 Andreas Jakl, 2008

User interaction using

Commands

20 Andreas Jakl, 2008

 Commands

● Visual representation of an action

Old style: Create a menu item at a fixed position
New: Command with type and priority
Placed on softkeys, button bar or menu, depending on
device
Most important Commands on softkeys / buttons, the rest is
placed in a menu
Comparable to Commands in JavaME
– but no “hiding” of the Hardware
– gives you more control over placement for known UI configs
● Command Processing Framework (CPF)

21 Andreas Jakl, 2008

 Command Placement

● Depends on UI Config (Softkeys, Buttons, Menu)

● Possible to define different Commands for UI Configs
Softkey Style Pen Style

22 Andreas Jakl, 2008

 Command Placement

Softkey Style

The rest
Type: Done / Type: Item / ( menu) /
2nd priority 1st priority 3rd priority

Back Delete

23 Andreas Jakl, 2008

 Command Processing
CCoeControl

2. Add
Command Framework
Client (Control)
MQikCommandModelOwner
e.g. CQikViewBase

3. Handle
1. Create Command invoked
command Invoker
MQikCommandOperator
e.g. Softkey, App Title Bar
Command Handler
MQikCommandHandler
e.g. CQikViewBase or Engine

24 Andreas Jakl, 2008

 Dialogs

● Standard Eik-Dialog
(frequently used in Simple Dialog View Dialog
UIQ2) is deprecated
● New:
Simple Dialog
– Does not support tabs
– For a single user
interaction control
View Dialog
– Uses Building Blocks
● Integrate Commands
25 Andreas Jakl, 2008
Putting everything together

Creating an Application

26 Andreas Jakl, 2008

 How to Layout?

1. Construct from the source code

Advantage: we’re more used to it
Disadvantages: complicated – you have to create and
manage layout, controls, focus, screen mode, …
2. Define in Resource Files, load from source code
Disadvantage: many sub-structures
Advantages: flexible, easier, simple adaptation to
other UI-Configurations

27 Andreas Jakl, 2008

 UI-Configurations
Layout.rss xxx.ra
(can be multiple files)
ui_config_mode view command_list
Softkey / Portrait layout1 cmd_set1 layout1
definition
Softkey / Landscape layout2 cmd_set1

Pen / Portrait layout1 cmd_set2 cmd_set1

definition
…

layout2
definition

cmd_set2
definition

28 Andreas Jakl, 2008

 .rss-Elements
View Configurations
View Config …

View Command List

Command …

Loaded and View Pages

referenced by
source code
View Page …

Container Settings
Item …

Control Collection Layout (Manager)

29 Andreas …
ControlJakl, 2008
 .rss-Elements
Allows different layouts and View Configurations
commands for different UI-configs
View Config …

Defines view by linking to 1..* View Command List

pages
Command …
Define properties of
Defines pages
Loaded andof a view and links to View Pages available commands
their
referenced bycontent
source code
View Page …

Defines content of a page. Container Settings

Items can be Building Blocks.
Item … (Optional) Defines layout
of the view
(Optional) Use the Collection to
define Controls; link to those in Control Collection Layout Manager
Container Settings. Easier for
30
reusing and referencing.
Andreas …
ControlJakl, 2008
 More Information

● Tutorial
The accompanying tutorial explains all of the major concepts
in detail
● Book – UIQ 3: The Complete Guide
Available early 2008
Also published online for free:
http://books.uiq.com/index.php/Main_Page
● Developer resources
http://developer.uiq.com/
http://developer.sonyericsson.com/
31 Andreas Jakl, 2008
That’s it!

Thanks for your attention

32 Andreas Jakl, 2008