From Qt Wiki
Jump to: navigation, search
This article is nominated for deletion. Reason: No longer needed as Qt Quick Components has more recent information.
Please raise your support/opposition to this nomination in the article's discussion page.
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.

= Old content of 'Qt Quick Components'-page

Note: this page contains outdated information, please see Qt_Quick_Components for the most recent

This project is to create QML components to ease application UI development in QML. It has the following goals:

  • desktop & touch 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

During the Qt Contributors Summit 2012, Qt Quick Components were a major topic for discussion. There it was decided that a collaborative effort between Nokia, INdT, KDE, Canonical and others will occur, to deliver a set of QML components for both desktop & touch UIs which respect the native look & feel on the desktop, but yet are easily customised.

A key task of this project is deciding APIs for these components, with the ultimate goal of having a minimal yet functionally comprehensive API. We will encourage platform developers to extend these APIs for their own requirements.

Please see the "API Development Process" section below on how this discussion will proceed. All input is welcome.

This work will be based upon the efforts of Nokia and IdNT- see the reference links at the end of this page for more information. =

The Components

Due to the fundamental differences between a mouse-based and a touchscreen-based UI, we divide the entire set of components into two specific sets: touch and desktop.

Touch Components Set

The Touch Components Set will be a reference implementation as simple as possible. The most important thing here is defining the API and let developers easily create a component set for a different platform.

This reference component set won't be themable since we see it as resposability of the platform to provide what can be themed or not. Our wish is to keep it as minimal as possible.

It's important to keep in mind that we want the components API and features to be minimal. This also provides better runtime performance, since it avoids the creation of redundant data, processing and property bindings.

Desktop Components Set

This set will contain more flexible components, since the desktop environment allows us to use more computational resources than in the mobile platforms.

It is important that Qt applications are cross platform, especially on the desktop. So it's important that they have the abilities and look and feel as platform with the same written code.

Besides the ability of having the native look and feel, is also important that the component are styleable.

Project Details

Getting & Building Source Code

Check out source code with

git clone <URL>

For Qt4.7 pull…. For Qt4.8 pull…. For Qt5 pull…. The components create several C++ plugins required to interface with QML. To install the components into your Qt directory, simply enter the root directory and run:

make install
This will compile and copy the plugins and components into your QTDIR/imports folder. If you are compiling against a system Qt on linux, you might have to do a
sudo make install

Usage & Viewing Examples


Bug tracking

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

Collaborating with us

Mail: qt-components@qt.io Mailing List IRC: "#qt-components on Freenode":irc://irc.freenode.net/#qt-components (For a full list of IRC channels of interest to Qt developers, see OnlineCommunities.)

Component APIs

Below is a table [under construction] of components identified within scope of this project, and their individual development status. {background:#009900}. |. Component |. Summary |_. Status | Label | Text String | | {background:#ddd}. | Button | Simple Push Button | API being discussed | | Checkbox/Switch | Button with checked property | | {background:#ddd}. | RadioButton | | | | ComboBox | List of selectable items | | {background:#ddd}. | TextInput | Single line text input box | | | TextArea | Multi-line text input box | | {background:#ddd}. | Slider | | | | ProgressBar | | | {background:#ddd}. | ScrollBar/ScrollArea | | | | BusyIndicator | UI element to indicate it is busy | | {background:#ddd}. | TabBar | Row of Tabs | |

API Development Process

  • Process to happen on mailing list.
  • When making API proposal/change always include: API definition and real world example (from a developer standpoint).
  • Once decided upon an API proposal/change documentation has to be written right away.
  • Enforcing a timeline around API discussion: from start of API definition to decision on it: 1 week.
  • Making sure that at least one representative of each interested platform validates the API (if possible).
  • Try to follow Qt naming convention if unsure.
  • In case of unresolvable conflict of opinions, an appointed maintainer will have the last word.

Other component libraries

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


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