Qt and Windows CE

An Image Viewer Example

To demonstrate how you can use Qt, I present an image viewer called "Qt Image Viewer" (Figure 1) and internationalize it for three different languages. It has its own custom look-and-feel—and users can change both the language and look-and-feel while the application is running. The complete source code for the application is available www.ddj.com/code/.

Qt comes with a UI builder tool for designing UIs. You can, of course, code the GUI by hand, but you can save time doing it in Qt Designer instead. Qt Designer stores the UI in an XML file, which generates C++ code that you can include in your project. Figure 2 shows the Qt Designer with the .ui file for Image Viewer.

For this application, I use the QLabel, QLineEdit, and QPushButton widgets (controls). I use QLabel for the actual images and for textual information (such as the name of the current image and its dimensions). I use QLineEdit to display the name of the current directory, and QPushButton for user interactions in the application. Giving the widgets sensible names like previousImage, nextButton, and currentDirectory, it is simpler later on when using these widgets in the application code.

Figure 1: Qt Image Viewer with custom style running on Windows Mobile 6.0.

[Click image to view at full size]

Figure 2: Qt Designer loaded with imageviewer.ui.

Once you define the UI, you combine it with the application code. The generated C++ code created from the .ui file in Figure 2 results in a header file called ui_imageviewer.h. To use it, just include it in the code. Here, I subclass a QWidget and initialize the GUI in the constructor:

class PreviewWindow : public QWidget
{
  Q_OBJECT
public:
  PreviewWindow() : QWidget(), current(1) {
    ui.setupUi(this);
   ...
}

The PreviewWindow class has the following members:

Ui::ImageViewer ui;
QStringList imageFileList;
QPixmap mainPixmap;
int current;

UI::ImageViewer ui is an instance of the class generated by Qt Designer. By calling ui.setupUi(this), I initialize my own class (the PreviewWindow class) with the GUI I created in Qt Designer. At this point, I can run the application. While it would look like what I designed in Qt Designer, I also need to connect the widgets with program logic to make the application functional.

When you change one widget in GUI programming, you often want another widget to be notified. Generally, you want objects of any kind to be able to communicate with one another. For example, if users click previousButton, you want PreviewWindow's previousImage() function to be called.

Qt's solution for this is "signals" and "slots" (similar to Delegates/Events in C#):

• Signals are emitted when a particular event occurs. Qt's widgets have many predefined signals, but you can always subclass widgets to add your own signals to them.
• Slots are functions called in response to particular signals.

Qt's widgets have many predefined slots, but it is common practice to subclass widgets and add your own slots so that you can handle the signals you're interested in. For the PreviewWindow class, I've added these slots:

void nextImage() { ... }
void previousImage() { ... }
void changeDirectory() { ... }
void toggleStyleSheet() { ... }
void setTranslator(QObject *object) { ... }

To connect the signals from the different widgets to these slots, you only need to call the connect() function in the constructor of the widget. Here, I connect the clicked() signals from previousButton and nextButton:

// connect next and previous
connect(ui.previousButton,     SIGNAL(clicked()), 
      this, SLOT(previousImage()));
connect(ui.nextButton,     SIGNAL(clicked()), 
      this, SLOT(nextImage()));

The rest of the constructor code connects the other buttons, scans the current directory for any images, and loads them for preview if any exist.