UI Extensions for Mobile

Daniel F. Zucker, PhD

Ray Rischpater

© 2010 Nokia
UI Extensions for Mobile
• Overview
• Developer Deep Dive
• Qt Scene management
• Application primer
• Qt Mobility Extensions
• Contacts and Links for Additional Information

2 © 2010 Nokia
What are UI Extensions for Mobile
• Also called Uiemo and Orbit (Nokia internal names)
• Used with Qt to power Symbian^4 UI
• Mobile-specific widgets and extensions built on top of Qt
• Developed initially for Symbian-Qt port, but intended eventually to be
cross-platform

• Find the source code on Gitorious at:

http://qt.gitorious.org/uiemo

3 © 2010 Nokia
UI extension libraries
providing

Scalable UI implementation
UI Widget
based on QGraphicsView
Library
optimized for
mobile UX

Text Input &

Localization in
Input framework to 48 Languages
handle on-screen &
hardware inputs
Colors, Graphics
& Effects from
Theme

Tactile feedback
and
gesture support

4 © 2010 Nokia
Uiemo Benefits

• Scene-based representation of graphics

• Collection of common UI components optimized for mobile

• Layouts to ensure screen independence

• Adoption and extension of Qt’s gesture framework

• Device theming for all Uiemo widgets

• System services for system-wide dialogs and virtual input methods

5 © 2010 Nokia
Uiemo Architecture

6 © 2010 Nokia
Scene-based Graphics View

• Based on Qt’s Graphics View architecture

• View stores all items and propagates events
• Scene provides a surface for mapping items
• Items & widgets to represent a specific object

• Scene uses binary space partitioning for fast item access

• Widget placement uses floating-point numbers (handy when

transforming the view)

• You can mix QGraphicsWidget and HbWidget derived classes

7 © 2010 Nokia
UI Elements

• HbWidget provides
• Handles widget containment
• Handles focus navigation

• HbWidget provides a base class for all Uiemo widgets

• HbAbstractButton, HbPushButton, HbToolButton, HbCheckbox
• HbAbstractEdit, HbLineEdit, HbDateTimeEdit, HbTextEdit
• HbAbstractViewItem, HbDataFormViewItem, HbGridViewItem,
HbListViewItem, HbSettingFormItem
• HbListView, HbListWidget
• HbGridView, HbGridWidget
• HbPopup, HbDialog, HbMessageBox, HbNotificationDialog, …

8 © 2010 Nokia
Layouts

• Qt’s QGraphicsLayout subclasses can be used

• QGraphicsLinearLayout
• QGraphicsGridLayout

• New layouts in Uiemo:

• HbAnchorLayout
• HbStackedLayout

• Widgets are scalable to reasonable bounds and placed per the

parent widget’s layout.

9 © 2010 Nokia
Gesture Support

• Based on Qt 4.6 gestures

• Qt gesture support only operates with QTouchEvents, so Hb

provides Hb variant driven by QMouseEvents
• QTapGestureHbTapGesture
• QPanGestureHbPanGesture

• You can provide your own gesture recognizer by subclassing

QGestureRecognizer

10 © 2010 Nokia
Themes & Styles
•Uiemo provides styles
for providing genuinely
new appearances
•Uiemo provides a tile-
based scheme for
managing widget
presentation.
•Follows the QStyle
pattern introduced in Qt
4.

11 © 2010 Nokia
Themes & Styles

• Uiemo provides support for device themes through widgets and a

desktop tool that lets developers create new themes

• Both Uiemo and custom components drawn using the current

device theme
• Uiemo has a library of graphics primitives
• CSS used to describe the color for both existing & new widgets
• FXML used to specify effects

• Open for theme creators as well as application developers

• Developers can create new themes
• Developers can create bespoke widgets for their application that use
the existing theme.

12 © 2010 Nokia
Other Services: Input Methods
•Input Method Framework
provides access to virtual
input methods such as on-
screen keyboards
•You can specify attributes of the
desired input method (bit
masked flags) or through helper
methods
•You can place an application-
specific button on the virtual
input method

13 © 2010 Nokia
Other Services: Device Dialogs

• Device dialogs can be generic, interrupting the foreground

application, or notifications that appear from the top left corner of
the screen.
• Specialization of existing Hb dialogs:
• HbDeviceMessageBox & HbMessageBox
• HbDeviceProgressDialog & HbProgressDialog
• HbDeviceNotificationDialog & HbNotificationDialog

Be careful not to confuse these!

14 © 2010 Nokia
Not Really Uiemo…

• Mobile Extensions for Qt for Symbian

• Lots of wrappers for Symbian interfaces

• Native Symbian is still available

15 © 2010 Nokia
For further information
• daniel.zucker@nokia.com
• raymond.rischpater@nokia.com

• http://qt.gitorious.org/uiemo

• Symbian^4 (including Orbit)

• http://developer.symbian.org/wiki/index.php/Symbian%5E4
• Symbian^4 UI
• http://www.youtube.com/watch?v=cSX7qvi76WQ
• http://www.youtube.com/watch?v=s7ZYD51S2YU
• http://www.engadget.com/photos/nokia-offers-sneak-peak-at-improved-2010-
symbian-user-interface/#2501542
• http://developer.symbian.org/wiki/index.php/Prop/Direct_UI
• Orbit in SF
• http://developer.symbian.org/wiki/index.php/Prop/Orbit

16 © 2010 Nokia