• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Meego Harmattan training
 

Meego Harmattan training

on

  • 4,951 views

 

Statistics

Views

Total Views
4,951
Views on SlideShare
2,473
Embed Views
2,478

Actions

Likes
1
Downloads
70
Comments
0

6 Embeds 2,478

http://habrahabr.ru 2457
http://m.habrahabr.ru 17
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