© 2010 Nokia

UI Extensions for Mobile

Daniel F. Zucker, PhDRay 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 4

UI extension libraries providing

Scalable UI implementation based on QGraphicsView

UI Widget Library optimized for mobile UX

Input framework to handle on-screen & hardware inputs

Tactile feedback and gesture support

Colors, Graphics & Effects from Theme

Text Input & Localization in 48 Languages

© 2010 Nokia 5

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

© 2010 Nokia 6

Uiemo Architecture

© 2010 Nokia 7

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

© 2010 Nokia 8

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

© 2010 Nokia 9

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.

© 2010 Nokia 10

Gesture Support

• Based on Qt 4.6 gestures

• Qt gesture support only operates with QTouchEvents, so Hb provides Hb variant driven by QMouseEvents

• QTapGestureHbTapGesture

• QPanGestureHbPanGesture

• You can provide your own gesture recognizer by subclassing QGestureRecognizer

© 2010 Nokia 11

Themes & Styles

•Uiemo provides stylesfor providing genuinely new appearances

•Uiemo provides a tile-based scheme for managing widget presentation.

•Follows the QStylepattern introduced in Qt 4.

© 2010 Nokia 12

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.

© 2010 Nokia 13

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

© 2010 Nokia 14

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!

© 2010 Nokia 15

Not Really Uiemo…

• Mobile Extensions for Qt for Symbian

• Lots of wrappers for Symbian interfaces

• Native Symbian is still available

© 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