Créer une interface graphique avec Ruby/GTK

Les boîtes sont un type de conteneur très simple, semblables à n'importe quel carton dans lequel on jette des revues : elles s'empilent les unes au-dessus des autres, dans l'ordre dans lequel on les a jetées. Il existe des boîtes verticales (Gtk::VBox) et des boîtes horizontales (Gtk::HBox), qui héritent toutes les deux de l'objet générique Gtk::Box. Lorsque l'on crée une boîte, on indique si elle est homogène, c'est-à-dire si tous les éléments à l'intérieur ont droit au même espace, et on indique aussi l'espace vide laissé entre deux éléments. Une fois la boîte créée, on peut lui ajouter des éléments au début (pack_start) ou à la fin (pack_end), et c'est tout ce que vous avez besoin de savoir !

Voyons quelques exemples de boîtes

window = Gtk::Window.new
window.set_title('VBox homogene')
window.signal_connect('destroy') { Gtk.main_quit }

vbox = Gtk::VBox.new(true, 6)
vbox.pack_start(Gtk::Button.new('Un'))
vbox.pack_start(Gtk::Button.new('Deux'))
vbox.pack_start(Gtk::Button.new('Trois'))
window.add(vbox)

window.show_all

Le résultat devrait ressembler à cela :

En réalité, les méthodes pack_start et pack_end peuvent prendre plus de paramètres. Ces paramètres sont, dans l'ordre, expand, fill et padding. Pour expliquer ces paramètres, nous devons préciser un peu le fonctionnement des boîtes dans GTK. Un widget placé dans un conteneur demande une certaine quantité d'espace, et il lui est alloué une certaine quantité d'espace, qui peut être différente de la quantité demandée. Par exemple, lorsque l'on agrandit la fenêtre, les widgets se voient allouer un espace peut-être plus grand que celui qui était strictement nécessaire. Voyons comment cet espace sera utilisé.

Tout d'abord, si la boîte était homogène, l'espace dont elle dispose est réparti équitablement entre tous les widgets qu'elle contient. Si une boîte verticale dispose de 450 pixels et contient trois boutons, chaque bouton se verra attribuer 150 pixels, moins la valeur du padding, qui est un espace vide laissé entre chaque widget. Il y a alors deux cas possibles : si le champ fill est à true, alors le widget occupera l'intégralité de cet espace, même s'il n'en avait pas besoin. Si le champ fill est à false, alors le widget n'occupera que l'espace nécessaire, l'espace supplémentaire étant laissé vide.

D'autre part, si la boîte n'est pas homogène, alors le paramètre expand entre en jeu. Ce paramètre indique si le widget désire se voir attribuer une partie de l'espace supplémentaire ou non. Si une boîte dispose de 150 pixels « en plus », et contient trois boutons, dont deux ont le champ expand à true, alors chacun d'entre eux se verra attribuer 75 pixels (moins le padding). Si les trois boutons ont expand à true, ils se voient attribuer chacun 50 pixels (moins le padding). Enfin, le champ fill est toujours applicable, et indique si l'espace « en plus » est utilisé par le widget, ou laissé vide. Voyons un exemple

window = Gtk::Window.new
window.set_title('VBox homogene')
window.signal_connect('destroy') { Gtk.main_quit }

vbox = Gtk::VBox.new(true, 6)
vbox.pack_start(Gtk::Button.new('Un'), false)
vbox.pack_start(Gtk::Button.new('Deux'), true, false)
vbox.pack_start(Gtk::Button.new('Trois'), true, true)

window.add(vbox)

window.show_all

Dans cet exemple, nous pouvons voir que le premier bouton ne s'étend pas, il n'obtient donc que l'espace nécessaire, même si nous agrandissons la fenêtre. Le deuxième bouton s'étend, mais ne remplit pas l'espace en plus, qui est donc laissé vide. Notez que les deux « vides » sur l'image appartiennent au deuxième bouton. Enfin, le troisième bouton s'étend et remplit l'espace en plus, ce qui est le comportement par défaut.

Enfin, le dernier paramètre, le padding, peut-être spécifié à la suite des autres attributs, et indique l'espace vide qui doit être placé avant et après le widget :

vbox.pack_start(Gtk::Button.new('Trois'), true, true, 12)

Bien sûr, tous les exemples que nous avons donnés sont avalables pour les boîtes horizontales. Vous pouvez les essayer en ne changeant que la création de la boîte, en remplaçant VBox par HBox. Vous constaterez au passage que le paramètre fill n'affecte que la dimension de la boîte : la hauteur pour une boîte verticale, la largeur pour une boîte horizontale.

Une table (Gtk::Table) est un conteneur un peu plus complexe qu'une boîte, très semblable aux tableaux en HTML. Elle se définit par son nombre de rangées, son nombre de colonnes, et le fait qu'elle soit homogène ou non. Si elle est homogène, toutes ses cases ont la même taille. Une fois votre table créée, vous pouvez y déposer (attacher) des widgets, en indiquant dans quelle(s) case(s), vous voulez les mettre. Un widget peut s'étaler sur plusieurs cases, mais une case ne peut contenir qu'un seul widget au maximum.

Lorsque vous voulez attacher un widget dans une table, vous commencez par spécifier la colonne de départ (gauche), puis la colonne de fin (droite), la rangée de départ (haut) et la rangée de fin (bas). Voyons un exemple.

table = Gtk::Table.new(4,5)
b1 = Gtk::Button.new('Un')
table.attach(b1, 0, 2, 0, 2)
b2 = Gtk::Button.new('Deux')
table.attach(b2, 3, 4, 0, 1)
b3 = Gtk::Button.new('Trois')
table.attach(b3, 3, 4, 1, 2)
b4 = Gtk::Button.new('Quatre')
table.attach(b4, 0, 4, 2, 3)

window.add(table)

Il est bien sûr possible de choisir si les widgets s'étendent et remplissent tout l'espace alloué, ainsi que spécifier un padding. Pour cela, la méthode attach prend des paramètres supplémentaires, qui sont les suivants :

• xoptions, yoptions : peuvent être Gtk::EXPAND, Gtk::FILL ou Gtk::SHRINK, ou une combinaison de ces paramètres ( Gtk::EXPAND | Gtk::FILL). Spécifient les options pour l'agencement horizontal (xoptions) et vertical (yoptions). Les attributs EXPAND et FILL ont la même signification que ci-dessus, et SHRINK indique que le widget doit prendre le minimum d'espace possible.
• xpadding, ypadding : valeurs de padding horizontal et vertical pour le widget attaché.

table = Gtk::Table.new(4,5)
b1 = Gtk::Button.new('Un')
table.attach(b1, 0, 2, 0, 2, Gtk::SHRINK)
b2 = Gtk::Button.new('Deux')
table.attach(b2, 3, 4, 0, 1, Gtk::EXPAND)
b3 = Gtk::Button.new('Trois')
table.attach(b3, 3, 4, 1, 2, Gtk::EXPAND | Gtk::FILL, Gtk::SHRINK)
b4 = Gtk::Button.new('Quatre')
table.attach(b4, 0, 4, 2, 3)

Nous avons déjà vu l'utilisation de base de ce widget, sous la forme d'un bouton contenant du texte. Cependant, un bouton peut contenir n'importe quel widget. On peut le créer en passant du texte à son constructeur, auquel cas un Label est créé, mais si on laisse le constructeur vide, on peut ensuite ajouter le widget de son choix (un Button hérite de Bin, un conteneur). La plupart du temps, cela est utilisé pour mettre une image au lieu d'un texte.

Nous avons vu le signal clicked, émis lorsque l'utilisateur clique sur le bouton (ou l'active avec le clavier). Il existe d'autres signaux :

Vous pouvez également modifier l'apparence de relief de votre bouton. Cela est utile en particulier si vous faites une barre d'outils contenant de nombreux boutons, et que vous désirez supprimer les bords de ces boutons. Pour cela, vous pouvez utiliser la méthode set_relief ou relief= en lui passant une valeur parmi Gtk::RELIEF_NONE, Gtk::RELIEF_HALF et Gtk::RELIEF_NORMAL.

Enfin, il est possible de créer un bouton en utilisant des modèles prédéfinis. Depuis sa version 2, GTK est livré avec un stock de boutons prédéfinis, qui vous évitent d'avoir à recréer des boutons toujours identiques et à vous soucier des normes de nommage et de traduction. Nous reviendrons sur ce sujet ultérieurement, mais voyons un exemple :

window = Gtk::Window.new
window.set_title('Boutons predefinis')
window.signal_connect('destroy') { Gtk.main_quit }

hb = Gtk::HBox.new(false, 6)
b = Gtk::Button.new(Gtk::Stock::OK)
hb.pack_start(b)
b = Gtk::Button.new(Gtk::Stock::CANCEL)
hb.pack_start(b)

window.add(hb)
window.show_all

Un ToggleButton est un Button qui reste enfoncé lorsque l'on clique dessus. Cliquer une seconde fois le remet dans sa position initiale. Il s'agit, par exemple, des widgets utilises pour la barre d'outils de The Gimp. La création d'un ToggleButton se fait de la même façon que celle d'un bouton normal.

Vous pouvez obtenir ou changer l'état d'un ToggleButton à l'aide des méthodes active? et active=, comme nous allons le voir dans l'exemple ci-dessous. La valeur du champ 'active' est un booléen, vrai si le bouton est activé, faux sinon. Cependant, il existe un autre niveau intermédiaire, représentant le cas 'inconsistant'. Par exemple, si vous avez un bouton représentant le fait qu'un texte soit souligné ou non, et que vous sélectionnez du texte dont une partie seulement est soulignée, alors vous ne pouvez mettre le bouton ni actif ni inactif.

hb = Gtk::HBox.new(false, 6)
b = Gtk::ToggleButton.new('Inactif')
hb.pack_start(b)
b = Gtk::ToggleButton.new('Actif')
b.active=true
hb.pack_start(b)
b = Gtk::ToggleButton.new('Inconsistant')
hb.pack_start(b)
b.inconsistent=true

window.add(hb)
window.show_all

Enfin, ces boutons disposent d'un signal nommé toggled, qui est envoyé lorsque l'état du bouton change (lorsqu'il devient activé ou désactivé). Pour l'utiliser, vous aurez probablement besoin de la valeur actuelle du bouton, et pas simplement de savoir qu'elle a changé. Ceci nous amène à voir les paramètres qui sont passés au bloc que nous associons à un signal. En règle général, ces paramètres sont le widget qui est à l'origine du signal, et des données utilisateur (nous verrons plus tard comment changer ces données). Voyons un exemple :

b = Gtk::ToggleButton.new('Inactif')
b.signal_connect('toggled') { |widget, data|
        print widget.active?.to_s + "\n"
}

Lorsque vous cliquerez sur le bouton, son état actuel s'affichera dans le terminal.

Ces widgets sont connus en français sous le nom de « cases à cocher ». Ils héritent directement de Gtk::ToggleButton et se comportent de la même manière. La seule chose qui diffère est leur représentation graphique : ils sont constitués d'une case à cocher suivie d'un autre widget, le plus souvent un label.

hb = Gtk::HBox.new(false, 6)
b = Gtk::CheckButton.new('Inactif')
hb.pack_start(b)
b = Gtk::CheckButton.new('Actif')
b.active=true
hb.pack_start(b)
b = Gtk::CheckButton.new('Inconsistant')
hb.pack_start(b)
b.inconsistent=true

Ces boutons ressemblent beaucoup aux cases à cocher, mais sont un peu plus compliqués à utiliser. Il s'agit également de widgets possédant deux états (plus l'état inconsistant), mais il est possible de les réunir en groupes, et au sein d'un même groupe, seul un d'entre eux peut être actif à la fois (même s'il est possible qu'aucun ne soit actif). Cela signifie que lorsqu'on active un bouton radio, tous les autres boutons du même groupe deviennent inactifs.

En pratique, on commence par créer le premier bouton sans spécifier de groupe, puis on crée les suivants à partir du premier, en le leur passant comme premier paramètre. Il est aussi possible d'obtenir (ou de changer) le groupe d'un bouton avec les méthodes group et group=.

vb = Gtk::VBox.new(false, 6)
b = Gtk::RadioButton.new('Bonbon')
vb.pack_start(b)
b2 = Gtk::RadioButton.new(b, 'Caramel')
vb.pack_start(b2)
b2 = Gtk::RadioButton.new(b, 'Inconsistant')
vb.pack_start(b2)
b2.inconsistent = true

Ce widget représente une boîte de saisie de texte, d'une seule ligne. Il dispose de nombreuses méthodes, mais les plus utiles sont text et text=, pour obtenir et changer le texte contenu dans la boîte. Voyons un exemple qui sera plus clair que n'importe quelle explication :

vb = Gtk::VBox.new(true, 6)

hb = Gtk::HBox.new(false, 6)
hb.pack_start(Gtk::Label.new('Nom'), false, true, 6)
nom = Gtk::Entry.new
hb.pack_start(nom, true, true)
vb.pack_start(hb)

hb = Gtk::HBox.new(false, 6)
hb.pack_start(Gtk::Label.new('Mot de passe'), false, true, 6)
pass = Gtk::Entry.new
pass.visibility = false
hb.pack_start(pass, true, true)
vb.pack_start(hb)

window.add(vb)

Citons quelques exemples des possibilités qui s'offrent à nous. Il est possible de donner une taille maximale au texte entré dans la boîte avec max_length=, d'empêcher l'utilisateur de taper du texte avec editable = false, ou de changer le caractère de masquage (par défaut, une étoile) avec invisible_char=. Notons que cette dernière méthode demande un entier, il nous faut donc l'utiliser comme cela, si nous voulons un « @ » comme caractère de masquage :

pass.visibility = false
pass.invisible_char= '@'[0]

Enfin, parmi les signaux proposés par une boîte de texte, nous pouvons trouver activate, qui est émis lorsque l'on valide la boîte de texte (le plus souvent en appuyant sur entrée).