QML settings

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
http://fi.linkedin.com/in/artemmarchenko

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
//GlobalSettings.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
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
//SettingsBase.qml
import Qt 4.7
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

http://agilesoftwaredevelopment.com	13660
http://www.agilesoftwaredevelopment.com	965
http://www.meegoexperts.com	343
http://feeds.agilesoftwaredevelopment.com	45
http://translate.googleusercontent.com	21
http://localasd	16
http://codingthis.com	15
http://knowledgehubnetworks.com	6
http://asd-release	5
http://www.hanrss.com	4
http://scrum.collected.info	4
http://feeds.feedburner.com	3
http://www.newsblur.com	3
http://webcache.googleusercontent.com	3
http://localhost	2
http://bluemini.com	2
http://www.agileradar.com	2
https://aniscartujo.com	2
http://www.jsumyu.com HTTP	2
http://www.bluemini.com	2
http://paper.li	2
http://agilesoftwaredevelopment.com.	1
http://admin.totalmarketing.com	1
http://www.hsmwycrt.org HTTP	1
http://www.agilesoftwaredevelopment.com&_=1326105992706 HTTP	1
http://www.nekoemdz.org HTTP	1
http://www.pogeir.net	1
http://www.qrdlrdm.pvmxv.org	1

QML settings

by AgileArtem on Oct 09, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

28 Embeds 15,114

Statistics

QML settings — Presentation Transcript