Difference between revisions of "Qt-Quick-Controls-for-Tizen"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
=[[Tizen|Qt for Tizen]]: Qt Quick Controls – Development=
+
[[Category:Developing_Qt::Ports::Tizen]]
  
==Current Status==
+
[toc align_right="yes" depth="3"]
  
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:
+
= [[Tizen|Qt for Tizen]]: Qt Quick Controls - Development =
  
* ? – not reviewed
+
== Current Status ==
* Analysed – we know what to do to port certain control
 
* In Progress
 
* Done – ported
 
  
{| class="infotable line"
+
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
|- style="background: #009900"
 
! Tizen Control Name
 
! Qt Name
 
! Who?
 
! Status
 
|-
 
| Button
 
| Button
 
| T. Olszak
 
| Done
 
|- style="background: #ddd"
 
| CheckBox
 
| CheckBox
 
| T. Olszak
 
| Done
 
|-
 
| CheckBox
 
| Switch
 
| T. Olszak
 
| Done
 
|- style="background: #ddd"
 
| CheckBox
 
| DetailButton
 
| T. Olszak
 
| Done
 
|-
 
| ColorPicker
 
|
 
|
 
|
 
|- style="background: #ddd"
 
| ContextMenu
 
| ContextMenu
 
| T. Olszak
 
| Done
 
|-
 
| DatePicker
 
| DateEdit
 
| T.OLszak
 
| Done
 
|- style="background: #ddd"
 
| TimePicker
 
| TimeEdit
 
| T.Olszak
 
| Done
 
|-
 
| DateTimePicker
 
|
 
|
 
| Analysed
 
|- style="background: #ddd"
 
| EditArea
 
|
 
|
 
| Analysed
 
|-
 
| EditField
 
|
 
|
 
| Analysed
 
|- style="background: #ddd"
 
| EditDate
 
| DateEdit
 
| T.Olszak
 
| Done
 
|-
 
| EditTime
 
| TimeEdit
 
| T.Olszak
 
| Done
 
|- style="background: #ddd"
 
| ExpandableEditArea
 
|
 
|
 
| Analysed
 
|-
 
| Footer
 
| ToolBar
 
| J.Staniek
 
| Done
 
|- style="background: #ddd"
 
| Form
 
| ApplicationWindow
 
|
 
| Done
 
|-
 
| Frame
 
| View
 
| J.Staniek
 
| Done
 
|- style="background: #ddd"
 
| Gallery
 
|
 
|
 
|
 
|-
 
| Header
 
| TitleBar
 
| J.Staniek
 
| Done
 
|- style="background: #ddd"
 
| Keypad
 
|
 
|
 
|
 
|-
 
| Label
 
| Label
 
| T. Olszak
 
| Done
 
|- style="background: #ddd"
 
| ListViews
 
|
 
|
 
|
 
|-
 
| OverlayRegion
 
|
 
|
 
|
 
|- style="background: #ddd"
 
| Panel
 
| Panel
 
| T. Olszak
 
| Done
 
|-
 
| Popup
 
| Popup
 
| T.Olszak
 
| Done
 
|-
 
| PopupProgress
 
| Popup and BusyIndicator
 
| T.Olszak
 
| Done
 
|- style="background: #ddd"
 
| MessageBox
 
| Popup and Buttons
 
|
 
| Done
 
|-
 
| Progress
 
| ProgressBar
 
| T. Olszak
 
| Done
 
|-
 
| SearchBar
 
|
 
|
 
|
 
|- style="background: #ddd"
 
| Slider
 
| Slider
 
| T. Olszak
 
| Done
 
|-
 
| SplitPanel
 
| SplitView
 
| T. Olszak
 
| Done
 
|- style="background: #ddd"
 
| TabBar
 
| TabView
 
| T. Olszak
 
| Done
 
|-
 
| TextBox
 
|
 
|
 
|
 
|- style="background: #ddd"
 
| ScrollBar
 
| ScrollDecorator
 
| J. Staniek/T.olszak
 
| Done
 
|}
 
  
==Assumptions==
+
{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 |
 +
 
 +
== 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 <span class="caps">SDK</span> 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-&gt;Sample applications-&gt;UiControls)
 
 
[[Image:ui_controls.png]] [[Image:ui_touch_button.png]] [[Image:ui_controls_grouped_list.png]] [[Image:ui_controls_slider.png]]
 
 
 
* All content of the <span class="caps">OSP</span> libraries is licensed under the [[https:www.tizen.orgcontent-license|Apache license]] so images can be reused
 
  
==Main conclusions after analysis of Tizen 2.1b controls==
+
[[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]]
  
===General===
+
* All content of the OSP libraries is licensed under the [[https://www.tizen.org/content-license|Apache license]] so images can be reused
  
* 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)
+
== Main conclusions after analysis of Tizen 2.1b controls ==
* The package can be unpacked by this command: <br /> 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===
+
=== General ===
  
Below is the content of FUi_ResourceProgressConfig.cpp file.
+
* 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.
 +
<br />h3. FUi_Resource*Config.cpp analysis
 +
<br />Below is the content of FUi_ResourceProgressConfig.cpp file.
 +
<br /><code><br />#include &quot;FUi_ResourceProgressConfig.h&amp;quot;
 +
<br />START_UI_CONFIG(PROGRESS);<br />{<br /> ADD_COLOR_CONFIG(BAR_BG_NORMAL, $W062L1);<br /> ADD_COLOR_CONFIG(BAR_NORMAL, $W062L2);
 +
<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);
 +
<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);
 +
<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.
 +
* 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
  
Important from our point of view are <span class="caps">ADD</span>_*_CONFIG macros (defined in FUi_ResourceConfigMacro.h):
+
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.
  
* <span class="caps">ADD</span>_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 (<span class="caps">BAR</span>_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.
+
== Preparing Tizen resources for Qt Quick Control for Tizen ==
* <span class="caps">ADD</span>_IMAGE_CONFIG – sets image from ex. osp-uifw-1.2.1.0/res/common/usr/share/osp/bitmaps/720×1280 and its subdirectiories.
 
* <span class="caps">ADD</span>_SHAPE_CONFIG – self explanatory
 
  
Images used in Controls:<br /> Tizen uses mainly Andorid like 9-patch images. Unlike <span class="caps">QML</span> BorderImage they contains information about bottom,top, left and right areas inside png file.
+
=== Assumptions ===
 
 
==Preparing Tizen resources for Qt Quick Control for Tizen==
 
 
 
===Assumptions===
 
  
 
* Currently only white theme will ported
 
* Currently only white theme will ported
* Currently only 720×1280 resolution will be supported
+
* Currently only 720x1280 resolution will be supported
 
* Tizen 9-patch images will be modified (border information will be moved from png to sci)
 
* Tizen 9-patch images will be modified (border information will be moved from png to sci)
  
===Steps===
+
=== 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/720×1280] ''[gitorious.org]''
 
# 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/720×1280] ''[gitorious.org]'' to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames] ''[gitorious.org]''
 
# 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/720×1280-normalizedNames] ''[gitorious.org]'' are normalized:
 
## [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/normalizationScript.sh Normalization script] ''[gitorious.org]'' is invoked. It removes “.#” from fileNames (type of <span class="caps">QML</span> 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] ''[developer.android.com]'' It also modifies png’s with [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/tools/9patch2sci 9patch2sci] ''[gitorious.org]'' 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] ''[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 [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames qtquickcontrols-tizen/src/images/sources/720×1280-normalizedNames] ''[gitorious.org]'' to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280 qtquickcontrols-tizen/src/images/720×1280] ''[gitorious.org]''
 
# Output of [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/images/source/720x1280-normalizedNames/findProperImages.sh findProperImages.sh] ''[gitorious.org]'' 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] ''[gitorious.org]'' 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] ''[gitorious.org]'' and saved to [https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js DefaultSettings.js] ''[gitorious.org]'' file.
 
 
 
==See Also==
 
  
* [http://api.devpda.net/meego/html/qt-components/qt-components-meego-interfaceguide.html MeeGo Harmattan Qt Quick components] ''[api.devpda.net]'' – useful in cases when a Qt Quick control for mobile isn’t available
+
# 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
* [http://harmattan-dev.nokia.com/docs/ux N9 UX Guidelines] ''[harmattan-dev.nokia.com]'' (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] ''[developer.nokia.com]'')
+
# 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
* [http://developer.android.com/guide/topics/ui/index.html Android UI Guidelines] ''[developer.android.com]'', [http://developer.android.com/design/index.html Android Design] ''[developer.android.com]''
+
# 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:
 +
## &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.
 +
## 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.
 +
# 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
 +
# 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.
 +
# 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.
  
===Categories:===
+
== See Also ==
  
* [[:Category:Developing Qt|Developing_Qt]]
+
* &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
** [[:Category:Developing Qt::Ports|Ports]]
+
* &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)
* [[:Category:Developing Qt::Ports::Tizen|Tizen]]
 

Revision as of 09:41, 24 February 2015


[toc align_right="yes&quot; depth="3&quot;]

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

{background:#009900}. |. Tizen Control Name |. Qt Name |. Who?|. Status |
| Button | Button | T. Olszak | Done |
{background:#ddd}. | CheckBox | CheckBox | T. Olszak | Done |
| CheckBox | Switch | T. Olszak | Done |
{background:#ddd}. | CheckBox | DetailButton | T. Olszak | Done |
| ColorPicker | | | |
{background:#ddd}. | ContextMenu | ContextMenu | T. Olszak | Done |
| DatePicker | DateEdit | T.OLszak | Done |
{background:#ddd}. | TimePicker | TimeEdit | T.Olszak | Done |
| DateTimePicker | | | Analysed |
{background:#ddd}. | EditArea | | | Analysed |
| EditField | | | Analysed |
{background:#ddd}. | EditDate | DateEdit | T.Olszak | Done |
| EditTime | TimeEdit | T.Olszak | Done |
{background:#ddd}. | ExpandableEditArea | | | Analysed |
| Footer | ToolBar | J.Staniek | Done |
{background:#ddd}. | Form | ApplicationWindow | | Done |
| Frame | View | J.Staniek | Done |
{background:#ddd}. | Gallery | | | |
| Header | TitleBar | J.Staniek | Done |
{background:#ddd}. | Keypad | | | |
| Label | Label | T. Olszak | Done |
{background:#ddd}. | ListViews | | | |
| OverlayRegion | | | |
{background:#ddd}. | Panel | Panel | T. Olszak | Done |
| Popup | Popup | T.Olszak | Done |
| PopupProgress | Popup and BusyIndicator | T.Olszak | Done |
{background:#ddd}. | MessageBox | Popup and Buttons | | Done |
| Progress | ProgressBar | T. Olszak | Done |
| SearchBar | | | |
{background:#ddd}. | Slider | Slider | T. Olszak | Done |
| SplitPanel | SplitView | T. Olszak | Done |
{background:#ddd}. | TabBar | TabView | T. Olszak | Done |
| TextBox | | | |
{background:#ddd}. | 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

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

    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.


h3. FUi_Resource*Config.cpp analysis
Below is the content of FUi_ResourceProgressConfig.cpp file.

#include "FUi_ResourceProgressConfig.h&quot;
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&quot;) into some resource map . "#FFF0EDE9&quot; 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&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280
  2. Images are copied from "qtquickcontrols-tizen/src/images/sources/720x1280&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280 to "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames
  3. Images in "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames are normalized:
    1. "Normalization script&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 ".#" 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&quot;:http://developer.android.com/tools/help/draw9patch.html It also modifies png's with "9patch2sci&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/tools/9patch2sci tool.
    2. Best suitable files are found and exported to JS object with "findProperImages.sh&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.
  4. Images are copied from "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames to "qtquickcontrols-tizen/src/images/720x1280&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280
  5. Output of "findProperImages.sh&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 "DefaultSettings.js&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file.
  6. Colors theme JS object is generated with "generateColorsObject.sh&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/themes/generateColorsObject.sh and saved to "DefaultSettings.js&quot;:https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file.

See Also