UI Creation

It’s a Win-Win with Qt

You get to decide with Qt. You can create your application user interface or your device GUI using the workflow and UI approach that’s best for you. If you need to work using an imperative-based approach with C++, Qt comes with a drag-and-design tool, Qt Designer, including Qt Widgets for native styles. If you prefer a declarative-based approach then the Qt CSS & JavaScript like QML language is easy to learn and implement using the Qt Quick technology. Both are integrated into the Qt Creator IDE.  But actually it’s not either or. You can mix it up. Hybrid development with HTML5 is an option, too.

Imperative – Qt Widgets with C++

Qt Widgets is a library of C++ -based UI controls that provide native look-and-feel on all desktop platforms and are normally used for creating large-scale desktop user interfaces. With our Qt Creator IDE drag-and-drop UI tool, Qt Designer, your UI layout is easily created. All the platform-level details have been taken care of for you along with easy-to-use controls, dynamic layout managers and native dialogs. You can completely customize, easily extend and style Qt widgets into all kinds of desired look-and-feels. Also, if your application needs to manage large amounts of data, mechanisms are already in place to facilitate your data-driven application.

Deadline 6 by Thinkbox Software
Deadline 6 by Thinkbox Software, made with Qt Widgets. Learn more.

Declarative – Qt Quick with QML

Qt Quick is a revolutionary way for creating modern user interfaces. The presentation layer of the application is defined with a declarative and CSS and JavaScript like UI-language called QML. QML files can be productively worked on by both the application developer, as well as a UI designer, removing the need for external UI mock-ups or prototypes. Creating beautiful and smooth animations, transitions and gesture interaction is made easy with QML and is especially designed for creating scalable UIs for small-screen devices. The graphics pipeline of Qt Quick directly utilizes OpenGL for superior performance on embedded and mobile platforms. Learn more about Qt Quick.

Qt Quick Controls provide customizable UI controls for QMLQt Quick Controls is a convenient library for Qt Quick that provides you with a collection of adaptive pre-built controls for desktop UI development. The controls inherit native platform look-and-feel like Qt Widgets and also provide a convenient styling API for customization. With Qt Quick Enterprise Controls you get an additional set of more complex industry-specific gauges and meters.

Besides hardware accelerated graphics made with Qt you can also integrate native OpenGL graphics into your application for 3D content. A common use case of Qt with OpenGL is to have the UI layout and controls made with Qt/Qt Quick and use them to interact with one's own 3D content or to highlight or render something on top of it.

Hybrid – Qt with HTML5

Qt is HTML5 CompliantQt supports HTML5-based user interface creation natively. You can reuse existing web UIs or make powerful hybrid applications with Qt Quick and dynamic HTML5 content. Qt supports HTML5 features extensively and the JSON format natively for easy integration to external web services. Through the Qt WebKit module, you can show web documents inside your Qt application—or even make the whole UI with HTML5. With the powerful Qt/C++ APIs, you are able to bind your HTML5 UIs directly into the native backend of your code, for instance, to access your embedded device. Currently, for mobile platforms, like Android and iOS, you can use a native web element along your Qt code to expose HTML5 within Qt applications.

Qt WebKit is 100% compliant with the Acid3 test
Qt WebKit is 100% compliant with the Acid3 test

HTML5 technologies are especially important and well-adopted within some of Qt's main industry verticals, like automotive and set-top-box/TV industries. With Qt as your web engine, you have the powerful combination of getting the best of both worlds--adopted and re-usable web content with HTML5, direct device access with Qt C++ APIs and beautiful and performant UIs with Qt Quick.

So, instead of writing the actual UI with HTML5, you can use the Qt Quick UI technology. Qt Quick is a modern UI technology, originally designed for creating User Interfaces. However, HTML5 usage can be integrated into a Qt Quick UI as well—by making a hybrid user interface.

Qt Digia

Qt Project

Meet Qt

Follow Us

  • Qt
  • © 2014 | Digia Oyj, Valimotie 21, 00380 Helsinki Finland Tel. +358 10 313 3000