Créer une interface graphique avec Ruby-GNOME2 et Glade
| Auteur : | Frédéric Logier |
| Modifications : | RubyFR |
| Date : | 18.12.2005 |
Note : il va falloir copier les images et les mettre sur le dédié du radiant, là les images sont sur l’archive du hiki
Ce tutorial a pour but d’introduire le développement d’interface graphique en Ruby-GNOME2 en utilisant le logiciel Glade et la bibliothèque libglade. Attention Ruby-GNOME2 porte très mal son nom puisqu’il permet de développer des interfaces en GTK+ seulement, GNOME n’est pas imposé même s’il est supporté.
Glade
Glade est un programme permettant de créer à la souris une interface en GTK+. Il évite ainsi la fastudieuse tâche de coder soit même l’interface.
Pour ce tutorial nous aurons comme objectif de créer un programme affichant un texte dans un champs texte, lors du clic sur un bouton. Rien d’exaltant mais suffisant pour une introduction. Nous verrons en détail le développement de projets plus complexes dans les prochains tutoriaux.
Nous commençons donc par créer un projet GTK+ avec Glade. Dans le menu Glade, sous Affichage, veuillez cocher tous les éléments et positionnez les comme vous le souhaitez.
Les widgets
Nous choisissons maintenant les différents objets (widgets) que nous allons utiliser pour notre interface. Tout d’abord il nous faut bien sur une fenêtre. Nous cliquons donc sur l’icone fenêtre dans la palette sur l’onglet GTK+ basique.
Ensuite il nous faut poser un bouton et un champs texte. GTK+ utilise des conteneurs qui, comme leur nom l’indique, vont contenir des widgets. Ainsi lorsqu’une fenêtre est agrandi, le contenu des conteneurs s’agrandi également. On va choisir un GtkHBox, c’est la boite horizontale qui contient 3 bandes verticales. Lorsqu’on pose le widget, il nous demande combien ou souhaite de colonnes, on choisit 2. On peut maintenant placer nos widgets à l’intérieur. Choisissez le GtkButton (celui qui contient OK dans la palette) et placez le dans une colonne en cliquant sur celle-ci. Faitez de même avec le GtkEntry (il affiche ab dans la palette). La fenêtre devrait ressembler à ceci :
Cliquez maintenant sur le button et regardez la fenêtre propriétés. Elle possède plusieurs onglets, allez dans l’onglet Signaux.
L’ensemble est vide c’est normal. On va ici créer un signal sur un évènement. L’évenement le plus courant sur un bouton est le clic. A droite du champs Signal il y a un bouton avec 3 petits points : En cliquant dessus vous voyez apparaître une nouvelle fenêtre qui liste l’ensemble des signaux associés au widget GtkButton. Il suffit de sélectionner le signal clicked et valider.
Par défaut, Glade a associé une fonction de traitement au Signal. Cette fonction est nommée selon le nom du widget (par défaut button1) et le nom du signal. Vous pouvez bien sur renommer le nom de la fonction de traitement sans problème. Ensuite il suffit de cliquer sur Ajouter pour créer le signal.
Sélectionnez maintenant le GtkEntry et cliquez sur l’onglet Widget de la fenêtre Propriétés. Par défaut le nom du widget s’appelle entry1, veuillez le renommer en texte.
Dans la fenêtre principale de Glade, cliquez sur le bouton enregistrer. Il vous propose un répertoire de projet, modifiez cela si vous le souhaitez. Les autres options sont inutiles, vous pouvez valider.
Ruby
Rendez vous dans le répertoire du projet ; on n’y voit que 2 fichiers : projet1.glade et projet1.gladep. Si vous éditez projet1.glade vous remarquez qu’il contient un schema XML. En effet Glade sauvegarde tout le projet dans ce format de fichier.
Créons maintenant un fichier main.rb (peu importe le nom) avec votre éditeur favori. Nous allons maintenant écrire le code permettant d’afficher notre interface.
#!/usr/bin/env ruby
#
require 'libglade2'
require 'gtk2'
class MonAppli
def initialize(file, root)
@main_glade_xml = GladeXML.new(file, root) {|handler| method(handler)}
end
end
Gtk.init
MonAppli.new("projet1.glade",nil)
Gtk.main
Les require incluent bien entendu la bibliothèque GTK+ mais aussi la libglade. Nous créons une classe et sa méthode d’initialisation possédant 2 paramètres : Le premier est le nom du fichier glade (projet1.glade) et un 2ème optionnel. la classe GladeXML permet de lire automatiquement le fichier de notre projet, d’afficher l’interface et de donner un accès direct à chaque widget de l’interface. Cette classe est fournie via la libglade.
Le Gtk.init est obligatoire et doit etre lancé en premier. On instancie ensuite notre classe en lui donnant comme paramètre le fichier du projet. Enfin on appelle la boucle d’évènement de Gtk.
Nous pouvons maintenant lancer notre programme : ruby main.rb, mais déçu nous obtenons cette erreur :
ruby main.rb
main.rb:7:in `method': undefined method `on_button1_clicked' for class `MonAppli' (NameError)
from main.rb:7:in `initialize'
from main.rb:7:in `call'
from /usr/lib/ruby/1.8/libglade2.rb:32:in `connect'
from main.rb:7:in `initialize'
from main.rb:15
La libglade
Que s’est-il passé ? La libglade a essayé d’associer la fonction de traitement on_button1_clicked à une méthode du même nom de notre classe. Sans la libglade cette association aurait du être codé par nous même. Il suffit d’ajouter la méthode on_button1_clicked :
class MonAppli
def initialize(file, root)
@main_glade_xml = GladeXML.new(file, root) {|handler| method(handler)}
end
def on_button1_clicked
puts "clicked !"
end
end
le puts nous permettra de vérifier que notre méthode est bien appelée. Cette fois ci en lançant à nouveau notre application vous devriez voir l’interface s’afficher. Un simple clic sur le bouton devrait faire apparaître le message clicked ! dans la console.
Vous avez créé votre première application Ruby-GNOME2 ! :)
Certe, celle-ci ne fait pas grand chose de bien utile … Nous allons corser la chose en affichant non plus le message clicked ! dans la console mais dans le champs texte de votre interface. Il faut pour cela accéder aux méthodes de notre widget GtkEntry. La libglade nous le permet via l’instance @main_glade_xml que nous avons créé dans l’initialisation.
def on_button1_clicked
le_texte = @main_glade_xml.get_widget("texte")
le_texte.text = "clicked !"
end
La libglade nous permet de récupérer un widget de notre interface via la méthode get_widget. Il suffit de lui donner en paramètre le nom que l’on a donné à notre widget, ici texte. D’ou l’intérêt de renommer les widgets que l’on utilise. Ensuite via l’instance que l’on a créé, le_texte, on accède à toutes les méthodes du Widget GtkEntry. Une de celle-ci, text, permet de soit récupérer le contenu, soit d’y mettre un contenu. Toutes les méthodes du bouton GtkEntry sont documentées ici : http://ruby-gnome2.sourceforge.jp/hiki.cgi?Gtk%3A%3AEntry
Pour finir, il y a un moyen un peu plus Ruby d’obtenir la même chose en une seule ligne :
def on_button1_clicked
@main_glade_xml["texte"].text = "clicked !"
end
En effet on peut acceder au widget que l’on souhaite en précisant le nom de celui-ci comme indice de notre instance libglade. A la manière d’un tableau de hash donc. Et dans le même temps on accède à la méthode directement.
#!/usr/bin/env ruby
#
require 'libglade2'
require 'gtk2'
class MonAppli
def initialize(file, root)
@main_glade_xml = GladeXML.new(file, root) {|handler| method(handler)}
end
def on_button1_clicked
@main_glade_xml["texte"].text = "clicked !"
end
end
Gtk.init
MonAppli.new("projet1.glade",nil)
Gtk.main
Les prochains épisodes iront un peu plus loin en étudiant une application plus complexe. En attendant vous pouvez faire joujou avec le script ruby-glade-create-template. En lui donnant votre projet glade en paramètre il génèrera le code ruby avec toutes les méthodes de vos signaux :
ruby-glade-create-template projet1.glade > toto.rb
