Qt for Tizen: Qt Quick Controls – Development
Following table show current status of porting Tizen Controls to Qt Quick cross platform controls. Not all Tizen controls will be ported – sometimes equivalent component already exists in Qt (e.g. Animations). Some of them need deeper analysis and integration with platform (Search, Keypad) and they will be considered later. Possible States:
- ? – not reviewed
- Analysed – we know what to do to port certain control
- In Progress
- Done – ported
|Tizen Control Name||Qt Name||Who?||Status|
|PopupProgress||Popup and BusyIndicator||T.Olszak||Done|
|MessageBox||Popup and Buttons||Done|
- Qt quick controls for Tizen should be derived from qtquickcontrols. This may be opportunity of merging Qt Quick Controls for Tizen with Qt Quick Controls in the future.
- The controls should have Tizen look and feel based on Tizen UI Controls (see UiControls sample app from Tizen SDK available at https://developer.tizen.org/documentation/dev-guide under Tizen Native App Programming->Sample applications->UiControls)
- All content of the OSP libraries is licensed under the Apache license so images can be reused
Main conclusions after analysis of Tizen 2.1b controls
- Controls are placed in libosp-uifw library. Sources could be obtained from download.tizen.org. For emulator it could be http://download.tizen.org/snapshots/2.1-emul/common/latest/repos/tizen-main/source/ (osp-uifw-*.rpm package)
- The package can be unpacked by this command:
It provides osp-uifw sources.
- Each control contains information about related resources hardcoded in FUi_ResourceControlConfig.cpp. For example FUi_ResourceProgressConfig.cpp lists resources for FUiCtrlProgress.
Below is the content of FUi_ResourceProgressConfig.cpp file.
Important from our point of view are ADD_*_CONFIG macros (defined in FUi_ResourceConfigMacro.h):
- ADD_COLOR_CONFIG – first argument is the key, second argument is the value but – if second value starts with $ then it acts as the key from osp-uifw-source-dir/res/common/usr/share/osp/themes xml file. The real value is related to that key. So first line in FUi_ResourceProgressConfig.cpp inserts pair (BAR_BG_NORMAL,”#FFF0EDE9”) into some resource map . “#FFF0EDE9” is the value from osp-uifw-source-dir/res/common/usr/share/osp/themes/white.xml corresponding to $W062L1 key.
- ADD_IMAGE_CONFIG – sets image from ex. osp-uifw-188.8.131.52/res/common/usr/share/osp/bitmaps/720×1280 and its subdirectiories.
- ADD_SHAPE_CONFIG – self explanatory
Images used in Controls:
Tizen uses mainly Andorid like 9-patch images. Unlike QML BorderImage they contains information about bottom,top, left and right areas inside png file.
Preparing Tizen resources for Qt Quick Control for Tizen
- Currently only white theme will ported
- Currently only 720×1280 resolution will be supported
- Tizen 9-patch images will be modified (border information will be moved from png to sci)
- Images are copied from osp-uifw source package to qtquickcontrols-tizen/src/images/sources/720×1280 [gitorious.org]
- Images are copied from qtquickcontrols-tizen/src/images/sources/720×1280 [gitorious.org] to qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org]
- Images in qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org] are normalized:
- Normalization script [gitorious.org] is invoked. It removes “.#” from fileNames (type of QML image source is url and there is problem with loading files when file name contains #‘s). These files are nine patch images [developer.android.com] It also modifies png’s with 9patch2sci [gitorious.org] tool.
- Best suitable files are found and exported to JS object with findProperImages.sh [gitorious.org] script. Image files are pointed in FUi_ResourceControlConfig.cpp by name and best file path should be choosen. Alghoritm is self explanatory – see findProperImages.sh script.
- Images are copied from qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org] to qtquickcontrols-tizen/src/images/720×1280 [gitorious.org]
- Output of findProperImages.sh [gitorious.org] is JS object and is saved in DefaultSettings.js [gitorious.org] file.
- Colors theme JS object is generated with generateColorsObject.sh [gitorious.org] and saved to DefaultSettings.js [gitorious.org] file.
- MeeGo Harmattan Qt Quick components [api.devpda.net] – useful in cases when a Qt Quick control for mobile isn’t available
- N9 UX Guidelines [harmattan-dev.nokia.com] (removed by Nokia, you can download offline version [developer.nokia.com])
- Android UI Guidelines [developer.android.com], Android Design [developer.android.com]