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

• Drag and drop two Push buttons to the canvas
• Drag and drop a Widget object to the canvas
• Change button 1 to Load
• Change button 2 to Quit
• resize the widget to fit most of the window
  • select the widget and enable autoFillBackground
  • select the pallette property and change the color of Window to something visible (I use green in this example)

• Compile and run. The widgets don't resize
• Add a vertical spacer between the buttons.
• Stretch out the spacer
• Highlight the buttons/spacer and select Layout Vertically (CTRL+L) from the top tool bar
• Add a horizontal spacer between the widget window and the vertical layout box
• Change some size policies
  • set the horizontal spacer sizeType to Fixed
  • set the widget SizePolicy to Expanding in the horizontal and vertical directions
  • click in the main window (Not the widget and press the Layout Horizontally (CTRL+H) button
• Compile, run, resize

Promoting Widgets

• Go to File->Add New File
• Select C++ Class
• Name the Class MyImageBox and have it inherit from QWidget
• On the project Management window, select None for version control. We'll do this manually later.
• add myimagebox.h and myimagebox.cpp to the qtimage/CMakeLists.txt file with the other filenames in target_sources
• Back in the UI editor, right click on the main widget and select Promote Widget to MyImageBox

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.

• Go to Edit->Signals/Slots
• Drag the load button to green widget.
  • Add an open() slot to the green widget.
  • Connect the clicked() signal to the open() slot.
• Drag the quit button to the middle of the MainWindow (not the green widget).
  • Select the checkbox that says "Show signals/slots inherited from QWidget"
  • Connect the clicked() signal to the close() slot. You may need to click the "Show signals and slots inherited from QWidget" box to see the close() slot for the MainWindow.
• Compile and run. Quit button should work. Load button should not.

Add functionality to myimagebox.h

#include <QtWidgets>

...

public slots:
    void open();

private:
    QLabel *imageLabel;
    QScrollArea *scrollArea;
    QGridLayout *layout;

Implement in myimagebox.cpp

MyImageBox::MyImageBox(QWidget *parent) :
    QWidget(parent)
{
   imageLabel = new QLabel();

   scrollArea = new QScrollArea(this);
   scrollArea->setWidget(imageLabel);

   layout = new QGridLayout();
   layout->setContentsMargins(0,0,0,0);
   layout->addWidget(scrollArea);
   setLayout(layout);
}

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.setIcon(QMessageBox::Information);
       msgBox.setWindowTitle("Image Viewer Load Error");
       msgBox.exec();
       return;
     }

     imageLabel->setPixmap(QPixmap::fromImage(image));
     imageLabel->adjustSize();
   }
}

Compile, Debug, Run, Test, Ponies!

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

Summary

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.

• We can quickly sketch up a basic UI with QtCreator's design tools
• Qt, like most widget toolkits have various widgets that sit in a loop waiting for events to happen.
• Qt Widgets communicate between each other using a signals (senders) and slots (receivers) model. An event action on one widget can direct a signal to be sent from the widget to a slot on another widget. While you will see some signal and public slots: code in Qt C++ programs, this is not standard C++, and some special Qt and compiler magic happens behind the scenes to make this work. The strange floating Q_OBJECT is also part of this magic.
• We can extend functionality of core Qt Widgets with subclassing, as we did with promoting the main QWidget to a MyImageBox. This will be a common pattern, and we will typically have one main widget that we subclass for displaying a graphical context. In theory, we can have more than one, but it's only week one.
• Qt has a lot already built in. It can be a bit overwhelming, but we are not trying to become Qt experts. We just need to pick and choose some small pieces to get the basics done and focus on graphics.

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.

• QImage
• QPixmap
• QString
• QWidget
• QMessageBox
• QFileDialog
• QDir
• QScrollArea
• QLabel
• QGridLayout

More References

Getting started with Qt Widgets