Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)
description
Transcript of Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)
![Page 1: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/1.jpg)
© 2010 Nokia
UI Extensions for Mobile
Daniel F. Zucker, PhDRay Rischpater
![Page 2: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/2.jpg)
© 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
![Page 3: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/3.jpg)
© 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
![Page 4: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/4.jpg)
© 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
![Page 5: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/5.jpg)
© 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
![Page 6: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/6.jpg)
© 2010 Nokia 6
Uiemo Architecture
![Page 7: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/7.jpg)
© 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
![Page 8: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/8.jpg)
© 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, …
![Page 9: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/9.jpg)
© 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.
![Page 10: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/10.jpg)
© 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
![Page 11: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/11.jpg)
© 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.
![Page 12: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/12.jpg)
© 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.
![Page 13: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/13.jpg)
© 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
![Page 14: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/14.jpg)
© 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!
![Page 15: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/15.jpg)
© 2010 Nokia 15
Not Really Uiemo…
• Mobile Extensions for Qt for Symbian
• Lots of wrappers for Symbian interfaces
• Native Symbian is still available
![Page 16: Silicon Valley Symbian Programming SIG: UI Extensions for Mobile (aka Orbit)](https://reader033.fdocuments.in/reader033/viewer/2022051012/546a9fd1b4af9fed268b48ad/html5/thumbnails/16.jpg)
© 2010 Nokia
For further information
• 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