Uploaded on

Update: Minor updates for the local meego meetup. …

Update: Minor updates for the local meego meetup.

How do you make your QML based applications automatically scalable to different platforms, yet pixel-perfect finetunable when needed. We used this approach for the first real application that works and looks good on Symbian, MeeGo/Harmattan and Android:
- http://store.ovi.com/content/186742
- https://market.android.com/details?id=eu.licentia.necessitas.industrius.example.dicountcalcandroid

This is presentation from the 2nd Tampere Barcamp http://barcamp.org/w/page/39167337/BarCampTampere2 and may mean not too much for you if you haven't been present live.

More material like this can be found at http://agilesoftwaredevelopment.com/tags/qml

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Platform and device-specific settings for your QML layouts
    Artem Marchenko
    October 8, 2011
    After Easy Discount Calculator by Artem Marchenko, JarmoParkkinen, TuukkaLindroos and Ekaterina Kuts
    Technical solution by Artem Marchenko and TuukkaLindroos
  • 2. Artem Marchenko
    Product Manager, Agile Coach, QML engineer for hire
    Was a Product Manager shipping multi-hundred MEur products
    Three times Forum Nokia Champion
    Private entrepreneur
    Available for hire for all things QML
  • 3. Same app running on Harmattan, Android and Symbian
  • 4. Easy Discount Calculator
    Symbian, MeeGo/Harmattan - http://store.ovi.com/content/186742
    Android - http://bit.ly/discountcalculator
    Free, but has font issues on some models due to porting technology bug.
    Well working proof of concept for now
  • 5. All the parameters can be fine-tuned on desktop
  • 6. Settings system
    // SettingsBase.QML
    import Qt 4.7
    import "GlobalSettings.js" as Js
    QtObject {
    id: settingsObject
    // logical switches/conditions
    property boolexitButtonPresent: true
    property boolclearButtonIsBetweenTheLines: true
    // element sizes
    property introllerHeight: 110
    property intdigitRollerWidth: 56
    property intpercentageRollerWidth: digitRollerWidth
  • 7. Settings system
    // SettingsMaemo.qml
    import Qt 4.7
    SettingsBase {
    property string platformTitle: "Maemo"
    property intscreenWidthInPortrait: 480
    property introllerHeight: 160
    property introllerNumberLineInnerSpacing: 0
    property int digitRollerWidth:69
    statusLineHeight: 0
  • 8. Tree of settings
  • 9. Using platform settings in JS
    .pragma library // - the only QML possibility for global variables
    varglobalSettings = null
    // Will fetch the settings object from the item. If the settings object doesn't // exists, will return the global one or generate one on the fly based on base settings.
    function getSettings(item) {

    if(item.settings) {
    if(!globalSettings) {
    globalSettings = item.settings
    if(!globalSettings) {
    var component = Qt.createComponent("SettingsBase.qml")
    globalSettings = component.createObject(item)
    return globalSettings;
  • 10. Using Settings in QML
    // SmallButton.qml
    import Qt 4.7
    import "GlobalSettings.js" as Js
    Rectangle {
    id: button
    width: Js.getSettings(button).smallButtonWidth
    height: Js.getSettings(button).smallButtonHeight
    radius: 3
  • 11. Injecting Settings from C++
    QStringsettingsPath = "qml/discountcalcui/Settings" + platformTitle + ".qml";
    // localAdjustPath cares about platform-specific file location details
    settingsUrl = QUrl::fromLocalFile(CrossPlatformUtils::localAdjustPath(settingsPath));
    QDeclarativeComponent component(view.engine(), settingsUrl);
    settingsInstance = component.create();
    if(!settingsInstance) { // No settings found - no object to install
    qWarning() << "Settings not found for this platform!"; qWarning() << component.errorString();
    } else {
    settingsInstance->setProperty("shouldInitializeGlobalSettingWithItself", true);
    view.engine()->rootContext()->setContextProperty("forcedSettings”, settingsInstance);
    // continue with normal QML initialization
  • 12. JavaScript side of initialization
    import Qt 4.7
    import "GlobalSettings.js" as Js
    QtObject {
    id: settingsObject
    property boolshouldInitializeGlobalSettingWithItself: false
    // Is executed way before main QML file is loaded
    onShouldInitializeGlobalSettingWithItselfChanged: {
    if(shouldInitializeGlobalSettingWithItself) {
    console.log("SBase: initializing global settings with " + settingsObject)
    Js.globalSettings = settingsObject
  • 13. Switching settings for desktop simulation
    // Simulator for different platforms
    DiscountCalcUi {
    id: main
    ListModel {
    id: platformsModel
    ListElement {title: "Symbian"; visualTitle: "S^3"}
    ListElement{title: "Android480x800"; visualTitle: "Andr 800" }
    ListElement{title: "Harmattan" }
    onButtonClicked: {
    var component = Qt.createComponent("Settings" + model.title + ".qml")
    main.settings = component.createObject(main)
    // actually, maybe we should have changed the global JS reference :/
  • 14. Summary
    Parameterizing code everywhere is possible and easy
    Use JavaScript libraries for storing global objects
    To initialize settings by the moment of QML instantiations, inject settings from C++ before the main QML object
    Care about ability to change settings object for the desktop simulation of different platforms
  • 15. Thank you
    Q&As time
    You can find these and similar slides at http://agilesoftwaredevelopment.com/tags/qml