Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

QML settings

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:

This is presentation from the 2nd Tampere Barcamp and may mean not too much for you if you haven't been present live.

More material like this can be found at

  • Login to see the comments

QML settings

  1. 1. Platform and device-specific settings for your QML layouts<br />Artem Marchenko<br />October 8, 2011<br />After Easy Discount Calculator by Artem Marchenko, JarmoParkkinen, TuukkaLindroos and Ekaterina Kuts<br />Technical solution by Artem Marchenko and TuukkaLindroos<br />
  2. 2. Artem Marchenko<br />Product Manager, Agile Coach, QML engineer for hire<br />Was a Product Manager shipping multi-hundred MEur products<br />Three times Forum Nokia Champion<br />Private entrepreneur<br />Available for hire for all things QML<br /> <br />
  3. 3. Same app running on Harmattan, Android and Symbian<br />
  4. 4. Easy Discount Calculator<br />Symbian, MeeGo/Harmattan -<br />Android -<br />Free, but has font issues on some models due to porting technology bug.<br />Well working proof of concept for now<br />
  5. 5. All the parameters can be fine-tuned on desktop<br />
  6. 6. Settings system<br />// SettingsBase.QML<br />import Qt 4.7<br />import "GlobalSettings.js" as Js<br />QtObject {<br /> id: settingsObject<br />// logical switches/conditions<br /> property boolexitButtonPresent: true<br /> property boolclearButtonIsBetweenTheLines: true<br /> // element sizes<br /> property introllerHeight: 110<br /> property intdigitRollerWidth: 56<br /> property intpercentageRollerWidth: digitRollerWidth<br />
  7. 7. Settings system<br />// SettingsMaemo.qml<br />import Qt 4.7<br />SettingsBase {<br /> property string platformTitle: "Maemo"<br /> property intscreenWidthInPortrait: 480<br />...<br /> property introllerHeight: 160<br /> property introllerNumberLineInnerSpacing: 0<br /> property int digitRollerWidth:69<br />statusLineHeight: 0<br />
  8. 8. Tree of settings<br />
  9. 9. Using platform settings in JS<br />//GlobalSettings.js<br />.pragma library // - the only QML possibility for global variables<br />varglobalSettings = null<br />// 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. <br />function getSettings(item) {<br />…<br /> if(item.settings) {<br /> if(!globalSettings) {<br />globalSettings = item.settings<br /> }<br />if(!globalSettings) {<br />var component = Qt.createComponent("SettingsBase.qml")<br />globalSettings = component.createObject(item)<br /> }<br /> return globalSettings;<br />
  10. 10. Using Settings in QML<br />// SmallButton.qml<br />import Qt 4.7<br />import "GlobalSettings.js" as Js<br />Rectangle {<br /> id: button<br /> width: Js.getSettings(button).smallButtonWidth<br /> height: Js.getSettings(button).smallButtonHeight<br /> radius: 3<br />
  11. 11. Injecting Settings from C++<br />QStringsettingsPath = "qml/discountcalcui/Settings" + platformTitle + ".qml";<br />// localAdjustPath cares about platform-specific file location details<br />settingsUrl = QUrl::fromLocalFile(CrossPlatformUtils::localAdjustPath(settingsPath));<br />QDeclarativeComponent component(view.engine(), settingsUrl);<br />settingsInstance = component.create();<br />if(!settingsInstance) { // No settings found - no object to install<br />qWarning() << "Settings not found for this platform!"; qWarning() << component.errorString();<br />} else {<br />settingsInstance->setProperty("shouldInitializeGlobalSettingWithItself", true);<br />view.engine()->rootContext()->setContextProperty("forcedSettings”, settingsInstance);<br /> }<br />// continue with normal QML initialization<br />
  12. 12. JavaScript side of initialization<br />//SettingsBase.qml<br />import Qt 4.7<br />import "GlobalSettings.js" as Js<br />QtObject {<br /> id: settingsObject<br /> property boolshouldInitializeGlobalSettingWithItself: false<br />// Is executed way before main QML file is loaded<br />onShouldInitializeGlobalSettingWithItselfChanged: {<br /> if(shouldInitializeGlobalSettingWithItself) {<br />console.log("SBase: initializing global settings with " + settingsObject)<br />Js.globalSettings = settingsObject<br /> }<br /> }<br />
  13. 13. Switching settings for desktop simulation<br />// Simulator for different platforms<br />DiscountCalcUi {<br /> id: main<br /> }<br />ListModel {<br /> id: platformsModel<br />ListElement {title: "Symbian"; visualTitle: "S^3"}<br />ListElement{title: "Android480x800"; visualTitle: "Andr 800" }<br />ListElement{title: "Harmattan" }<br /> }<br />onButtonClicked: {<br />var component = Qt.createComponent("Settings" + model.title + ".qml")<br />main.settings = component.createObject(main)<br />}<br />// actually, maybe we should have changed the global JS reference :/<br />
  14. 14. Summary<br />Parameterizing code everywhere is possible and easy<br />Use JavaScript libraries for storing global objects<br />To initialize settings by the moment of QML instantiations, inject settings from C++ before the main QML object<br />Care about ability to change settings object for the desktop simulation of different platforms<br />
  15. 15. Thank you<br />Q&As time<br />You can find these and similar slides at<br />