Qt-Quick-Controls-for-Tizen: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
[[Category:Developing_Qt::Ports::Tizen]] | [[Category:Developing_Qt::Ports::Tizen]] | ||
[toc align_right= | [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 7: | ||
== 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: | 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 | | {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 == | == 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- | * 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 62: | ||
=== 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) | * 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. | |||
h3. 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: | 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 119: | ||
=== Steps === | === Steps === | ||
# Images are copied from osp-uifw source package to | # Images are copied from osp-uifw source package to "qtquickcontrols-tizen/src/images/sources/720x1280":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280 | ||
# Images are copied from | # Images are copied from "qtquickcontrols-tizen/src/images/sources/720x1280":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":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames | ||
# Images in | # Images in "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames are normalized: | ||
## | ## "Normalization script":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":http://developer.android.com/tools/help/draw9patch.html It also modifies png's with "9patch2sci":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 | ## Best suitable files are found and exported to JS object with "findProperImages.sh":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 | # Images are copied from "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames to "qtquickcontrols-tizen/src/images/720x1280":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280 | ||
# Output of | # Output of "findProperImages.sh":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":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file. | ||
# Colors theme JS object is generated with | # Colors theme JS object is generated with "generateColorsObject.sh":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/themes/generateColorsObject.sh and saved to "DefaultSettings.js":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file. | ||
== See Also == | == See Also == | ||
* | * "MeeGo Harmattan Qt Quick components":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 | ||
* | * "N9 UX Guidelines":http://harmattan-dev.nokia.com/docs/ux (removed by Nokia, you can download "offline version":http://www.developer.nokia.com/info/sw.nokia.com/id/5eae171f-3acf-49b8-adc3-72dfbdc77adf/Harmattan_Library.html) |
Revision as of 10:02, 25 February 2015
[toc align_right="yes" depth="3"]
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"
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
- Images are copied from osp-uifw source package to "qtquickcontrols-tizen/src/images/sources/720x1280":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280
- Images are copied from "qtquickcontrols-tizen/src/images/sources/720x1280":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":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames
- Images in "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames are normalized:
- "Normalization script":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":http://developer.android.com/tools/help/draw9patch.html It also modifies png's with "9patch2sci":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 "findProperImages.sh":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 "qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/source/720x1280-normalizedNames to "qtquickcontrols-tizen/src/images/720x1280":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/trees/master/src/styles/images/720x1280
- Output of "findProperImages.sh":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":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file.
- Colors theme JS object is generated with "generateColorsObject.sh":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/themes/generateColorsObject.sh and saved to "DefaultSettings.js":https://gitorious.org/qt-quick-controls-for-tizen/qtquickcontrols-tizen/blobs/master/src/styles/DefaultSettings.js file.
See Also
- "MeeGo Harmattan Qt Quick components":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
- "N9 UX Guidelines":http://harmattan-dev.nokia.com/docs/ux (removed by Nokia, you can download "offline version":http://www.developer.nokia.com/info/sw.nokia.com/id/5eae171f-3acf-49b8-adc3-72dfbdc77adf/Harmattan_Library.html)