Difference between revisions of "Qt-Quick-Controls-for-Tizen"
AutoSpider (talk | contribs) (Convert ExpressionEngine section headers) |
Henri Vikki (talk | contribs) (table fixed) |
||
Line 3: | Line 3: | ||
[[Category:Developing_Qt::Ports::Tizen]] | [[Category:Developing_Qt::Ports::Tizen]] | ||
− | + | ||
= [[Tizen|Qt for Tizen]]: Qt Quick Controls - Development = | = [[Tizen|Qt for Tizen]]: Qt Quick Controls - Development = | ||
Line 15: | Line 15: | ||
* Done - ported | * Done - ported | ||
− | { | + | {| class="wikitable" |
− | | Button | Button | T. Olszak | Done | | + | ! Tizen Control Name |
− | + | ! Qt Name | |
− | | CheckBox | Switch | T. Olszak | Done | | + | ! Who? |
− | + | ! Status | |
− | | ColorPicker | | | | | + | |- |
− | + | | Button | |
− | | DatePicker | DateEdit | T.OLszak | Done | | + | | Button |
− | + | | T. Olszak | |
− | | DateTimePicker | | | Analysed | | + | | Done |
− | + | |- | |
− | | EditField | | | Analysed | | + | | CheckBox |
− | + | | CheckBox | |
− | | EditTime | TimeEdit | T.Olszak | Done | | + | | T. Olszak |
− | + | | Done | |
− | | Footer | ToolBar | J.Staniek | Done | | + | |- |
− | + | | CheckBox | |
− | | Frame | View | J.Staniek | Done | | + | | Switch |
− | + | | T. Olszak | |
− | | Header | TitleBar | J.Staniek | Done | | + | | Done |
− | + | |- | |
− | | Label | Label | T. Olszak | Done | | + | | CheckBox |
− | + | | DetailButton | |
− | | OverlayRegion | | | | | + | | T. Olszak |
− | + | | Done | |
− | | Popup | Popup | T.Olszak | Done | | + | |- |
− | | PopupProgress | Popup and BusyIndicator | T.Olszak | Done | | + | | ColorPicker |
− | + | | | |
− | | Progress | ProgressBar | T. Olszak | Done | | + | | |
− | | SearchBar | | | | | + | | |
− | + | |- | |
− | | SplitPanel | SplitView | T. Olszak | Done | | + | | ContextMenu |
− | + | | ContextMenu | |
− | | TextBox | | | | | + | | 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 == |
Latest revision as of 13:26, 20 March 2015
Contents
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
- 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.
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
- Images are copied from qtquickcontrols-tizen/src/images/sources/720x1280 to qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames
- Images in qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames are normalized:
- 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.
- 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.
- Images are copied from qtquickcontrols-tizen/src/images/sources/720x1280-normalizedNames to qtquickcontrols-tizen/src/images/720x1280
- Output of findProperImages.sh is JS object and is saved in DefaultSettings.js file.
- Colors theme JS object is generated with generateColorsObject.sh and saved to DefaultSettings.js file.
See Also
- MeeGo Harmattan Qt Quick components - useful in cases when a Qt Quick control for mobile isn't available
- N9 UX Guidelines (removed by Nokia, you can download offline version)