Qt-Quick-Controls-for-Tizen

Qt for Tizen: Qt Quick Controls – Development

Current Status

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
Button	Button	T. Olszak	Done
CheckBox	CheckBox	T. Olszak	Done
CheckBox	Switch	T. Olszak	Done
CheckBox	DetailButton	T. Olszak	Done
ColorPicker
ContextMenu	ContextMenu	T. Olszak	Done
DatePicker	DateEdit	T.OLszak	Done
TimePicker	TimeEdit	T.Olszak	Done
DateTimePicker			Analysed
EditArea			Analysed
EditField			Analysed
EditDate	DateEdit	T.Olszak	Done
EditTime	TimeEdit	T.Olszak	Done
ExpandableEditArea			Analysed
Footer	ToolBar	J.Staniek	Done
Form	ApplicationWindow		Done
Frame	View	J.Staniek	Done
Gallery
Header	TitleBar	J.Staniek	Done
Keypad
Label	Label	T. Olszak	Done
ListViews
OverlayRegion
Panel	Panel	T. Olszak	Done
Popup	Popup	T.Olszak	Done
PopupProgress	Popup and BusyIndicator	T.Olszak	Done
MessageBox	Popup and Buttons		Done
Progress	ProgressBar	T. Olszak	Done
SearchBar
Slider	Slider	T. Olszak	Done
SplitPanel	SplitView	T. Olszak	Done
TabBar	TabView	T. Olszak	Done
TextBox
ScrollBar	ScrollDecorator	J. Staniek/T.olszak	Done

Assumptions

• 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

General

• 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.

FUi_Resource*Config.cpp analysis

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-1.2.1.0/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

Assumptions

• 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)

Steps

1. Images are copied from osp-uifw source package to qtquickcontrols-tizen/src/images/sources/720×1280 [gitorious.org]
2. Images are copied from qtquickcontrols-tizen/src/images/sources/720×1280 [gitorious.org] to qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org]
3. Images in qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org] are normalized:
   1. 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.
   2. 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.
4. Images are copied from qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames [gitorious.org] to qtquickcontrols-tizen/src/images/720×1280 [gitorious.org]
5. Output of findProperImages.sh [gitorious.org] is JS object and is saved in DefaultSettings.js [gitorious.org] file.
6. Colors theme JS object is generated with generateColorsObject.sh [gitorious.org] and saved to DefaultSettings.js [gitorious.org] file.

See Also

• 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]

Categories:

• Developing_Qt
  • Ports
• Tizen