• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
QML settings

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



54 Embeds 37,885

http://agilesoftwaredevelopment.com 31998
http://www.agilesoftwaredevelopment.com 3474
http://www.rocketcityhooligans.com 788
http://rocketcityhooligans.com 778
http://www.meegoexperts.com 426
http://feeds.agilesoftwaredevelopment.com 134
http://www.tizenexperts.com 56
http://translate.googleusercontent.com 36
http://codingthis.com 28
http://webcache.googleusercontent.com 19
http://www.feedspot.com 18
http://localasd 16
http://abtasty.com 16
http://knowledgehubnetworks.com 9
http://www.hanrss.com 9
http://cloud.feedly.com 7
http://www.newsblur.com 7
http://www.bluemini.com 6
http://asd-release 5
http://scrum.collected.info 4
http://www.feedreader.com 3
http://agilesoftwaredevelopment.com. 3
http://feeds.feedburner.com 3
http://bluemini.com 2
http://www.365dailyjournal.com 2
http://tizenexperts.com 2
https://twitter.com 2
http://paper.li 2
http://prlog.ru 2
http://www.agileradar.com 2
http://digg.com 2
https://aniscartujo.com 2
http://localhost 2
http://www.jsumyu.com HTTP 2
http://cache.baiducontent.com 1
http://uk.search.yahoo.com 1
http://agilesoftwaredevelopment.com.netzcheck.com 1
http://emulator.mobilewebsitesubmit.com 1
http://smashingreader.com 1
http://feedly.com 1
http://cloud 1
http://inoreader.com 1
http://www.pogeir.net 1
http://www.qrdlrdm.pvmxv.org 1
http://www.hsmwycrt.org HTTP 1
http://admin.totalmarketing.com 1
http://www.agilesoftwaredevelopment.com&_=1326105992706 HTTP 1
http://www.tuicool.com 1 1
http://www.agilesoftwaredevelopment.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