Architecture & DesignCross-Platform Native App Development Tutorial

Cross-Platform Native App Development Tutorial

Qt (pronounced as “cute”, not “cu-tee”) is a complete cross-platform framework for creating connected devices, UIs, and applications with native C++ performance. Qt runs on the three major desktop OSes, mobile OSes, such as Symbian, Nokia Belle, Meego Harmattan, MeeGo or BB10, as well as on embedded devices. Ports for Android (Necessitas) and iOS are also in development.

In today’s tutorial, we’ll get better acquainted with the Qt cross-platform framework by installing the Qt Creator IDE and learning how to run the included example apps.

Installation

As a complete cross-platform framework, Qt includes many components. There are the APIs and libraries that provide the backbone of Qt. It contains a rich set of fundamental enablers, which provide higher-level UI and application development components. Next, there is the MinGW C++ compiler for generating native code. Finally, the Qt Creator IDE provides a cross-platform, complete integrated development environment (IDE) for application developers to create applications for multiple desktop, embedded, and mobile device platforms, such as Android and iOS. It is available for Linux, mac OS, and Windows operating systems.

Qt comes in two flavors: Commercial and Open Source. The Commercial version includes many extra features, such as Embedded tooling and solutions and the Official Qt Support Helpdesk, but comes at a fairly hefty cost of $459/mo+. For that reason, we’ll be using the Open Source version here today.

On the Qt Download Page, clicking the ‘Go open source’ button will take you to the page where you can download the Qt Online Installer for your operating system. It’s a fairly small file, but it attempts to download everything you need from their repository. I say “attempts,” because it is known to fail with a timeout error over and over again. I can attest to this issue after having run the installer about a dozen times. Sooner or later, it fails.

Someone created a QtSdkRepoChooser tool as a workaround to the problem, but I found that using the offline installer to be simpler. Be forewarned, it’s a huge file! For instance, the one I downloaded for Windows 10 clocks in at a gargantuan 2.4 Gigs! It took about an hour to download over my less-than-blazing connection.

Running the Installer

The Qt installer is really a wizard that will guide you through the installation process. There are a couple of caveats to look out for, so I will cover the process here.

  1. Launching the installer will bring up the Welcome screen. You can just click Next here.
  2. On the next screen, you can enter your Qt online account information here or create one, as shown in Figure 1. You can also just select Skip to proceed:

    Entering account information
    Figure 1: Entering account information

  3. You’ll then get another albeit simpler Welcome screen. Click Next.
  4. On the following screen, you may pick the installation folder (see Figure 2). The default is normally fine unless you need more disk space on another drive. Note that a path with spaces in it or that is very long may cause problems later, so avoid doing that:

    Selecting the installation folder
    Figure 2: Selecting the installation folder

  5. Now, it’s time to choose the Qt components that you want installed, as you can see in Figure 3. I would recommend the Debugger and the MinGW 5.3.0 32-bit compiler at a minimum:

    Choosing wanted Qt components
    Figure 3: Choosing wanted Qt components

    Click Next.

  6. Next, it’s time to read and accept the license agreement.
  7. Then, pick the Start menu shortcuts you want. The default is typically fine.
  8. It’s now time to install your selected components. The installer will tell you how much disk space it will use. Click Next.
  9. Installing all the selected components may take some time. My install went on for a little under forever.
  10. Once completed, click Finish to close the wizard. You have the option of launching Qt Creator for the first time.

Getting Acquainted with Qt Creator

When Qt Creator first runs, it will show the Welcome screen (see Figure 4). It contains info on recent Project, Examples, as well as Tutorials.

The Qt Creator Welcome screen
Figure 4: The Qt Creator Welcome screen

Qt Creator should auto-detect the installed Kits (see Figure 5), Qt Versions (see Figure 6), and Compilers (see Figure 7). and create a “kit” for desktop development. Look under Tools > Options Build & Run if you want to verify this:

Installed Kits
Figure 5: Installed Kits

Installed Qt Versions
Figure 6: Installed Qt Versions

Installed Compilers
Figure 7: Installed Compilers

Running the Example Apps

A great way to get a feel for what Qt can do is to run some of the many examples that are included with Qt. They are located on Qt Creator’s Welcome screen. Most of the examples run on various platforms, but you can identify examples for specific platforms by scanning the tags under each example or by searching for the platform name in the search field. For example, typing “Windows” in the search field, shown in Figure 8, lists the examples that are fully compatible with Windows:

Viewing compatible examples
Figure 8: Viewing compatible examples

To run the ‘Main Window’ example:

  1. Clicking the example opens the ‘Configure Project’ screen in Qt Creator (see Figure 9) and brings up the associated help in a new window:

    The Configure Project screen
    Figure 9: The Configure Project screen

  2. On the ‘Configure Project’ screen, all you have to do is click ‘Configure Project,’ and Qt Creator will set up the project to run on all of your installed kits.
  3. That will bring up the source code in the editor. You can now click the Run button (see Figure 10) to launch the app:

    The Run button
    Figure 10: The Run button

  4. After the source compiles, the app will come up. You can see the finished product in Figure 11:

    The running application
    Figure 11: The running application

    Conclusion

    In today’s tutorial, we got better acquainted with the Qt cross-platform framework by installing the Qt Creator IDE and learning how to run the included example apps. In the next article, we’ll create a simple project of our own.

Get the Free Newsletter!
Subscribe to Developer Insider for top news, trends & analysis
This email address is invalid.
Get the Free Newsletter!
Subscribe to Developer Insider for top news, trends & analysis
This email address is invalid.

Latest Posts

Related Stories