Hello world avec QT4


  1. Créons un répertoire pour notre application.

    Ne perdons pas les bonnes habitudes et créons un répertoire pour notre application

  2. Créons avec designer notre interface

    Aprés s'être placé dans le répertoire dédié à notre application nous lançons designer

    gthom@bigserv ~/coursTp/S3/ig2/ $ cd helloworld/
    gthom@bigserv ~/coursTp/S3/ig2/helloworld $ designer
    

    L'écran suivant apparaît:

    Figure 1. Fenêtre principale de designer

    Fenêtre principale de designer


    Il va falloir maintenant créer notre fenêtre:

    Figure 2. Menu File->NewForm

    Menu File->NewForm


    Lorsque l'on choisit cette option de menu une boîte de dialogue apparait:

    Figure 3. Créer une main window

    Créer une main window


    Dans cette boîte de dialogue on choisit de créer une main window en sélectionnant main window et en cliquant sur le bouton "create".

    Nous obtenons notre nouvelle fenêtre similaire à l'image ci-dessous.

    Figure 4. 


  3. Il va falloir personnaliser notre fenêtre: lui changer son titre, son nom, personnaliser le menu. Nous allons tout d'abord changer le titre de la fenêtre: texte qui s'affiche dans la barre de titre. Dans l'éditeur de propriétés,

    Figure 5. 


    on trouve la propriété "windowTitle" et dans la zone de saisie associée nous tapons le nouveau titre de la fenêtre: "Le programme qui dit bonjour" modifions aussi le nom de l'objet: propriété objectName:"fenetrePrincipale" le nom de l'objet est son identifiant, il est assimilable à un nom de variable, il doit être significatif du rôle et de la nature de l'objet.

    Figure 6. 


    Nous ajoutons aussi un label dans la fenêtre. Un label est un composant graphique de la classe QLabel qui affiche du texte. En l'occurence on souhaite afficher "bonjour tout le monde". On sélectionne le composant "label" dans la "widget box" liste des composants à gauche dans la catégorie "display widgets"

    Figure 7. 


    puis on le dépose dans notre fenêtre à l'endroit souhaité.

    Figure 8. 


    Il n'y a plus qu'à changer son texte: grâce à l'éditeur de propriété on tape "bonjour tout le monde" dans la zone de saisie associée à la propriété "text". On obtient donc la figure suivante:

    Figure 9. 


    Il n'y a plus qu'à mmodifier le menu de notre mainWindow, on y mettra &Fichier comme option principale et dedans on mettra &Quitter.

  4. Il nous reste à sauver notre travail dans un fichier ".ui" "user interface" helloworld.ui.

    Notre interface est donc sauvée dans un format xml propre à designer si nous éditons ce fichier on y voit les caractéristiques de la fenêtre que nous avons créés ansi que les composants que nous y avons placé.

  5. Nous allons générer le code correspondant à notre .ui grâce au générateur de code nommé uic en tapant la commande: uic helloworld.ui un fichier à l'extension .h est créé: helloworld.h.

    Dans ce fichier une classe correspondant à notre fenêtre est déclarée. Cette classe s'appelle Ui_fenetrePrincipale aussi connue comme on le voit à la fin comme ui::fenetrePrincipale

    Cette classe dispose d'une méthode setupUi qui déclenche l'affichage de la fenêtre avec tout son contenu.

  6. La classe crée est intéressante, mais nous ne devons pas la modifier car elle est générée. Nous allons donc créer une classe dérivée de cette classe, elle en possédera toutes les méthodes, et on pourra rajouter les méthodes dont on a besoin.

    On ouvre donc gvim et on tape dans un nouveau fichier: helloworldIntelligente.h le code suivant:

    #include  <QMainWindow>
    #include "helloworld.h"
    
         class helloworldIntelligente: public QMainWindow, Ui::fenetrePrincipale
    {
    	Q_OBJECT
    		//constructeur
    	public:
    		helloworldIntelligente();
    		//les slots
    
    
    };
    

  7. Puis on va créer un nouveau fichier dans lequel on mettra l'implémentation du code de notre fenêtre intelligente appelons-le helloworldIntelligente.cpp. On y mettra le code suivant:
    #include "helloworldIntelligente.h"
    
    helloworldIntelligente::helloworldIntelligente():  fenetrePrincipale()
    {
    	setupUi(this);
    	//connexion des signaux aux slots
    	connect (action_Quitter, SIGNAL(toggled()),this,SLOT(close()));
    }		
    
  8. Il n'y a plus qu'à créer notre main.cpp
    /*
     * =====================================================================================
     *
     *       Filename:  main.cpp
     *
     *    Description:  helloworld qt4
     *
     *        Version:  1.0
     *        Created:  06.06.2007 07:58:30 CEST
     *       Revision:  none
     *       Compiler:  gcc
     *
     *         Author:   (gilles thomassin gthom@btsinfogap.org), 
     *        Company:  
     *
     * =====================================================================================
     */
    #include "helloworldIntelligente.h"
    #include <QApplication>
    int main (int argc, char ** argv)
    {
    	//je crée une fenêtre et je fais tourner
    	QApplication monApplication(argc,argv); 	//nécessaire
    	helloworldIntelligente maFenetrePrincipale;	//je crée une instance de ma classe  helloworldIntelligente
    	maFenetrePrincipale.show();			//je lui demande de se montrer
    	return monApplication.exec();			//execution de l'applic et renvoie de la valeur retournée
    }
    
  9. Nous allons maintenant créer automatiquement un projet qmake -project cette commande créera le fichier helloworld.pro.
  10. Puis nous allons créer un fichier makefile correspondant au .pro: qmake helloworld.pro.
  11. la compilation finale se fait ainsi: make.
  12. Il n'y a plus qu'à exécuter notre application: ./helloworld