Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Version 006 Tutoriel Glade, développement de programmes graphiques Auteur : Jea

Version 006 Tutoriel Glade, développement de programmes graphiques Auteur : Jean-Louis Gutzwiller. Dernière modification : 16 février 2011 Jean-Louis.Gutzwiller@supelec.fr - 2 / 46 - Table des matières 1 Introduction ....................................................................................................................................5 1.1 Introduction .............................................................................................................................5 1.2 Les librairies graphiques .........................................................................................................5 1.3 Principe de Glade ....................................................................................................................5 2 Utilisation de Glade pour décrire une fenêtre .................................................................................6 2.1 Lancement du programme Glade ............................................................................................6 2.2 Une fenêtre simple avec une barre de menu ...........................................................................6 2.2.1 Création de l'apparence de la fenêtre ..............................................................................6 2.2.2 Écriture d'un programme en C pour tester la fenêtre ....................................................11 2.3 Association d'une fonction aux événements .........................................................................13 2.3.1 Introduction ...................................................................................................................13 2.3.2 Écriture d'une fonction pour gérer les événements .......................................................13 2.3.3 Association des fonctions avec la fenêtre ......................................................................13 3 Glade et Gtk ..................................................................................................................................15 3.1 Objets et signaux ...................................................................................................................15 3.2 Fonctions associées ...............................................................................................................15 3.3 Association d'une fonction à un signal pour un objet donné .................................................16 3.4 Association d'une fonction à un signal depuis le fichier glade .............................................16 4 Quelques exemples d'objets courants ...........................................................................................17 4.1 Introduction ...........................................................................................................................17 4.2 Les conteneurs ......................................................................................................................17 4.2.1 Introduction ...................................................................................................................17 4.2.2 Vertical box ...................................................................................................................18 4.2.3 Horizontal box ...............................................................................................................18 4.2.4 La barre de menu ...........................................................................................................18 4.3 Les contrôles et afficheurs ....................................................................................................19 4.3.1 Introduction ...................................................................................................................19 4.3.2 Les items de menus .......................................................................................................19 4.3.2.1 Introduction ...........................................................................................................19 4.3.2.2 La fonction d'événement .......................................................................................20 4.3.2.3 Association de la fonction d'événement ................................................................20 4.3.3 Bouton de fermeture de la fenêtre .................................................................................20 4.3.3.1 Introduction ...........................................................................................................20 4.3.3.2 La fonction d'événement .......................................................................................20 4.3.3.3 Association de la fonction d'événement ................................................................21 4.3.4 Bouton à cliquer ............................................................................................................21 4.3.4.1 Introduction ...........................................................................................................21 4.3.4.2 Placer un bouton ....................................................................................................21 4.3.4.3 Fonction d'événement ............................................................................................22 4.3.4.4 Association de la fonction d'événement ................................................................22 4.3.5 Zone de texte modifiable ...............................................................................................22 4.3.5.1 Introduction ...........................................................................................................22 4.3.5.2 Placer une zone de texte modifiable ......................................................................22 4.3.5.3 Fonction d'événement ............................................................................................22 4.3.5.4 Association de la fonction d'événement ................................................................23 4.3.6 Zone de dessin libre ......................................................................................................23 4.3.6.1 Introduction ...........................................................................................................23 4.3.6.2 Placer une zone de dessin libre ..............................................................................24 - 3 / 46 - 4.3.6.3 Fonction de dessin .................................................................................................24 4.3.6.4 Association de la fonction de dessin ......................................................................25 4.3.6.5 Modification du contenu de la fenêtre graphique ..................................................25 4.3.6.6 Taille de la zone de dessin .....................................................................................26 5 Les dialogues ................................................................................................................................28 5.1 Introduction ...........................................................................................................................28 5.2 Dialogue modal .....................................................................................................................28 5.2.1 Création d'une fenêtre de dialogue modal .....................................................................28 5.2.2 Sous-programme de gestion ..........................................................................................29 5.2.2.1 Accès au fichier Glade depuis la routine de gestion du dialogue ..........................29 5.2.2.2 Fonction de gestion ...............................................................................................29 5.2.3 Dialogue modal « à propos de » ....................................................................................31 5.2.3.1 Introduction ...........................................................................................................31 5.2.3.2 Version simple .......................................................................................................32 5.2.3.3 Version complète ...................................................................................................32 5.3 Dialogue non modal, fenêtre secondaire ...............................................................................33 5.3.1 Introduction ...................................................................................................................33 5.3.2 Routine de gestion .........................................................................................................33 6 Documents multiples ....................................................................................................................35 6.1 Introduction ...........................................................................................................................35 6.2 Création d'un nouveau document par la méthode multi-processus .......................................36 6.3 Multiples documents dans une application mono-processus ................................................36 6.3.1 Principe des documents multiples .................................................................................36 6.3.2 Fermeture d'un document ..............................................................................................37 7 Divers ...........................................................................................................................................38 7.1 Taille par défaut de la fenêtre ................................................................................................38 7.2 Trouver le fichier glade .........................................................................................................38 7.2.1 Introduction ...................................................................................................................38 7.2.2 Connaître le dossier de l'application et trouver un fichier ............................................39 7.2.3 Les sources de ces fonctions .........................................................................................39 7.2.4 Compilation ...................................................................................................................44 7.3 Détacher la console ...............................................................................................................44 7.3.1 Introduction ...................................................................................................................44 7.3.2 Détacher la console sur Windows .................................................................................45 7.3.2.1 Démarrer un programme sans console ..................................................................45 7.3.2.2 Démarrer un programme avec une console, puis détacher la console ...................45 7.3.3 Détacher la console sur Linux .......................................................................................46 7.3.4 Programme fonctionnant à la fois sous Windows et sous Linux ..................................46 - 4 / 46 - 1 Introduction 1.1 Introduction Ce document décrit l'utilisation de Glade pour réaliser des applications avec interface graphique. Les fonctions graphiques sont basées sur GTK, la librairie graphique disponible sur Linux et sur Windows. 1.2 Les librairies graphiques Les librairies utilisées pour la réalisation d'applications graphiques sont les suivantes : – gtk : librairies de niveau le plus élevé pour les interfaces graphiques – gdk : librairies pour les applications graphiques et événementielles – gdk-pixbuf : pour les images au format pixels – gobject : pour la fabrication d'objets dans un langage non objet (langage C) – glib : bibliothèque à usage général – cairo : pour le dessin vectoriel – pango : pour les jeux de caractères Les documentations de ces librairies sont consultables aux adresses suivantes1, directement accessible par la page « http://www.gtk.org/documentation.html » : – gtk : http://library.gnome.org/devel/gtk/stable/ – gdk : http://library.gnome.org/devel/gdk/stable/ – gdk-pixbuf : http://library.gnome.org/devel/gdk-pixbuf/stable/ – gobject : http://library.gnome.org/devel/gobject/stable/ – glib : http://library.gnome.org/devel/glib/stable/ – cairo : http://cairographics.org/manual/ – pango : http://library.gnome.org/devel/pango/stable/ – atk : http://library.gnome.org/devel/atk/stable/ 1.3 Principe de Glade Un logiciel de création de fenêtre, « Glade » permet de décrire (graphiquement) dans un fichier au format xml le contenu d'une fenêtre. Le programme en C active cette fenêtre et assure automatiquement le comportement souhaité. Le contenu de la fenêtre décrit en xml n'est pas traduit en C, mais le programme en C lira la définition de la fenêtre depuis ce fichier à chaque fois qu'il est activé. 1 Notons que l'installation de ces bibliothèques sur un ordinateur en installe également la documentation en local. - 5 / 46 - 2 Utilisation de Glade pour décrire une fenêtre 2.1 Lancement du programme Glade En principe, si le programme est installé correctement, il peut être lancé depuis le menu de démarrage de la machine. – Sous Windows : démarrer → programme → Glade 3 → Glade – Sous Linux : application → programmation → concepteur d'application glade La version actuelle du programme est 3.6.X. Notons que cette version est disponible sur Fedora à partir de la version 12 de Fedora. Les exemples de ce document ont été testés sur les deux versions Windows et Linux. Au lancement du programme, une fenêtre demande des options préalables qu'il convient de régler comme sur la figure 1, ci-dessous. Figure 1 : lancement du programme Glade 2.2 Une fenêtre simple avec une barre de menu 2.2.1 Création de l'apparence de la fenêtre Dans ce premier exemple, nous allons montrer que les éléments prévus dans la fenêtre sont bien actifs dans le sens où on peut cliquer dessus et effectuer des opérations, mais ces éléments - 6 / 46 - n'interagissent pas avec le programme. Figure 2 : document vide Après le choix de l'option précédente, nous sommes en présence d'un document vide comme montré sur la figure 2, ci-dessus. Nous allons maintenant entrer la description de la fenêtre que nous souhaitons obtenir. Dans la zone indiquée « choix du type de fenêtre », choisir le premier item (en haut à gauche) : « window ». Notons que cette zone contient des types de fenêtres déjà préréglés comme pour le choix d'une couleur ou d'un jeu de caractère. Le premier type, que nous utilisons ici, est celui habituellement utilisé pour la fenêtre principale de l'application. Figure 3 : fenêtre d'application Nous allons placer dans cette fenêtre un menu contenant deux items : « action » et « quitter ». Pour - 7 / 46 - Choix du type de fenêtre En cliquant ici, on fait apparaître la zone de la fenêtre d'application. Remarquer ici la hiérarchie des objets de la fenêtre. pouvoir placer des items dans une fenêtre, on commence en général par découper cette fenêtre en zones indépendantes, chacune des zones pouvant contenir un item. Dans une application standard, la fenêtre sera découpée verticalement en deux zones, celle du haut pour le menu et celle du bas pour le contenu effectif à placer par l'application2. Pour obtenir le découpage en zones indépendantes, on utilise des « boxes », ici « vertical box ». Figure 4 : insertion d'une box verticale On obtient le résultat suivant (figure 5). Figure 5 : la fenêtre est découpée en deux zones (verticalement) Choisir maintenant le bouton d'ajout de menu et cliquer dans la fenêtre (dans la zone du haut). 2 Notons que chacune de zones peut ensuite être redécoupée. - 8 / 46 - Cliquez ici, puis cliquez dans la fenêtre pour faire apparaître le dialogue permettant de choisir le nombre de zones. Choisir la valeur 2 avant de valider. Remarquer ici la hiérarchie des objets de la fenêtre. Cliquez ici, puis dans la fenêtre pour ajouter un menu. Figure 6 : le menu a été ajouté Avec le bouton de droite (menu contextuel), supprimer les items que vous ne souhaitez pas conserver. Figure 7 : modification du menu - 9 / 46 - Cliquez sur les petits « + » pour afficher le détail des items. Naviguer ensuite dans la hiérarchie pour voir les items individuels : Figure 8 : items du menu Note : le menu par défaut propose des items préprogrammés sous forme d'images. Il semble qu'il soit difficile d'en modifier le nom. Si vous souhaitez utiliser d'autres noms, le plus simple est de supprimer tous les items, puis d'en insérer des nouveaux. Le champ « label » permet alors de donner le nom sous lequel l'item apparaît dans le menu. Pour ajouter de nouveaux items dans un menu vide, cliquez avec le bouton de droite sur le menu, puis choisissez « edit ». Cliquez ensuite sur l'onglet « hierarchie », puis sur le bouton « ajouter ». Figure 9 : dialogue pour ajouter un item à un menu - 10 / uploads/Litterature/ glade-debutant-pdf.pdf