Exemple concret : un convertisseur de devises
Voici le code, d’un seul bloc. Vous pouvez l’exécuter directement. Normalement, vous devriez pouvoir le comprendre facilement, mais nous allons l’expliquer brièvement.
require 'gtk2'
taux = 6.55957
Gtk.init
window = Gtk::Window.new
window.set_title('Convertisseur')
window.signal_connect('destroy') { Gtk.main_quit }
# Une boîte verticale qui contiendra trois rangées: Francs,
# Euros, et bouton Fermer.
vb = Gtk::VBox.new(true, 6)
# Partie "Francs"
hb = Gtk::HBox.new(false, 6)
hb.pack_start(Gtk::Label.new('Francs'), false, true, 6)
frf = Gtk::Entry.new
frf.signal_connect('activate') {
e = frf.text.to_f / taux
d = Gtk::MessageDialog.new(window, Gtk::Dialog::DESTROY_WITH_PARENT,
Gtk::MessageDialog::INFO,
Gtk::MessageDialog::BUTTONS_CLOSE,
"#{frf.text.to_f} FRF = #{e} EUR")
d.run
d.destroy
}
hb.pack_start(frf, true, true)
b = Gtk::Button.new('-> EUR')
# Quand on clique sur le bouton, on active la boîte de texte, ce qui
# déclenchera le signal 'activate'.
b.signal_connect('clicked') { frf.activate }
hb.pack_start(b)
vb.pack_start(hb)
# Partie "Euros"
hb = Gtk::HBox.new(false, 6)
hb.pack_start(Gtk::Label.new('Euros'), false, true, 6)
eur = Gtk::Entry.new
eur.signal_connect('activate') {
f = eur.text.to_f * taux
d = Gtk::MessageDialog.new(window, Gtk::Dialog::DESTROY_WITH_PARENT,
Gtk::MessageDialog::INFO,
Gtk::MessageDialog::BUTTONS_CLOSE,
"#{eur.text.to_f} EUR = #{f} FRF")
d.run
d.destroy
}
hb.pack_start(eur, true, true)
b = Gtk::Button.new('-> FRF')
b.signal_connect('clicked') { eur.activate }
hb.pack_start(b)
vb.pack_start(hb)
# Fin
ok = Gtk::Button.new(Gtk::Stock::CLOSE)
ok.signal_connect('clicked') { Gtk.main_exit }
vb.pack_start(ok)
window.add(vb)
window.show_all
Gtk.main
Pour concevoir l’interface graphique, avant de commencer à créer les widgets, il faut d’abord avoir une idée de ce dont on a besoin. Pour cela, un papier et un crayon (ou mieux, un tableau blanc) peuvent être utiles. Dans notre cas, nous aurons besoin de deux éléments correspondant aux valeurs en Francs et en Euros, ainsi que d’un bouton pour fermer la fenêtre. Cela nous définit déjà une boîte verticale contenant trois rangées. Ensuite, chaque élément sera composé d’une étiquette (label) pour le décrire, d’une boîte de texte pour la saisie, et d’un bouton pour valider (bien que l’on puisse aussi valider au clavier. Donc, dans une rangée de la boîte verticale, nous aurons une boîte horizontale composée de trois colonnes. Il aurait aussi été possible (et préférable dans ce cas) de faire cela avec une table, mais nous voulions montrer comment imbriquer des conteneurs. En exercice, refaites la même chose avec une table, et trouvez pourquoi c’était préférable.
Le reste de la construction des widgets ne devrait pas poser problème. Voyons maintenant la gestion des évènements. Nous voulons afficher un message contenant la conversion, lorsque l’utilisateur a tapé un montant. Pour cela, nous avons placé des boutons à droite des boîtes de saisie, mais nous voudrions aussi pouvoir valider en tapant sur la touche entrée. Nous allons donc attribuer un bloc au signal activate de chaque boîte de texte, qui sera chargé d’afficher le message. Ensuite, nous attribuerons un bloc au signal clicked des boutons, et ce bloc se contentera d’appeler la méthode activate de la boîte de texte correspondante. En faisant cela, on déclenche l’émission du signal activate, et donc l’appel du bloc qui lui a été attribué.
En guise d’exercice, vous pouvez faire le même programme, qui change la valeur des boîtes de texte au lieu d’afficher une fenêtre de message. Quand on entre une valeur dans la boîte “Francs” et que l’on valide, affichez le résultat de la conversion dans la boîte “Euros”.
Sommaire
Précédent : IHM-GTK : Boîtes de message Suivant : IHM-GTK : Conclusion
