View source for Qt-Quick-Controls-for-Tizen

{{Cleanup | reason=Auto-imported from ExpressionEngine.}}

[[Category:Developing_Qt::Ports::Tizen]]



= [[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

{| class="wikitable"
! 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)

[[Image:https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls.png|https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls.png]] [[Image:https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_touch_button.png|https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_touch_button.png]] [[Image:https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls_grouped_list.png|https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls_grouped_list.png]] [[Image:https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls_slider.png|https://developer.tizen.org/help/topic/org.tizen.native.appprogramming/html/images/ui_controls_slider.png]]

* All content of the OSP libraries is licensed under the [[https://www.tizen.org/content-license|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:
<code>
rpm2cpio myrpmfile.rpm | cpio -idmv
</code>
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.

<code>
#include "FUi_ResourceProgressConfig.h"

START_UI_CONFIG(PROGRESS);
{
 ADD_COLOR_CONFIG(BAR_BG_NORMAL, $W062L1);
 ADD_COLOR_CONFIG(BAR_NORMAL, $W062L2);

 ADD_IMAGE_CONFIG(BAR_BG_NORMAL, #00_progress_bg.#.png);
 ADD_IMAGE_CONFIG(BAR_NORMAL, #00_progress_bar.#.png);
 ADD_IMAGE_CONFIG(BAR_BG_EFFECT, #00_progress_ef_bg.#.png);
 ADD_IMAGE_CONFIG(BAR_EFFECT, #00_progress_bar_ef.#.png);

 START_UI_CONFIG_MODE(720x1280);
 {
 ADD_SHAPE_CONFIG(BAR_HEIGHT, 36);
 ADD_SHAPE_CONFIG(BAR_LEFT_MARGIN, 36);
 ADD_SHAPE_CONFIG(BAR_OFFSET, 9);

 ADD_SHAPE_CONFIG(MINIMUM_WIDTH, 276);
 ADD_SHAPE_CONFIG(MINIMUM_HEIGHT, 36);
 }
 END_UI_CONFIG_MODE(720x1280);
}
END_UI_CONFIG(PROGRESS);
</code>

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/720x1280 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 720x1280 resolution will be supported
* Tizen 9-patch images will be modified (border information will be moved from png to sci)

=== Steps ===

# Images are copied from osp-uifw source package to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280 qtquickcontrols-tizen/src/images/sources/720x1280]
# Images are copied from [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280 qtquickcontrols-tizen/src/images/sources/720x1280] to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames]
# Images in [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames] are normalized:
## [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/normalizationScript.sh Normalization script] 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 [http://developer.android.com/tools/help/draw9patch.html nine patch images] It also modifies png's with [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/tools/9patch2sci 9patch2sci] tool.
## Best suitable files are found and exported to JS object with [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/findProperImages.sh findProperImages.sh] 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 [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames] to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280 qtquickcontrols-tizen/src/images/720x1280]
# Output of [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/findProperImages.sh findProperImages.sh] is JS object and is saved in [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js DefaultSettings.js] file.
# Colors theme JS object is generated with [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/themes/generateColorsObject.sh generateColorsObject.sh] and saved to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js DefaultSettings.js] file.

== See Also ==

* [http://api.devpda.net/meego/html/qt-components/qt-components-meego-interfaceguide.html MeeGo Harmattan Qt Quick components] - useful in cases when a Qt Quick control for mobile isn't available
* [http://harmattan-dev.nokia.com/docs/ux N9 UX Guidelines] (removed by Nokia, you can download [http://www.developer.nokia.com/info/sw.nokia.com/id/5eae171f-3acf-49b8-adc3-72dfbdc77adf/Harmattan_Library.html offline version])