QML settings
Upcoming SlideShare
Loading in...5

QML settings



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



Total Views
Views on SlideShare
Embed Views



56 Embeds 39,131

http://agilesoftwaredevelopment.com 32846
http://www.agilesoftwaredevelopment.com 3603
http://www.rocketcityhooligans.com 1046
http://rocketcityhooligans.com 778
http://www.meegoexperts.com 426
http://feeds.agilesoftwaredevelopment.com 140
http://www.tizenexperts.com 56
http://translate.googleusercontent.com 36
http://codingthis.com 28
http://webcache.googleusercontent.com 20
http://www.feedspot.com 18
http://abtasty.com 16
http://localasd 16
http://www.hanrss.com 9
http://knowledgehubnetworks.com 9
http://www.newsblur.com 7
http://cloud.feedly.com 7
http://www.bluemini.com 6
http://asd-release 5
http://scrum.collected.info 4
http://agilesoftwaredevelopment.com. 3
http://www.feedreader.com 3
http://feeds.feedburner.com 3
http://bluemini.com 2
http://www.inoreader.com 2
http://www.jsumyu.com HTTP 2
http://www.365dailyjournal.com 2
http://www.agileradar.com 2
http://paper.li 2
http://digg.com 2
https://twitter.com 2
http://feedly.com 2
http://tizenexperts.com 2
https://aniscartujo.com 2
http://prlog.ru 2
http://localhost 2
http://www.hsmwycrt.org HTTP 1
http://smashingreader.com 1
http://www.tuicool.com 1
http://uk.search.yahoo.com 1
http://admin.totalmarketing.com 1
http://cache.baiducontent.com 1
http://agilesoftwaredevelopment.com.netzcheck.com 1
http://reader.aol.com 1
http://emulator.mobilewebsitesubmit.com 1
http://pre-excursion16.veritise.com 1
http://www.commafeed.com 1
http://www.agilesoftwaredevelopment.com&_=1326105992706 HTTP 1
http://www.agilesoftwaredevelopment.com. 1
http://inoreader.com 1



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.

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

QML settings QML settings Presentation Transcript

  • 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
  • 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
  • Same app running on Harmattan, Android and Symbian
  • 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
  • All the parameters can be fine-tuned on desktop
  • 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
  • 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
  • Tree of settings
  • 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;
  • 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
  • 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
  • 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
  • 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 :/
  • 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
  • Thank you
    Q&As time
    You can find these and similar slides at http://agilesoftwaredevelopment.com/tags/qml