CSC220 C++Qt Crash Course

From dftwiki3
Revision as of 20:06, 2 December 2010 by Thiebaut (talk | contribs) (Programming -- Step 2)
Jump to: navigation, search

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


Page under construction!
UnderConstruction.jpg


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

What is Qt?

QtCreator.png


  • 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

MacLogo.png
WindowsLogo.png
TuxLogo.png
NokiaQt.png


  • 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

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



QtCreator1.png



  • 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


An Example 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"


QtCreatorMyHello1.png



QtCreatorMyHello2.png


Form

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


QtCreatorMyHello3.png


  • Add a layout (follow directions given in class)


QtCreatorMyHello4.png


Signals & Slots

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


QtCreatorMyHello5.png



QtCreatorMyHello6.png




QtCreatorMyHello7.png




QtCreatorMyHello8.png


  • The result:


QtCreatorMyHello9.png


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!");
}



ComputerLab2.png

Exercise

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

Where to Continue From Here...

QtCreatorContinueFromHere.png