Skip to main content
Version: 6

Qt C++ Application Development on Torizon Using Visual Studio Code

Introduction​

The Visual Studio Code Extension for Torizon can be used to build, debug and deploy C and C++ applications.
This, of course, includes also applications using the Qt libraries. On the other side, Qt provides not just C++ libraries but also a rich set of tools to design user interfaces using widgets or QML language and specific build tools, as qmake, that use an ad-hoc project format.

To orchestrate those tools, Qt provides a fully integrated IDE named QtCreator and, at the moment, it is not fully integrated with Torizon. To overcome that we make it easier for you to use Visual Studio Code to work on the code and leverage Qt's design tools to design user interfaces. See a comparison below between development on Torizon and other platforms as Boot to Qt and Yocto:

Design WorkflowDevelopment Workflow
TorizonQt Design Studio
✔ Enhanced UI design		Visual Studio Code
✔ Write Code
✔ Build and debug
✘ UI design
Boot to Qt / YoctoQt Design Studio
✔ Enhanced UI design		Qt Creator
✔ Write Code
✔ Build and debug
✔ UI design

Be aware that you can use Qt IDEs (Qt Design Studio and Qt Creator) together with VS Code.

If you are looking to using Python with Qt, refer to the article How to build a GUI with Qt for Python and TorizonCore.

This article complies with the Typographic Conventions for Torizon Documentation.

Prerequisites​

Create a New Qt5 Project​

The video below illustrates the process of creating and deploying to a module a Qt project using the Visual Studio Code Extension for Torizon.

To create a new project you should:

  • Press F1 to open the command bar
  • Select Torizon C/C++: Create C/C++ application
  • Set the name of your new application and choose the folder where it will be created

Torizon extension command bar

  • Choose one of the Qt-based templates, three templates are provided:

    • Qt Core Sample: for console applications not using any UI or generating UI elements from code
    • Qt Widgets Sample: for graphical applications that use QtWidgets
    • Qt QML Sample: for applications using QtQuick/QML-based UI

Qt templates provided by the extension

Import an Existing Qt5 Project​

There is a generic article on How to Import a C/C++ Application to Torizon, and in addition to the tips below, it is highly recommended that you read it.

To import an existing project you will have to:

  • Press F1 to open the command bar
  • Select Torizon C/C++: Import existing application"
  • Navigate to the folder where the ".pro" file is stored
  • Select the right template, depending on the kind of UI implemented by the application

Importing a Qt Project

You can also read the blog post from May, 2021 Importing a Qt Project Into Torizon Using VS Code.

Considerations When Migrating Your Project to Torizon​

Existing projects may need to be modified to work on Torizon. Some points you need to consider:

  • The extension works on a single folder, if you have multiple ".pro" files you should group them together and use a project with SUBDIRS on the top level to build them in the right order.
  • After the build, binaries and data files should be deployed to a folder that is synchronized with the target, this can be done by adding: DESTDIR = $$(QMAKE_DESTIDIR) directive to the project file.
  • Torizon UI implementation is based on Wayland. Qt does a very good job wrapping platform-specific aspects, but you may experience some differences in the aspect of some UI elements or the way they are rendered on screen in terms of speed or other effects.

Edit QML Files on Qt Design Studio​

To open a QML file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open QML file in Qt Design Studio. This will start an instance of Qt Design Studio ready to edit your file.

Learn more about how to use Qt Design Studio in the official documentation.

Edit UI Files on Qt Design Studio​

To open a UI file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open UI file in QtDesigner. This will start an instance of QtDesigner ready to edit your file.

User interface definition files are processed during build time. This processing generates header files that can then be used to reference the UI elements.
When you finish editing your UI file, you must run the build command - Ctrl + Shift + B in Visual Studio Code - to ensure that changes you made in the user interface layout are reflected in the generated header files.

Learn more about how to use Qt Design Studio in the official documentation.

Qt Integration "Under the Hood"​

Qt integration uses Qt5 packages provided by Debian and licensed using the Qt open source license.

Version of the Qt Framework​

As the Debian Containers for Torizon are based on Debian, the Qt version used in our containers will be the same version provided by Debian at a given point in time.

Search for Qt packages in the Debian Packages search to get the exact version.

How to Add Qt Packages to a Project​

The provided templates include only a minimal subset of Qt feature's, those features have been split by Debian into multiple packages, to reduce the overall footprint of Qt and allow users to install only the features they actually need.
If a component required by your application is not found at build time or at runtime you can check packages built from Qt source code and add them to devpackages (build time) or extrapackages (runtime) configuration parameters.

Notice that for many of the components you have:

  • A runtime component (usually named libqt5*) that must be added to extrapackages
  • A development component (named in the same way with "-dev" suffix)that must be added to devpackages since it provides headers and libraries used at build time.

Webinars and Videos​

This section has on-demand webinars and videos to help you through development.

Importing a Qt Project Into Torizon Using VS Code​



Send Feedback!