Meego Harmattan training
Upcoming SlideShare
Loading in...5
×
 

Meego Harmattan training

on

  • 5,027 views

 

Statistics

Views

Total Views
5,027
Views on SlideShare
2,535
Embed Views
2,492

Actions

Likes
1
Downloads
70
Comments
0

6 Embeds 2,492

http://habrahabr.ru 2470
http://m.habrahabr.ru 18
http://3lp.cx 1
http://www.slideshare.net 1
http://readbox.info 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Meego Harmattan training Meego Harmattan training Presentation Transcript

  • MeeGo Harmattan
    Course Introduction
  • Digia – WhoAreWe?
    DigiaPlc – http://www.digia.com
    Tino Pyssysalo
    Senior Software Specialist
    Tampere, Finland
  • Pre-requisites
    Wearegoing to useboth in this training
    Basics of and QML
    “Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.”
  • Required Tools
    On yourlaptop:
    Qt SDK 1.1.2 includingHarmattantargets
    Custominstallation (Harmattan is foundunderExperimentalpackages)
    N950
    Image flashed
    Installationinstructions:
    ”GettingStarted with the Qt SDK”
    E.g. in Windows underStart menu
  • Course Contents
    http://www.developer.nokia.com/Devices/MeeGo/
  • MeeGo Harmattan
    MeeGo UX
  • Agenda
    Introduction to MeeGo
    Overall UI Model
    MeeGo Application Design
    UX Principles
    MeeGo Design dos and donts
    UI Patterns and Components
  • Goals
    High-level overview of the UX
    Details of User Experience are found in the MeeGo UX Guideline documentation
    http://swipe.nokia.com/
    The presentation does not cover the actual software components what to use, but only represents the expectation level of MeeGo 3rd party UI
    MeeGo is a new platform, which has similarities with other platforms in the market, but it has its own signature UX that should be captured within the application development
  • What Is MeeGo Harmattan?
    “The MeeGo effort will be an ongoing exploration of innovative platform disruptions and next-generation devices, platforms and user experiences.”
    --Stephen Elop, CEO, Nokia
    N9/N950
    MeeGo 1.2
    Harmattan API
    UI: MeegoTouch –
    All it takes is a swipe
    Debian packaging
    N900
    Maemo 5
    Fremantle
    UI: Hildon
    Debian packaging
    ?
    MeeGo 1.xUI:MeegoTouch
    RPM packaging
  • Display - 3.9" AMOLED display with curved glass, 16M colors, 854 x 480 pixels screen resolution
    Memory - 16GB/64GB, 1GB RAM
    Connectivity - A-GPS, Compass, WLAN 802.11 abgn, micro USB, BT 2.1, NFC
    Audio - MP3 player, 3.5 mm audio jack, Supported codecs: mp3, AAC, AAC+, eAAC+, WMA, FLAC
    Video - Video recording and playback up to 720P, H.263, H.264, MPEG-4, WMV 9, Matroska
    Camera - 8 Megapixel AF camera with Carl Zeiss optics, dual-LED flash, wide-angle lens
    Nokia N9
  • MeeGo Design Principles
    Simple & Intuitive
    Reduce the visual noise, keep things as simple as possible
    No sub-folders in Application Launcher, shallow navigation
    Direct touch and swipe
    Meaningful Personalization
    Personalization in smart and dynamic ways, not just theming
    Speaks My Language
    Familiar language that feels approachable and friendly
    “The gallery won’t open” vs. “Unable to open gallery”
    Premium Nokia
    A luxurious product with beautiful graphics and rich motion
    Delightful to Use
    Brings a smile to your face from first use and again day after day
  • MeeGo Harmattan
    MeeGo UX – UI Model
  • Home Screen
    The Home screen for MeeGo is comprised of three key views: Notifications, Applications
    and Multitasking.
    These views exist adjacent to each other on a single row and can be accessed by horizontally dragging between the screens.
  • UI Overview
  • Home Screen
    Notifications
    • The Events feed delivers continuous updates to the device from any application the user has enabled.
    • Notifications (e.g. missed call, new SMS) and ongoingevents (e.g. active call, file transfer) appear at the top of the Notifications view, above the events feed.
    Apps Launcher
    • The Applications view contains links to all applications installed on a device. Each application is presented as an icon in a four- column grid that scrolls vertically.
    Multitasking
    • The Multitasking view presents thumbnails of applications in a grid, providing an overview of any recently accessed applications. This grid grows and scrolls vertically to accommodate application thumbnails as a user adds them.
    The Swipe
    • When viewing a full screen application, Swiping away the application from any edge brings the user to the last accessed Home view. For example, if the user had launched the Conversations application from the Notifications view, Swiping from the side or bottom edges will always return the user to that Notifications view.
  • Launcher
    Launcher
    • The Applications view contains links to all applications installed on a device.
    • Each application is presented as an icon in a four- column grid that scrolls vertically.
    • When the user installs a new application, it appears at the end (bottom) of the application grid.
    • To launch an application, a user simply taps on its icon.
    Swiping to exit applications
    • When viewing a full screen application, Swiping away the application from any edge brings the user to the last accessed Home view. For example, if the user had launched the Conversations application from the Notifications view, Swiping from the side or bottom edges will always return the user to that Notifications view.
    • When designing applications for MeeGo, you should consider the structure of the application and any interactions that could potentially conflict with the Swipe interaction principle.
  • Notifications
    Event Feed
    • The Events feed delivers continuous updates to the device from any application the user has enabled. These events are pushed to the feed and displayed in a vertically scrolling list, with the newest item at the top.
    • Event updates that appear in the feed should serve as direct, deep links into content or actions within relevant applications.
    • By tapping on an event update, the user can launch the corresponding application in the appropriate context.
    • Note: The user must be allowed to remove event updates manually – the application should not delete them automatically.
    Notifications
    • When available, notifications (e.g. missed call, new SMS) and ongoing events (e.g. active call, file transfer) appear at the top of the Notifications view, above the events feed. Notifications and ongoingevents behave in the same way as event updates, since a user can simply tap them to launch the associated application.
    • Until a user opens or deletes a notification, it must remain in the Notifications view and stay actionable. However, once an ongoingevent is over, it should disappear from the Notifications view.
  • Multitasking
    Recent Applications
    • The Multitasking view presents thumbnails of applications in a grid, providing an overview of any recently accessed applications. This grid grows and scrolls vertically to accommodate application
    thumbnails as a user adds them.
    • To launch an application, the user can simply tap the desired thumbnail.
    Order of applications
    • The Multitasking view displays application thumbnails according to how recently a user has accessed them. The grid populates from left to right and top to bottom, with the newest item occupying
    the top-left position. When the user switches between open tasks, the applications reorder to maintain the order of recently accessed.
    Resizing the grid
    • The thumbnails in the Multitasking view can be presented as a 3x3 or a 2x2 grid. A multitouchpinch gesture lets users switch easily
    between the two grids.
    Removing applications
    • To remove an application from the Multitasking view, the user can make a long press on the relevant thumbnail.
  • MeeGo Harmattan
    MeeGo UX – Application Design
  • Application Types
    Productivity apps
    Dealswith more pragmatic actions, such as sending a text message (clock, calendar, notes)
    Immersion apps
    Offersmore entertainment-based or visually rich experiences (camera, gallery, musi/video player)
  • Application Types
    Productivity
    Efficiency, simplicity are important
    Drill-down structure
    Simple toolbars highlighting key actions
    Tabs showing content views
    Usually rely more on common components
    Calendar
    Immersion
    It is common to use full views
    Customized user experience
    May rely on N9 native components
    It will be the designer’s responsibility to decide how to represent content, navigation and interactions
    Map browsing
  • ScreenAnatomy
    Status bar and notification banners
    Shows signal strength, time and battery life
    Supports access to the Settings Shortcuts menu
    Required element for all views except full screen views
    As an event is received or triggered, a Notification banner should be displayed in place of the Status Bar
    Header Menu
    Used to control the main navigation within the application from the header
    Header bar is also an option to consider the theming of your application
    Content Area
    Presents navigation options, text, media, etc.
    Actions can also be presented together with the content
    Action Bar (toolbar)/Tab bar
    An optional bar fixed to the bottom of the screen
    An optional Tab Bar containing up to five navigation options is available when a Tool Bar exists
  • ScreenLayouts – Lists
    A list view provides a simple view for large amounts of text- based data that can be navigated vertically
    A range of list view layouts and options accommodate for different requirements
  • ScreenLayouts – Grids
    Visual content such as photos or video are best displayed in a grid view that can be navigated vertically
  • ScreenLayouts – SplitViews
    A split view combines a traditional list view with a dynamic view to promote content more visually
  • ScreenLayouts – Full Screen
    For applications that need to provide a more immersive experience, a Full Screen mode is available
    It is important, however, to provide application navigation where needed, as well as a way to exit an application
    As a principle, a Swipe from any edge should exit the application
  • Navigationwithin Applications
    Three different patterns
    Filtering with Header Menu
    Drill Down
    Tabs
    Some of the UX problems with navigation can be solved with a Sheet Component
  • Navigation Structures
  • Navigationwithin Applications – Header Menu
  • Navigationwithin Applications – Tabs
    Quick access between distinct areas or modes
    For applications with a flat navigational structure
    The Basic Tabs bar should only display navigation options (up to a maximum of five)
    Never add the Back button, Action Menu or actions to the bar
    Instead, create buttons within the Content area to accommodate these actions
    Navigation options in an application should not change over time
  • Navigationwithin Applications – Drill Down
    The Drill Down is the most scalable navigation model, providing access to an application’s full navigation structure at the top level
    It allows a user to find a desired content item by navigating down the hierarchy of the application’s information structure via categories
    As the user moves down the structure, a Back button becomes available that facilitates navigation to the previous level.
  • Navigationwithin Applications - Overlays
    The framework offers different types of overlays that enable the user to respond or provide input and information
    Each type of overlay has its own purpose and is used in a different context
    Forexample, the Sheet is used for the more complex interactions, while the other are used for simple one click interactions
  • Highlight Color
    A key visual attribute of all Nokia N9 applications is the highlight color
    Each application owns a unique highlight color for personality and differentiation
    When choosing your application's highlight color, consider aligning it with the primary color of your brand to promote your brand's presence and strengthen your application's identity
  • Applying Highlight Color
    Highlight color can be applied across a set of components
    Apply your highlight color consistently throughout your application
    Your highlight color will help in the recognition of your application across the various home screens
  • Icons
    Launcher icons
    In-app icons
    Toolbar icons
    http://www.developer.nokia.com/swipe/ux/downloads/NokiaN9_Icon_Guidelines.pdf
  • MeeGo Harmattan
    MeeGo UX – Dos and Donts
  • Dos and Donts – 1/3
    Keep it simple and easy to use
    Make it obvious what your application does and how it works
    Avoid replication of MeeGo’s core interaction model
    Don’t introduce Layer-based, edge-swiping navigation structure within the application
    This is a touch UI
    Consider ergonomics and the size of people’s fingers when laying out your application and designing controls
    Rely on common components for familiarity, either by using them directly or, when appropriate, changing them in a logical and coherent way
  • Dos and Donts – 2/3
    Distribute functions accordingly
    Most important functions are in the action bar, secondary functions in the content area or view menu, and when appropriate, place specific content functions in the object menu.
    Avoid duplication of same function in different views
    Aim to scroll only repeating content
    Don’t hide distinct functions below the fold line as people may not discover them
    Curb your verbosity
    Use simple and concise language that users can understand easily
    Be consistent with the framework structure
    Ensure that Swipe is available at any time during application use, always bring the user back to home, and be sure to follow the global navigation rules
  • Dos and Donts – 3/3
    Be consistent with core interactions
    Don’t create conflicting behaviors to those set in the guidelines, such as confirming actions and using gestures
    It should be possible to revert most actions, so prompts are only used for unexpected events or irreversible things
    Think carefully when your application is an exception to the rules, like the full screen cases
  • MeeGo Harmattan
    UI Patterns and Components
  • Patterns
    Toolbar
    Back always on the left, Action menu on the right
    Negative actions on the right
    Dialogues and menus
    Query dialog, action menu, object menu
    Sheet
    Self-contained full screen view sliding from the bottom
    Change context temporarily, e.g. send an email
    Sheet buttons always on top
    Completer
    Time and date picker
  • Components
    View headers
    With text, icon, action
    Group headers and dividers
    Separates groups or sections
    List items
    Text, thumbnail, icon, frame
    Text fields
    Labels
    Buttons
    Text, icon and text, dropdown
    Controls
    Checkbox, switch, radio buttons
    Sliders
    Tooltip, actions
    Progress bars
    Spinners
    In view header, in-content, modal loading, sheet
    System banners
    Popup right below the status bar
    Icon and at most three lines of text
  • MeeGo Harmattan
    Development Environment
  • Qt SDK 1.1.2
    CombinesallQtdevelopmentunderone SDK!
    Canbeinstalled on Windows/Mac OSX/Linux
    Main features:
    Qt4.7.3
    QtQuick 1.0 (1.1 for Harmattan)
    QtMobilityAPIs1.1.3
    QtCreator2.2.1
    Qt Designer
    HarmattanEmulator
    Integrated Cross-Compiler (MADDE)
    Simulator
    Package support
  • Installation
    Note! MeeGo Harmattantarget is available in Custom/Experimentalinstallationonly
    The driver for USB connectivity is found in (Win) C:QtSDKMaddeusbdriver
  • Targets
    MeeGo 1.2 Harmattan API
    MeeGo API + mobilityAPIs + QtQuick + QtQuick Components + someplatformAPIs
    HarmattanPlatform API
    MiddlewareAPIs
    BuildyourdaemonusingD-BusorGObjectinterface to communicate with othercomponents
  • Emulator
    Uses QEMU
    Runs the deivcebinary
    Simulator maybeuseful as well
    Easy to test the functionality of mobilityAPIs
    Note: Maycrash, ifOpenGLmode is set to autodetect
    Change the mode to Software Rendering
  • Device Deployment
    Set the phone into Developer Mode
    Settings>Security>Developer Mode
    Connect the USB cable (or WiFi)
    Select SDK in the dialog opened in the phone
    Launch SDK Connectivity application
    Create a new device configuration and change the device configuration in Run settings
    Look at the password and host name in SDK connectivity
  • Debugging Tools
    Runyourdevice in the developermode and youmayrunseveraldebuggingtools
    Settings > Security > Developermode
    Launchappsfrom the terminal
    latrace
    Traceslibrarycalls
    strace
    Tracessystemcalls
    valgrind
    Memory leaks, heapprofiling, cacheprofiling, callgraph
    htop
    Processviewer
    Energy profiler
    Power consumtpion, mobile IP traffic, CPU activities
  • MeeGo Harmattan
    MeeGo 1.2 Harmattan API
  • MeeGo 1.2 Harmattan API
    Qt Components
    Qt Mobility
    QML
    Fully productized set of APIs
    One API reference
    Compatibility Promise (Updates)
    APIs cover most development needs
    QtSparql
    QtWebkit
    Qt
    Open GL ES 1.1/2.0
    GStreamer
    Pulseaudio
    Signon
    Telepathy Qt4
    Resource Policy
    Accounts
    Qm System
    Ovi Notifications Engine
  • Basic Mobile Application
    Qt Components
    Qt Mobility
    QML
    Network – Location – Maps
    Integrated into Harmattan UX
    C++ Wrapper
    QtSparql
    QtWebkit
    Qt
    QML Files
    .desktop
    icon
    .pro
    Open GL ES 1.1/2.0
    GStreamer
    Pulseaudio
    Signon
    Telepathy Qt4
    Resource Policy
    Accounts
    Qm System
    Ovi Notifications Engine
  • Extended Mobile Multimedia Application
    Multimedia– Tracker
    Integrated into Harmattan UX
    Qt Components
    Qt Mobility
    QML
    C++ Wrapper
    QtSparql
    QtWebkit
    Qt
    QML Files
    .js Files
    Open GL ES 1.1/2.0
    GStreamer
    Pulseaudio
    .desktop
    .aegis
    icon
    .pro
    .qrc
    Signon
    Telepathy Qt4
    Resource Policy
    C++/Qt Logic
    Accounts
    Qm System
    Ovi Notifications Engine
  • Mobile Game
    Qt Components
    Qt Mobility
    QML
    Develop on top of standard technologies:
    Open GL ES
    GStreamer
    Pulseaudio
    QtSparql
    QtWebkit
    Qt
    Open GL ES 1.1/2.0
    GStreamer
    Pulseaudio
    Signon
    Telepathy Qt4
    Resource Policy
    Accounts
    Qm System
    Ovi Notifications Engine
  • Platform API
    If the APIs in the Harmattan API are not sufficient, there is the Platform API, which contains an even richer set of API’s, but:
    We don’t give a compatibility promise!
  • Security Framework
    Applications must announce the possible protected resources they require and provide
    Protected resources are listed in the Aegis manifest XML file
    QtSDK generates the Aegis manifest file automatically for most protected resources when the app is packaged
    In case of “Access denied” errors or secure services, provided by you app, you have to edit the manifest file manually
    The goal is:
    Configurable access control
    Integrity checking for all executable files
    Protection of sensitive data
    Protection of software deployment chain
    SECURITY FW
    MeeGo 1.2 Harmattan API
    Platform API
  • AegisManifestFile
    Credentials can be seen from @credential tag in the header files
    Package component may request or provide credentials
    Cellular
    Location
    Synchronization
    CAP::capability
    UID::user
    GID::group
    TrackerReadAccess
    TrackerWriteAccess
    <aegis>
    <request>
    <!-- My first app credentials -->
    <credential name="Location" />
    <for path="/usr/bin/MyApp1 />
    </request>
    <request>
    <!-- My second app credentials -->
    <credential name="Cellular" />
    <credential name="Location" />
    <for path="/usr/bin/MyApp2" />
    </request>
    </aegis>
  • MeeGo Harmattan
    Qt
  • What Is Qt?
    C++ application & UI framework
    Open source
    Cross-platform
    Both desktop and embedded (mobile) systems!
    ”Write once, deploy everywhere”
    Integrated cross-platform toolset
    QtCreator, QtAssistant, QtDesigner, QtLinguist…
  • Application UI in Qt
    C++
    QML/JavaScript
    QWidgets
    Graphics View
    Qt Quick
    All these can be mixed in the same app if needed!
    Other
    HTML/JavaScript/CSS
    QtOpenGL
    QtWebKit
    Platform
    OpenGLAPIs
  • What Can You Do with Qt?
  • The Qt Stack
    Symbian
    Maemo/MeeGo
    Qt Components
    Qt Quick
    UI
    Qt
    QtGUI
    QtOpenGL
    QtSvg
    QtDeclarative
    QtWebkit
    Engine
    QtNetwork
    QtXml
    QtCore
    QtScript
    QtSql
    QtXmlPatterns
    QtMultimedia
    Mobile features
    (Qt add-on)
    Qt Mobility APIs
    Linux C/C++
    libraries
    Symbian C++
    Native APIs
    Low level
    native access
    Open C / POSIX
    Desktop OSs
    Linux
    Symbian
  • Latest Features in Qt
    New Animation Framework
    UI Effects
    Multi-Touch and Gesture support
    Qt for Symbian
    Qt for Maemo/MeeGo
    Qt 4.6
    Performance Improvements in QtWebKit
    Qt Quick
    ”Qt User Interface Creation Kit”
    QML
    Qt 4.7(.1)
    Qt 4.7(.2)
  • Working with Qt SDK 1.1
    2. Code Logic
    1. Design UI
    3. Try in Qt Simulator
    4. Plug in device(s) and select target
  • Working with Qt SDK 1.1
    2. Code Logic
    1. Design UI
    3. Try in Qt Simulator
    4. Plug in device(s) and select target
  • Qt Programming Characteristics
    Heavily object-based C++
    Hundreds (> 700) of ready-made classes
    Class names start with Q
    You must not use Q prefix in your own class names
    High abstraction level
    UIs built from widgets
    UI building block, derived from QWidget
    Meta-object system
    Observer pattern for object-to-object communication (signals and slots)
    QObject as a common base class
    Parent and child objects
    Memory management, window sharing
    Has similarities to Java
    However, is still C++!
  • Qt Modules
    QtMobility APIs
    Qt is split into modules (libraries)
    QtCore – Basic types, containers, event loop, application base class
    QtGui – GUI application, widgets, 2D painting
    QtWebKit – Web browser functionality embedded into an application
    QtOpenGl
    QtSvg
    Qt3Support
    QtWebKit
    QtXmlPatterns
    QtOpenVG
    QtNetwork
    QtSql
    Phonon
    QtScript
    QtGui
    QtXml
    QtMultimedia
    QtCore
  • Basic Types
    Basic data types in Qt come from standard C++
    int, bool, double, char, …
    For strings, use QString
    Stores 16-bit QChar types
    Use QByteArray for 8-bit data
    Structs and arrays
    Dynamic arrays are typically created using QList<T>
    QStringListcan be used instead of QList<QString>
    Other, more specialized container classes also exist
    QVector, QLinkedList, …
  • QWidget
    The base class for all UI elements in Qt
    Take a look at the QWidget reference documentation for details
    Basic QWidgets are quite desktop-oriented
    But can be used in mobile applications as well
    However, prefer using Qt Quick and Qt Components in mobile applications
    Especially good for quick prototyping because of Qt Designer
  • Display Widgets
    Labels (QLabel)
    Text Browsers (QTextBrowser)
    LCDNumbers (QLCDNumber)
    Progress Bar (QProgressBar)
    Calendar (QCalendarWidget)
    Web View (QWebView)
    Graphics View (QGraphicsView)
    ...and more…
  • Input & Selection Widgets
    Push buttons (QPushButton)
    Selection buttons (QRadioButton, QCheckBox)
    Text input
    Line input (QLineEdit)
    Plain text input (QPlainTextEdit)
    Plain & rich text input (QTextEdit)
    Spin boxes (QSpinBox)
    Dial (QDial)
    Scroll bars (QScrollBar)
    Sliders (QSlider)
    …and more…
  • Very First Qt Application
    #include<QtGui/QApplication>
    #include<QtGui/QLabel>
    intmain(intargc,char**argv){
    QApplicationapp(argc,argv);
    QLabellabel("Yep,I'maHelloWorld!");
    label.show();//orshowMaximized()orshowFullScreen()
    returnapp.exec();
    }
  • Class QApplication from QtGui Module
    Initializes application settings
    Palette, font
    Encapsulates the main event loop QApplication::exec()
    Defines application’s look and feel (style)
    Provides localization of strings
    Knows application’s windows
    widgetAt()
    Use global qApp pointer to access QApplication instance in your code
    E.g. calling qApp->quit() closes the application
    Derived from QCoreApplication [QtCore]
    Used in console applications or Qt processes without any UI
  • Building Qt Applications
    qmake –project
    Optional step: creates a Qt project file (.pro). You can also create this manually or use the one generated by Qt Creator.
    qmake
    Uses the .pro file as input and produces platform-specific Makefile(s)
    make
    Compiles the program for the current platform
    Executes also additional tools, such as moc, uic and rcc
    Platform
    specific
    Makefiles
    Application
    Binary
    Project
    file (.pro)
    qmake
    -project
    qmake
    make
  • QObject
    Heart of Qt's object model
    Base class for all object classes
    All QWidgets are QObjects also!
    Provides object trees and object ownership
    QObject's responsibility is to provide a central location for the most important concepts in Qt
    Has three major responsibilities
    Memory Management
    Introspection
    Event handling
  • Parent/Child Mechanism
    Each QObject instance may have a parent QObject
    Child informs its parent about its existence, upon which the parent adds it to its own list of children
    If a widget object does not have a parent, it is a window
    The parent widget does the following for its children:
    Hides and shows children, when hidden/shown itself
    Enables and disables children when enabled or disabled itself
    Note that a child may be explicitly hidden, although the parent is shown
  • Parent/Child Mechanism
    The ownership of all child QObjects is transferred to the parent
    Automatic deletion by the parent
    Children must be allocated from the heap with the new operator!
    Manual deletion will not, however, cause double deletion because the child informs its parent of the deletion
    All QObjects without a parent must be deleted manually
    Stack allocation of the parent is a good option to avoid problems
    Occasionally it may seem like Qt would hold some sort of automatic garbage collection but this is not true!
    Always pay attention to ownerships and responsibilities!
  • Demonstration – Using Qt Creator
    Let’s start by studying how Qt Creator is used for creating new mobile Qt applications
    The SDK contains a simulator tool for mobile targets
    Meant for quick testing only!
    Not an exact match of any actual device
    Provides mechanisms for simulating different kinds of events
    Always test on a real device before publishing your application
  • Qt Meta-Object System
    Qt Meta-Object System extends C++ with dynamic features
    Similar to those in Java, for example
    Dynamic features include:
    Mechanism to access any function in a class
    Also private ones
    Used by signals and slots
    Class information
    Type without RTTI (Run-Time Type Information)
    Information about base classes
    Translate strings for internationalization
    Dynamic properties
  • How Does It Work?
    myclass.cpp
    //In myclass.h:
    classMyClass:publicQObject{
    Q_OBJECT
    //Therestoftheclassdeclaration...
    };
    moc_myclass.cpp
    qmake sees the Q_OBJECT macro and creates code to extend MyClass’s code.
    This extension (moc_myclass.cpp) is the Meta-Object!
  • Signals and Slots
    Qt’ssignals and slots mechanism is one of the features enabled by the Meta-Object System
    It is simply an extremely flexible implementation of the observer pattern
    Type safe
    Many-to-many connections possible
    Used via the QObject base class
  • Signals and Slots
    connect(Object1, signal1, Object3, slot1)
    Object3
    Object1
    connect(Object1, signal2, Object3, slot2)
    signal1
    signal2
    signal1
    signal2
    slot1
    slot2
    connect(Object1, signal2, Object4, slot2)
    Object2
    Object4
    signal1
    signal2
    signal1
    signal2
    slot1
    slot2
    slot3
    slot1
    connect(Object2, signal1, Object4, slot1)
  • Signals
    A signal is a way to inform a possible observer that something has happened in the observed class
    A QPushButton is clicked
    An asynchronous service handler has finished
    Value of QSlider is changed
    Signals are member functions that are automatically implemented in the Meta-Object
    Only the function declaration in the header file is provided by the developer
    Signal is sent, or emitted, using the keyword emit
    emit clicked();
    emit someSignal(7, “Hello”);
  • Slots
    A slot is a function that is to be executed when a signal has been emitted
    (When QPushButton is clicked), closeQDialog
    (When service is ready), ask for the result and store it
    (When QSlider value is changed), display it in QLCDNumber
    A slot function is a normal class member function implemented by the developer
    Can be private, protected or public
  • Signals and Slots In a Class
    //NewClass.h
    classNewClass:publicQObject {
    Q_OBJECT//Meta-objectfileneeded
    signals:
    //Implementationinthe automatically generatedMeta-Object(moc_newclass.cpp)
    voidnewSignal(intmyInt,QStringmyString);
    voidanotherSignal();
    publicslots:
    //SlotsareimplementedasnormalmemberfunctionsinNewClass.cpp
    voidnewSlot(inti,QStrings);
    voidsomeSlot();
    };
    Signals and slots must be explicitly connected:
    bool success = QObject::connect(
    senderObject, SIGNAL(valueChanged(int)),
    observerObject, SLOT(display(int)));
  • Connecting Signals to Slots
    Signals and slots must be explicitly connected
    bool success = QObject::connect(
    senderObject, SIGNAL(valueChanged(int)),
    observerObject, SLOT(display(int)));
    Signal and slot signatures must match
    However, a signal may have more parameters than the corresponding slot
    SIGNAL and SLOT macros actually handle function names as strings
    No compile time error checking is made!
    Signals can also be connected to other signals
  • How to Update a Value Using a Slider?
    window
    layout
    lcd
    slider
    int main( intargc, char** argv ) {
    QApplication app( argc, argv );
    QWidget window;
    QVBoxLayout* layout = new QVBoxLayout( &window );
    QLCDNumber* lcd = newQLCDNumber( &window );
    QSlider* slider = newQSlider( Qt::Horizontal, &window );
    layout->addWidget( lcd );
    layout->addWidget( slider );
    window.showMaximized();
    returnapp.exec();
    }
  • Signals
    A signal is a way to inform a possible observer that something of interest has happened inside the observed class
    A QPushButton is clicked
    QPushButton::clicked()
    An asynchronous service handler is finished
    QNetworkAccessManager::finished( QNetworkReply* reply )
    Value of QSlider is changed (and the new value is informed as a parameter)
    QSlider::valueChanged( int )
    Signals are member functions that are automatically implemented in the meta-object
    Only the function declaration is provided by the developer
    Signal is sent, or emitted, using the keyword emit
    emit clicked();
    emit someSignal(7, “Hello”);
  • Slots
    A slot is a function that is to be executed when a signal has been emitted.
    (When QPushButton is clicked), closeQDialog
    (When service is ready), ask for the value and store it
    (When QSlider value is changed), display the value in QLCDNumber
    A Slot function is a normal member function implemented by the developer
  • Connections
    To receive a signal in a slot, signal and slot must be connected
    bool success = QObject::connect(
    senderObject, SIGNAL(valueChanged(int)),
    observerObject, SLOT(display(int)));
    Emitted signal results
    In an immediate slot function call, if signal and slot implemented in objects in the same thread
    Signal and slot signatures must match (signal may have more parameters)
    No compile time error checking is made!
  • Slider Signal Connected to a Slot
    1. Slider is moved (to value 21)
    int main( intargc, char** argv ) {
    QApplicationapp( argc, argv );
    QWidgetwindow;
    QVBoxLayout* layout = new QVBoxLayout( &window );
    QLCDNumber* lcd = newQLCDNumber( &window );
    QSlider* slider = newQSlider( Qt::Horizontal, &window );
    layout->addWidget( lcd );
    layout->addWidget( slider );
    QObject::connect( slider, SIGNAL(valueChanged(int)),
    lcd, SLOT(display(int)));
    window.showMaximized();
    returnapp.exec();
    }
    2. emit valueChanged(21)
    3. display(21)
  • Events vs. Signals
    Some Object
    Some Object
    Some Object
    slot function
    slot function
    slot function
    1. User presses button in UI
    2. Event is generated and delivered for the corresponding object’s event handler function
    QEvent
    (mouse press)
    4. Previously connected slot functions get called
    Hey! I’m
    clicked()
    QPushButton object
    Event handler
    3. Pushbutton emits a signal clicked() to ”shout out loud” of the situation
  • Qt Property System
    Data members of QObject-derived classes can be exposed as properties
    Properties are defined in class declarations using the Q_PROPERTY macro:
    Q_PROPERTY( QString title READ title WRITE setTitle )
    Q_PROPERTY( bool enabled READ isEnabled WRITE setEnabled )
    Properties can be accessed using base class functions
    QObject::property() and QObject::setProperty()
    No need to know the exact type of the target object!
    If the property named in QObject::setProperty() does not exist, it will be dynamically added to the object at run-time
    Take a look at QWidget’s properties, for instance!
  • Qt Property System
    //(Simplified)MyObject.h:
    classMyObject:publicQObject{
    Q_OBJECT
    Q_PROPERTY(QStringmyTextREADtextWRITEsetText)
    public:
    voidsetText(constQString&text){m_text=text;}
    QStringtext()const{returnm_text;}
    private:
    QStringm_text;
    };
    //UsageinSomeCode.cpp:
    MyObject*myObject=newMyObject();
    QObject*object=myObject;
    myObject->setText(”Some text”);//Accesseitherinthenormalway...
    object->setProperty(”myText”, ”Other text”);//...orbyusingthepropertysystem
  • MeeGo Harmattan
    QtQuick
  • QtQuick & QML
    ”Qt User InterfaceCreationKit”
    Declarative UI technology
    Introduced in Qt 4.7.0
    QML – ”QtMeta-Object Language”
    QtDeclarative – New C++ module in Qt
    Aimed at designers and developersalike
    Drag’n’drop designer toolprovided
    GIMP & Adobe Photoshoppluginsalsoavailable
  • Development Tools
    Qt Creator IDE comes with the Qt SDK
    Full QML support with a drag’n’drop designer tool since v2.1
    Qt SDK also contains a qmlviewer.exe tool
    Used for quickly previewing a QML/JavaScript UI
    Can be used on desktop, Qt Simulator & mobile devices
  • QML at a Glance – HelloWorld.qml
    importQtQuick1.0
    Rectangle{
    width:200; height:200
    color:"lightblue"
    Text{
    id:helloText
    anchors.horizontalCenter:parent.horizontalCenter
    font.pixelSize:parent.height/10
    font.bold:true
    text:"MeetQML!"
    }
    Image{
    id:helloImage
    anchors.centerIn:parent
    source:"icons/qt_logo.png"
    }
    MouseArea{
    anchors.fill:parent
    onClicked:{
    helloImage.visible=false;
    helloText.text="Bye-byepicture!";
    }
    }
    }
    It’s simply all about elements, properties and their values!
  • Import Statement
    Gives you access to the built-in QML elements
    Rectangle, Item, Text, Image, …
    Specifies which version of Qt Quick you are using
    Notice the syntax change in Qt 4.7.1!
    Guarantees backwards compatibility
    Only features of the specified version are loaded
    // In Qt 4.7.0:
    importQt4.7
    Rectangle{
    width:200; height:200
    // ...
    // In Qt 4.7.1 onwards:
    importQtQuick1.0
    Rectangle{
    width:200; height:200
    // ...
  • QML Elements & Properties
    importQtQuick1.0
    Rectangle{
    width:200; height:200
    color:"lightblue"
    Text{
    id:helloText
    anchors.horizontalCenter:parent.horizontalCenter
    font.pixelSize:parent.height/10
    font.bold:true
    text:"MeetQML!"
    }
    Image{
    id:helloImage
    anchors.centerIn:parent
    source:"icons/qt_logo.png"
    }
    MouseArea{
    anchors.fill:parent
    onClicked:{
    helloImage.visible=false;
    helloText.text="Bye-byepicture!";
    }
    }
    }
    QML elements form a parent/child hierarchy
    Each .qml file has exactly one root element
    All visual elements inherit the Item element defining certain common properties:
    id, anchors
    x, y, z
    width, height
    opacity, visible, rotation, scale

  • QML Elements & Properties
    importQtQuick1.0
    Rectangle{
    width:200; height:200
    color:"lightblue"
    Text{
    id:helloText
    anchors.horizontalCenter:parent.horizontalCenter
    font.pixelSize:parent.height/10
    font.bold:true
    text:"MeetQML!"
    }
    Image{
    id:helloImage
    anchors.centerIn:parent
    source:"icons/qt_logo.png"
    }
    MouseArea{
    anchors.fill:parent
    onClicked:{
    helloImage.visible=false;
    helloText.text="Bye-byepicture!";
    }
    }
    }
    If more than one property on a line, separate with a semi-colon
    A special id property can be assigned to any element
    Used for accessing its properties & methods from elsewhere
    A special parent property always refers to the element’s parent
    Can be used instead of the id property to refer to the parent
  • Anchor Layout
    Each visual QML element has
    6 invisible anchor lines, and
    4 invisible margin lines
    Used for specifying relative positions of items
    To remove/clear an anchor, set it to undefined
    Note!
    For performance reasons, you can anchor an item only to its direct parent or siblings
    horizontalCenter
    right
    left
    rightMargin
    leftMargin
    topMargin
    top
    verticalCenter
    bottom
    bottomMargin
  • Anchor Layout
    Rectangle{
    id:rect1
    color:"blue"
    //...
    }
    Rectangle{
    id:rect2
    color:"red"
    anchors.left:rect1.right
    //...
    }
    Rectangle{
    id:rect1
    color:"blue"
    //...
    }
    Rectangle{
    id:rect2
    color:"red"
    anchors.left:rect1.right
    anchors.leftMargin: 5
    //...
    }
    Rectangle{
    id:rect1
    color:"blue"
    //...
    }
    Rectangle{
    id:rect2
    color:"red"
    anchors.left:rect1.right
    anchors.top: rect1.bottom
    //...
    }
  • Basic Positioners
    Column{
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle{ color: "green"; width: 20; height: 50 }
    Rectangle{ color: "blue"; width: 50; height: 20 }
    }
    Row{
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle{ color: "green"; width: 20; height: 50 }
    Rectangle{ color: "blue"; width: 50; height: 20 }
    }
  • Basic Positioners
    Grid{
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle{ color: "green"; width: 20; height: 50 }
    Rectangle{ color: "blue"; width: 50; height: 20 }
    Rectangle{ color: "cyan"; width: 50; height: 50 }
    Rectangle{ color:"magenta"; width: 10; height: 10 }
    }
    Column{
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Row{
    spacing: 2
    Rectangle { color: “yellow"; width: 50; height: 50 }
    Rectangle{ color: “black"; width: 20; height: 50 }
    Rectangle{ color: "blue"; width: 50; height: 20 }
    }
    Rectangle{ color: "green"; width: 20; height: 50 }
    }
  • Event Handling – Signals
    In Qt certain kinds of events are delivered as signals
    In Qt/C++ a slot function is needed to react to these events
    In QML a special signal handler property is used instead
    The needed property depends on the signal source
    Mouse click, timer event, key press, custom signal, …
    In this section we will concentrate on MouseArea
    I.e. handling signals generated by mouse click events
    On touch screen devices this is the same as touch events
    For key event handling use Keys and KeyNavigation
    See Qt Quick documentation for details
  • MouseArea – Basic Usage
    MouseArea provides a number of signals
    onClicked, onPressed, onReleased, onPressAndHold, ...
    By default reacts to left button clicks and touch events
    Set acceptedButtons property to change this behavior
    Rectangle{
    width: 200; height: 200
    MouseArea{
    anchors.fill:parent // Can be freely sized/positioned like any other element
    onClicked:{ // Signal handler for the clicked signal
    console.log(mouse.x); // MouseEventobject called mousedelivered with the
    console.log(mouse.y); // signal (click position, keyboard modifiers, etc.)
    parent.visible = false;
    }
    }
    }
  • Animations
    Here is a rather complex first example
    Still very easy to understand, right?
    Rectangle{
    id:rect;width:120;height:300;
    Image{
    id:img
    source:"face-smile.png"
    anchors.horizontalCenter: parent.horizontalCenter
    SequentialAnimationony{
    id:anim
    running:true;loops:Animation.Infinite
    NumberAnimation{
    to:300-img.height;duration:2000; easing.type:Easing.OutBounce
    }
    PauseAnimation{duration:1000}
    NumberAnimation{
    to:0;duration:1000; easing.type:Easing.OutQuad
    }
    }
    }
    }
  • Custom Component Example
    //Components.qml
    importQt4.7
    Rectangle{
    id:mainRect
    width:150; height:150
    color:"black"
    MyButton{
    anchors.centerIn:parent
    }
    MyButton{
    anchors.top:parent.top
    anchors.horizontalCenter:
    parent.horizontalCenter
    }
    MyButton{
    anchors.bottom:parent.bottom
    anchors.horizontalCenter:
    parent.horizontalCenter
    }
    }
    //MyButton.qml
    importQt4.7
    Rectangle{
    width:100;height:30
    radius:10
    opacity:0.5;color:"yellow"
    Text{
    id:myText
    anchors.centerIn:parent
    font.pixelSize:16
    font.bold:true
    text:"Clickme!"
    }
    MouseArea{
    anchors.fill:parent
    onClicked:{
    //TODO:
    // Handle click
    }
    }
    }
  • Model/View
    Qt uses a Model/View pattern for presenting data
    Rather like MVC pattern where view and controller are combined
    QML provides new model and view elements
    QML views allow more flexibility than C++ views
    You can use either QML or C++ models with QML views
    For more background information, see Qt documentation:
  • Model/View Components
    Model
    The data source
    View
    Organizes the data for display
    Delegate
    Renders each data item
    ListModel{
    ListElement{
    title:"Pancakes"
    picture:"pancakes.jpg"
    }
    ListElement{
    title:"FruitSalad"
    picture:"fruit.jpg"
    }
    ListElement{
    title:"VegetableSoup"
    picture:"vegetable.jpg"
    }
    ListElement{
    title:"Hamburger"
    picture:"hamburger.jpg"
    }
    ListElement{
    title:"Lemonade"
    picture:"lemonade.jpg"
    }
    }
    //Simplifiedcode:
    Row{
    Image {
    source: picture
    }
    Text{
    text: title
    }
    }
  • Model/View Example
    MyModel.qml
    Simple ListModel for the data
    ModelView.qml
    ListView for displaying the data
    Delegate & highlight components
    ListModel{
    id:contactModel
    ListElement{
    name:"BillSmith"
    number:"5553264"
    }
    ListElement{
    name:"JohnBrown"
    number:"5558426"
    }
    ListElement{
    name:"SamWise"
    number:"5550473"
    }
    }
  • Model/View Example
    Rectangle{
    width:180;height:200;color:"green"
    Component{
    id:delegate
    Item{
    id:wrapper;width:180;height:40
    Column{
    x:5;y:5
    Text{text:'<b>Name:</b>'+name}
    Text{text:'<b>Number:</b>'+number}
    }
    }
    }
    Component{
    id:highlight
    Rectangle{
    color:"lightsteelblue"; radius:5
    }
    }
    ListView{
    anchors.fill:parent
    model:MyModel{}
    delegate:delegate
    highlight:highlight
    }
    }
    Delegate is quite often defined as an inline component in the same file where the view is
    It can also be placed in a separate file, the same way as the model
    A highlight component can be used to highlight the currently selected item
    The view needs a reference to the model and delegate (and highlight if it used)
  • View Elements
    ListView
    Vertical or horizontal list of items
    GridView
    Grid of items
    PathView
    Items placed along a freely specifid path
  • MeeGo Harmattan
    QML and C++ Integration
  • Using QObjects from QML
    QObjects are accessible from QML code
    All things specified in meta-data of QObject can be seen in QML
    Signals
    Slots
    Properties
  • Steps to Expose QObjects
    Assuming the QObject has a well defined (Qt-like) interface consisting signals, slots, and properties the steps are straightforward
    Refer to a context, QDeclarativeContext, in the QML engine, or QDeclarativeEngine
    Set the context property
    In other words, give a name for your instance of QObject derived class
  • Example: Class Header
    class MyCounter : public QObject
    {
    Q_OBJECT
    Q_PROPERTY(intcurrentValueREAD currentValue WRITE setValueNOTIFY currentValueChanged)
    public:
    explicit MyCounter(QObject *parent = 0);
    signals:
    void currentValueChanged();
    public slots:
    void reset();
    void increaseCounter();
    public:
    void setValue(int value);
    intcurrentValue() const;
    protected:
    int counter;
    };
  • Example: Implementation
    void MyCounter::increaseCounter()
    {
    constintvalueNow = currentValue();
    setValue(1 + valueNow);
    }
    void MyCounter::setValue(int value)
    {
    counter = value;
    emit currentValueChanged();
    }
    intMyCounter::currentValue() const
    {
    return counter;
    }
    int main(…)
    {

    QDeclarativeEngine* engine = view.engine();
    QDeclarativeContext* context = engine->rootContext();
    MyCounter counter;
    context->setContextProperty("theCounter", &counter);
    }
  • Using QObject from QML
    Properties of Qobject can be accessed in the same way as QML properties
    The update signal of a property is required to QML runtime to notice the change of the property
    Any slot function can be called from QML/Javascript
    import Qt 4.7
    Rectangle {
    id: theWindow
    width: 200; height: 200
    Text {
    anchors.centerIn: theWindow
    text:"The counter="+theCounter.currentValue
    }
    MouseArea {
    anchors.fill: parent
    onClicked: {
    theCounter.increaseCounter()
    }
    }
    }
  • MeeGo Harmattan
    Application Framework
  • Application Framework
    C++ Business Logic
    QML User-Interface
    Application Plug-ins
    Application
    Mobility Plug-ins
    Qt Components
    MeeGo Plug-ins
    JS Environment
    QML Primitives
    QtDeclarative
  • QtQuick Components
    Component library allowing the creation of user-interfaces of a Qt Quick application from a set of ready UI components
    Window (PageStackWindow)
    PageStack
    Page
    TabGroup
    ToolbarLayout(toolbar)
    TextArea (TextField)
    Sheet
    Screen
    SelectionDialog, QueryDialog, Dialog
    Buttons (Radio, Sheet, Tool)
    ScrollDecorator
  • Application Structure
    Window
    Main container for Qt components
    Typically one in the application
    Provides several orientation change signals
    User navigates between the pages
    Use the sub-element PageStackWindowto provide a frame for the application
    Page
    Has status (active/inactive)
    May have a page-specific toolbar and menu
    PageStack
    Implements common navigational patterns
    Pages are pushed and popped from the stack
    User can use right (previous page) and left (next page) swipe to navigate between pages
  • NavigationalPatterns
    Identify your application type
    Productivity
    Pragmatic tasks, such as sending a message
    Simple, intuitive, typically drill-down and simple toolbar pattern
    Often using Qt Quick components
    Immersion
    Entertaining or visually rich UI
    Video player, map player, games
    Typically, full screen
    Possibly, customized layout and controls
    Application menu pattern
    Flat experience
  • Simple Application UI – Window
    import QtQuick 1.1
    import com.meego 1.0
    PageStackWindow{
    id: appWindowinitialPage: mainPage
    MainPage {id: mainPage}
    ToolBarLayout{
    id: commonTools
    visible: true
    ToolIcon{
    platformIconId: "toolbar-view-menu";
    anchors.right: parent===undefined ? undefined : parent.right
    onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
    }
    }
    }
  • Simple Application UI – Page
    import QtQuick 1.1 I
    mportcom.nokia.meego 1.0
    Page {
    id: mainPage
    anchors.margins: rootWindow.pageMargin
    function openFile(file) {
    varcomponent = Qt.createComponent(file)
    if (component.status == Component.Ready)
    pageStack.push(component);
    else
    console.log("Error loading component:", component.errorString());
    }
    // Page content
    MouseArea{
    id: mouseArea
    anchors.fill: background // Note this element is not shown in the example (page content)
    onClicked: {
    listPage.openFile(page)
    }
    }
  • PageNavigation
    // Pages can be created using any element
    ExamplePage {
    id: examplePage
    greeting: "Hello World!"
    } // or
    Component {
    id: examplePage
    ExamplePage{
    greeting: "Hello World!"
    }
    }
    // It is possible to provide property bindings, when a page is created
    pageStack.push(examplePage, { foo: bar, foz: baz});
    // If Component element is used, an Item is created and
    // destroyed automatically
    // If any other element type is used (Item), then the owenership
    // is changed and returned when the page is pushed and
    // popped
  • PageNavigation – LazyLoading
    // In case you have multiple pages, you should consider lazy loading of pages
    Page {
    id: root
    anchors.margins: 0
    Item {
    id: container
    }
    property Item containerObject;
    onVisibleChanged: {
    if (visible) {
    varobject = componentDynamic.createObject(container);
    containerObject= object;
    } else {
    containerObject.destroy();
    }
    }
    Component {
    id: componentDynamic
    Item {
  • Element – ContextMenu
    PageStackWindow {
    id: rootWindow
    initialPage: Page {
    Rectangle{ id: contextColorRect
    anchors.centerIn:
    parent width: 100; height: 100
    color: "black"
    MouseArea{
    id: longPressArea
    anchors.fill: parent
    onPressAndHold: myContextMenu.open()
    }
    }
    ContextMenu{
    id: myContextMenu
    MenuLayout{
    MenuItem {
    text: "Red";
    onClicked: { contextColorRect.color = "darkred" }
    }
    }
    }
  • Styling and Theming
    QtQuick components provide a system-specific common look-and-feel
    However, the components themselves do not provide a common LAF
    Use system-specific constants
    Elements have style attribute
    Menu => MenuStyle
    Platform-dependent style
    There is a theming daemon
    Shares the most common graphics and icons between apps
    Do not consume app memory
    import "UIConstants.js" as UIConstants
    UIConstants.DEFAULT_MARGIN
    UIConstants.BUTTON_SPACING
    UIConstants.HEADER_DEFAULT_HEIGHT_PORTRAIT
    UIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE
    UIConstants.FONT_XLARGE // 32 px
    UIConstants.FONT_XSMALL// 18 px
    UIConstants.FONT_SLARGE// 26 px
    UIConstants.FONT_DEFAULT// 24 px
    UIConstants.FONT_LSMALL// 22 px
    BorderImage {
    source: "image://theme/meegotouch-list-background-pressed-center"
    }
  • MeeGo Harmattan
    MobilityAPIs
  • QtMobilityAPIs
    1.0.2
    1.1 (Qt SDK)
    1.2 (Tech Preview)
    Out-of-Process
    Service Framework
    Bearer Management
    (to QtNetwork in 4.7)
    Organizer
    Local Connectivity
    (BT, NFC)
    Document Gallery
    AugmentedReality?
    FaceRecognition?
    Publish&Subscribe
    Versit
    Feedback
    Messaging
    Sensors
    QML Bindings
    Camera
    Multimedia
    Contacts
    System Information
    Landmarks, Maps,
    Navigation
    Location
  • QML QtMobility API Bindings
    Note:someAPIsarestillunderdevelopment – subject to change!
  • Location API and Map
    importQtQuick1.0
    importQtMobility.location1.1
    Item{
    width:500;height:500; focus:true
    Map{
    id:map
    plugin:Plugin{ name:"nokia" }
    size.width:parent.width
    size.height:parent.height
    zoomLevel:12
    center:Coordinate{
    latitude:61.4979781
    longitude:23.7649307
    }
    MapCircle{
    center:Coordinate{
    latitude:61.4979781
    longitude:23.7649307
    }
    radius:1000.0
    }
    }
    }
    Import the API youneed…
    …and useit the QML way!
  • Location API and Map
    Item{
    ...
    Map{ id: map; ... }
    MyButton{
    text:"StreetMap"
    MouseArea{
    onClicked: map.mapType = Map.StreetMap;
    }
    }
    MyButton{
    text:"Satellite"
    MouseArea{
    onClicked: map.mapType = Map.SatelliteMapDay;
    }
    }
    MyButton{
    text: "ZoomOut"
    MouseArea{
    onClicked: map.zoomLevel -= 1;
    }
    }
    MyButton{
    text: "ZoomIn"
    MouseArea{
    onClicked: map.zoomLevel += 1;
    }
    }
    }
  • Notes on the Location API
    Currentimplementationalwaysdownloadsmapsfrom the Ovi Mapsserver
    Doesnotutilizemapsinstalled on device for the the Ovi Mapsapplication
    To getinformationaboutuser’scurrentlocation, use the PositionSource QML element
    Givesyoulatitude and longitudeyoucanpass to the Map
    Alsoprovidesaltitude and speedinformation
    See the Location API documentation & sources for details & examples
  • MeeGo Harmattan
    Ovi StorePublication
  • Ovi StoreEntryRequirements – 1
    Whatcanbepublished?
    Active content
    Passive content, like wallpaper
    Run tests
    Installation
    Proper package name and version
    Installation, launch, termination, and uninstallation
    Functional
    Content item does not crash or hang
    Nokia branding guidelines (no excessive violence, swearing, alcohol drinking, racism, …)
    Application UI should be accessible during phone calls
  • Ovi StoreEntryRequirements – 2
    Robustness
    Content item must not interfere with system and other apps
    Interruptions must be properly handled while the app is running
    Input fields must provide a virtual keyboard (portrait / landscape)
    Swipe interaction principles must be followed
    Co-existence
    Follow the connection creation logic defined by the user
    Follow the offline profile
    Does not interfere with voice calls
    User must not be prevented to make emergency calls
    Usability
    Large enough UI elements for finger usage
    Performance
    Lights off, CPU in low-power mode
  • Course Summary
    QtCreator 1.1.2 now supports Harmattan target as well
    Plenty of debugging/profiling tools on the device
    MeeGo 1.2 Harmattan API provided
    MeeGo API (Qt), Moility APIs, Qt Quick, Qt Components
    Qm system, Qtsparql, Qt4 telepathy etc.
    Security framework
    Applications written in QML using Qt Components
    Stylable, themable
    OpenGL, QtWebKit, and Qt can be used as well
    Application logic with C++/C
    Using Qt APIs, mobility APIs or platform APIs