Qt UI Demo

Basics of UI Creation

For this exercise we will use QtCreator to design a simple image viewer. Make sure you have a qtImage directory in your w01-intro folder.

Complete the QtCreator Initial Setup if you have not already done so.

Run qtcreator then File->Open File or Project select the file ~/cs40/examples/CMakeLists.txt

Click on the computer icon in the lower left and set the running application to qtimgtest. Click the green arrow to build and run this application. A simple window should pop up.

UI Design

click on mainwindow.ui in w01-intro/qtimage directory in QtCreator. The UI editor will open. Here you can add widgets and adjust the layout.

In the upper right corner, select the MainWindow widget. You can edit this widget's properties in the lower right menu. Find the windowTitle property and change it to "My First Qt App". Run the question green arrow again and see that the title has changed.

Adding Widgets

UI Layout

Promoting Widgets

Slots and Signals

Graphical user interfaces such as Qt have event handling mechanisms to process events like keypresses, mouse clicks, and menu selection. In Qt, this mechanism uses slots and signals. Events emit signals which can then be sent to slots.

Add functionality to myimagebox.h

#include <QtWidgets>


public slots:
    void open();

    QLabel *imageLabel;
    QScrollArea *scrollArea;
    QGridLayout *layout;
Implement in myimagebox.cpp
MyImageBox::MyImageBox(QWidget *parent) :
   imageLabel = new QLabel();

   scrollArea = new QScrollArea(this);

   layout = new QGridLayout();

void MyImageBox::open() {
  QString fileName = QFileDialog::getOpenFileName(this,
                                   "Open File", QDir::currentPath());

   if (!fileName.isEmpty()) {
     QImage image(fileName);
     if (image.isNull()) {
       QMessageBox msgBox;
       msgBox.setText(QString("Cannot load %1.").arg(fileName));
       msgBox.setWindowTitle("Image Viewer Load Error");


Compile, Debug, Run, Test, Ponies!

Check the status of your source in git and update/commit and push your changes


Don't worry about understanding every single line of code at this point. There are a few main takeaways to focus on at this point.

Qt Class Reference

Below are some of the classes used in this demo. You don't need to memorize any of these as you can always refer back to the documentation, but some we will be using more often than others.

More References

Getting started with Qt Widgets