Qt Quick Components: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
[[QtQuickComponentsOld|Previous content of this page]]
[[Category:Developing_with_Qt::Qt Quick]]


=Qt Quick Components=
[[QtQuickComponentsOld | Previous content of this page]]
 
= Qt Quick Components =


'''Note: page still under construction'''
'''Note: page still under construction'''


This project is to create <span class="caps">QML</span> UI components to ease application UI development in <span class="caps">QML</span>. It has the following goals:
This project is to create QML UI components to ease application UI development in QML. It has the following goals:<br />* desktop &amp; touch UI components<br />* easily styled for utmost visual flexibility<br />* desktop components have native look and feel<br />It is designed to serve as a reference platform for developers, incorporating good practices like accessibility support from the start.


* desktop &amp; touch UI components
== Recent News ==
* easily styled for utmost visual flexibility
* desktop components have native look and feel<br /> It is designed to serve as a reference platform for developers, incorporating good practices like accessibility support from the start.
 
==Recent News==


The current goal is to have a set of UI Components for Desktop ready for the Qt 5.1 release. This means feature freeze by end of February 2013.
The current goal is to have a set of UI Components for Desktop ready for the Qt 5.1 release. This means feature freeze by end of February 2013.


As there already are several platform specific Qt Quick UI Component sets out there, we would like to make sure the new set of cross-platform UI Components take into consideration the thoughts and work already done in the various projects, and to take previous <span class="caps">API</span> naming choices into consideration.
As there already are several platform specific Qt Quick UI Component sets out there, we would like to make sure the new set of cross-platform UI Components take into consideration the thoughts and work already done in the various projects, and to take previous API naming choices into consideration.


Below you can (at the moment ‘will’) find an overview of the different <span class="caps">API</span>s, and a summary of the discussions around them.
Below you can (at the moment 'will') find an overview of the different APIs, and a summary of the discussions around them.


==History and Related Projects==
== History and Related Projects ==


The ongoing work is building on the “Desktop Components” project that originally started as a proof of concept of what is possible to achieve with Qt Quick.
The ongoing work is building on the &quot;Desktop Components&amp;quot; project that originally started as a proof of concept of what is possible to achieve with Qt Quick.


There are several UI Component sets made with Qt Quick that already are available. These are however all mobile platform specific:
There are several UI Component sets made with Qt Quick that already are available. These are however all mobile platform specific:<br />* MeeGo UI Components<br />* Cascades by RIM<br />* Ubuntu User Interface Toolkit<br />* Jolla UI Components<br />* Symbian UI Components<br />* Plasma UI Components by KDE<br />* —


* MeeGo UI Components
== The UI Components ==
* Cascades by <span class="caps">RIM</span>
* Ubuntu User Interface Toolkit
* Jolla UI Components
* Symbian UI Components
* Plasma UI Components by <span class="caps">KDE</span>
* —-
 
==The UI Components==


The goal is to make a set of UI Components that work on both desktop and touch platforms, but in the first round to focus on desktop. The reason for this being to make it easier to port current QWidget-based applications to Qt Quick.
The goal is to make a set of UI Components that work on both desktop and touch platforms, but in the first round to focus on desktop. The reason for this being to make it easier to port current QWidget-based applications to Qt Quick.
Line 41: Line 31:
The UI Components will have native look and feel for the desktop platforms that Qt supports. But it is also possible to implement ones own style.
The UI Components will have native look and feel for the desktop platforms that Qt supports. But it is also possible to implement ones own style.


==Project Details==
== Project Details ==


===Getting &amp; Building Source Code===
=== Getting &amp; Building Source Code ===


See [[QtDesktopComponents]] for instructions
See [[QtDesktopComponents]] for instructions


===Usage &amp; Viewing Examples===
=== Usage &amp; Viewing Examples ===


Todo
Todo


===Bug tracking===
=== Bug tracking ===


Please report any bugs found in &lt;bug tracker&gt;. We encourage attaching a simple qml file to the bug report which displays the problem.
Please report any bugs found in &lt;bug tracker&amp;gt;. We encourage attaching a simple qml file to the bug report which displays the problem.


===Collaborating with us===
=== Collaborating with us ===


Mail: [http://lists.qt.io/mailman/listinfo/qt-components qt-components@qt.io Mailing List] ''[lists.qt.io]''<br /><span class="caps">IRC</span>: [irc://irc.freenode.net/#qt-quick #qt-quick on Freenode] ''[irc.freenode.net]''<br /> (For a full list of <span class="caps">IRC</span> channels of interest to Qt developers, see [[OnlineCommunities]] ''[qt.io]''.)
Mail: &quot;qt-components<code>qt.io Mailing List&amp;quot;:http://lists.qt.io/mailman/listinfo/qt-components<br />IRC: &quot;#qt-quick on Freenode&amp;quot;:irc://irc.freenode.net/#qt-quick<br />(For a full list of IRC channels of interest to Qt developers, see &quot;OnlineCommunities&amp;quot;:http://wiki.qt.io/OnlineCommunities.)


=Component <span class="caps">API</span>s=
= Component APIs =


Below is a table '''[under construction]''' of components identified within scope of this project, and their individual development status.
Below is a table '''[under construction]''' of components identified within scope of this project, and their individual development status.


For reference, see the [[QQUIComponentsComparison|overview of the component names used for other projects]], and their property comparisons.
For reference, see the [[QQUIComponentsComparison | overview of the component names used for other projects]], and their property comparisons.


{| class="infotable line"
{background:#009900}. |''. Component |''. Summary |_. Status |<br />| Button| Simple Push Button | |<br />| ToolButton | | |<br />| Checkbox | Button with checked property | |<br />| Slider | | |<br />| ProgressBar | | |<br />| TextField | Single line text input box | |<br />| TextArea | Multi-line text input box | |<br />| RadioButton | | |<br />| ButtonRow | | |<br />| Menu | | |<br />| ContextMenu | | |<br />| ToolBar | | |<br />| StatusBar |  |  |<br />| Switch | | |<br />| BusyIndicator | UI element to indicate something is happening | |<br />| Page | | |<br />| PageStack | | |<br />| ApplicationWindow | | |<br />| SectionScroller | List lookup / alphabet scroller API | |<br />| ScrollArea | Flickable/viewport with built-in decoration and scroll bar controls | |<br />| ScrollDecorator | | |<br />| Label | Text element | |<br />| TabFrame /TabGroup | | |<br />| TabBar | Row of Tabs | |<br />| Icon | | |<br />| Calendar | Provides a way to select dates from a calendar | Under development &quot;[1]&quot;:https://codereview.qt.io/#change,44899 &quot;[2]&quot;:http://lists.qt.io/pipermail/qt-components/2013-January/000147.html |
|- style="background: #009900"
! Component
! Summary
! Status
|-
| Button
| Simple Push Button
|
|-
| ToolButton
|
|
|-
| Checkbox
| Button with checked property
|
|-
| Slider
|
|
|-
| ProgressBar
|
|
|-
| TextField
| Single line text input box
|
|-
| TextArea
| Multi-line text input box
|
|-
| RadioButton
|
|
|-
| ButtonRow
|
|
|-
| Menu
|
|
|-
| ContextMenu
|
|
|-
| ToolBar
|
|
|-
| StatusBar
|
|
|-
| Switch
|
|
|-
| BusyIndicator
| UI element to indicate something is happening
|
|-
| Page
|
|
|-
| PageStack
|
|
|-
| ApplicationWindow
|
|
|-
| SectionScroller
| List lookup / alphabet scroller <span class="caps">API</span>
|
|-
| ScrollArea
| Flickable/viewport with built-in decoration and scroll bar controls
|
|-
| ScrollDecorator
|
|
|-
| Label
| Text element
|
|-
| TabFrame /TabGroup
|
|
|-
| TabBar
| Row of Tabs
|
|-
| Icon
|
|
|-
| Calendar
| Provides a way to select dates from a calendar
|
Under development [https://codereview.qt.io/#change,44899 [1]] ''[codereview.qt.io]'' [http://lists.qt.io/pipermail/qt-components/2013-January/000147.html [2]] ''[lists.qt.io]''
|}


==<span class="caps">API</span> Development Process==
== API Development Process ==


* Add information about current existing <span class="caps">API</span>s to [[QQUIComponentsComparison|overview of the component names used for other projects]]
* Add information about current existing APIs to [[QQUIComponentsComparison | overview of the component names used for other projects]]
* Discussions to happen on [http://lists.qt.io/mailman/listinfo/qt-components mailing list] ''[lists.qt.io]''.
* Discussions to happen on &quot;mailing list&amp;quot;:http://lists.qt.io/mailman/listinfo/qt-components.
* Try to follow Qt naming convention if unsure.
* Try to follow Qt naming convention if unsure.


==Other component libraries==
== Other component libraries ==


There are several existing open source component implementations out there. See [[QtQuickOpenComponents]] for a list of those.
There are several existing open source component implementations out there. See [[QtQuickOpenComponents]] for a list of those.


==References==
== References ==
 
Initial Project Description: https://bugreports.qt.io/browse/QTCOMPONENTS-72<br /> Initial Desktop Components Spec: https://bugreports.qt.io//browse/QTCOMPONENTS-200<br /> [Nokia] Desktop Components for Qt5:<br />https://wiki.qt.io/QtDesktopComponents<br />http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/<br />http://labs.qt.nokia.com/2011/05/26/table-view-with-qt-quick/<br />http://labs.qt.nokia.com/2011/08/26/toplevel-windows-and-menus-with-qt-quick/<br />http://labs.qt.nokia.com/2012/06/06/desktop-components-for-qt-5/<br /> [INdT] Components work: <br />http://codecereal.blogspot.com.br/2012/04/qml-themingstyling.html<br />http://codecereal.blogspot.no/2012/05/qml-themingstyling-update.html
 
===Categories:===


* [[:Category:Developing with Qt|Developing_with_Qt]]
Initial Project Description: https://bugreports.qt.io/browse/QTCOMPONENTS-72<br />Initial Desktop Components Spec: https://bugreports.qt.io//browse/QTCOMPONENTS-200<br />[Nokia] Desktop Components for Qt5:<br />https://wiki.qt.io/QtDesktopComponents<br />http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/<br />http://labs.qt.nokia.com/2011/05/26/table-view-with-qt-quick/<br />http://labs.qt.nokia.com/2011/08/26/toplevel-windows-and-menus-with-qt-quick/<br />http://labs.qt.nokia.com/2012/06/06/desktop-components-for-qt-5/<br />[INdT] Components work:<br />http://codecereal.blogspot.com.br/2012/04/qml-themingstyling.html
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]

Revision as of 14:25, 23 February 2015


Previous content of this page

Qt Quick Components

Note: page still under construction

This project is to create QML UI components to ease application UI development in QML. It has the following goals:
* desktop & touch UI components
* easily styled for utmost visual flexibility
* desktop components have native look and feel
It is designed to serve as a reference platform for developers, incorporating good practices like accessibility support from the start.

Recent News

The current goal is to have a set of UI Components for Desktop ready for the Qt 5.1 release. This means feature freeze by end of February 2013.

As there already are several platform specific Qt Quick UI Component sets out there, we would like to make sure the new set of cross-platform UI Components take into consideration the thoughts and work already done in the various projects, and to take previous API naming choices into consideration.

Below you can (at the moment 'will') find an overview of the different APIs, and a summary of the discussions around them.

History and Related Projects

The ongoing work is building on the "Desktop Components&quot; project that originally started as a proof of concept of what is possible to achieve with Qt Quick.

There are several UI Component sets made with Qt Quick that already are available. These are however all mobile platform specific:
* MeeGo UI Components
* Cascades by RIM
* Ubuntu User Interface Toolkit
* Jolla UI Components
* Symbian UI Components
* Plasma UI Components by KDE
* —

The UI Components

The goal is to make a set of UI Components that work on both desktop and touch platforms, but in the first round to focus on desktop. The reason for this being to make it easier to port current QWidget-based applications to Qt Quick.

We however see that many UI Components make sense on both Desktop and Touch, and the goal will be to make the UI Components available on all platforms Qt runs on.

The UI Components will have native look and feel for the desktop platforms that Qt supports. But it is also possible to implement ones own style.

Project Details

Getting & Building Source Code

See QtDesktopComponents for instructions

Usage & Viewing Examples

Todo

Bug tracking

Please report any bugs found in <bug tracker&gt;. We encourage attaching a simple qml file to the bug report which displays the problem.

Collaborating with us

Mail: "qt-componentsqt.io Mailing List&quot;:http://lists.qt.io/mailman/listinfo/qt-components
IRC: "#qt-quick on Freenode&quot;:irc://irc.freenode.net/#qt-quick
(For a full list of IRC channels of interest to Qt developers, see "OnlineCommunities&quot;:http://wiki.qt.io/OnlineCommunities.)

Component APIs

Below is a table [under construction] of components identified within scope of this project, and their individual development status.

For reference, see the overview of the component names used for other projects, and their property comparisons.

{background:#009900}. |. Component |. Summary |_. Status |
| Button| Simple Push Button | |
| ToolButton | | |
| Checkbox | Button with checked property | |
| Slider | | |
| ProgressBar | | |
| TextField | Single line text input box | |
| TextArea | Multi-line text input box | |
| RadioButton | | |
| ButtonRow | | |
| Menu | | |
| ContextMenu | | |
| ToolBar | | |
| StatusBar |  |  |
| Switch | | |
| BusyIndicator | UI element to indicate something is happening | |
| Page | | |
| PageStack | | |
| ApplicationWindow | | |
| SectionScroller | List lookup / alphabet scroller API | |
| ScrollArea | Flickable/viewport with built-in decoration and scroll bar controls | |
| ScrollDecorator | | |
| Label | Text element | |
| TabFrame /TabGroup | | |
| TabBar | Row of Tabs | |
| Icon | | |
| Calendar | Provides a way to select dates from a calendar | Under development "[1]":https://codereview.qt.io/#change,44899 "[2]":http://lists.qt.io/pipermail/qt-components/2013-January/000147.html |

API Development Process

Other component libraries

There are several existing open source component implementations out there. See QtQuickOpenComponents for a list of those.

References

Initial Project Description: https://bugreports.qt.io/browse/QTCOMPONENTS-72
Initial Desktop Components Spec: https://bugreports.qt.io//browse/QTCOMPONENTS-200
[Nokia] Desktop Components for Qt5:
https://wiki.qt.io/QtDesktopComponents
http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/
http://labs.qt.nokia.com/2011/05/26/table-view-with-qt-quick/
http://labs.qt.nokia.com/2011/08/26/toplevel-windows-and-menus-with-qt-quick/
http://labs.qt.nokia.com/2012/06/06/desktop-components-for-qt-5/
[INdT] Components work:
http://codecereal.blogspot.com.br/2012/04/qml-themingstyling.html

Retrieved from "https://wiki.qt.io/index.php?title=Qt_Quick_Components&oldid=2813"