Qt Designer se contrôle de la même façon que n'importe quelle application graphique. Pour démarrer Qt Designer sous Windows ouvrez le menu démarrer et déroulez Programmes|Qt X.x.x|Designer. (X.x.x représente le numéro de version de Qt, actuellement. 3.0.4.) Si vous utilisez un système Unix ou Linux, vous pouvez indifféremment double cliquer sur l'icône Qt Designer ou taper

designer & 

dans une fenêtre terminal.

Supposons que la librairie qt soit installée dans /usr/local/qt, vérifiez que dans votre fichier .bash_profile vous disposez bien des lignes suivantes :

QTDIR=/usr/local/qt
PATH=$QTDIR/bin:$PATH
MANPATH=$QTDIR/doc/man:$MANPATH
LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH
export QTDIR PATH MANPATH LD_LIBRARY_PATH

Lorsque vous avez terminé, pour quitter Qt Designer il suffit de cliquer Fichier|Quitter; on vous demandera alors si vous souhaitez enregistrer les modifications non enregistrées. L'aide apparaît en tapant F1 ou en allant dans le menu Aide.

Pour profiter au maximum des tutoriaux, nous vous recommandons de démarrer maintenant Qt Designer et de créer l'application exemple au fur et à mesure de la lecture. La plupart du travail consiste à utiliser les menus boites de dialogue et éditeurs de Qt Designer 's et nécessite très peu de code.

Quand vous démarrez Qt Designer , par défaut, vous voyez dans la partie supérieure de l'application une barre de menu ainsi que divers barres d'outils. Dans la partie gauche se trouvent 3 fenêtres, la première en partant du haut est la fenêtre des fichiers, la seconde est l'explorateur d'objets et la dernière l'inspecteur d'objets. La fenêtre "Fichiers" contient la liste des fichiers et images du projet en cours; pour ouvrir un formulaire, il suffit de cliquer sur le fichier correspondant dans la liste des fichiers. L'explorateur d'objet montre les composants du formulaire en cours d'édition ainsi que les slots associés(méthodes ou procédures). L'inspecteur d'objet quand à lui permet de visualiser et ou modifier les propriétés des formulaires ou des composants de toutes nature que vous y avez placé. Nous expliquerons le rôle des autres éléments de Qt Designer lorsque nous créeront les applications exemples.

Dans ce chapitre nous allons construire une application appelée 'multiclip' qui nous permettre de gérer les éléments contenus dans le presse papier.

Figure 2. L'application Multiclip

Quand vous créez une nouvelle application, il est fortement recommande de créer un fichier Projet et de l'ouvrir plutôt que de créer des fichiers individuels. Utiliser un projet permet de rendre tous les formulaires du projet accessibles via un simple clic sur le fichier correspondant. Un avantage supplémentaire, les projets permettent de stocker les images relatives à une application dans un seul fichier et donc de ne plus avoir à les stocker dans chaque fenêtre qui les utilise. Allez visiter le chapitre L'approche Designer et plus particulièrement la section Gestion des Projets pour obtenir davantage de détails sur les avantages liés à l'utilisation des fichiers projets.

Démarrez Qt Designer si ce n'est déjà fait. Cliquez Fichier|Nouveau pour ouvrir la boîte de dialogue Nouveau Fichier. Cliquez sur l'icône 'C++ Projet' , puis cliquez sur OK pour définir les préférences de votre projet. Vous devrez taper le nom du projet, et nous vous recommandons de placer chaque projet dans un répertoire qui lui sera réservé. Cliquez sur le bouton... pour ouvrir la boîte de dialogue Sauver Dans As et placez vous là ou vous souhaitez enregistrer le nouveau projet. Cliquez sur l'icône Création d'un Nouveau Répertoire dans la barre d'outils afin de créer le répertoire 'multiclip'. Double cliquez sur ce répertoire pour en faire le répertoire courant. Donnez lui le nom 'multiclip.pro', and cliquez sur le bouton Sauver. Le champ 'Fichier Projet' de la boîte de dialogue Paramètres du projet dispose maintenant du nom et du chemin d'accès de votre projet; cliquez alors sur OK pour créer le projet.

Figure 3. Créer un Nouveau Projet

Le nom du projet en cours doit maintenant apparaître dans la barre d'outils Fichiers qui se trouve en haut et à gauche par défaut. Puisque Nous disposons d'un projet, nous pouvons y ajouter des formulaires et commencer ainsi à construire notre application. (Allez voir Personnalisation de Qt Designer pour plus d'information sur la façon de modifier les fenêtre et barres d'outils de Qt Designer .)

Cliquez à nouveau sur Fichier|Nouveau pour ouvrir la boîte de dialogue Nouveau Fichier. Plusieurs types de formulaires sont proposés mais vous utiliserez le type boîte de dialogue simple, il vous suffit donc de cliquer sur OK. Un nouveau formulaire appelé 'Form1' apparaît alors. Remarquez que ce nouveau formulaire est maintenant listé dans la liste des fichiers et que l'inspecteur d'objets vous montre les propriétés par défaut du composant "Form1".

Cliquez la valeur correspond à la propriété "Name" pour donner au formulaire le nom de 'FormMulticlip'. Changer la propriété "caption" (titre) du formulaire en 'Multiclip'. Les propriétés ne sont pas triées et la propriété "caption se trouve approximativement au milieu de la liste.. Sauvez le formulaire: cliquez Fichiers|Sauver, tapez le nom 'multiclip.ui', et cliquez sur le bouton Sauver.

Figure 4. Créer un Nouveau Projet - Utiliser l'inspecteur d'objets

L'inspecteur d'objet dispose de deux colonnes: la colonne propriété qui contient le nom des propriétés et la colonne valeur qui contient les valeurs des propriétés du composant sélectionné. Certaines propriétés sont précédées du signe '+' dans un carré; cela signifie qu'il s'agit d'un groupe de propriétés portant sur un thème particulier. Cliquez sur le formulaire pour faire apparaître les propriétés de celui-ci. Cliquez alors sur le signe + à gauche de 'sizePolicy' ; vous allez voir apparaître 4 propriétés légèrement indentées par rapport é "sizePolicy": "hSizeType", "vSizeType", "horizontalStretch" et "verticalStretch". Ces propriétés peuvent être modifiées comme les autres.

Figure 5. Inspecteur d'objet

Certaines propriétés ont des valeurs simples, par exemple, la propriété name a une valeur de type chaîne de caractères, la propriété width (se trouvant dans le groupe minimumSize ) dispose quand à elle d'une valeur de type entier. Pour modifier une valeur de type texte, il suffit de cliquer dedans d'effacer le texte existant et de taper le nouveau texte. Pour modifier une valeur numérique cliquez sur la valeur et soit vous tapez la nouvelle valeur soit vous utilisez les boutons d'incrémentation décrémentation jusqu'à obtenir la valeur désirée. Certaines propriétés disposent quand à elles de listes de valeurs possibles, par exemple la propriété mouseTracking est du type boolean et peut donc avoir soit la valeur 'true' soit la valeur 'false'. Il en est de même pour la propriété cursor. Si vous cliquez sur la valeur de la propriété curseur une combobox va apparaître présentant les différents curseurs de souris disponibles; il suffit de cliquer sur le bouton 'bas' pour choisir son curseur préféré. D'autres propriétés disposent d'un ensemble de données complexe; par exemple la propriété font. Quand vous cliquez sur la propriété un bouton (points de suspension) (...) apparaît; cliquer sur ce bouton fait apparaître une boîte de dialogue Select Font qui vous permettra de changer la police de caractère ainsi que son style sa couleur etc.... Certaines propriétés disposent donc d'un éditeur spécifique, ainsi si vous avez beaucoup de texte à rentrer dans une propriété texte, vous pouvez obtenir l'éditeur multiligne correspondant en cliquant sur le bouton(...).

Les noms des propriétés dont la valeur a changée sont affichés en gras. Si malencontreusement vous avez modifié la valeur d'une propriété et souhaitez revenir à la valeur par défaut, vous pouvez cliquer sur le bouton 'X' rouge à droite de la propriété pour cela. Certaines propriétés ont une valeur initiale mais pas de valeur par défaut comme par exemple 'TextEdit1', dans ce cas , un click sur le 'X' rouge provoquera l'effacement de la valeur.<<Attention, il est des circonstances où le X rouge générera le plantage de QT Designer>>

Lorsque plusieurs composants sont sélectionnés, l'inspecteur d'objet montre les propriétés communes à tous. Le changement de la valeur d'une de ces propriétés provoquera la modifications des valeurs de tous les composants pour la propriété sélectionnée. L'inspecteur d'objets supporte les opérations annuler refaire (Ctrl+Z et Ctrl+Y, disponibles aussi dans le menu Édition).

L'application multiclip est constituée d'une zone de texte permettant d'afficher le contenu courant du presse-papier (s'il n'est pas vide) et d'une liste montrant les contenus précédents, il y a aussi un indicateur sur la taille du presse-papier, une case à cocher et plusieurs boutons. Si vous exécutez l'application et la redimensionnez tous les composants seront mis à l'échelle correctement, c'est grâce au 'layout' (outil de mise en page).

La méthode Qt Designer pour mettre en page un formulaire consiste à placer approximativement les composants sur le formulaire puis d'utiliser les outils de mise en page fournis pour les redimensionner et les aligner correctement. Nous allons maintenant ajouter les composants (widgets) à notre formulaire multiclip.

Tous les composants sont maintenant placés sur le formulaire, leurs propriétés ont été modifiées pour répondre aux besoins de l'application. Dans la section suivante nous allons utiliser les outils de mise en page de Qt Designer pour redimensionner et aligner correctement les composants.

Figure 6. Ajout de composants à un formulaire - Les éditeurs de Valeurs

Tandis que l'éditeur de propriétés s'utilise pour personnaliser les propriétés génériques des composants, les éditeurs de valeurs sont utilisés pour éditer les valeurs gérées par les instances des composants particuliers. Par exemple, un QLineEdit ne peut contenir qu'une seule ligne de texte, par contre une QListBox peut contenir un nombre variable d'éléments chacun pouvant être composé d'une ligne de texte, d'une image ou des deux à la fois. Pour ouvrir l'éditeur de valeurs correspondant à une instance de composant il faut double-cliquer sur le composant. (Vous pouvez aussi l'obtenir grâce au menu contextuel du composant(bouton droit)). Chaque composant (widget) dispose de son éditeur de valeurs. Voir le chapitre éditeurs de valeurs pour plus de détails.

Bien que Qt Designer montre une image assez fidèle de la présentation du formulaire en cours d'exécution, vous pouvez avoir un aperçu de son apparence avec différents gestionnaires de fenêtre. C'est utile notamment pour voir comment les composants réagissent lors d'un redimensionnement du formulaire, ou pour voir comment opère un splitter etc... Si vous développer pour plusieurs plateformes, il faut tester l'apparence d'un formulaire sous ces différents environnements.

Pour voir un aperçu cliquez sur Aperçu|Aperçu de la fenêtre ou tapez Ctrl+T. Pour quitter le mode aperçu fermez la fenêtre de pré-visualisation. Pour avoir un aperçu sous différents systèmes cliquez sur l'option correspondante au système dans le menu Aperçu.

Réalisez un aperçu du formulaire multiclip et testez le fonctionnement du splitter, testez aussi la réduction et l'agrandissement du formulaire. Vous avez dû certainement déplacer le splitter vers la droite pour réduire la largeur des boutons. Le splitter semblait être une bonne idée, mais en pratique, il est préférable de réserver à  ce genre de composant une largeur fixe correspondant au minimum nécessaire. Comme QT Designer permet une modification somme toute assez facile, nous allons modifier la mise en page immédiatement.

Figure 15. Aperçus de Multiclip

Cliquez sur le splitter puis cliquez sur le bouton Casser la mise en page de la barre d'outils, le splitter est alors enlevé. Maintenant cliquez sur le formulaire, vers le bas, étendez le zone de sélection pour qu'elle englobe la boîte liste et les boutons. Cliquez ensuite sur répartir horizontalement de la barre d'outils. Cliquez ensuite sur la forme elle-même et cliquez sur répartir horizontalement. Le formulaire est maintenant mis en page correctement, essayez un aperçu en tapant Ctrl+T et essayez d'agrandir ou réduire la fenêtre.

Il serait utile d'expérimenter d'avantage le système de layout. Sa mise en place est visuelle et on apprends mieux en pratiquant.Pour enlever une layout, il suffit de cliquer sur le bouton Break Layout de la barre d'outils; pour mettre en place une layout on sélectionne les groupes ou widgets concernés puis on clique sur un des boutons de mise en page. N'hésitez pas à vous servir souvent de l'aperçu et ainsi vous rendre compte des changements que vous avez opéré.

Faisons maintenant une expérience pour comprendre comment marchent les layouts. Cliquez sur la boîte liste, puis tapez Ctrl+B (cassez la mise en page ). Cliquez sur un des boutons et tapez Ctrl+B. Cliquez quelque part en bas du formulaire et sans relâcher la pression sur le bouton de la souris remonter jusqu'à ce que tous les widgets soient en contact avec la zone de sélection ainsi formée ( excluez toutefois le label "contenu en cours" et la zone d'édition currentLineEdit ); . Tapez Ctrl+G (aligner dans une grille). Cliquez sur le formulaire , puis cliquez Ctrl+L (aligner verticalement ). La mise en page initiale est revenue -- mais cette fois en utilisant une layout du type grille.

Les utilisateurs qui utilisent le clavier tapent la touche Tab pour passer d'une zone de saisie à  la suivante. L'Ordre dans lequel les zones de saisie doivent être remplies s'appelle l'ordre de tabulation. Faites un aperçu de multiclip (tapez Ctrl+T) essayez de tabuler entre les différentes zones de saisie. Il se peut que l'ordre de tabulation ne corresponde pas à  vous souhaits, il est possible de le modifier.

Lorsque vous cliquez sur le bouton Ordre de Tabulation de la barre d'outils, un disque bleu apparaît vis à  vis de chaque zone interactive. Les numéros dans les disques sont le numéro d'ordre de saisie du composant dans le formulaire. Vous modifiez l'ordre de tabulation en cliquant les composants dans l'ordre où ils devront être saisis. Si vous vous trompez et que vous devez recommencer, double cliquez le widget qui doit être saisi en premier, puis cliquez sur les suivants dans le bon ordre. Quand c'est terminé tapez la touche Esc/Echap pour quitter le mode ordre de tabulation.

Cliquez sur le bouton Ordre de tabulation de la barre d'outils, puis cliquez sur le lineedit même si il a déjà  le numéro un. Puis cliquez dans l'ordre sur la listbox, la case à  cocher puis les boutons de haut en bas. Tapez la touche Echap du clavier quand c'est terminé.

Figure 16. Définir l'ordre de tabulation

Qt fournit un mécanisme de signaux et slots pour permettre la communication entre les composants. Un signal est un événement, un slot est une action. Les signaux sont émis par les composants, lorsqu'un événement particulier se produit. Nous pouvons connecter les signaux à  des slots, que ceux-ci soient prédéfini, ou que vous les ayez créé vous-même (Pour de plus amples explications sur le mécanisme signaux, slots de QT voir la documentation en ligne Signaux et Slots .)

Connecter des signaux prédéfinis à  des slots

Certaines des fonctionnalités de l'application peuvent être obtenues simplement en connectant des signaux prédéfinis à  des slots également prédéfinis. Dans notre application multiclip, il n'y a qu'une seule connexion prédéfinie que l'on peut utiliser, mais dans l'application qui suivra Créer une fenêtre principale avec des actions, des menus et des barres d'outilson en utilisera beaucoup de façon à  coder le moins possible.

Nous allons nous contenter ici de connecter le signalclicked() du bouton Quitter au slot accept() du formulaire. Le slot accept() est le slot qui averti celui qui a invoqué le dialogue que le dialogue est terminé; comme notre dialogue est ici notre fenêtre principale, cela fermera l'application. Faîtes un aperçu du formulaire (en tapant Ctrl+T); et cliquez sur le bouton Quitter. Le bouton marche, mais rien ne se passe. Tapez Esc ou fermez la fenêtre aperçu.

Cliquez sur le bouton Connecter Signaux/Slots de la barre d'outil. Cliquez sur le bouton Quitter dans le formulaire, faîtes glisser, relâchez sur le formulaire. La boîte de dialogue Éditer les Connections va apparaître. La liste de gauche permet de choisir les signaux que le composant que vous avez sélectionné est capable d'émettre. La liste de droite quand à  elle vous propose les slots qui peuvent recevoir le signal en question. La combobox en haut vous montre les composants de la forme, elle contient normalement multiclipform puisque vous avez relâché la souris sur elle. Notez que ne sont montrés dans la liste de droite que des slots compatibles avec le signal sélectionné, si vous sélectionnez le signal toggled(), la liste des slots candidats à  la connexion sera différente. Dans notre application nous souhaitons connecter le signal clicked() du bouton Quitter au slot accept() de multiclipform, sélectionnez les donc et cliquez sur connecter, la connexion va apparaître dans la grille du bas. Cliquez sur OK pour fermer la boîte de dialogue.

Figure 17. Connecter le signal clicked() au slot accept()

Nous réaliserons beaucoup de connections signal/slot au cours de nos travaux sur les exemples, y compris des connexions vers des slots que l'on aura développé nous-mêmes. Les connections Signal/slot connections (qui utilisent des signaux et des slots prédéfinis) marchent dans le mode aperçu. Tapez Ctrl+T pour obtenir un aperçu du formulaire; cliquez le bouton Quitter. Cela devrait fermer le formulaire.

Certaines des fonctionnalités de l'application peuvent être obtenues simplement en connectant des signaux prédéfinis à des slots également prédéfinis. Dans notre application multiclip, il n'y a qu'une seule connexion prédéfinie que l'on peut utiliser, mais dans l'application qui suivra Créer une fenêtre principale avec des actions, des menus et des barres d'outils on en utilisera beaucoup de façon à coder le moins possible.

Nous allons nous contenter ici de connecter le signal clicked() du bouton Quitter au slot accept() du formulaire. Le slot accept() est le slot qui averti celui qui a invoqué le dialogue que le dialogue est terminé; comme notre dialogue est ici notre fenêtre principale, cela fermera l'application. Faîtes un aperçu du formulaire (en tapant Ctrl+T); et cliquez sur le bouton Quitter. Le bouton marche, mais rien ne se passe. Tapez Esc ou fermez la fenêtre aperçu.

Cliquez sur le bouton Connecter Signaux/Slots de la barre d'outil. Cliquez sur le bouton Quitter dans le formulaire, faîtes glisser, relâchez sur le formulaire. La boîte de dialogue Éditer les Connections va apparaître. La liste de gauche permet de choisir les signaux que le composant que vous avez sélectionné est capable d'émettre. La liste de droite quand à elle vous propose les slots qui peuvent recevoir le signal en question. La combobox en haut vous montre les composants de la forme, elle contient normalement multiclipform puisque vous avez relâché la souris sur elle. Notez que ne sont montrés dans la liste de droite que des slots compatibles avec le signal sélectionné, si vous sélectionnez le signal toggled(), la liste des slots candidats à la connexion sera différente. Dans notre application nous souhaitons connecter le signal clicked() du bouton quitter au slot accept() de multiclipform, sélectionnez les donc et cliquez sur connecter, la connexion va apparaître dans la grille du bas. Cliquez sur OK pour fermer la boîte de dialogue.

Figure 18. Connecter le signal clicked() au slot accept()

Nous réaliserons beaucoup de connections signal/slot au cours de nos travaux sur les exemples, y compris des connexions vers des slots que l'on aura développé nous-mêmes. Les connections Signal/slot connections (qui utilisent des signaux et des slots prédéfinis) marchent dans le mode aperçu. Tapez Ctrl+T pour obtenir un aperçu du formulaire; cliquez le bouton Quitter. Cela devrait fermer le formulaire.

Dans la première version de Qt Designer vous pouviez créer les en-têtes de vos propres slots et réaliser les connections, mais vous ne pouviez pas les implémenter (tapez les instructions qui composent le slot). Il fallait créer une classe dérivée du formulaire et coder les slots de la classe dérivée. Cette façon de faire est toujours possible et prend encore tout son sens dans certaines situations. Mais à partir de la version 3 de QT vous pouvez maintenant tapez votre code directement dans les slots, ainsi pour beaucoup de fenêtre et boîtes de dialogue, la dérivation de classe ne sera plus utile.(Qt Designer stocke les slots avec leur code dans le fichier .ui.h ; voir La méthode.ui.h dans le chapitre L'Approche Designer pour plus d'information sur ces fichiers.)

L' application multiclip nécessite quatre slots , un pour chaque bouton, Comme on a déjà connecté le bouton quitter, il ne nous reste que trois slots personnalisés à développer. Il nous faut donc un slot correspondant au clic sur le bouton ajouter contenu; lors d'un clic sur ce bouton, le contenu courant sera ajouté à la liste des contenus. Au bouton Copier Précédent correspondra un slot qui va copier l'élément sélectionné de la liste dans la zone de texte contenu courant (et dans le presse-papier). Le bouton Supprimer permettra quand à lui de supprimer soit le contenu courant du presse-papier soit un élément de la liste. Nous auront aussi besoin d'un peu de code de façon à ce que lors du lancement de l'application, notre zone contenu courant contienne le contenu effectif du presse-papier. Le code sera écrit directement dans QT Designer, les instructions seront enregistrées dans le fichier multiclip.ui.h.

Nous allons avoir besoin de l'objet global clipboard de Qt object que l'on obtient soit par QApplication::clipboard() soit par qApp->clipboard() (cela dépend de l'endroit où l'on se trouve). Afin d'appeler les différentes méthodes qu'il propose, nous conserverons dans notre formulaire un pointeur vers cet objet. Cliquez sur l'onglet source de l'explorateur d'objet,(Si l'explorateur d'objet n'est pas visible, cliquez Fenêtres|Vues|Explorateur d'Objet.) L'onglet source vous montre les fonctions du formulaire, les variables de classe, les déclarations externes, et les noms des fichiers include.

Cliquez avec le bouton droit sur l'élément Variables de classe (se trouve vers le bas, il se peut que vous ayez à utiliser l'ascenseur), cliquez alors sur Nouveau dans le menu contextuel. Tapez alors la déclaration suivante: 'QClipboard *cb;' et validez en tapant la touche Entrée du clavier. Voilà nous avons donc créé une variable de classe appelée cb pointeur vers une instance de la classe Qclipboard. Dans la méthode init() du formulaire que nous allons créer, nous ferons pointer cb sur l'objet global clipboard de QT. Afin de rendre disponible la classe Qclipboard, il nous faudra inclure le fichier .h correspondant. Cliquez avec le bouton droit sur l'élément Includes (dans la Déclaration), et cliquez sur l'élément Nouveau du menu contextuel. Tapez '<qclipboard.h>' and tapez Entrée. Comme nous devons aussi nous référer à l'objet global application qApp: on doit ajouter le fichier include correspondant: '<qapplication.h>' mais cette fois dans l'élément include dans l'implémentation. La variable et les déclarations vont être inclues dans le code généré par Qt Designer dans le fichier .ui.

Nous allons invoquer l'éditeur de code de Qt Designer et taper les instructions.

Nous allons commencer par créer la méthode init(). Une des façons d'ouvrir l'éditeur de code est de cliquer sur l'onglet source de l'explorateur d'objet puis de cliquer sur le nom de la méthode que l'on souhaite éditer. Si vous n'avez pas encore de fonction ou souhaitez en créer une nouvelle, vous devez utiliser l'onglet source. Cliquez avec le bouton droit sur l'élément 'protecteur' dans la liste des slots de l'onglet source, puis cliquez Nouveau dans le menu contextuel cela ouvre la boîte de dialogue Édition des Slots. Changer le nom du slot 'newSlot' en 'init()' et cliquez OK. L'éditeur apparaît et vous pouvez y taper votre code.(quelques éléments : init() est une méthode de la classe QmulticlipForm, init() est protégée elle ne pourra pas être appelée que depuis une méthode de l'objet lui-même).

Notez que vous n'êtes pas obligé d'utiliser l'éditeur de code de Qt Designer; pensez bien par contre à ajouter, supprimer, renommer vos slots en utilisant Qt Designer et jamais "à la main". Si vous utilisez un autre éditeur, ne modifiez que les instructions à l'intérieur des méthodes. Qt Designer préservera le code que vous avez tapé.

    void FormMulticlip::init()
    {
        lengthLCDNumber->setBackgroundColor( darkBlue );
        currentLineEdit->setFocus();

        cb = qApp->clipboard();
        connect( cb, SIGNAL( dataChanged() ), SLOT( dataChanged() ) );
        if ( cb->supportsSelection() )
            connect( cb, SIGNAL( selectionChanged() ), SLOT( selectionChanged() ) );

        dataChanged();
    }

La première ligne modifie la couleur de fond du composant lengthLCDNumber, on aurait pu le faire aussi à la conception. La deuxième ligne donne le focus au composant currentLineEdit. On fait pointer cb vers l'instance qApp->clipboard(). Puis nous connectons le slot dataChanged()de notre formulaire au signal datachanged de cb. On créera nous-mêmes ce slot datachanged bientôt. Si le presse-papier supporte la sélection (comme sous le système X Window), on peut aussi connecter le signal selectionChanged() du presse-papier au slot du même nom de notre formulaire que nous créerons plus tard. Enfin on exécute le slot dataChanged() de notre formulaire pour faire apparaître dans la zone de saisie contenu courant, le contenu du presse-papier lors du lancement de l'application.

Nous avons fait référence à deux slots : dataChanged() et selectionChanged() et nous allons donc les coder, commençons par dataChanged().

    void FormMulticlip::dataChanged()
    {
        QString text;
        text = cb->text();
        clippingChanged( text );
        if ( autoCheckBox->isChecked() )
            addClipping();
    }

On met dans une variable locale text le contenu du presse-papier, et on appelle notre slot clippingChanged() en lui passant en paramètre le contenu du presse-papier. Si la case ajout auto est cochée, on appelle le slot addClipping() pour ajouter le contenu courant du presse-papier à la boîte liste.

Le code qui suit s'applique uniquement à X Window. Les utilisateurs de Microsoft Windows peuvent tout de même inclure ce code pour être sûr que leur application tournera sur toutes les plateformes.

    void FormMulticlip::selectionChanged()
    {
        cb->setSelectionMode( TRUE );
        dataChanged();
        cb->setSelectionMode( FALSE );
    }

On dit au presse-papier d'utiliser le mode de sélection, et on appelle le slot dataChanged() pour récupérer le texte sélectionné, puis on remet le presse-papier dans son mode de sélection par défaut.

Codons maintenant un autre de nos slots, clippingChanged().

    void FormMulticlip::clippingChanged(  QString  clipping )
    {
        currentLineEdit->setText( clipping );
        lengthLCDNumber->display( (int)clipping.length() );
    }

On met la bonne valeur dans la zone de texte contenu courant et on met à jour la taille en lui donnant la longueur (en caractère) de la chaîne.

Le prochain slot que nous allons coder va répondre à l'ajout de contenu dans la liste. Ce slot est appelé en interne par le slot dataChanged() implémenté ci-dessus), il est aussi appelé lorsque l'utilisateur clique sur le bouton Ajouter contenu. Comme nous souhaitons que Qt Designer soit capable de réaliser une connexion entre le signal clicked du bouton et le slot en question, nous laisseront Qt Designer créer le squelette du slot pour nous. Cliquez sur Éditer|Slots pour ouvrir la boîte de dialogue d'édition des slots. Cliquez sur Nouveau Slot et remplacez le nom par défaut 'new_slot()' par 'addClipping()'. Pas besoin de changer le mode d'accès ou le type de la valeur renvoyée. Maintenant que nous avons créé le slot nous pouvons en taper les instructions puisque l'éditeur est maintenant visible.

Le bouton ajouter contenu est utilisé pour copier le contenu courant dans la boîte liste, on mettra à jour aussi la taille du contenu du presse-papier.

    
void FormMulticlip::addClipping()
    {
        QString text = currentLineEdit->text();
        if ( ! text.isEmpty() ) {
            lengthLCDNumber->display( (int)text.length() );
            int i;
            for (i=0 ; i < (int)clippingsListBox->count(); i++ ) {
                if ( clippingsListBox->text( i ) == text ) {
                    i = -1; // Do not add duplicates
                    break;
                }
            }
            if ( i != -1 )
                clippingsListBox->insertItem( text, 0 );
        }
    }

Si le texte n'est pas vide, on change la valeur du LCD. Puis nous regardons dans la liste si le texte n'est pas présent. Si le texte n'est pas présent, on l'ajoute à la liste.

Il va falloir maintenant connecter le signal clicked() du bouton Ajoute contenu à notre slot addClipping(). Cliquez sur le bouton Connecter Signals/Slots de la barre d'outils. Cliquez sur le bouton Ajoute contenu, glissez jusqu'au formulaire et relâchez le bouton de la souris. (assurez-vous d'avoir bien relâché sur le formulaire et non sur un composant du formulaire. Si vous vous êtes trompé, sélectionnez multiclipform dans la combobox.) La boîte de dialogue éditer les connections va apparaître. Cliquez sur le slot addClipping(). Cliquez sur connecter puis OK pour confirmer la connexion.

Le bouton Copier Précédent est utilisé pour placer un contenu précédent aussi bien dans la zone d'édition que dans le presse-papier. La marche à suivre est la même que pour le bouton Ajouter Contenu: d'abord on crée le slot, ensuite on l'implémente et finalement on connecte le slot au signal clicked() du bouton :

De la même manière occupons-nous du bouton Effacer Contenu.

Nous avons créé approximativement 99% du code avec Qt Designer. Pour pouvoir compiler et exécuter notre application il faut créer un fichier main.cpp depuis lequel nous appellerons notre formulaire.

La façon la plus simple de créer un fichier source est de cliquer Fichier|Nouveau pour ouvrir la boîte de dialogue 'Nouveau Fichier' , cliquez ensuite sur 'C++ Source' or 'C++ Header' en fonction des besoins et cliquez sur OK. Une nouvelle fenêtre de source apparaîtra. Cliquez Fichier|Enregistrer sous pour obtenir la boite de dialogue enregistrer sous , entrer 'main.cpp', et cliquez Sauver.

Tapez le code suivant dans la fenêtre d'édition du main.cpp :

 #include <qapplication.h>
 #include "/home/designer/multiclip/.ui/formmulticlip.h"

    int main( int argc, char *argv[] )
    {
        QApplication  app( argc, argv );

        FormMultiClip clippingForm;
        app.setMainWidget( &clippingForm );
        clippingForm.show();

        return app.exec();
    } 

Le programme instancie la classe QApplication ainsi que la classe FormMulticlip , définit le formulaire comme composant principal de l'application et le rend visible. L'appel de la méthode exec() de notre application app.exec() déclenche la boucle de traitement des événements.

Démarrez maintenant un terminal (ou xterm), placez vous dans le répertoire qui contient votre projet et tapez qmake. Un fichier Makefile compatible avec votre système va être généré.

qmake -o Makefile multiclip.pro

Vous pouvez désormais compiler votre application en utilisant par exemple make or nmake. Si la compilation se passe bien, vous obtenez un exécutable du nom de multiclip que vous pouvez exécuter. Il y a beaucoup d'améliorations possibles qui vont vous aider à en apprendre plus sur QT et QT Designer.

Ce chapitre était une introduction à la création d'applications multi-plateformes avec Qt Designer. Nous avons créé un formulaire puis y avons placé des composants, les avons mis en page. Nous avons utilisé le mécanisme signal/slot, avons tapé notre code puis avons compilé notre application. Les chapitres suivants vous présenteront davantage d'exemples sur l'utilisation de Qt Designer.