| /**************************************************************************** |
| ** |
| ** Copyright (C) 2016 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** This file is part of the documentation of the Qt Toolkit. |
| ** |
| ** $QT_BEGIN_LICENSE:FDL$ |
| ** Commercial License Usage |
| ** Licensees holding valid commercial Qt licenses may use this file in |
| ** accordance with the commercial license agreement provided with the |
| ** Software or, alternatively, in accordance with the terms contained in |
| ** a written agreement between you and The Qt Company. For licensing terms |
| ** and conditions see https://www.qt.io/terms-conditions. For further |
| ** information use the contact form at https://www.qt.io/contact-us. |
| ** |
| ** GNU Free Documentation License Usage |
| ** Alternatively, this file may be used under the terms of the GNU Free |
| ** Documentation License version 1.3 as published by the Free Software |
| ** Foundation and appearing in the file included in the packaging of |
| ** this file. Please review the following information to ensure |
| ** the GNU Free Documentation License version 1.3 requirements |
| ** will be met: https://www.gnu.org/licenses/fdl-1.3.html. |
| ** $QT_END_LICENSE$ |
| ** |
| ****************************************************************************/ |
| |
| /*! |
| \page topics-ui.html |
| \title User Interfaces |
| \brief Qt's features for Creating User Interfaces |
| |
| Qt features multiple technologies for creating user interfaces. While it is |
| possible to mix and match these different technologies as needed, one approach |
| is often better suitable for a certain type of user interface than the others. |
| \l {Qt Creator Manual}{Qt Creator} is a good example of an application that |
| combines traditional \l {Qt Widgets} with \l {Qt Quick}. Widgets form the basis |
| of the user interface, whereas Qt Quick is used to implement the Welcome mode, |
| for example. The following sections provide brief introductions to the |
| available technologies for creating user interfaces, and a comparison table |
| to help choosing the best suitable technology. |
| |
| \section2 Common Important UI Topics |
| |
| \list |
| \li \l{highdpi.html}{High DPI Displays} |
| \endlist |
| |
| \section1 QML Graphical User Interfaces |
| |
| QML allows developers to build user interfaces in a declarative way. User |
| interfaces specifically benefit from the simplicity of compounding QML objects |
| and configuring them using property bindings. |
| |
| \l{Qt Quick} is a module which supplies QML types for creating user interfaces |
| such as a visual canvas with its own coordinate system and rendering engine. |
| Animation and transition effects are a first class concept in Qt Quick and |
| visual effects can be supplemented through specialized components for particle |
| and shader effects. |
| |
| \section2 Important UI Topics for QML Applications |
| |
| \list |
| \li \l{qtquick-usecase-visual.html}{Visual types in QML} |
| \li \l{qtquick-usecase-userinput.html}{Responding to User Input in QML} |
| \li \l{qtquick-usecase-animations.html}{Animations in QML} |
| \li \l{qtquick-usecase-text.html}{Displaying Text in QML} |
| \li \l{qtquick-usecase-layouts.html}{Layouts in QML} |
| \li \l{qtquick-usecase-styling.html}{Style and Theme Support} |
| \li \l{qtquick-usecase-integratingjs.html}{Integrating JavaScript in QML} |
| \li \l{Scalability} |
| \endlist |
| |
| \section2 Graphical Controls |
| |
| The \l{Qt Quick Controls} module (since Qt 5.7) provides lightweight QML types |
| for creating performant user interfaces. These controls achieve improved |
| efficiency by employing a simplified styling architecture. |
| |
| For more about how to create application user interfaces with QML, visit the |
| \l{QML User Interfaces} page. |
| |
| \section1 Widget-based User Interfaces |
| |
| \l {Qt Widgets} are traditional user interface elements that are typically found |
| in desktop environments. The widgets integrate well to the underlying platform |
| providing native look'n'feel on Windows, Linux and \macos. The widgets are mature |
| and feature rich user interface elements suitable for mostly static user interfaces. |
| In contrast to \l {Qt Quick}, the widgets do not scale that well for touch screens |
| and fluid, highly animated modern user interfaces. The widgets are a good choice |
| for applications with traditional desktop centric user interfaces, such as office |
| type applications. |
| |
| \section2 Important Concepts in Qt Widgets |
| \list |
| \li \l{mainwindow.html}{Application Main Window} |
| \li \l{desktop-integration.html}{Desktop Integration} |
| \li \l{dialogs.html}{Dialog Windows} |
| \li \l{layout.html}{Layout Management} |
| \li \l{model-view-programming.html}{Model/View Programming} |
| \li \l{richtext.html}{Rich Text Processing} |
| \li \l{dnd.html}{Drag and Drop} |
| \li \l{Internationalization with Qt}{Internationalization} |
| \endlist |
| |
| \section1 Visualizing Data |
| |
| Qt provides ready-made C++ classes and QML types for visualizing data in the |
| form of charts and graphs, which are known to be best ways of analyzing data. |
| \l{Qt Charts} and \l{Qt Data Visualization} are the two Qt add-ons that make |
| data visualization using 2D and 3D models a reality. |
| |
| \section1 Displaying Web Content |
| |
| Qt provides the Chromium-based |
| \l{Qt WebEngine}{WebEngine} layout engine, which enables you to embed web content |
| into the Qt application. The engine can be integrated into both Qt Widget-based |
| and Qt Quick-based applications. |
| |
| For more information about support for web content in Qt, see |
| \l{Integrating Web Content}. |
| |
| \section1 Comparison |
| |
| Choosing the appropriate technology for building a user interface |
| is not always easy. It depends on several variables, such as other |
| technologies used in a project or target platform constraints. To |
| some extent, many items in the following table can be implemented using any of |
| the three available technologies. The following table aims to help you |
| choose the tool best suited for the job. |
| |
| \table |
| \header |
| \li |
| \li Qt Quick / Qt Quick Controls |
| \li Qt Widgets |
| \li Qt \WebEngine |
| \li Comments |
| \row |
| \li Used language(s) |
| \li QML/JS |
| \li C++ |
| \li HTML/CSS/JS |
| \li |
| \row |
| \li Native look'n'feel |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li |
| \li Qt Widgets and Qt Quick Controls 1 integrate well to the underlying |
| platform, providing a native look'n'feel on Windows, Linux, and \macos. |
| \row |
| \li Custom look'n'feel |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li Qt Widgets provide means for customization via style sheets, |
| but Qt Quick is a better performing choice for user interfaces |
| that do not aim to look native. |
| \row |
| \li Fluid animated UIs |
| \li \inlineimage ok |
| \li |
| \li \inlineimage ok |
| \li Qt Widgets do not scale well for animations. Qt Quick |
| offers a convenient and natural way to implement animations in a |
| declarative manner. |
| \row |
| \li Touch screen |
| \li \inlineimage ok |
| \li |
| \li \inlineimage ok |
| \li Qt Widgets often require a mouse cursor for good interaction, whereas |
| Qt Quick only provides primitive building blocks that were designed |
| with touch interaction in mind. |
| The WebView Qt Quick component has support for multi-touch gestures |
| to interact with web content. |
| \row |
| \li Standard industry widgets |
| \li |
| \li \inlineimage ok |
| \li |
| \li Qt Widgets provide all the bells and whistles, developed over two |
| decades, needed for building standard industry type applications. |
| Qt \WebEngine Widgets provide widgets and additional classes to render |
| and interact with web content. |
| \row |
| \li Model/View programming |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li |
| \li Qt Quick provides convenient views, but Qt Widgets provide more |
| convenient and complete framework. In addition to Qt Quick views, |
| Qt Quick Controls provide a TableView. |
| \row |
| \li Rapid UI development |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li Qt Quick is an excellent choice for rapid UI prototyping and development. |
| \row |
| \li HW accelerated graphics |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li Qt Widgets provide QGLWidget for rendering OpenGL graphics, |
| and Qt \WebEngine supports \WebGL, but the OpenGL ES 2.0 or OpenGL 2.0 |
| based \l {Qt Quick Scene Graph} has proven to provide the best |
| performance for UIs and for integrating with OpenGL content. |
| \row |
| \li Graphical effects |
| \li \inlineimage ok |
| \li |
| \li |
| \li The particle system and shader effects available in Qt Quick |
| are more flexible. Qt Widgets offer very little in this area. |
| \row |
| \li Rich text processing |
| \li \inlineimage ok |
| \li \inlineimage ok |
| \li |
| \li Qt Widgets currently provide the most comprehensive base for implementing |
| text editors. Qt's rich text document classes can also be utilized in |
| Qt Quick and Qt Quick Controls' TextArea, but may require some C++ |
| implementation. |
| \row |
| \li Existing web content |
| \li |
| \li |
| \li \inlineimage ok |
| \li Both Qt Quick and Qt Widgets provide components for presenting |
| \l {richtext-html-subset.html}{simple rich text}, but Qt \WebEngine |
| is the best choice for presenting full-blown web content. |
| |
| \endtable |
| |
| \section1 Internationalization and Translations |
| |
| Qt provides excellent support for translating applications into local languages. |
| Release managers, translators, and developers can use Qt translation tools to |
| accomplish their tasks. |
| |
| \list |
| \li \l{Internationalization with Qt} - instructions and the process of creating |
| localized applications. |
| \li \l{Qt Linguist Manual} - manual of Qt's translation tool |
| \endlist |
| |
| */ |