Qt-Quick-Controls-for-Tizen: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(table fixed)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
[[Category:Developing_Qt::Ports::Tizen]]
[[Category:Developing_Qt::Ports::Tizen]]


[toc align_right="yes" depth="3"]
 


= [[Tizen|Qt for Tizen]]: Qt Quick Controls - Development =
= [[Tizen|Qt for Tizen]]: Qt Quick Controls - Development =
Line 7: Line 9:
== Current Status ==
== 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:<br />* ? - not reviewed<br />* Analysed - we know what to do to port certain control<br />* In Progress<br />* Done - ported
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


{background:#009900}. |''. Tizen Control Name |''. Qt Name |''. Who?|''. Status |<br />| Button | Button | T. Olszak | Done |<br />{background:#ddd}. | CheckBox | CheckBox | T. Olszak | Done |<br />| CheckBox | Switch | T. Olszak | Done |<br />{background:#ddd}. | CheckBox | DetailButton | T. Olszak | Done |<br />| ColorPicker | | | |<br />{background:#ddd}. | ContextMenu | ContextMenu | T. Olszak | Done |<br />| DatePicker | DateEdit | T.OLszak | Done |<br />{background:#ddd}. | TimePicker | TimeEdit | T.Olszak | Done |<br />| DateTimePicker | | | Analysed |<br />{background:#ddd}. | EditArea | | | Analysed |<br />| EditField | | | Analysed |<br />{background:#ddd}. | EditDate | DateEdit | T.Olszak | Done |<br />| EditTime | TimeEdit | T.Olszak | Done |<br />{background:#ddd}. | ExpandableEditArea | | | Analysed |<br />| Footer | ToolBar | J.Staniek | Done |<br />{background:#ddd}. | Form | ApplicationWindow | | Done |<br />| Frame | View | J.Staniek | Done |<br />{background:#ddd}. | Gallery | | | |<br />| Header | TitleBar | J.Staniek | Done |<br />{background:#ddd}. | Keypad | | | |<br />| Label | Label | T. Olszak | Done |<br />{background:#ddd}. | ListViews | | | |<br />| OverlayRegion | | | |<br />{background:#ddd}. | Panel | Panel | T. Olszak | Done |<br />| Popup | Popup | T.Olszak | Done |<br />| PopupProgress | Popup and BusyIndicator | T.Olszak | Done |<br />{background:#ddd}. | MessageBox | Popup and Buttons | | Done |<br />| Progress | ProgressBar | T. Olszak | Done |<br />| SearchBar | | | |<br />{background:#ddd}. | Slider | Slider | T. Olszak | Done |<br />| SplitPanel | SplitView | T. Olszak | Done |<br />{background:#ddd}. | TabBar | TabView | T. Olszak | Done |<br />| TextBox | | | |<br />{background:#ddd}. | ScrollBar | ScrollDecorator | J. Staniek/T.olszak | Done |
{| 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 ==
== 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.
* 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-&gt;Sample applications-&gt;UiControls)
* 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]]
[[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]]
Line 24: Line 205:
=== General ===
=== 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)<br />''' The package can be unpacked by this command:<br /><code><br />rpm2cpio myrpmfile.rpm | cpio <s>idmv<br /></code><br />It provides osp-uifw sources.<br />* Each control contains information about related resources hardcoded in FUi_ResourceControlConfig.cpp. For example FUi_ResourceProgressConfig.cpp lists resources for FUiCtrlProgress.
* 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)
<br />h3. FUi_Resource*Config.cpp analysis
''' The package can be unpacked by this command:
<br />Below is the content of FUi_ResourceProgressConfig.cpp file.
<code>
<br /><code><br />#include &quot;FUi_ResourceProgressConfig.h&amp;quot;
rpm2cpio myrpmfile.rpm | cpio -idmv
<br />START_UI_CONFIG(PROGRESS);<br />{<br /> ADD_COLOR_CONFIG(BAR_BG_NORMAL, $W062L1);<br /> ADD_COLOR_CONFIG(BAR_NORMAL, $W062L2);
</code>
<br /> ADD_IMAGE_CONFIG(BAR_BG_NORMAL, #00_progress_bg.#.png);<br /> ADD_IMAGE_CONFIG(BAR_NORMAL, #00_progress_bar.#.png);<br /> ADD_IMAGE_CONFIG(BAR_BG_EFFECT, #00_progress_ef_bg.#.png);<br /> ADD_IMAGE_CONFIG(BAR_EFFECT, #00_progress_bar_ef.#.png);
It provides osp-uifw sources.
<br /> START_UI_CONFIG_MODE(720x1280);<br /> {<br /> ADD_SHAPE_CONFIG(BAR_HEIGHT, 36);<br /> ADD_SHAPE_CONFIG(BAR_LEFT_MARGIN, 36);<br /> ADD_SHAPE_CONFIG(BAR_OFFSET, 9);
* Each control contains information about related resources hardcoded in FUi_ResourceControlConfig.cpp. For example FUi_ResourceProgressConfig.cpp lists resources for FUiCtrlProgress.
<br /> ADD_SHAPE_CONFIG(MINIMUM_WIDTH, 276);<br /> ADD_SHAPE_CONFIG(MINIMUM_HEIGHT, 36);<br /> }<br /> END_UI_CONFIG_MODE(720x1280);<br />}<br />END_UI_CONFIG(PROGRESS);<br /></code>
 
<br />Important from our point of view are ADD_'''_CONFIG macros (defined in FUi_ResourceConfigMacro.h):<br />''' ADD_COLOR_CONFIG</s> 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,&quot;#FFF0EDE9&amp;quot;) into some resource map . &quot;#FFF0EDE9&amp;quot; is the value from osp-uifw-source-dir/res/common/usr/share/osp/themes/white.xml corresponding to $W062L1 key.
=== 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_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  
* ADD_SHAPE_CONFIG - self explanatory  


Images used in Controls:<br />Tizen uses mainly Andorid like 9-patch images. Unlike QML BorderImage they contains information about bottom,top, left and right areas inside png file.
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 ==
== Preparing Tizen resources for Qt Quick Control for Tizen ==
Line 48: Line 261:
=== Steps ===
=== Steps ===


# Images are copied from osp-uifw source package to &quot;qtquickcontrols-tizen/src/images/sources/720x1280&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280
# 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 &quot;qtquickcontrols-tizen/src/images/sources/720x1280&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280 to &quot;qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames
# 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 &quot;qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames are normalized:
# 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:
## &quot;Normalization script&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/normalizationScript.sh is invoked. It removes &quot;.#&quot; from fileNames (type of QML image source is url and there is problem with loading files when file name contains #'s). These files are &quot;nine patch images&amp;quot;:http://developer.android.com/tools/help/draw9patch.html It also modifies png's with &quot;9patch2sci&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/tools/9patch2sci tool.
## [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 &quot;findProperImages.sh&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/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.
## 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 &quot;qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames to &quot;qtquickcontrols-tizen/src/images/720x1280&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280
# 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 &quot;findProperImages.sh&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/findProperImages.sh is JS object and is saved in &quot;DefaultSettings.js&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file.
# 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 &quot;generateColorsObject.sh&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/themes/generateColorsObject.sh and saved to &quot;DefaultSettings.js&amp;quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/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 ==
== See Also ==


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

Latest revision as of 13:26, 20 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.


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)

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_touch_button.png 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_slider.png

  • All content of the OSP libraries is licensed under the [license] so images can be reused

Main conclusions after analysis of Tizen 2.1b controls

General

The package can be unpacked by this command: 

rpm2cpio myrpmfile.rpm | cpio -idmv

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. 

#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);

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

  1. Images are copied from osp-uifw source package to qtquickcontrols-tizen/src/images/sources/720x1280
  2. Images are copied from qtquickcontrols-tizen/src/images/sources/720x1280 to qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames
  3. Images in qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames are normalized:
    1. 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 nine patch images It also modifies png's with 9patch2sci tool.
    2. Best suitable files are found and exported to JS object with 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.
  4. Images are copied from qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames to qtquickcontrols-tizen/src/images/720x1280
  5. Output of findProperImages.sh is JS object and is saved in DefaultSettings.js file.
  6. Colors theme JS object is generated with generateColorsObject.sh and saved to DefaultSettings.js file.

See Also

Retrieved from "https://wiki.qt.io/index.php?title=Qt-Quick-Controls-for-Tizen&oldid=14736"