Starting Development for Nokia N9


Published on

This is a short descrption of MeeGo Harmattan development

Published in: Technology, Art & Photos
1 Comment
  • hi i am new to meego and qt, i wat to develop an application which will insert an option like share into any of native meego applications like (music). so cau anybody suggest me how to start building it. it would be great help.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Starting Development for Nokia N9

  1. 1. MeeGo HarmattanCourse Introduction
  2. 2. Digia – Who Are We?● Digia Plc –● Tino Pyssysalo ● Senior Software Specialist ● Tampere, Finland
  3. 3. Pre-requisites Basics of and QML● We are going to use both in this training “Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.”
  4. 4. Required Tools● On your laptop: ● Qt SDK 1.1.2 including Harmattan targets● N950 ● Image flashed● Installation instructions: ● ”Getting Started with the Qt SDK” ● E.g. in Windows under Start menu
  5. 5. Course ContentsCourse Introduction Content introductionMeeGo and Harmattan Differences between MeeGo and HarmattanDevelopment Tools QtCreator 1.1.2 and related toolsMeeGo 1.2 Harmattan API APIs offered to the developerApplication Framework Usage of Qt ComponentsMobility APIs QML mobility bindingsQML and C++ Integration Exposing own QObject instances in QML /
  6. 6. MeeGo HarmattanMeeGo and Harmattan
  7. 7. Platforms N900 N9/N950 ? Maemo 5 MeeGo 1.2 MeeGo 1.1 Fremantle Harmattan API UI: Hildon UI: MeegoTouch UI: MeegoTouchDebian packaging Debian packaging RPM packaging
  8. 8. MeeGo HarmattanDevelopment Tools
  9. 9. Qt SDK 1.1.2● Combines all Qt development under one SDK! ● Can be installed on Windows/Mac OSX/Linux● Main features: ● Qt 4.7.3 ● Qt Quick 1.0 (1.1 for Harmattan) ● QtMobility APIs 1.1.3 ● Qt Creator 2.2.1 ● Qt Designer ● Harmattan Emulator ● Integrated Cross-Compiler (MADDE) ● Simulator ● Package support
  10. 10. Targets● MeeGo 1.2 Harmattan API ● MeeGo API + mobility APIs + QtQuick + Qt Quick Components + some platform APIs● Harmattan Platform API ● Middleware APIs ● Build your daemon using D-Bus or GObject interface to communicate with other components
  11. 11. Emulator● Uses QEMU ● Runs the deivce binary● Simulator may be useful as well ● Easy to test the functionality of mobility APIs● Note: May crash, if OpenGL mode is set to autodetect ● Change it to Software Rendering
  12. 12. Device Deployment● More straightforward than ever● Launch SDK Connectivity application ● Select USB/WLAN connection● Create a new device configuration and change the device configuration in Run settings ● Look at the password and hot name in SDK connectivity
  13. 13. Debugging Tools● Run your device in the developer mode and you may run several debugging tools ● Settings > Security > Developer mode ● Launch apps from the terminal● latrace ● Traces library calls● strace ● Traces system calls● valgrind ● Memory leaks, heap profiling, cache profiling, call graph● htop ● Process viewer● sp-memusage ● CPU and memory usage● Energy profiler ● Power consumtpion, mobile IP traffic, CPU activities
  14. 14. MeeGo HarmattanMeeGo 1.2 Harmattan API
  15. 15. MeeGo 1.2 Harmattan API● Fully productized set of Qt QML Qt Mobility Components APIs● One API reference Qt Qt Qt Sparql Webkit● Compatibility Promise (Updates) Open GL GStreamer Pulseaudio● APIs cover most ES 1.1/2.0 development needs Resource Signon Telepathy Qt4 Policy Ovi Qm System Notifications Accounts Engine
  16. 16. Basic Mobile Application● Network – Location – .desktop Maps QML Files icon .pro● Integrated into Harmattan UX C++ Wrapper QML Qt Components Qt Mobility Qt Qt Webkit Qt Sparql Open GL ES GStreamer Pulseaudio 1.1/2.0 Resource Signon Telepathy Qt4 Policy Ovi Notifications Qm System Accounts Engine
  17. 17. Extended Mobile Multimedia Application● Multimedia– Tracker QML Files● Integrated into Harmattan .js Files .desktop .aegis UX icon .pro .qrc C++ Wrapper C++/Qt Logic Qt QML Qt Mobility Components Qt Qt Sparql Qt Webkit Open GL ES GStreamer Pulseaudio 1.1/2.0 Resource Signon Telepathy Qt4 Policy Qm Ovi Notifications Accounts System Engine
  18. 18. Mobile Game● Develop on top of Qt QML Qt Mobility Components standard technologies: ● Open GL ES Qt Qt Sparql ● GStreamer Qt Webkit ● Pulseaudio Open GL GStreamer Pulseaudio ES 1.1/2.0 Resource Signon Telepathy Qt4 Policy Ovi Qm Notifications Accounts System Engine
  19. 19. 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!
  20. 20. Security Framework● Applications must announce the possible protected resources they require and provide ● Protected resources are listed in the Aegis manifest XML file● Qt SDK 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: SECURITY FW MeeGo 1.2 ● Configurable access control Harmattan API ● Integrity checking for all executable files ● Protection of sensitive data Platform API ● Protection of software deployment chain
  21. 21. Aegis Manifest File● Credentials can be seen from @credential tag in the header files ● Package component may request or provide credentials ● CAP::capability ● Cellular ● TrackerReadAccess ● UID::user ● Location ● TrackerWriteAccess ● GID::group ● Synchronization <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>
  22. 22. MeeGo HarmattanApplication Framework
  23. 23. Qt Quick & QML● ”Qt User Interface Creation Kit” ● Declarative UI technology ● Introduced in Qt 4.7.0 ● QML – ”Qt Meta-Object Language” ● QtDeclarative – New C++ module in Qt● Aimed at designers and developers alike ● Drag’n’drop designer tool provided ● GIMP & Adobe Photoshop plugins also available
  24. 24. Application FrameworkC++ Business Logic QML User-InterfaceApplication Plug-ins Application Mobility Plug-ins MeeGo Plug-ins Qt Components JS Environment QML Primitives QtDeclarative
  25. 25. Qt Quick 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
  26. 26. 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 PageStackWindow to 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
  27. 27. Navigational Patterns● Identify your application type● Productive ● 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
  28. 28. Simple Application UIimport QtQuick 1.1import com.meego 1.0PageStackWindow { id: appWindow initialPage: 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.close() } }}import QtQuick 1.1 Import 1.0Page { id: listPage anchors.margins: rootWindow.pageMargin function openFile(file) { var component = 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) }}
  29. 29. Page Navigation// Pages can be created using any element // It is possible to provide property bindingsExamplePage { pageStack.push(examplePage, { foo: bar, foz: baz }); id: examplePage greeting: "Hello World!" // If Component element is used, an Item is created and} // or // destroyed automaticallyComponent { id: examplePage // If any other element type is used (Item), then the owenership ExamplePage { // is changed and returned when the page is pushed and greeting: "Hello World!" // popped }}// In case you have multiple pages, you should consider lazy loading of pagesPage { id: root anchors.margins: 0 Item { id: container } property Item containerObject; onVisibleChanged: { if (visible) { var object = componentDynamic.createObject(container); containerObject = object; } else { containerObject.destroy(); } } Component { id: componentDynamic Item {
  30. 30. Styling and Theming● Qt Quick components provide a system-specific common look-and-feel● However, the components themselves do not provide a common LAF import "UIConstants.js" as UIConstants UIConstants.DEFAULT_MARGIN● Use system-specific constants UIConstants.BUTTON_SPACING UIConstants.HEADER_DEFAULT_HEIGHT_PORTRAIT UIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE● Elements have style attribute UIConstants.FONT_XLARGE // 32 px ● Menu => MenuStyle UIConstants.FONT_XSMALL // 18 px UIConstants.FONT_SLARGE // 26 px UIConstants.FONT_DEFAULT // 24 px ● Platform-dependent style UIConstants.FONT_LSMALL // 22 px● There is a theming daemon ● Shares the most common graphics and icons between apps ● Do not consume app memoryBorderImage { source: "image://theme/meegotouch-list-background-pressed-center"}
  31. 31. MeeGo HarmattanMobility APIs
  32. 32. QtMobility APIs 1.0.2 1.1 (Qt SDK) 1.2 (Tech Preview) Bearer Management Local Connectivity Service Framework Organizer (to QtNetwork in 4.7) (BT, NFC) Out-of-Process Document Gallery Augmented Reality? Publish&Subscribe Versit Face Recognition? Feedback Messaging Sensors QML Bindings Multimedia Contacts Camera System Information Location Landmarks, Maps, Navigation
  33. 33. QML QtMobility API Bindings Note: some APIs are still under development – subject to change!
  34. 34. Location API and Mapimport QtQuick 1.0import QtMobility.location 1.1 Import the API you need…Item { width: 500; height: 500; focus: true Map { id: map …and use it the QML way! 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 } }}
  35. 35. Location API and MapItem { ... Map { id: map; ... } MyButton { text: "Street Map" MouseArea { onClicked: map.mapType = Map.StreetMap; } } MyButton { text: "Satellite" MouseArea { onClicked: map.mapType = Map.SatelliteMapDay; } } MyButton { text: "Zoom Out" MouseArea { onClicked: map.zoomLevel -= 1; } } MyButton { text: "Zoom In" MouseArea { onClicked: map.zoomLevel += 1; } }}
  36. 36. Notes on the Location API● Current implementation always downloads maps from the Ovi Maps server ● Does not utilize maps installed on device for the the Ovi Maps application● To get information about user’s current location, use the PositionSource QML element ● Gives you latitude and longitude you can pass to the Map ● Also provides altitude and speed information● See the Location API documentation & sources for details & examples
  37. 37. MeeGo HarmattanQML and C++ Integration
  38. 38. 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
  39. 39. Steps to Expose QObjectsAssuming the QObject has a well defined (Qt-like) interfaceconsisting signals, slots, and properties the steps arestraightforward1. Refer to a context, QDeclarativeContext, in the QML engine, or QDeclarativeEngine2. Set the context property ● In other words, give a name for your instance of QObject derived class
  40. 40. Example: Class Headerclass MyCounter : public QObject{ Q_OBJECT Q_PROPERTY(int currentValue READ currentValue WRITE setValue NOTIFYcurrentValueChanged)public: explicit MyCounter(QObject *parent = 0);signals: void currentValueChanged();public slots: void reset(); void increaseCounter();public: void setValue(int value); int currentValue() const;protected: int counter;};
  41. 41. Example: Implementationvoid MyCounter::increaseCounter(){ const int valueNow = currentValue(); setValue(1 + valueNow);}void MyCounter::setValue(int value){ counter = value; emit currentValueChanged();}int MyCounter::currentValue() const{ return counter;}int main(…){ … QDeclarativeEngine* engine = view.engine(); QDeclarativeContext* context = engine->rootContext(); MyCounter counter; context->setContextProperty("theCounter", &counter);}
  42. 42. 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/Javascriptimport Qt 4.7Rectangle { id: theWindow width: 200; height: 200 Text { anchors.centerIn: theWindow text:"The counter="+theCounter.currentValue } MouseArea { anchors.fill: parent onClicked: { theCounter.increaseCounter() } }}
  43. 43. 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, Qt sparql, 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