CSC220 C++Qt Crash Course

--D. Thiebaut 16:25, 2 December 2010 (UTC)

---

Page under construction!

This is Part 2 of a 2-lecture/lab introduction to C++ and GUI programming with Qt. Part 1 can be found here.

Main References

• Wikipedia Page on Qt

What is Qt?

• Qt is a cross-platform application framework

that is widely used for developing application software with graphical user interface (GUI) (in which case Qt is referred to as a widget toolkit when used as such)

• Qt uses standard C++

but makes extensive use of a special code generator (called the Meta Object Compiler, or moc)

• Qt can also be used in several other programming languages

via language bindings.

• It runs on all major platforms

• Non-GUI features include

• • SQL database access,

• • XML parsing,

• • thread management,

• • network support,

• • and a unified cross-platform API for file handling.

• GNU Lesser General Public License, Qt is free and open source

Platforms

• Linux/X11

• Mac OS X

• Windows

• Embedded Linux

• Windows CE / Mobile

• Symbian

(Nokia Devices)

• Maemo

External ports

Since Nokia opened the Qt source code to the community on Gitorious various ports have been appearing. Here are some of them:

• Qt for OpenSolaris

• Qt for Haiku – Qt for Haiku OS

• Qt for OS/2

• Qt-iPhone – Experimental

• Android-Lighthouse – Experimental

• Qt for webOS – Experimental

• Qt for Amazon Kindle DX – Experimental

• Qt for Wayland – Experimental

Language Bindings

• http://en.wikipedia.org/wiki/Qt_(framework)#Bindings

History

• Haavard Nord and Eirik Chambe-Eng started Qt in 1991.

• Headquaters in Oslo, Norway

• incorporated at TrollTech 3 years later

• Acquired by Nokia in 2008

---

---

QtCreator

• Start Qt Creator

• IMPORTANT: Always remember to close a project before opening a new one!

Play Time!

• Try these examples:

• • WebKit/FancyBrowser

Qt includes a Web browser as a standard widget

Select the special effect (top menu) that rotates all images

• • Animation Framework/Animated Tiles

An example of animation of images along a path

• • OpenGL/Hello GL

An example of real-time OpenGL output

First Project: A Main Window Built From Scratch

• File
  • Close all projects
• File
  • New File or Project
    • Qt C++ Project
      • Qt GUI Application
        • Name: MyHello
        • Create In: Pick a convenient location in your home account
        • Click on "Make default location"

Form

• Follow directions given in class to create a form with
  • a text browser
  • two push buttons
  • a spacer between the two buttons

• Add a layout (follow directions given in class)

Signals & Slots

• Add a connection between the buttons (senders) and the MainWindow (receiver).
• this is tricky: follow this series of steps carefully!

• The result:

Programming--Step 1

• Now that we have a connection between the clicked() event generated by pushButton1 (the signal) and the function helloSlot() of the mainwindow (the slot), we can put code in the slot() function.
• The two files we need to program are mainwindow.h and mainwindow.cpp:

mainwindow.h

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void helloSlot();

private:
    Ui::MainWindow *ui;
};

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow) {
    ui->setupUi(this);
}

MainWindow::~MainWindow() {
    delete ui;
}

void MainWindow::helloSlot() {
   // your code goes here
}

Build and test

• Click on the Green Triangle to verify that everything is working well.

Programming -- Step 2

• Fill in the body of the newly created slot:

 void MainWindow::helloSlot() {
    // your code goes here
    ui->textBrowser->append( "Hello there!");
}

• Verify that it works!

Exercise 1

Perform the same operation for the "bye" button, and make it display "bye" (or another goodbye message of your liking).

Exercise 2

Add another button, a third button, called clear, that will clear the text browser widget. For this you won't have to create a new slot, as the textBrowser widget already has a clear() slot associated with it. Just find it in the list of slots associated with the textBrowser.

• A solution project is available here

Second Project: A Main Window with a dialog

• The goal of this second project is to take the first project, and add a lineEdit box to allow the user to load the contents of a file in the textBrowser.

• Repeat the steps of the previous section and create a new project with two buttons named Load (internally called pushButton1) and Process (internally called pushButton2), a lineEdit widget in between, and a textBrowser above them. Add two slots named processSlod() and loadFileSlot() to your class (in both the .h header and the .cpp source files).

• Use the Qt Help menu and look for QFileDialog and QFile. They will allow us to pick a file name from our account, and to read it into a string.
  • Look for the Detailed Description section, then look for the code examples. Programming with Qt can be done with 90% copying and pasting, and 10% programming in C++.

• Figure out how to open a dialog to get a file name with an extension of .kml. In a first step, display the file name in the textBrowser:

  QString fileName = QFileDialog::getOpenFileName(this,  ...  );
    ui->lineEdit->setText( fileName );

• Figure out how to open a file and get its contents, and display it in the textBrowser...

 QFile file( fileName );
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
        return;

    QTextStream in(&file);
    while (!in.atEnd()) {
        QString line = in.readLine();
        ui->textBrowser->append( line );
    }

void MainWindow::loadFileSlot() {
    QString fileName = QFileDialog::getOpenFileName(this,
                                    tr("Open File"), ".", tr("Kml Files (*.kml)"));
    ui->lineEdit->setText( fileName );

    QFile file( fileName );
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
        return;

    QTextStream in(&file);
    while (!in.atEnd()) {
        QString line = in.readLine();
        ui->textBrowser->append( line );
    }
}

</font>

Where to Continue From Here...