Aller au menu - Aller au contenu

Icône Les widgets (Partie 1)

Avatar
Par Avatar antoyo et Kivutar
Mise à jour : 31/07/2009
Difficulté : Facile Facile Creative Commons BY-NC-SA
808 visites depuis 7 jours, dont 153 sur ce chapitre classé 153/786
Bienvenue dans la deuxième partie de ce cours. Vous y verrez de nombreux widgets et vous ferrez vos premiers TP avec PyGtk. Au programme, un éditeur de texte et un navigateur web. C'est maintenant que les choses sérieuses commencent !
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Les fenêtres

Présentation



gtk.Window est une fenêtre de base, celle que nous avons utilisée dans notre application "Hello World!".
Elle est assez simple d'utilisation, et ne peut contenir qu'un seul widget enfant.

Construction



Pour créer une gtk.Window, on procède de cette façon :

Code : Python
1
fenetre = gtk.Window(type=gtk.WINDOW_TOPLEVEL)


Ici on a spécifié le type de notre fenêtre à la valeur gtk.WINDOW_TOPLEVEL, ce qui est le bon choix dans la grande majorité des cas. Cependant, comme c'est la valeur par défaut de la classe, il est inutile de préciser ce paramètre. À titre d'information, sachez juste qu'on peut aussi créer des fenêtres de type gtk.WINDOW_POPUP qui sont un peu spéciales. Ce type peut correspondre par exemple à une infobulle (les infobulles sont des fenêtres affichant des informations au survol de la souris). Il peut aussi correspondre à des splash screen.

Méthodes



Voici le genre d'actions qu'on peut effectuer sur une gtk.Window :

Code : Python
1
2
3
4
5
6
7
8
fenetre.set_title("Un titre") # change le titre de la fenêtre (il est bien entendu inutile de mettre un titre à une splash screen)
fenetre.move(x, y) # deplace la fenêtre aux coordonnées (x, y) de l'écran
fenetre.set_position(gtk.WIN_POS_CENTER) #Place la fenêtre au centre de l'écran. Choix posibles: gtk.WIN_POS_CENTER, gtk.WIN_POS_MOUSE, gtk.WIN_POS_CENTER_ALWAYS, gtk.WIN_POS_CENTER_ON_PARENT (respectivement: Centré, à la position de la souris, Toujours centré, Centré sur le parent)
fenetre.resize(largeur, hauteur) # redimentionne la fenêtre en hauteur et largeur specifiés
fenetre.set_default_size(largeur, hauteur) #Indique les dimensions par défaut
fenetre.add(enfant) # ajoute un widget enfant dans la fenêtre
fenetre.set_icon_from_file("icone.png") #Spécifie une icône pour la fenêtre (en haut à gauche)
fenetre.maximize() #Donne à la fenêtre la taille maximale qu'elle peut avoir (maximizer)


Vous trouverez la liste de ces méthodes dans la documentation de gtk.Window. Il est très important d'apprendre à lire cette documentation. En général, on ne se sert que d'une petite partie des méthodes disponibles pour interagir avec un widget, à vous de trouver celles dont vous avez besoin. Les noms des méthodes sont assez évocateurs, et une description détaillée de chaque méthode est là pour vous servir de mode d'emploi.

Bien sûr, il ne faut pas oublier de lier la fenêtre à un signal pour fermer le programme lors de la fermeture de la fenêtre, de l'afficher et de lancer la boucle du programme:
Code : Python
1
2
3
fenetre.connect("destroy", gtk.main_quit) #Si la fenêtre est détruite, on ferme le programme
fenetre.show() #Affichage du widget fenetre (utiliser la méthode show_all() si la fenêtre a un enfant)
gtk.main() #Boucle principale


Avec Glade


Je vais vous montrer comment changer quelques propriétés d'une fenêtre avec le concepteur d'interface Glade.
Tout ce qui suit se trouve sous l'onglet Général.
Premièrement, vis-à-vis Type de la fenêtre :, vous pouvez choisir de créer une fenêtre Popup (par exemple, pour les splashscreens) ou une de niveau supérieur (fenêtre normale).
Deuxièmement, vous pouvez changer le titre de la fenêtre dans la zone de texte suivant Titre de la fenêtre :.
Ensuite, après Position de la fenêtre :, vous pouvez décider de changer la position initiale de la fenêtre dans l'écran.
Puis, en cochant les cases Largeur par défaut : et Hauteur par défaut :, vous pouvez changer les dimensions par défaut de la fenêtre.
Après Icône :, vous pouvez écrire le nom d'une image se trouvant sur votre disque dur pour qu'elle soit l'icône du programme.

Maintenant, sous l'onglet Commun, n'oubliez de rendre la fenêtre visible !
Je ne vais pas vous détailler toutes les options, vous êtes capables de faire vos tests vous-même.
Retour en haut

Les étiquettes

Présentation


Les étiquettes (gtk.Label()) permettent d'afficher du texte. Nous allons commencer par voir comment en créer une et y afficher du texte. Ensuite, nous verrons comment modifier les attributs du texte (le mettre en gras, par exemple)

Construction


Créer un label est chose toute simple:
Code : Python
1
label = gtk.Label("texte")

Voyons maintenant un exemple dans lequel vous apprendrez comment modifier les attributs du texte:
Code : Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# -*- coding:Utf-8 -*-
import pygtk
pygtk.require('2.0')
import gtk

fenetre = gtk.Window(gtk.WINDOW_TOPLEVEL)
fenetre.set_title("Les étiquettes")
fenetre.set_position(gtk.WIN_POS_CENTER)
fenetre.connect("destroy", gtk.main_quit)

etiquette = gtk.Label() #Création d'une étiquette
etiquette.set_text("<b>Gras</b>\n<i>Italique</i>\n<u>Souligné</u>\n<s>Barré</s>\n<sub>indice</sub>\n \
<big>Grand</big>\nNormal\n<small>Petit</small>\n<tt>Télétype</tt>\n<span font-family=\"arial\">Arial</span>\n \
<span font-family=\"times\">Times</span>\n<span font-family=\"courrier\">Courrier</span>\n \
<span size=\"xx-large\">Très très grand</span>\n<span foreground=\"red\">Rouge</span>\n \
<span background=\"yellow\">Fond jaune</span>") #Changement du texte de l'étiquette
etiquette.set_justify(gtk.JUSTIFY_CENTER) #Change la position du texte. Choix posibles (gtk.JUSTIFY_LEFT (défaut), gtk.JUSTIFY_RIGHT, gtk.JUSTIFY_CENTER, gtk.JUSTIFY_FILL)
etiquette.set_use_markup(True) #Utiliser la mise en forme
fenetre.add(etiquette)

fenetre.show_all()

gtk.main()

Le résultat est le suivant:
Image utilisateur

Regardons ce code pas à pas.
Premièrement, on importe les modules et on crée une fenêtre ; je ne reviens pas là-dessus.

Ensuite, nous créons l'étiquette.
Puis, nous changeons le texte de cette étiquette avec set_text :
Code : Python
1
2
3
4
5
etiquette.set_text("<b>Gras</b>\n<i>Italique</i>\n<u>Souligné</u>\n<s>Barré</s>\n<sub>indice</sub>\n \
<big>Grand</big>\nNormal\n<small>Petit</small>\n<tt>Télétype</tt>\n<span font-family=\"arial\">Arial</span>\n \
<span font-family=\"times\">Times</span>\n<span font-family=\"courrier\">Courrier</span>\n \
<span size=\"xx-large\">Très très grand</span>\n<span foreground=\"red\">Rouge</span>\n \
<span background=\"yellow\">Fond jaune</span>") #Changement du texte de l'étiquette

Nous aurions pu ne pas utiliser cette méthode et mettre le texte dans la création de l'étiquette. Mais, je voulais vous montrer cette méthode :D

Hé ! Je n'arrive pas à lire ce qu'il y est écrit ! Pourquoi ...?

C'est de cette façon qu'il est possible de mettre en forme le texte ; c'est à la manière du xHTML (ceux que le connaissent ne se sentiront pas dépaysagés ;) )
Je vais vous parler de ce "code" après avoir parler du programme en entier.
Ensuite, il y a:
Code : Python
1
etiquette.set_justify(gtk.JUSTIFY_CENTER)

Ceci permet de centré le texte: les choix possibles sont gtk.JUSTIFY_LEFT (par défaut, alligne à gauche), gtk.JUSTIFY_RIGHT (alligne à droite), gtk.JUSTIFY_CENTER (centré), gtk.JUSTIFY_FILL (ne fonctionne pas tout le temps, remplir toute la ligne)
Puis, on utilise une méthode qui permet d'utiliser la mise en forme:
Code : Python
1
etiquette.set_use_markup(True)

Enlever cette ligne et vous verrez la différence :D

The Pango Markup Language


Le Pango Markup Language (ou en français, le langage de balisage Pango) permet de modifier les attributs du texte.
Pour cela, il faut utiliser ce qu'on appelle des balises.
Une balise ressemble à ceci: <balise>
On doit l'ouvrir (<balise>) et la fermer (</balise>, remarquer le / qu'on ajoute pour la fermer).
Tout ce qui est compris entre une balise ouvrante et une balise fermante sera modifier par celles-ci.

Regardons plus en détail le texte du label. La première ligne est :
<b>Gras</b>
Ce qui est compris entre <b> et </b> sera en gras.

Ensuite, on a :
<i>Italique</i>
Ce qui est compris entre <i> et </i> sera en italique.

Plus loin, on voit :
<span font-family=\"courrier\">Courrier</span>
Cette balise est un peu étrange, il a quelque chose en plus, vous ne trouvez pas ?
La balise <span> accepte ce qu'on appelle des attributs. Les attributs sont des caractéristiques de la balise. Dans l'exemple plus haut, l'attribut est font-family (police d'écriture du texte). font-family=\"courrier\" signifie que je veux que l'attribut font-family soit affecté de "courrier" (c'est une police d'écriture).

Hé ! Pourquoi as-tu mis des backslash (\) ?

Comme les limites du texte sont définies par des guillemets ("), il ne faudrait pas que celles dans le texte soient prises en compte par l'interpréteur. Pour qu'elles ne soient pas prises en comte, je dois les prédéder d'un backslash (\). Si je ne les aurais pas mis, il y aurait eu une erreur.

Et les backslash à la fin des lignes, qu'est-ce qu'ils font là ?

J'ai inséré des backslash à la fin des lignes pour limiter leur grandeur. Enlever-les et vous verrez que votre éditeur de texte avancé (si vous en avez un) ne colorera que la première ligne, donc le reste ne ferra pas partie du texte.

Je vais vous faire un petit tableau de tout ce qu'on peut faire.
BalisesDescriptions
<b>Gras</b> "Gras" sera en ... gras !
<i>Italique</i> "Italique" sera en italique
<u>Souligné</u> "Souligné" sera souligné
<s>Barré</s> "Barré" sera barré
<sub></sub> Met le texte en indice
<sup></sup> Met le texte en exposant
<big></big> Met le texte plus gros
<small></small> Met le texte plus petit
<span font-family=""></span> Change la police d'écriture
<span size=""></span> Change la taille du texte. On peut utiliser 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large' (de très très petit à très très grand)
<span foreground=""></span> Changer la couleur du texte. Vous pouvez utiliser certaines couleurs en indiquant le nom en anglais (par exemple : red, green, blue), ou bien utiliser le hexadécimal.
<span background=""></span> Changer la couleur d'arrière-plan du texte. Même remarque pour les couleurs


Vous savez maintenant comment afficher du texte et le mettre en forme. Nous n'avons pas tout vu, mais vous pouvez aller voir dans la documentation à cette page. Notez qu'il est possible de mettre plus d'un attribut dans les balises <span>.

Comment faire avec le Concepteur d'Interface Glade ?


Je vais vous expliquer comment créer des étiquettes pouvant utiliser ces balises avec Glade.
Après avoir créer une étiquette, sélectionner-la et aller à l'onglet Général.
Vous devez écrire votre texte dans la zone de texte suivant le mot Étiquette :.
Et pour que vous puissiez utiliser les balises, cochez la case précédant Utiliser des balises :.
Retour en haut

Les boîtes verticales et horizontales

Comme vous l'avez appris dans la première partie, il est impossible d'insérer plus d'un widget enfant à une fenêtre. Pour pallier ce problème, certains conteneurs ont été créés. On note les boîtes, les tableaux, les onglets, les cadres, les panneaux et plusieurs autres. Ici, nous verrons les boîtes, aussi bien horizontales que verticales, pour les boutons ou non.

Les boîtes ou gtk.Box



Présentation



Il existe deux types de boîtes, les horizontales (appellées gtk.HBox) et les verticales (gtk.VBox). Elles servent à diviser l'espace en plusieurs parties, verticalement ou horizontalement. Mais comme leur fonctionnement est extrêmement semblable, je les traite dans une seule et même partie.

Image utilisateur


Si vous jettez un coup d'oeil à la documentation des ces deux boîtes, vous vous appercevrez qu'elles ne possèdent que très peu de propriétés propres. La plupart des propriétés importantes sont héritées d'une classe appelée gtk.Box.

Construction



Le contructeur d'une gtk.HBox :

Code : Python
1
hBox = gtk.HBox(homogeneous=False, spacing=0)


Et pour une gtk.VBox :

Code : Python
1
vBox = gtk.VBox(homogeneous=False, spacing=0)


Mais ça, vous vous en doutiez ^^

Quand on crée une boîte, on peux donc spécifier deux propriétés :
  • homogeneous, qui peut valoir True ou False : si la boîte est homogène, ses compartiments feront toujours la même taille. Les proportions resteront égales ;
  • spacing, de type entier, est l'espacement en pixel entre les conpartiments de la boîte.

Méthodes



La méthode la plus utile quand on crée une boîte sert à ajouter des choses dans cette boîte :)
En fait, il existe deux méthodes pour faire ça : pack_start() et pack_end(). Elles fonctionnent de la même façon, à la différence près que pack_end() ajoute les enfants à partir de la fin de la boîte, ce qui peut être utile dans certains cas.

Voilà comment on ajoute un widget dans une boîte :

Code : Python
1
vBox.pack_start(child, expand=True, fill=True, padding=0)


Le seul argument indispensable est child, qui est le widget à ajouter dans la boîte.
Les autres sont des options esthétiques que vous pourrez explorer facilement avec le concepteur glade.

Il existe une bonne dizaine de méthodes pour gtk.Box que vous trouverez dans la documentation. Je ne les expose pas ici car le but de ce tuto n'est pas de traduire la doc officielle, mais de sélectionner les widgets et les méthodes les plus utiles pour une prise en main rapide.

Utilisation



Un exemple d'utilisation de boîtes :

Code : Python
1
2
3
4
5
6
7
8
myLabel = gtk.Label("Hello") # on crée un label
myButton = gtk.Button("Mon bouton") # puis un bouton
		
vBox = gtk.VBox() # on crée la boîte
vBox.pack_start(myLabel) # on ajoute le label
vBox.pack_start(myButton) # puis le bouton

vBox.reorder_child(myButton, 0) # bonus : on catapulte le bouton en première place !


Les boîtes pour les boutons


Présentation



Encore une fois, il y a deux types de boîtes à bouton : les horizontales et les verticales. Voici à quoi ressemble une boîte à bouton horizontale quand on la rajoute dans le concepteur glade :

Image utilisateur


Mais ça ne doit pas vous dire grand chose, alors j'ai encadré en rouge un exemple d'utilisation de boîte à bouton :

Image utilisateur


Cet exemple illustre bien la liberté que laissent les boîtes à bouton pour ce qui est du placement.

Construction



Code : Python
1
boite = gtk.HButtonBox()

Ceci est la construction d'une boîte à boutons horizontale, je vous laisse deviner pour une boîte verticale :)

Propriétés



Voici la zone de propriétés d'une boîte à bouton dans le concepteur :

Image utilisateur


C'est la propriété "Style de mise en page" qui nous intéresse car elle définit comment vont se répartir les boutons dans la boîte.

Méthodes



set_layout



set_layout sert justement à définir ce style de mise en page (ou layout en anglais) :

Code : Python
1
boite.set_layout(gtk.BUTTONBOX_SPREAD)


Voici les autres valeurs que peut prendre layout :
  • gtk.BUTTONBOX_SPREAD : répartis harmonieusement ;
  • gtk.BUTTONBOX_EDGE : répartis en touchant les bords de chaque coté ;
  • gtk.BUTTONBOX_START : alignés au gauche ou en haut ;
  • gtk.BUTTONBOX_END : alignés a droite ou en bas.

La fonction inverse existe : get_layout

set_child_secondary



Sert a définir si un bouton enfant est secondaire ou pas. Qu'est-ce que ça veut dire ça ? Eh bien, un bouton secondaire va se placer à l'opposé de ses petits camarades. C'est le cas du bouton "Aide" dans le screenshot que j'ai cité en exemple plus haut.

Code : Python
1
boite.set_child_secondary(widget, True)
Retour en haut

Les boutons

Présentation


Après avoir vu un peu plus en détail les fenêtres, les étiquettes et les boîtes, vous voilà rendus aux boutons. Les boutons sont des widgets qui émettent un signal lorsque l'on clique dessus (il y en a d'autres, mais ils sont moins utilisés).

Construction


Pour créer un bouton il suffit de faire comme ceci:
Code : Python
1
2
3
bouton1 = gtk.Button('Mon bouton')
bouton2 = gtk.Button('_M_o_n bouton', use_underline = True)
bouton3 = gtk.Button(stock = gtk.STOCK_QUIT)

Ici, nous créons trois boutons. À la première ligne, nous ne spécifions qu'un paramètre, le label (texte) à afficher. À la deuxième ligne, nous utilisons un deuxième paramètre qui est use_underline. Quand use_underline vaut True, tous les caractères du label précédés d'un trait de soulignement (_) seront soulignés, donc le mot "Mon" sera souligné au complet.
Pourquoi as-tu écrit le nom du deuxième paramètre dans la création du 2e bouton et le nom du premier dans le 3e bouton ?

J'ai écrit use_underline dans la création du 2e bouton parce que n'est pas le 2e paramètre, mais bien le 3e. Stock est le deuxième paramètre.

Les Stock Items


À la troisième ligne, nous utilisons un nouveau paramètre - stock. Avant de vous expliquer comment utiliser ce paramètre, je vais vous parler des Stock Items.
Les Stock Items sont des images, accompagnés de texte, qui ont différentes taille destinées à être utilisés par le programmeur. Ils sont très utiles, mais ils ne contiennent pas toutes les images. Pour utiliser une autre image, il faut utiliser la méthode set_image(), avec comme seul paramètre un gtk.Image (que nous verrons plus tard).
La plupart du temps, il est inutile de préciser la taille, PyGtk le fait à notre place. Mais lorsque l'on crée un gtk.Image à partir d'un Stock Item, il faut préciser la taille (je vais en parler dans le chapitre 4).
Les Stock Items sont listés à cette page.
Pour pouvoir en utiliser un, il suffit de copier le Stock Id (dans la colonne de gauche) et de le coller à l'endroit approprié - ici, c'est le paramètre stock. Comme vous pouvez le constater, j'ai mis l'image Quitter. Pourquoi ne pas faire que, lorsque l'on clique sur le bouton, le programme se ferme ?
Lorsque l'utilisateur clique sur un bouton, le signal 'clicked' est émit. Avec ce qu'on a apprit, je vous laisse essayer de trouver comment faire.

C'est bon...? Vous avez trouvé ?
Secret (cliquez pour afficher)
Code : Python
1
bouton3.connect("clicked", gtk.main_quit)


Il suffit d'insérer les boutons dans une boîte et voilà le résultat:
Image utilisateur
Il y a quelques méthodes sur les gtk.Button dans la doc', allez-y !

Création avec Glade


Après avoir créer un bouton, choisissez-le dans l'arbre et aller dans l'onglet Général.
Dessous Configurer le contenu du bouton, choisissez l'option Bouton de catalogue.
Ensuite, après Bouton de catalogue :, choisissez le Stock Item voulu.
Retour en haut

Les zones de texte à une ligne

Présentation


Les programmes que vous avez fait jusqu'à présent ne pouvaient pas demander quelque chose de précis à l'utilisateur. Avec les zones de texte à une ligne (parce qu'il y en a des multilignes), vous pourrez demandez quelques informations à l'utilisateur.

Elles ressemblent à ceci dans Glade:
Image utilisateur

Dans la zone des propriétés, onglet Général, vous pouvez changer la longueur maximale, ainsi que l'alignement (voir plus bas), le texte et le caractère invisible. Ce dernier est le caractère qui est affiché lorsqu'on décide de ne pas affiché le vrai texte (pour les zones de mot de passe, par exemple - voir plus bas)

Construction


Code : Python
1
zoneTexte = gtk.Entry(longueurMaximum)

longueurMaximum permet d'imposer une restriction à l'utilisateur, celle de la longueur maximum de caractères pouvant être tapés. C'est un type int. Bien sûr, ce paramètre est facultatif.

Méthodes


set_alignment(xalign)


Cette méthode permet d'alligner le texte dans la zone de texte. xalign est un int qui peut aller de 0 (complètement à gauche) à 1 (complètement à droite), en passant par 0.5 (au centre).

set_visibility(visible)


Si vous voulez que l'utilisateur entre une information secrète, comme un mot de passe par exemple, il est très probable que celui-ci ne veuille pas que les autres le voit. En mettant visible à False, les caractères seront remplacés par des petits points.

Voici un petit exemple:
Code : Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# -*- coding:Utf-8 -*-
import pygtk
pygtk.require('2.0')
import gtk

def copieTexte(widget, data):
	data.set_text(widget.get_text()) #Changer le texte d'une étiquette par celui d'une zone de texte

fenetre = gtk.Window(gtk.WINDOW_TOPLEVEL)
fenetre.connect("destroy", gtk.main_quit)
boiteV = gtk.VBox() #Création d'une boîte verticale
fenetre.add(boiteV)

etiquette = gtk.Label()

zoneTexte = gtk.Entry() #Création d'une zone de texte à une ligne
zoneTexte.set_alignment(0.5) #Aligner le texte de la zone au centre (de 0.0 à 1.0)
zoneTexte.set_max_length(100) #Définir le nombre de lettres max qui peuvent être entrées
zoneTexte.connect("activate", copieTexte, etiquette) #Lorsque l'on appuie sur entré
motDePasse = gtk.Entry()
motDePasse.set_visibility(False) #Pour les mots de passe
boiteV.pack_start(zoneTexte, False, False, 0)
boiteV.pack_start(etiquette, False, False, 0)
boiteV.pack_start(motDePasse, False, False, 0)

fenetre.show_all()

gtk.main()


Je veux vous parler de cette ligne en particulier:
Code : Python
1
zoneTexte.connect("activate", copieTexte, etiquette)

Comme vous pouvez le voir, je relie le signal "activate" de la zone de texte à une fonction (copieTexte) et je lui fourni un paramètre.
Ce signal est émit lorsque l'utilisateur appuie sur Entrée si le widget a la focus bien sûr. Dans cet exemple, lorsque l'utilisateur appuie sur Entrée, le contenu dans le première zone de texte s'affiche dans une étiquette situé juste en bas.
En voici le résultat:
Image utilisateur
Le texte de la zone de texte du haut est centré grâce à set_alignment(0.5)
Retour en haut

Les tableaux

Les tableaux



Présentation



Voilà une autre genre de conteneur, assez proche des boîtes, mais qui peut avoir plusieurs lignes et plusieurs colonnes à la fois. Ben ouais, c'est ça un tableau après tout :lol:

Image utilisateur


On peut se passer de les utiliser en les remplaçant par des boîtes horizontales et verticales imbriquées les unes dans les autres, mais c'est un peu moche comme technique. Il faut savoir utiliser les tableaux quand il faut.

Construction



Simplement comme ceci :

Code : Python
1
table = gtk.Table(rows=1, columns=1, homogeneous=False)


...où rows est le nombre de lignes et columns le nombre de colonnes.
Je vous épargne les explications sur homogeneous que nous venons de voir.

Propriétés



Il peut être utile dans certains cas de récupérer le nombre de lignes ou de colonnes de la façon qu'il suit :

Code : Python
1
2
nombre_de_colonnes = table.n-columns
nombre_de_lignes = table.n-rows


Méthodes



Comme pour les boîtes, il faut savoir ajouter des widgets dans notre tableau. Pour ce faire, on utilise la méthode attach() :

Code : Python
1
table.attach(child, left_attach, right_attach, top_attach, bottom_attach, xoptions=gtk.EXPAND|gtk.FILL, yoptions=gtk.EXPAND|gtk.FILL, xpadding=0, ypadding=0)


C'est un peu plus complet que pour les boîtes n'est-ce pas ? :-°
Mais rassurez-vous, on va faire le tri là-dedans !

Vous pouvez déjà oublier xoptions, yoptions, xpadding et ypadding qui sont des options avant tout esthétiques.

Il nous reste donc child, left_attach, right_attach, top_attach et bottom_attach :
  • child, comme vous vous en doutez, est le widget que nous sommes en train d'ajouter dans ce tableau ;
  • left_attach est le numéro de la colonne à laquelle sera attaché le bord gauche de notre widget enfant ;
  • right_attach est le numéro de la colonne à laquelle sera attaché le bord droit de notre widget enfant ;
  • top_attach est le numéro de la colonne à laquelle sera attaché le bord supérieur de notre widget enfant ;
  • bottom_attach est le numéro de la colonne à laquelle sera attaché le bord inférieur de notre widget enfant.

Ça veut dire quoi tout ça ? o_O

Je crois qu'une petit exemple s'impose...

Utilisation



Code : Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#!/usr/bin/python

import pygtk
pygtk.require('2.0')
import gtk
import gtk.glade
import os
import sys

class Tableaux:

	def __init__(self):

		mainWindow = gtk.Window()
		mainWindow.set_title("Les tableaux")
		mainWindow.connect("destroy", self.on_Quit)

		table = gtk.Table(3,3)
		table.attach(gtk.Label("Bonjour"), 0, 1, 0, 1)
		table.attach(gtk.Label("Comment"), 1, 2, 0, 1)
		table.attach(gtk.Label("Allez"), 2, 3, 0, 1)
		table.attach(gtk.Label("Vous"), 0, 2, 1, 2)
		table.attach(gtk.Label("Monsieur"), 2, 3, 1, 3)
		table.attach(gtk.Label("Le Maire"), 0, 2, 2, 3)
		mainWindow.add(table)
		mainWindow.show_all()

	def on_Quit(self, source=None, event=None):
		gtk.main_quit()

if __name__ == "__main__":
	Tableaux()
	gtk.main()


Résultat :

Image utilisateur

Pour être sûr de bien comprendre, regardez se trouvent les mots dans cette image et les options qu'ils ont dans le code.
Par exemple, l'étiquette contenant les mots "Le Maire" est complètement à gauche, donc à la colonne 0 (à cause de left_attach = 0).
Son côté droit est à la colonne 2 (right_attach = 2).
Son côté supérieur est à la rangée 2 (top_attach = 2).
Et son côté inférieur est à la rangée 3 (bottom_attach = 3).

J'ai ajouté des chiffres au screenshot (ça va être plus facile à expliquer qu'avec des mots) :
Image utilisateur


Évidement, les lignes rouges ont été tracées par moi même :lol: , elles sont juste là pour rendre plus évident la répartition des labels dans le tableau. Je pense que cette démonstration aura révélé la puissance des tableaux et de la fonction attach() : il est possible de fusionner des cellules pour arriver à des configurations tout à fait fantasistes !
Retour en haut

Les icônes d'expension

Présentation



gtk.Expander est un conteneur qui ne peut avoir qu'un seul enfant. Un clic sur ce widget permet de basculer l'enfant entre l'état caché et l'état visible.

Image utilisateur


On s'en sert en général pour cacher des zones du GUI réservées aux connaisseurs. Par exemple, dans le gestionnaire de mises à jour d'Ubuntu, ce widget cache un terminal où s'affiche les messages techniques relatifs aux mises à jours.

Construction



Code : Python
1
expanseur = gtk.Expander(label="Détails")


Méthodes



set_expanded() et get_expanded()



set_expanded() sert à définir si le widget enfant est visible ou invisible :

Code : Python
1
expanseur.set_expanded(True)


get_expanded() retourne l'état visible/invisible de l'enfant sous la forme d'un booléen :

Code : Python
1
expanded = expanseur.get_expanded()


set_label() et get_label()



set_label() définit le label de l'icône d'expansion :

Code : Python
1
expanseur.set_label("Détails")


get_label() retourne le texte qui sert de label à l'expanseur :

Code : Python
1
nom = expanseur.get_label()


Il existe aussi les méthodes set_label_widget() et get_label_widget() qui sont dans le même genre. Elles prennent comme argument un widget, ce qui permet de bien personnaliser le label de l'expanseur (en mettant une image par exemple).


Utilisation



Comme pour tous les conteneurs simples, on lui ajoute un enfant grâce à la méthode add() :

Code : Python
1
2
enfant = gtk.Label("Enfant")
expanseur.add(enfant)
Retour en haut

Divers

Les séparateurs


Les séparateurs sont des widgets esthétiques qui n'ont aucune méthode (super ce sera moins long pour moi).

Construction


Il y a deux types de séparateurs, ceux verticaux et ceux horizontaux.
Voici comment les créer:
Code : Python
1
2
separateurH = gtk.HSeparator()
separateurV = gtk.VSeparator()

On peut les mettres dans une boîte pour séparer visuellement des widgets.
Voici un exemple de ce qu'on peut faire:
Image utilisateur

Les flèches


Parlons des flèches, maintenant. Elles aussi ne sont là que pour faire beau. Les gtk.Arrow() n'ont qu'une seule méthode, mais que je juge inutile, bien qu'elle puisse servir à certaines personnes de temps en temps.
Voici comment créer une flèche:
Code : Python
1
2
3
4
fleche1 = gtk.Arrow(gtk.ARROW_UP, gtk.SHADOW_NONE) #Création d'une flèche
fleche2 = gtk.Arrow(gtk.ARROW_DOWN, gtk.SHADOW_NONE)
fleche3 = gtk.Arrow(gtk.ARROW_LEFT, gtk.SHADOW_NONE)
fleche4 = gtk.Arrow(gtk.ARROW_RIGHT, gtk.SHADOW_NONE)

Le premier paramètre est le type de flèche (Pointe vers le haut, vers le bas, vers la gauche ou vers la droite) et le deuxième est le type d'ombre. Je n'ai pas remarqué la différence entres les différentes ombres, donc si vous voulez les voir, direction la doc'.
Voici ce que ça pourrait donner:
Image utilisateur

Le calendrier


Le calendrier, lui, a quelques méthodes. C'est un widget qu'on n'utilisera que rarement (je crois :-° ).
Voici comment le construire:
Code : Python
1
calendrier = gtk.Calendar() #Création d'un calendrier

Méthodes


  • select_month(month, year) : Affiche le calendrier du mois month (de 0 à 11) et de l'année year ;
  • select_day(day) : Sélectionne le jour day (de 1 à 31) ;
  • mark_day(day) : Met le jour day en gras ;
  • get_date() : Retourne un tuple (year, month, day) (jour, mois, année) de la date sélectionné.

Voici ce que cela pourrait donner:
Image utilisateur
Les jours 1 à 7 ont été mis en gras par la méthode mark_day()

Il y a quelques autres méthodes que vous pourrez voir dans la documentation.
Retour en haut

Q.C.M.

Quelle méthode permet de maximizer une fenêtre ?
Quel est le nom du "langage" qui permet de modifier les attributs d'un label et avec quoi change-t-on les attributs d'une partie d'un texte ?
Quelles sont les deux méthodes permettant d'ajouter un widget enfant à des boîtes gtk.Box() ?
Qu'est-ce qu'un Stock Item affiche ?

Statistiques de réponses au QCM

Retour en haut
C'est ainsi que se termine le premier chapitre (par des widgets peu utilisés :p ). Je vous recommande de vous pratiquer pour devenir habile avec ce que vous venez de voir. Le deuxième chapitre de cette partie vous ferra découvrir d'autres widgets et dans le troisième, vous ferrez un ... (ha ha, je garde la surprise ^^ ).
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
3 commentaires pour "Les widgets (Partie 1)"
Note moyenne : 3.59 / 4 (17 votes)
Pseudo Commentaire
Hors ligne rorkaii # Posté le 17/11/2009 à 15:37:20
Avatar

Ville : Briançon
Pays : France métropolitaine
Études : BTS MI Briançon

 A part quelques fautes d'orthographe, ce cours est génial.
C'est un très bon mémo pour moi qui n'avait pas touché a GTK depuis quelques moi.

Ce pendant, il manque certains widget comme le drawing area, et aussi un exemple complet de code avec glade&GTKbuilder (je m'y suis m'y et ça change un peu de libglade).

Bref, un grand bravo tout de même
Hors ligne antoyo # Posté le 17/11/2009 à 18:32:21
GNU/Linux forever!
Avatar

Études : Cégep de rimouski

 Merci de vos commentaires.
Lorsque j'aurai du temps (je ne sais pas quand), je continuerai le tutoriel.
Vous n'avez pas tout vu les widgets existants et vous ne les verrez pas tous. Cependant, je crois que je vais parler du DrawingArea.
Il y a un exemple de code avec GtkBuilder dans la partie I.
Pour info, dans le prochain chapitre, vous verrez ceci :
  • Le presse-papiers
  • Les infobulles
  • Les boutons à options
  • Une position fixe pour un widget
  • Aligner des widgets
  • Les panneaux
  • La complétion d'une zone de texte
  • Les fichiers récemment ouverts
  • La zone de texte mise en forme
  • Les onglets

De ces widgets, il en reste trois à expliquer, je vais essayer de le faire bientôt.
Encore merci de vos commentaires.
Mon extension pour Chrome/Chromium :
SaveAllPasswords : vous permet d’enregistrer vos mots de passe sur tous les sites Web (même ceux qui ne veulent pas :D ).
 
Hors ligne rorkaii # Posté le 18/11/2009 à 00:38:34
Avatar

Ville : Briançon
Pays : France métropolitaine
Études : BTS MI Briançon

 Ah parfait !
Les zones de textes mises en formes !!!!
Étant pourtant fort en anglais, j'ai beaucoup de mal avec les docs de gtkSourceView ... Je ne sait même pas comment l'installer, bien qu'apparemment il est déjà installé sous GNOME ... enfin bon o_O

Bonne chance pour la suite je l'attend avec impatiente.

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.