Meego Harmattan training


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Meego Harmattan training

  1. 1. MeeGo Harmattan<br />Course Introduction<br />
  2. 2. Digia – WhoAreWe?<br />DigiaPlc –<br />Tino Pyssysalo<br />Senior Software Specialist<br />Tampere, Finland<br />
  3. 3. Pre-requisites<br />Wearegoing to useboth in this training <br />Basics of and QML<br />“Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.”<br />
  4. 4. Required Tools<br />On yourlaptop:<br />Qt SDK 1.1.2 includingHarmattantargets<br />Custominstallation (Harmattan is foundunderExperimentalpackages)<br />N950<br />Image flashed<br />Installationinstructions:<br />”GettingStarted with the Qt SDK”<br />E.g. in Windows underStart menu<br />
  5. 5. Course Contents<br /><br />
  6. 6. MeeGo Harmattan<br />MeeGo UX <br />
  7. 7. Agenda<br />Introduction to MeeGo<br />Overall UI Model<br />MeeGo Application Design<br />UX Principles<br />MeeGo Design dos and donts<br />UI Patterns and Components<br />
  8. 8. Goals<br />High-level overview of the UX<br />Details of User Experience are found in the MeeGo UX Guideline documentation<br /><br />The presentation does not cover the actual software components what to use, but only represents the expectation level of MeeGo 3rd party UI<br />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<br />
  9. 9. What Is MeeGo Harmattan?<br />“The MeeGo effort will be an ongoing exploration of innovative platform disruptions and next-generation devices, platforms and user experiences.”<br />--Stephen Elop, CEO, Nokia<br />N9/N950<br />MeeGo 1.2<br />Harmattan API<br />UI: MeegoTouch – <br />All it takes is a swipe<br />Debian packaging<br />N900<br />Maemo 5<br />Fremantle<br />UI: Hildon<br />Debian packaging<br />?<br />MeeGo 1.xUI:MeegoTouch<br />RPM packaging<br />
  10. 10. Display - 3.9" AMOLED display with curved glass, 16M colors, 854 x 480 pixels screen resolution<br />Memory - 16GB/64GB, 1GB RAM<br />Connectivity - A-GPS, Compass, WLAN 802.11 abgn, micro USB, BT 2.1, NFC<br />Audio - MP3 player, 3.5 mm audio jack, Supported codecs: mp3, AAC, AAC+, eAAC+, WMA, FLAC<br />Video - Video recording and playback up to 720P, H.263, H.264, MPEG-4, WMV 9, Matroska<br />Camera - 8 Megapixel AF camera with Carl Zeiss optics, dual-LED flash, wide-angle lens<br />Nokia N9<br />
  11. 11. MeeGo Design Principles<br />Simple & Intuitive<br />Reduce the visual noise, keep things as simple as possible<br />No sub-folders in Application Launcher, shallow navigation<br />Direct touch and swipe <br />Meaningful Personalization<br />Personalization in smart and dynamic ways, not just theming<br />Speaks My Language<br />Familiar language that feels approachable and friendly<br />“The gallery won’t open” vs. “Unable to open gallery”<br />Premium Nokia<br />A luxurious product with beautiful graphics and rich motion<br />Delightful to Use<br />Brings a smile to your face from first use and again day after day<br />
  12. 12. MeeGo Harmattan<br />MeeGo UX – UI Model<br />
  13. 13. Home Screen<br />The Home screen for MeeGo is comprised of three key views: Notifications, Applications<br />and Multitasking. <br />These views exist adjacent to each other on a single row and can be accessed by horizontally dragging between the screens.<br />
  14. 14. UI Overview<br />
  15. 15. Home Screen<br />Notifications<br />• The Events feed delivers continuous updates to the device from any application the user has enabled.<br />• 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.<br />Apps Launcher<br />• 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.<br />Multitasking<br />• 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.<br />The Swipe<br />• 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.<br />
  16. 16. Launcher<br />Launcher<br />• The Applications view contains links to all applications installed on a device.<br />• Each application is presented as an icon in a four- column grid that scrolls vertically.<br />• When the user installs a new application, it appears at the end (bottom) of the application grid.<br />• To launch an application, a user simply taps on its icon.<br />Swiping to exit applications<br />• 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.<br />• 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.<br />
  17. 17. Notifications<br />Event Feed<br />• 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.<br />• Event updates that appear in the feed should serve as direct, deep links into content or actions within relevant applications.<br />• By tapping on an event update, the user can launch the corresponding application in the appropriate context.<br />• Note: The user must be allowed to remove event updates manually – the application should not delete them automatically.<br />Notifications<br />• 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.<br />• 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.<br />
  18. 18. Multitasking<br />Recent Applications<br />• 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<br />thumbnails as a user adds them.<br />• To launch an application, the user can simply tap the desired thumbnail.<br />Order of applications<br />• 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<br />the top-left position. When the user switches between open tasks, the applications reorder to maintain the order of recently accessed.<br />Resizing the grid<br />• The thumbnails in the Multitasking view can be presented as a 3x3 or a 2x2 grid. A multitouchpinch gesture lets users switch easily<br />between the two grids.<br />Removing applications<br />• To remove an application from the Multitasking view, the user can make a long press on the relevant thumbnail.<br />
  19. 19. MeeGo Harmattan<br />MeeGo UX – Application Design <br />
  20. 20. Application Types<br />Productivity apps<br />Dealswith more pragmatic actions, such as sending a text message (clock, calendar, notes)<br />Immersion apps<br />Offersmore entertainment-based or visually rich experiences (camera, gallery, musi/video player)<br />
  21. 21. Application Types<br />Productivity<br />Efficiency, simplicity are important<br />Drill-down structure<br />Simple toolbars highlighting key actions<br />Tabs showing content views <br />Usually rely more on common components<br />Calendar<br />Immersion<br />It is common to use full views<br />Customized user experience<br />May rely on N9 native components<br />It will be the designer’s responsibility to decide how to represent content, navigation and interactions<br />Map browsing<br />
  22. 22. ScreenAnatomy<br />Status bar and notification banners<br />Shows signal strength, time and battery life<br />Supports access to the Settings Shortcuts menu<br />Required element for all views except full screen views<br />As an event is received or triggered, a Notification banner should be displayed in place of the Status Bar<br />Header Menu<br />Used to control the main navigation within the application from the header<br />Header bar is also an option to consider the theming of your application<br />Content Area<br />Presents navigation options, text, media, etc.<br />Actions can also be presented together with the content<br />Action Bar (toolbar)/Tab bar<br />An optional bar fixed to the bottom of the screen<br />An optional Tab Bar containing up to five navigation options is available when a Tool Bar exists<br />
  23. 23. ScreenLayouts – Lists<br />A list view provides a simple view for large amounts of text- based data that can be navigated vertically<br />A range of list view layouts and options accommodate for different requirements<br />
  24. 24. ScreenLayouts – Grids<br />Visual content such as photos or video are best displayed in a grid view that can be navigated vertically<br />
  25. 25. ScreenLayouts – SplitViews<br />A split view combines a traditional list view with a dynamic view to promote content more visually<br />
  26. 26. ScreenLayouts – Full Screen<br />For applications that need to provide a more immersive experience, a Full Screen mode is available<br />It is important, however, to provide application navigation where needed, as well as a way to exit an application<br />As a principle, a Swipe from any edge should exit the application<br />
  27. 27. Navigationwithin Applications <br />Three different patterns<br />Filtering with Header Menu<br />Drill Down<br />Tabs<br />Some of the UX problems with navigation can be solved with a Sheet Component<br />
  28. 28. Navigation Structures<br />
  29. 29. Navigationwithin Applications – Header Menu <br />
  30. 30. Navigationwithin Applications – Tabs<br />Quick access between distinct areas or modes<br />For applications with a flat navigational structure<br />The Basic Tabs bar should only display navigation options (up to a maximum of five)<br />Never add the Back button, Action Menu or actions to the bar<br />Instead, create buttons within the Content area to accommodate these actions<br />Navigation options in an application should not change over time<br />
  31. 31. Navigationwithin Applications – Drill Down <br />The Drill Down is the most scalable navigation model, providing access to an application’s full navigation structure at the top level<br />It allows a user to find a desired content item by navigating down the hierarchy of the application’s information structure via categories<br />As the user moves down the structure, a Back button becomes available that facilitates navigation to the previous level.<br />
  32. 32. Navigationwithin Applications - Overlays<br />The framework offers different types of overlays that enable the user to respond or provide input and information<br />Each type of overlay has its own purpose and is used in a different context<br />Forexample, the Sheet is used for the more complex interactions, while the other are used for simple one click interactions<br />
  33. 33. Highlight Color<br />A key visual attribute of all Nokia N9 applications is the highlight color<br />Each application owns a unique highlight color for personality and differentiation<br />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<br />
  34. 34. Applying Highlight Color<br />Highlight color can be applied across a set of components<br />Apply your highlight color consistently throughout your application<br />Your highlight color will help in the recognition of your application across the various home screens<br />
  35. 35. Icons<br />Launcher icons<br />In-app icons <br />Toolbar icons<br /><br />
  36. 36. MeeGo Harmattan<br />MeeGo UX – Dos and Donts<br />
  37. 37. Dos and Donts – 1/3 <br />Keep it simple and easy to use<br />Make it obvious what your application does and how it works<br />Avoid replication of MeeGo’s core interaction model<br />Don’t introduce Layer-based, edge-swiping navigation structure within the application<br />This is a touch UI<br />Consider ergonomics and the size of people’s fingers when laying out your application and designing controls<br />Rely on common components for familiarity, either by using them directly or, when appropriate, changing them in a logical and coherent way<br />
  38. 38. Dos and Donts – 2/3 <br />Distribute functions accordingly<br />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.<br />Avoid duplication of same function in different views<br />Aim to scroll only repeating content<br />Don’t hide distinct functions below the fold line as people may not discover them<br />Curb your verbosity<br />Use simple and concise language that users can understand easily<br />Be consistent with the framework structure<br />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<br />
  39. 39. Dos and Donts – 3/3 <br />Be consistent with core interactions<br />Don’t create conflicting behaviors to those set in the guidelines, such as confirming actions and using gestures<br />It should be possible to revert most actions, so prompts are only used for unexpected events or irreversible things<br />Think carefully when your application is an exception to the rules, like the full screen cases<br />
  40. 40. MeeGo Harmattan<br />UI Patterns and Components <br />
  41. 41. Patterns<br />Toolbar<br />Back always on the left, Action menu on the right<br />Negative actions on the right<br />Dialogues and menus<br />Query dialog, action menu, object menu<br />Sheet<br />Self-contained full screen view sliding from the bottom<br />Change context temporarily, e.g. send an email<br />Sheet buttons always on top<br />Completer <br />Time and date picker<br />
  42. 42. Components<br />View headers<br />With text, icon, action<br />Group headers and dividers<br />Separates groups or sections<br />List items<br />Text, thumbnail, icon, frame<br />Text fields<br />Labels<br />Buttons<br />Text, icon and text, dropdown<br />Controls<br />Checkbox, switch, radio buttons<br />Sliders<br />Tooltip, actions<br />Progress bars<br />Spinners<br />In view header, in-content, modal loading, sheet<br />System banners<br />Popup right below the status bar<br />Icon and at most three lines of text<br />
  43. 43. MeeGo Harmattan<br />Development Environment <br />
  44. 44. Qt SDK 1.1.2<br />CombinesallQtdevelopmentunderone SDK!<br />Canbeinstalled on Windows/Mac OSX/Linux<br />Main features:<br />Qt4.7.3<br />QtQuick 1.0 (1.1 for Harmattan)<br />QtMobilityAPIs1.1.3<br />QtCreator2.2.1<br />Qt Designer <br />HarmattanEmulator<br />Integrated Cross-Compiler (MADDE)<br />Simulator <br />Package support<br />
  45. 45. Installation<br />Note! MeeGo Harmattantarget is available in Custom/Experimentalinstallationonly<br />The driver for USB connectivity is found in (Win) C:QtSDKMaddeusbdriver <br />
  46. 46. Targets<br />MeeGo 1.2 Harmattan API<br />MeeGo API + mobilityAPIs + QtQuick + QtQuick Components + someplatformAPIs<br />HarmattanPlatform API<br />MiddlewareAPIs<br />BuildyourdaemonusingD-BusorGObjectinterface to communicate with othercomponents<br />
  47. 47. Emulator<br />Uses QEMU<br />Runs the deivcebinary<br />Simulator maybeuseful as well<br />Easy to test the functionality of mobilityAPIs<br />Note: Maycrash, ifOpenGLmode is set to autodetect<br />Change the mode to Software Rendering<br />
  48. 48. Device Deployment <br />Set the phone into Developer Mode<br />Settings>Security>Developer Mode<br />Connect the USB cable (or WiFi)<br />Select SDK in the dialog opened in the phone<br />Launch SDK Connectivity application <br />Create a new device configuration and change the device configuration in Run settings <br />Look at the password and host name in SDK connectivity<br />
  49. 49. Debugging Tools<br />Runyourdevice in the developermode and youmayrunseveraldebuggingtools<br />Settings > Security > Developermode<br />Launchappsfrom the terminal<br />latrace<br />Traceslibrarycalls<br />strace<br />Tracessystemcalls<br />valgrind<br />Memory leaks, heapprofiling, cacheprofiling, callgraph<br />htop<br />Processviewer<br />Energy profiler<br />Power consumtpion, mobile IP traffic, CPU activities<br />
  50. 50. MeeGo Harmattan<br />MeeGo 1.2 Harmattan API<br />
  51. 51. MeeGo 1.2 Harmattan API <br />Qt Components<br />Qt Mobility<br />QML<br />Fully productized set of APIs<br />One API reference<br />Compatibility Promise (Updates)<br />APIs cover most development needs<br />QtSparql<br />QtWebkit<br />Qt<br />Open GL ES 1.1/2.0<br />GStreamer<br />Pulseaudio<br />Signon<br />Telepathy Qt4<br />Resource Policy<br />Accounts<br />Qm System<br />Ovi Notifications Engine<br />
  52. 52. Basic Mobile Application <br />Qt Components<br />Qt Mobility<br />QML<br />Network – Location – Maps<br />Integrated into Harmattan UX<br />C++ Wrapper<br />QtSparql<br />QtWebkit<br />Qt<br />QML Files<br />.desktop<br />icon<br />.pro<br />Open GL ES 1.1/2.0<br />GStreamer<br />Pulseaudio<br />Signon<br />Telepathy Qt4<br />Resource Policy<br />Accounts<br />Qm System<br />Ovi Notifications Engine<br />
  53. 53. Extended Mobile Multimedia Application <br />Multimedia– Tracker<br />Integrated into Harmattan UX<br />Qt Components<br />Qt Mobility<br />QML<br />C++ Wrapper<br />QtSparql<br />QtWebkit<br />Qt<br />QML Files<br />.js Files<br />Open GL ES 1.1/2.0<br />GStreamer<br />Pulseaudio<br />.desktop<br />.aegis<br />icon<br />.pro<br />.qrc<br />Signon<br />Telepathy Qt4<br />Resource Policy<br />C++/Qt Logic <br />Accounts<br />Qm System<br />Ovi Notifications Engine<br />
  54. 54. Mobile Game<br />Qt Components<br />Qt Mobility<br />QML<br />Develop on top of standard technologies:<br />Open GL ES<br />GStreamer<br />Pulseaudio<br />QtSparql<br />QtWebkit<br />Qt<br />Open GL ES 1.1/2.0<br />GStreamer<br />Pulseaudio<br />Signon<br />Telepathy Qt4<br />Resource Policy<br />Accounts<br />Qm System<br />Ovi Notifications Engine<br />
  55. 55. Platform API <br />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:<br />We don’t give a compatibility promise!<br />
  56. 56. Security Framework <br />Applications must announce the possible protected resources they require and provide<br />Protected resources are listed in the Aegis manifest XML file<br />QtSDK generates the Aegis manifest file automatically for most protected resources when the app is packaged<br />In case of “Access denied” errors or secure services, provided by you app, you have to edit the manifest file manually<br />The goal is:<br />Configurable access control<br />Integrity checking for all executable files<br />Protection of sensitive data<br />Protection of software deployment chain<br />SECURITY FW<br />MeeGo 1.2 Harmattan API<br />Platform API<br />
  57. 57. AegisManifestFile<br />Credentials can be seen from @credential tag in the header files<br />Package component may request or provide credentials<br />Cellular<br />Location<br />Synchronization<br />CAP::capability<br />UID::user<br />GID::group<br />TrackerReadAccess<br />TrackerWriteAccess<br /><aegis> <br /> <request> <br /> <!-- My first app credentials --> <br /> <credential name="Location" /> <br /> <for path="/usr/bin/MyApp1 /> <br /> </request> <br /> <request> <br /> <!-- My second app credentials --> <br /> <credential name="Cellular" /> <br /> <credential name="Location" /> <br /> <for path="/usr/bin/MyApp2" /> <br /> </request> <br /></aegis> <br />
  58. 58. MeeGo Harmattan<br />Qt<br />
  59. 59. What Is Qt?<br />C++ application & UI framework<br />Open source<br />Cross-platform<br />Both desktop and embedded (mobile) systems!<br />”Write once, deploy everywhere”<br />Integrated cross-platform toolset<br />QtCreator, QtAssistant, QtDesigner, QtLinguist… <br />
  60. 60. Application UI in Qt<br />C++<br />QML/JavaScript<br />QWidgets<br />Graphics View<br />Qt Quick<br />All these can be mixed in the same app if needed!<br />Other<br />HTML/JavaScript/CSS<br />QtOpenGL<br />QtWebKit<br />Platform <br />OpenGLAPIs<br />
  61. 61. What Can You Do with Qt?<br />
  62. 62. The Qt Stack<br />Symbian<br />Maemo/MeeGo<br />Qt Components<br />Qt Quick<br />UI<br />Qt<br />QtGUI<br />QtOpenGL<br />QtSvg<br />QtDeclarative<br />QtWebkit<br />Engine<br />QtNetwork<br />QtXml<br />QtCore<br />QtScript<br />QtSql<br />QtXmlPatterns<br />QtMultimedia<br />Mobile features<br />(Qt add-on)<br />Qt Mobility APIs<br />Linux C/C++<br />libraries<br />Symbian C++<br />Native APIs<br />Low level<br />native access<br /> Open C / POSIX<br />Desktop OSs<br />Linux<br />Symbian<br />
  63. 63. Latest Features in Qt<br />New Animation Framework<br />UI Effects<br />Multi-Touch and Gesture support<br />Qt for Symbian<br />Qt for Maemo/MeeGo<br />Qt 4.6<br />Performance Improvements in QtWebKit<br />Qt Quick<br />”Qt User Interface Creation Kit”<br />QML<br />Qt 4.7(.1)<br />Qt 4.7(.2)<br />
  64. 64. Working with Qt SDK 1.1<br />2. Code Logic<br />1. Design UI<br />3. Try in Qt Simulator<br />4. Plug in device(s) and select target<br />
  65. 65. Working with Qt SDK 1.1<br />2. Code Logic<br />1. Design UI<br />3. Try in Qt Simulator<br />4. Plug in device(s) and select target<br />
  66. 66. Qt Programming Characteristics <br />Heavily object-based C++ <br />Hundreds (> 700) of ready-made classes<br />Class names start with Q<br />You must not use Q prefix in your own class names<br />High abstraction level<br />UIs built from widgets <br />UI building block, derived from QWidget<br />Meta-object system<br />Observer pattern for object-to-object communication (signals and slots)<br />QObject as a common base class<br />Parent and child objects<br />Memory management, window sharing<br />Has similarities to Java<br />However, is still C++!<br />
  67. 67. Qt Modules<br />QtMobility APIs<br />Qt is split into modules (libraries)<br />QtCore – Basic types, containers, event loop, application base class<br />QtGui – GUI application, widgets, 2D painting<br />QtWebKit – Web browser functionality embedded into an application <br />QtOpenGl<br />QtSvg<br />Qt3Support<br />QtWebKit<br />QtXmlPatterns<br />QtOpenVG<br />QtNetwork<br />QtSql<br />Phonon<br />QtScript<br />QtGui<br />QtXml<br />QtMultimedia<br />QtCore<br />
  68. 68. Basic Types<br />Basic data types in Qt come from standard C++<br />int, bool, double, char, …<br />For strings, use QString<br />Stores 16-bit QChar types<br />Use QByteArray for 8-bit data <br />Structs and arrays<br />Dynamic arrays are typically created using QList<T><br />QStringListcan be used instead of QList<QString><br />Other, more specialized container classes also exist<br />QVector, QLinkedList, …<br />
  69. 69. QWidget<br />The base class for all UI elements in Qt<br />Take a look at the QWidget reference documentation for details<br />Basic QWidgets are quite desktop-oriented<br />But can be used in mobile applications as well<br />However, prefer using Qt Quick and Qt Components in mobile applications <br />Especially good for quick prototyping because of Qt Designer<br />
  70. 70. Display Widgets<br />Labels (QLabel)<br />Text Browsers (QTextBrowser)<br />LCDNumbers (QLCDNumber)<br />Progress Bar (QProgressBar)<br />Calendar (QCalendarWidget)<br />Web View (QWebView)<br />Graphics View (QGraphicsView)<br />...and more…<br />
  71. 71. Input & Selection Widgets<br />Push buttons (QPushButton)<br />Selection buttons (QRadioButton, QCheckBox)<br />Text input <br />Line input (QLineEdit)<br />Plain text input (QPlainTextEdit)<br />Plain & rich text input (QTextEdit)<br />Spin boxes (QSpinBox)<br />Dial (QDial)<br />Scroll bars (QScrollBar)<br />Sliders (QSlider)<br />…and more…<br />
  72. 72. Very First Qt Application<br />#include<QtGui/QApplication><br />#include<QtGui/QLabel><br />intmain(intargc,char**argv){<br /> QApplicationapp(argc,argv);<br /> QLabellabel("Yep,I'maHelloWorld!");<br />;//orshowMaximized()orshowFullScreen()<br /> returnapp.exec();<br />}<br />
  73. 73. Class QApplication from QtGui Module <br />Initializes application settings<br />Palette, font<br />Encapsulates the main event loop QApplication::exec()<br />Defines application’s look and feel (style)<br />Provides localization of strings<br />Knows application’s windows<br />widgetAt()<br />Use global qApp pointer to access QApplication instance in your code<br />E.g. calling qApp->quit() closes the application<br />Derived from QCoreApplication [QtCore]<br />Used in console applications or Qt processes without any UI<br />
  74. 74. Building Qt Applications<br />qmake –project<br />Optional step: creates a Qt project file (.pro). You can also create this manually or use the one generated by Qt Creator.<br />qmake<br />Uses the .pro file as input and produces platform-specific Makefile(s)<br />make<br />Compiles the program for the current platform<br />Executes also additional tools, such as moc, uic and rcc<br />Platform<br />specific<br />Makefiles<br />Application<br />Binary<br />Project<br />file (.pro)<br />qmake<br />-project<br />qmake<br />make<br />
  75. 75. QObject<br />Heart of Qt's object model<br />Base class for all object classes<br />All QWidgets are QObjects also!<br />Provides object trees and object ownership<br />QObject's responsibility is to provide a central location for the most important concepts in Qt<br />Has three major responsibilities<br />Memory Management<br />Introspection<br />Event handling<br />
  76. 76. Parent/Child Mechanism<br />Each QObject instance may have a parent QObject<br />Child informs its parent about its existence, upon which the parent adds it to its own list of children<br />If a widget object does not have a parent, it is a window<br />The parent widget does the following for its children:<br />Hides and shows children, when hidden/shown itself<br />Enables and disables children when enabled or disabled itself<br />Note that a child may be explicitly hidden, although the parent is shown<br />
  77. 77. Parent/Child Mechanism<br />The ownership of all child QObjects is transferred to the parent<br />Automatic deletion by the parent<br />Children must be allocated from the heap with the new operator!<br />Manual deletion will not, however, cause double deletion because the child informs its parent of the deletion<br />All QObjects without a parent must be deleted manually<br />Stack allocation of the parent is a good option to avoid problems<br />Occasionally it may seem like Qt would hold some sort of automatic garbage collection but this is not true!<br />Always pay attention to ownerships and responsibilities!<br />
  78. 78. Demonstration – Using Qt Creator<br />Let’s start by studying how Qt Creator is used for creating new mobile Qt applications<br />The SDK contains a simulator tool for mobile targets<br />Meant for quick testing only!<br />Not an exact match of any actual device<br />Provides mechanisms for simulating different kinds of events<br />Always test on a real device before publishing your application<br />
  79. 79. Qt Meta-Object System<br />Qt Meta-Object System extends C++ with dynamic features<br />Similar to those in Java, for example<br />Dynamic features include:<br />Mechanism to access any function in a class<br />Also private ones<br />Used by signals and slots<br />Class information<br />Type without RTTI (Run-Time Type Information)<br />Information about base classes<br />Translate strings for internationalization<br />Dynamic properties<br />
  80. 80. How Does It Work?<br />myclass.cpp<br />//In myclass.h:<br />classMyClass:publicQObject{<br />Q_OBJECT<br /> //Therestoftheclassdeclaration...<br />};<br />moc_myclass.cpp<br />qmake sees the Q_OBJECT macro and creates code to extend MyClass’s code. <br />This extension (moc_myclass.cpp) is the Meta-Object!<br />
  81. 81. Signals and Slots<br />Qt’ssignals and slots mechanism is one of the features enabled by the Meta-Object System<br />It is simply an extremely flexible implementation of the observer pattern<br />Type safe<br />Many-to-many connections possible<br />Used via the QObject base class<br />
  82. 82. Signals and Slots<br />connect(Object1, signal1, Object3, slot1)<br />Object3<br />Object1<br />connect(Object1, signal2, Object3, slot2)<br />signal1<br />signal2<br />signal1<br />signal2<br />slot1<br />slot2<br />connect(Object1, signal2, Object4, slot2)<br />Object2<br />Object4<br />signal1<br />signal2<br />signal1<br />signal2<br />slot1<br />slot2<br />slot3<br />slot1<br />connect(Object2, signal1, Object4, slot1)<br />
  83. 83. Signals<br />A signal is a way to inform a possible observer that something has happened in the observed class<br />A QPushButton is clicked<br />An asynchronous service handler has finished<br />Value of QSlider is changed<br />Signals are member functions that are automatically implemented in the Meta-Object<br />Only the function declaration in the header file is provided by the developer<br />Signal is sent, or emitted, using the keyword emit<br />emit clicked();<br />emit someSignal(7, “Hello”);<br />
  84. 84. Slots<br />A slot is a function that is to be executed when a signal has been emitted<br />(When QPushButton is clicked), closeQDialog<br />(When service is ready), ask for the result and store it<br />(When QSlider value is changed), display it in QLCDNumber<br />A slot function is a normal class member function implemented by the developer<br />Can be private, protected or public<br />
  85. 85. Signals and Slots In a Class<br />//NewClass.h<br />classNewClass:publicQObject {<br />Q_OBJECT//Meta-objectfileneeded<br />signals:<br /> //Implementationinthe automatically generatedMeta-Object(moc_newclass.cpp)<br /> voidnewSignal(intmyInt,QStringmyString);<br />voidanotherSignal();<br />publicslots:<br /> //SlotsareimplementedasnormalmemberfunctionsinNewClass.cpp<br /> voidnewSlot(inti,QStrings);<br />voidsomeSlot();<br />};<br />Signals and slots must be explicitly connected:<br />bool success = QObject::connect(<br /> senderObject, SIGNAL(valueChanged(int)), <br /> observerObject, SLOT(display(int)));<br />
  86. 86. Connecting Signals to Slots<br />Signals and slots must be explicitly connected<br /> bool success = QObject::connect(<br /> senderObject, SIGNAL(valueChanged(int)), <br /> observerObject, SLOT(display(int)));<br />Signal and slot signatures must match<br />However, a signal may have more parameters than the corresponding slot<br />SIGNAL and SLOT macros actually handle function names as strings<br />No compile time error checking is made!<br />Signals can also be connected to other signals<br />
  87. 87. How to Update a Value Using a Slider?<br />window<br />layout<br />lcd<br />slider<br />int main( intargc, char** argv ) {<br />QApplication app( argc, argv );<br />QWidget window;<br />QVBoxLayout* layout = new QVBoxLayout( &window );<br />QLCDNumber* lcd = newQLCDNumber( &window );<br />QSlider* slider = newQSlider( Qt::Horizontal, &window );<br /> layout->addWidget( lcd );<br /> layout->addWidget( slider );<br />window.showMaximized();<br />returnapp.exec();<br />} <br />
  88. 88. Signals<br />A signal is a way to inform a possible observer that something of interest has happened inside the observed class<br />A QPushButton is clicked<br />QPushButton::clicked()<br />An asynchronous service handler is finished<br />QNetworkAccessManager::finished( QNetworkReply* reply )<br />Value of QSlider is changed (and the new value is informed as a parameter)<br />QSlider::valueChanged( int )<br />Signals are member functions that are automatically implemented in the meta-object<br />Only the function declaration is provided by the developer<br />Signal is sent, or emitted, using the keyword emit<br />emit clicked();<br />emit someSignal(7, “Hello”);<br />
  89. 89. Slots<br />A slot is a function that is to be executed when a signal has been emitted.<br />(When QPushButton is clicked), closeQDialog<br />(When service is ready), ask for the value and store it<br />(When QSlider value is changed), display the value in QLCDNumber<br />A Slot function is a normal member function implemented by the developer<br />
  90. 90. Connections<br />To receive a signal in a slot, signal and slot must be connected<br />bool success = QObject::connect(<br />senderObject, SIGNAL(valueChanged(int)), <br />observerObject, SLOT(display(int)));<br />Emitted signal results<br />In an immediate slot function call, if signal and slot implemented in objects in the same thread<br />Signal and slot signatures must match (signal may have more parameters)<br />No compile time error checking is made!<br />
  91. 91. Slider Signal Connected to a Slot<br />1. Slider is moved (to value 21)<br />int main( intargc, char** argv ) {<br />QApplicationapp( argc, argv );<br />QWidgetwindow;<br />QVBoxLayout* layout = new QVBoxLayout( &window );<br />QLCDNumber* lcd = newQLCDNumber( &window );<br />QSlider* slider = newQSlider( Qt::Horizontal, &window );<br /> layout->addWidget( lcd );<br /> layout->addWidget( slider );<br />QObject::connect( slider, SIGNAL(valueChanged(int)),<br />lcd, SLOT(display(int)));<br />window.showMaximized();<br />returnapp.exec();<br />} <br />2. emit valueChanged(21)<br />3. display(21)<br />
  92. 92. Events vs. Signals<br />Some Object<br />Some Object<br />Some Object<br />slot function<br />slot function<br />slot function<br />1. User presses button in UI<br />2. Event is generated and delivered for the corresponding object’s event handler function<br />QEvent <br />(mouse press)<br />4. Previously connected slot functions get called<br />Hey! I’m<br />clicked()<br />QPushButton object<br />Event handler<br />3. Pushbutton emits a signal clicked() to ”shout out loud” of the situation<br />
  93. 93. Qt Property System<br />Data members of QObject-derived classes can be exposed as properties<br />Properties are defined in class declarations using the Q_PROPERTY macro:<br />Q_PROPERTY( QString title READ title WRITE setTitle )<br />Q_PROPERTY( bool enabled READ isEnabled WRITE setEnabled )<br />Properties can be accessed using base class functions<br />QObject::property() and QObject::setProperty()<br />No need to know the exact type of the target object!<br />If the property named in QObject::setProperty() does not exist, it will be dynamically added to the object at run-time<br />Take a look at QWidget’s properties, for instance!<br />
  94. 94. Qt Property System<br />//(Simplified)MyObject.h:<br />classMyObject:publicQObject{<br /> Q_OBJECT<br /> Q_PROPERTY(QStringmyTextREADtextWRITEsetText)<br />public:<br /> voidsetText(constQString&text){m_text=text;}<br /> QStringtext()const{returnm_text;}<br />private:<br /> QStringm_text;<br />};<br />//UsageinSomeCode.cpp:<br />MyObject*myObject=newMyObject();<br />QObject*object=myObject;<br />myObject->setText(”Some text”);//Accesseitherinthenormalway...<br />object->setProperty(”myText”, ”Other text”);//...orbyusingthepropertysystem<br />
  95. 95. MeeGo Harmattan<br />QtQuick<br />
  96. 96. QtQuick & QML <br />”Qt User InterfaceCreationKit”<br />Declarative UI technology<br />Introduced in Qt 4.7.0<br />QML – ”QtMeta-Object Language”<br />QtDeclarative – New C++ module in Qt<br />Aimed at designers and developersalike<br />Drag’n’drop designer toolprovided<br />GIMP & Adobe Photoshoppluginsalsoavailable<br />
  97. 97. Development Tools<br />Qt Creator IDE comes with the Qt SDK<br />Full QML support with a drag’n’drop designer tool since v2.1<br />Qt SDK also contains a qmlviewer.exe tool<br />Used for quickly previewing a QML/JavaScript UI<br />Can be used on desktop, Qt Simulator & mobile devices<br />
  98. 98. QML at a Glance – HelloWorld.qml<br />importQtQuick1.0<br />Rectangle{ <br /> width:200; height:200 <br />color:"lightblue"<br /> Text{ <br /> id:helloText<br /> anchors.horizontalCenter:parent.horizontalCenter <br />font.pixelSize:parent.height/10 <br />font.bold:true <br /> text:"MeetQML!"<br /> } <br /> Image{ <br /> id:helloImage<br /> anchors.centerIn:parent <br /> source:"icons/qt_logo.png"<br /> } <br /> MouseArea{ <br /> anchors.fill:parent <br />onClicked:{ <br />helloImage.visible=false; <br />helloText.text="Bye-byepicture!"; <br /> } <br /> } <br />}<br />It’s simply all about elements, properties and their values!<br />
  99. 99. Import Statement<br />Gives you access to the built-in QML elements<br />Rectangle, Item, Text, Image, …<br />Specifies which version of Qt Quick you are using<br />Notice the syntax change in Qt 4.7.1!<br />Guarantees backwards compatibility<br />Only features of the specified version are loaded<br />// In Qt 4.7.0:<br />importQt4.7<br />Rectangle{ <br /> width:200; height:200 <br /> // ...<br />// In Qt 4.7.1 onwards:<br />importQtQuick1.0<br />Rectangle{ <br /> width:200; height:200 <br /> // ...<br />
  100. 100. QML Elements & Properties<br />importQtQuick1.0<br />Rectangle{ <br /> width:200; height:200 <br />color:"lightblue"<br /> Text{ <br /> id:helloText<br /> anchors.horizontalCenter:parent.horizontalCenter <br />font.pixelSize:parent.height/10 <br />font.bold:true <br /> text:"MeetQML!"<br /> } <br /> Image{ <br /> id:helloImage<br /> anchors.centerIn:parent <br /> source:"icons/qt_logo.png"<br /> } <br /> MouseArea{ <br /> anchors.fill:parent <br />onClicked:{ <br />helloImage.visible=false; <br />helloText.text="Bye-byepicture!"; <br /> } <br /> } <br />}<br />QML elements form a parent/child hierarchy<br />Each .qml file has exactly one root element<br />All visual elements inherit the Item element defining certain common properties:<br />id, anchors<br />x, y, z<br />width, height<br />opacity, visible, rotation, scale<br />…<br />
  101. 101. QML Elements & Properties<br />importQtQuick1.0<br />Rectangle{ <br /> width:200; height:200 <br />color:"lightblue"<br /> Text{ <br /> id:helloText<br /> anchors.horizontalCenter:parent.horizontalCenter <br />font.pixelSize:parent.height/10 <br />font.bold:true <br /> text:"MeetQML!"<br /> } <br /> Image{ <br /> id:helloImage<br /> anchors.centerIn:parent <br /> source:"icons/qt_logo.png"<br /> } <br /> MouseArea{ <br /> anchors.fill:parent <br />onClicked:{ <br />helloImage.visible=false; <br />helloText.text="Bye-byepicture!"; <br /> } <br /> } <br />}<br />If more than one property on a line, separate with a semi-colon<br />A special id property can be assigned to any element<br />Used for accessing its properties & methods from elsewhere<br />A special parent property always refers to the element’s parent<br />Can be used instead of the id property to refer to the parent<br />
  102. 102. Anchor Layout<br />Each visual QML element has <br />6 invisible anchor lines, and<br />4 invisible margin lines<br />Used for specifying relative positions of items<br />To remove/clear an anchor, set it to undefined<br />Note! <br />For performance reasons, you can anchor an item only to its direct parent or siblings<br />horizontalCenter<br />right<br />left<br />rightMargin<br />leftMargin<br />topMargin<br />top<br />verticalCenter<br />bottom<br />bottomMargin<br />
  103. 103. Anchor Layout<br />Rectangle{ <br /> id:rect1 <br /> color:"blue"<br /> //...<br />} <br />Rectangle{ <br /> id:rect2 <br /> color:"red"<br /> anchors.left:rect1.right <br /> //...<br />}<br />Rectangle{ <br /> id:rect1 <br /> color:"blue"<br /> //...<br />} <br />Rectangle{ <br /> id:rect2 <br /> color:"red"<br /> anchors.left:rect1.right <br /> anchors.leftMargin: 5<br /> //...<br />}<br />Rectangle{ <br /> id:rect1 <br /> color:"blue"<br /> //...<br />} <br />Rectangle{ <br /> id:rect2 <br /> color:"red"<br /> anchors.left:rect1.right <br /> rect1.bottom<br /> //...<br />}<br />
  104. 104. Basic Positioners<br />Column{ <br /> spacing: 2 <br /> Rectangle { color: "red"; width: 50; height: 50 } <br />Rectangle{ color: "green"; width: 20; height: 50 } <br />Rectangle{ color: "blue"; width: 50; height: 20 } <br />}<br />Row{ <br /> spacing: 2 <br /> Rectangle { color: "red"; width: 50; height: 50 } <br />Rectangle{ color: "green"; width: 20; height: 50 } <br />Rectangle{ color: "blue"; width: 50; height: 20 } <br />}<br />
  105. 105. Basic Positioners<br />Grid{ <br /> columns: 3 <br /> spacing: 2 <br /> Rectangle { color: "red"; width: 50; height: 50 } <br />Rectangle{ color: "green"; width: 20; height: 50 } <br />Rectangle{ color: "blue"; width: 50; height: 20 } <br />Rectangle{ color: "cyan"; width: 50; height: 50 } <br />Rectangle{ color:"magenta"; width: 10; height: 10 } <br />}<br />Column{ <br /> spacing: 2 <br /> Rectangle { color: "red"; width: 50; height: 50 } <br /> Row{ <br /> spacing: 2 <br /> Rectangle { color: “yellow"; width: 50; height: 50 } <br />Rectangle{ color: “black"; width: 20; height: 50 } <br />Rectangle{ color: "blue"; width: 50; height: 20 } <br /> }<br />Rectangle{ color: "green"; width: 20; height: 50 } <br />}<br />
  106. 106. Event Handling – Signals <br />In Qt certain kinds of events are delivered as signals<br />In Qt/C++ a slot function is needed to react to these events<br />In QML a special signal handler property is used instead<br />The needed property depends on the signal source<br />Mouse click, timer event, key press, custom signal, …<br />In this section we will concentrate on MouseArea<br />I.e. handling signals generated by mouse click events<br />On touch screen devices this is the same as touch events<br />For key event handling use Keys and KeyNavigation<br />See Qt Quick documentation for details<br />
  107. 107. MouseArea – Basic Usage<br />MouseArea provides a number of signals<br />onClicked, onPressed, onReleased, onPressAndHold, ...<br />By default reacts to left button clicks and touch events<br />Set acceptedButtons property to change this behavior<br />Rectangle{ <br /> width: 200; height: 200 <br />MouseArea{ <br /> anchors.fill:parent // Can be freely sized/positioned like any other element<br /> onClicked:{ // Signal handler for the clicked signal<br /> console.log(mouse.x); // MouseEventobject called mousedelivered with the<br /> console.log(mouse.y); // signal (click position, keyboard modifiers, etc.)<br /> parent.visible = false;<br /> } <br /> } <br />}<br />
  108. 108. Animations <br />Here is a rather complex first example<br />Still very easy to understand, right?<br />Rectangle{ <br /> id:rect;width:120;height:300; <br /> Image{ <br /> id:img <br /> source:"face-smile.png"<br /> anchors.horizontalCenter: parent.horizontalCenter<br /> SequentialAnimationony{ <br /> id:anim <br /> running:true;loops:Animation.Infinite <br /> NumberAnimation{ <br /> to:300-img.height;duration:2000; easing.type:Easing.OutBounce<br /> } <br /> PauseAnimation{duration:1000} <br /> NumberAnimation{ <br /> to:0;duration:1000; easing.type:Easing.OutQuad<br /> } <br /> } <br /> } <br />}<br />
  109. 109. Custom Component Example<br />//Components.qml<br />importQt4.7 <br />Rectangle{ <br /> id:mainRect <br /> width:150; height:150 <br /> color:"black"<br /> MyButton{ <br /> anchors.centerIn:parent <br /> } <br /> MyButton{ <br /> <br /> anchors.horizontalCenter:<br />parent.horizontalCenter <br /> } <br /> MyButton{ <br /> anchors.bottom:parent.bottom <br /> anchors.horizontalCenter:<br />parent.horizontalCenter <br /> } <br />}<br />//MyButton.qml<br />importQt4.7 <br />Rectangle{ <br /> width:100;height:30 <br /> radius:10 <br /> opacity:0.5;color:"yellow"<br />Text{ <br /> id:myText <br /> anchors.centerIn:parent <br /> font.pixelSize:16 <br /> font.bold:true <br /> text:"Clickme!"<br /> } <br /> MouseArea{ <br /> anchors.fill:parent <br /> onClicked:{ <br /> //TODO: <br /> // Handle click<br />} <br /> } <br />} <br />
  110. 110. Model/View<br />Qt uses a Model/View pattern for presenting data<br />Rather like MVC pattern where view and controller are combined<br />QML provides new model and view elements<br />QML views allow more flexibility than C++ views<br />You can use either QML or C++ models with QML views<br />For more background information, see Qt documentation:<br />
  111. 111. Model/View Components<br />Model<br />The data source<br />View<br />Organizes the data for display<br />Delegate<br />Renders each data item<br />ListModel{ <br /> ListElement{ <br /> title:"Pancakes"<br /> picture:"pancakes.jpg"<br />} <br /> ListElement{ <br /> title:"FruitSalad"<br /> picture:"fruit.jpg"<br />} <br /> ListElement{ <br /> title:"VegetableSoup"<br /> picture:"vegetable.jpg"<br />} <br /> ListElement{ <br /> title:"Hamburger"<br /> picture:"hamburger.jpg"<br /> } <br /> ListElement{ <br /> title:"Lemonade"<br /> picture:"lemonade.jpg"<br /> } <br />}<br />//Simplifiedcode:<br />Row{ <br /> Image {<br /> source: picture <br /> } <br /> Text{ <br />text: title <br /> }<br />}<br />
  112. 112. Model/View Example<br />MyModel.qml<br />Simple ListModel for the data<br />ModelView.qml<br />ListView for displaying the data<br />Delegate & highlight components<br />ListModel{ <br /> id:contactModel <br /> ListElement{ <br /> name:"BillSmith"<br /> number:"5553264"<br /> } <br /> ListElement{ <br /> name:"JohnBrown"<br /> number:"5558426"<br /> } <br /> ListElement{ <br /> name:"SamWise"<br /> number:"5550473"<br /> } <br />}<br />
  113. 113. Model/View Example<br />Rectangle{ <br /> width:180;height:200;color:"green"<br /> Component{ <br /> id:delegate <br /> Item{ <br /> id:wrapper;width:180;height:40 <br /> Column{ <br /> x:5;y:5 <br /> Text{text:'<b>Name:</b>'+name} <br /> Text{text:'<b>Number:</b>'+number} <br /> } <br />} <br /> }<br />Component{ <br /> id:highlight <br />Rectangle{ <br /> color:"lightsteelblue"; radius:5 <br />} <br /> } <br />ListView{ <br />anchors.fill:parent <br />model:MyModel{}<br /> delegate:delegate<br />highlight:highlight<br /> } <br />}<br />Delegate is quite often defined as an inline component in the same file where the view is<br />It can also be placed in a separate file, the same way as the model<br />A highlight component can be used to highlight the currently selected item<br />The view needs a reference to the model and delegate (and highlight if it used)<br />
  114. 114. View Elements<br />ListView<br />Vertical or horizontal list of items<br />GridView<br />Grid of items<br />PathView<br />Items placed along a freely specifid path<br />
  115. 115. MeeGo Harmattan<br />QML and C++ Integration<br />
  116. 116. Using QObjects from QML<br />QObjects are accessible from QML code<br />All things specified in meta-data of QObject can be seen in QML<br />Signals<br />Slots<br />Properties<br />
  117. 117. Steps to Expose QObjects<br />Assuming the QObject has a well defined (Qt-like) interface consisting signals, slots, and properties the steps are straightforward<br />Refer to a context, QDeclarativeContext, in the QML engine, or QDeclarativeEngine<br />Set the context property<br />In other words, give a name for your instance of QObject derived class<br />
  118. 118. Example: Class Header<br />class MyCounter : public QObject<br />{<br /> Q_OBJECT<br />Q_PROPERTY(intcurrentValueREAD currentValue WRITE setValueNOTIFY currentValueChanged)<br />public:<br /> explicit MyCounter(QObject *parent = 0);<br />signals:<br /> void currentValueChanged();<br />public slots:<br /> void reset();<br /> void increaseCounter();<br />public:<br /> void setValue(int value);<br />intcurrentValue() const;<br />protected:<br />int counter;<br />};<br />
  119. 119. Example: Implementation <br />void MyCounter::increaseCounter()<br />{<br />constintvalueNow = currentValue();<br />setValue(1 + valueNow);<br />}<br />void MyCounter::setValue(int value)<br />{<br /> counter = value;<br /> emit currentValueChanged();<br />}<br />intMyCounter::currentValue() const<br />{ <br /> return counter;<br />}<br />int main(…) <br />{ <br /> … <br />QDeclarativeEngine* engine = view.engine();<br />QDeclarativeContext* context = engine->rootContext();<br />MyCounter counter;<br /> context->setContextProperty("theCounter", &counter);<br />}<br />
  120. 120. Using QObject from QML<br />Properties of Qobject can be accessed in the same way as QML properties<br />The update signal of a property is required to QML runtime to notice the change of the property<br />Any slot function can be called from QML/Javascript<br />import Qt 4.7<br />Rectangle {<br /> id: theWindow<br /> width: 200; height: 200<br /> Text {<br />anchors.centerIn: theWindow<br />text:"The counter="+theCounter.currentValue<br /> }<br />MouseArea {<br />anchors.fill: parent<br />onClicked: {<br />theCounter.increaseCounter()<br />}<br /> }<br />}<br />
  121. 121. MeeGo Harmattan<br />Application Framework<br />
  122. 122. Application Framework <br />C++ Business Logic<br />QML User-Interface<br />Application Plug-ins<br />Application<br />Mobility Plug-ins<br />Qt Components<br />MeeGo Plug-ins<br />JS Environment<br />QML Primitives<br />QtDeclarative<br />
  123. 123. QtQuick Components <br />Component library allowing the creation of user-interfaces of a Qt Quick application from a set of ready UI components<br />Window (PageStackWindow)<br />PageStack<br />Page<br />TabGroup<br />ToolbarLayout(toolbar)<br />TextArea (TextField)<br />Sheet<br />Screen<br />SelectionDialog, QueryDialog, Dialog<br />Buttons (Radio, Sheet, Tool)<br />ScrollDecorator<br />
  124. 124. Application Structure<br />Window<br />Main container for Qt components<br />Typically one in the application<br />Provides several orientation change signals<br />User navigates between the pages<br />Use the sub-element PageStackWindowto provide a frame for the application<br />Page<br />Has status (active/inactive)<br />May have a page-specific toolbar and menu<br />PageStack<br />Implements common navigational patterns<br />Pages are pushed and popped from the stack<br />User can use right (previous page) and left (next page) swipe to navigate between pages<br />
  125. 125. NavigationalPatterns<br />Identify your application type<br />Productivity <br />Pragmatic tasks, such as sending a message<br />Simple, intuitive, typically drill-down and simple toolbar pattern<br />Often using Qt Quick components <br />Immersion<br />Entertaining or visually rich UI<br />Video player, map player, games<br />Typically, full screen<br />Possibly, customized layout and controls<br />Application menu pattern<br />Flat experience <br />
  126. 126. Simple Application UI – Window<br />import QtQuick 1.1 <br />import com.meego 1.0 <br />PageStackWindow{ <br /> id: appWindowinitialPage: mainPage<br />MainPage {id: mainPage} <br />ToolBarLayout{ <br /> id: commonTools<br /> visible: true <br />ToolIcon{ <br />platformIconId: "toolbar-view-menu"; <br />anchors.right: parent===undefined ? undefined : parent.right<br />onClicked: (myMenu.status == DialogStatus.Closed) ? : myMenu.close() <br /> } <br /> }<br />}<br />
  127. 127. Simple Application UI – Page<br />import QtQuick 1.1 I<br /> 1.0 <br />Page { <br /> id: mainPage<br />anchors.margins: rootWindow.pageMargin<br /> function openFile(file) { <br />varcomponent = Qt.createComponent(file) <br /> if (component.status == Component.Ready) <br />pageStack.push(component); <br /> else <br /> console.log("Error loading component:", component.errorString()); <br /> } <br /> // Page content<br />MouseArea{ <br /> id: mouseArea<br />anchors.fill: background // Note this element is not shown in the example (page content) <br />onClicked: { <br />listPage.openFile(page) <br /> }<br />}<br />
  128. 128. PageNavigation<br />// Pages can be created using any element<br />ExamplePage { <br /> id: examplePage<br /> greeting: "Hello World!" <br />} // or<br />Component { <br /> id: examplePage<br />ExamplePage{ <br /> greeting: "Hello World!" <br /> } <br />}<br />// It is possible to provide property bindings, when a page is created <br />pageStack.push(examplePage, { foo: bar, foz: baz});<br />// If Component element is used, an Item is created and <br />// destroyed automatically<br />// If any other element type is used (Item), then the owenership<br />// is changed and returned when the page is pushed and <br />// popped<br />
  129. 129. PageNavigation – LazyLoading<br />// In case you have multiple pages, you should consider lazy loading of pages<br />Page { <br /> id: root <br />anchors.margins: 0 <br /> Item { <br /> id: container <br /> } <br /> property Item containerObject; <br />onVisibleChanged: { <br /> if (visible) { <br />varobject = componentDynamic.createObject(container); <br />containerObject= object; <br /> } else { <br />containerObject.destroy(); <br /> } <br /> } <br /> Component { <br /> id: componentDynamic<br /> Item { <br />
  130. 130. Element – ContextMenu<br />PageStackWindow { <br /> id: rootWindow<br />initialPage: Page { <br />Rectangle{ id: contextColorRect<br />anchors.centerIn: <br /> parent width: 100; height: 100 <br /> color: "black" <br />MouseArea{ <br /> id: longPressArea<br />anchors.fill: parent <br />onPressAndHold: <br /> } <br /> } <br />ContextMenu{ <br /> id: myContextMenu<br />MenuLayout{ <br />MenuItem {<br /> text: "Red"; <br />onClicked: { contextColorRect.color = "darkred" } <br /> }<br /> } <br />}<br />
  131. 131. Styling and Theming<br />QtQuick components provide a system-specific common look-and-feel<br />However, the components themselves do not provide a common LAF<br />Use system-specific constants<br />Elements have style attribute<br />Menu => MenuStyle<br />Platform-dependent style<br />There is a theming daemon<br />Shares the most common graphics and icons between apps<br />Do not consume app memory<br />import "UIConstants.js" as UIConstants<br />UIConstants.DEFAULT_MARGIN<br />UIConstants.BUTTON_SPACING<br />UIConstants.HEADER_DEFAULT_HEIGHT_PORTRAIT<br />UIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE<br />UIConstants.FONT_XLARGE // 32 px<br />UIConstants.FONT_XSMALL// 18 px<br />UIConstants.FONT_SLARGE// 26 px<br />UIConstants.FONT_DEFAULT// 24 px<br />UIConstants.FONT_LSMALL// 22 px<br />BorderImage { <br /> source: "image://theme/meegotouch-list-background-pressed-center" <br />}<br />
  132. 132. MeeGo Harmattan<br />MobilityAPIs<br />
  133. 133. QtMobilityAPIs<br />1.0.2<br />1.1 (Qt SDK)<br />1.2 (Tech Preview)<br />Out-of-Process<br />Service Framework<br />Bearer Management<br />(to QtNetwork in 4.7)<br />Organizer<br />Local Connectivity<br />(BT, NFC)<br />Document Gallery<br />AugmentedReality?<br />FaceRecognition?<br />Publish&Subscribe<br />Versit<br />Feedback<br />Messaging<br />Sensors<br />QML Bindings<br />Camera<br />Multimedia<br />Contacts<br />System Information<br />Landmarks, Maps,<br />Navigation<br />Location<br />
  134. 134. QML QtMobility API Bindings<br />Note:someAPIsarestillunderdevelopment – subject to change!<br />
  135. 135. Location API and Map<br />importQtQuick1.0 <br />importQtMobility.location1.1 <br />Item{ <br />width:500;height:500; focus:true <br />Map{<br /> id:map <br />plugin:Plugin{ name:"nokia" } <br />size.width:parent.width<br />size.height:parent.height<br />zoomLevel:12<br /> center:Coordinate{ <br /> latitude:61.4979781 <br /> longitude:23.7649307 <br /> } <br />MapCircle{ <br /> center:Coordinate{ <br /> latitude:61.4979781 <br /> longitude:23.7649307 <br /> } <br /> radius:1000.0 <br /> } <br />}<br />}<br />Import the API youneed…<br />…and useit the QML way!<br />
  136. 136. Location API and Map<br />Item{ <br /> ...<br /> Map{ id: map; ... }<br />MyButton{ <br /> text:"StreetMap"<br />MouseArea{ <br />onClicked: map.mapType = Map.StreetMap;<br />} <br /> } <br />MyButton{ <br />text:"Satellite"<br />MouseArea{ <br />onClicked: map.mapType = Map.SatelliteMapDay; <br />} <br /> } <br />MyButton{ <br />text: "ZoomOut"<br />MouseArea{ <br />onClicked: map.zoomLevel -= 1; <br />} <br /> } <br />MyButton{ <br />text: "ZoomIn"<br />MouseArea{ <br />onClicked: map.zoomLevel += 1; <br />} <br /> }<br />}<br />
  137. 137. Notes on the Location API<br />Currentimplementationalwaysdownloadsmapsfrom the Ovi Mapsserver<br />Doesnotutilizemapsinstalled on device for the the Ovi Mapsapplication<br />To getinformationaboutuser’scurrentlocation, use the PositionSource QML element<br />Givesyoulatitude and longitudeyoucanpass to the Map<br />Alsoprovidesaltitude and speedinformation<br />See the Location API documentation & sources for details & examples<br />
  138. 138. MeeGo Harmattan<br />Ovi StorePublication<br />
  139. 139. Ovi StoreEntryRequirements – 1 <br />Whatcanbepublished?<br />Active content<br />Passive content, like wallpaper<br />Run tests<br />Installation<br />Proper package name and version<br />Installation, launch, termination, and uninstallation<br />Functional<br />Content item does not crash or hang <br />Nokia branding guidelines (no excessive violence, swearing, alcohol drinking, racism, …) <br />Application UI should be accessible during phone calls<br />
  140. 140. Ovi StoreEntryRequirements – 2 <br />Robustness<br />Content item must not interfere with system and other apps<br />Interruptions must be properly handled while the app is running<br />Input fields must provide a virtual keyboard (portrait / landscape)<br />Swipe interaction principles must be followed<br />Co-existence<br />Follow the connection creation logic defined by the user<br />Follow the offline profile<br />Does not interfere with voice calls<br />User must not be prevented to make emergency calls<br />Usability<br />Large enough UI elements for finger usage<br />Performance<br />Lights off, CPU in low-power mode<br />
  141. 141. Course Summary<br />QtCreator 1.1.2 now supports Harmattan target as well<br />Plenty of debugging/profiling tools on the device<br />MeeGo 1.2 Harmattan API provided<br />MeeGo API (Qt), Moility APIs, Qt Quick, Qt Components<br />Qm system, Qtsparql, Qt4 telepathy etc.<br />Security framework<br />Applications written in QML using Qt Components<br />Stylable, themable<br />OpenGL, QtWebKit, and Qt can be used as well<br />Application logic with C++/C<br />Using Qt APIs, mobility APIs or platform APIs <br />