QML settings


Published on

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

Published in: Technology
  • 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

No notes for slide

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 />http://fi.linkedin.com/in/artemmarchenko <br />
  3. 3. Same app running on Harmattan, Android and Symbian<br />
  4. 4. Easy Discount Calculator<br />Symbian, MeeGo/Harmattan - http://store.ovi.com/content/186742<br />Android - http://bit.ly/discountcalculator<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 http://agilesoftwaredevelopment.com/tags/qml<br />