<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR">
<HTML>
<HEAD>
<!-- this stylesheet will later on be added by lfparser automatically: -->
<STYLE type="text/css">
<!--
pre { font-familiy:monospace,Courier }
p.code { width:80%; alignment:center; background-color:#aedbe8; border-style:no ne; border-width:medium; border-color:#aedbe8; padding:0.1cm ; text-align:left }
-->
</STYLE>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Développer des Applications Gnome avec Python (Partie
2)</H1>
<H4>ArticleCategory:</H4>
Software Development
<H4>AuthorImage:</H4>
<IMG src="../../common/images/HilaireFernandes_color.png" width=
"124" height="172" alt="Hilaire Fernandes">
<H4>TranslationInfo:[Author + translation history. mailto: or
http://homepage]</H4>
<P>original in fr <A href="mailto:hilaire@ofset.org">Hilaire
Fernandes</A></P>
<H4>AboutTheAuthor</H4>
<P>Hilaire Fernandes est le vice-président d'<A href=
"http://www.ofset.org">OFSET</A>, une organisation pour promouvoir
le développement de logiciels éducatifs libres pour
le bureau Gnome. Il a aussi écrit Dr. Geo, un logiciel
primé de géométrie dynamique, et il est
actuellement occupé avec Dr. Genius un autre logiciel
éducatif de mathématiques pour le bureau Gnome.</P>
<H4>Abstract:</H4>
<P>Cette série d'articles est spécialement
écrite pour des débutants en programmation sous Gnome
et GNU/Linux. Le langage de développement choisi, Python,
évite la surcharge habituelle avec des langages
compilés comme le C. Avant d'étudier cet article
quelques notions de programmation sous Python sont
nécessaires.</P>
<H4>ArticleIllustration:</H4>
<IMG src="../../common/images/article160/gnome.png" width="48"
height="48" alt="Gnome" hspace="10">
<H4>ArticleBody:</H4>
<H2>Outils n�cessaires</H2>
<P>Pour les besoins logiciels à l'exécution du
programme décrit dans cet article, vous pouvez vous
référer à la liste de la même rubrique
de la <A href="../July2000/article160.shtml">partie I</a> de cette série d'articles.</P>
<P>Vous aurez aussi besoin :</P>
<UL>
<LI>du fichier .glade original [ <A href=
"../../common/images/article160/drill.glade.txt">drill.glade</A>
] ;</LI>
<LI>du code source en Python [ <A href=
"../../common/images/article160/drill.py.txt">drill.py</A>
].</LI>
</UL>
<P>Pour l'installation et l'utilisation de Pyhton-Gnome et LibGlade
vous pouvez aussi vous référer à la partie
I.</P>
<BR clear="all">
<H2><STRONG>Drill</STRONG>, notre support</H2>
<P>La première partie avait pour objectif de montrer les
mécanismes et les modes d'interactions entre les
différents composants d'un programme écrit sous une
configuration de type Gnome, Glade, LibGlade et Python.</P>
<P>L'exemple utilisait le widget <TT>GnomeCanvas</TT>. Celui-ci
nous a offert une illustration riche en couleur montrant
l'intérêt et la facilité de
développement sous cette configuration.</P>
<P>Pour les parties suivantes, je vous propose de mettre en place
un cadre logiciel dans lequel nous illustrerons les
différents widgets de Gnome. Le présent article
s'attache principalement à mettre en place ce cadre. Les
articles suivants s'appuieront sur celui-ci, en lui ajoutant des
fonctionnalités, pour illustrer les différents
widgets de Gnome.</P>
<P>Notre cadre logiciel s'appelle <STRONG>Drill</STRONG>. C'est une
plate-forme à caractère éducatif sur laquelle
nous grefferons des exercices. Attention, les exercices ont pour
seule prétention pédagogique d'illustrer l'usage des
widgets !</P>
<H3>Construction de l'interface avec Glade</H3>
<P><B>Les widgets</B></P>
<P>La fenêtre de l'application est créée
à l'aide de Glade. Comme dans l'article
précédent, vous créez dans un premier temps
une fenêtre d'une application Gnome. Dans celle-ci vous
supprimez les menus et icônes inutiles.</P>
<P>La zone principale de <STRONG>Drill</STRONG> est
subdivisée en deux espaces grâce au widget
<TT>GtkPaned</TT>.</P>
<CENTER>
<IMG src="../../common/images/article160/python2-0.png" width=
"361" height="407"><BR>
<STRONG>Fig. 1 - Fenêtre principale de Drill</STRONG>
</CENTER>
<P>Ils sont séparés verticalement par une
poignée permettant d'ajuster la subdivision. L'espace de
gauche est occupé par un arbre (widget <TT>GtkTree</TT>)
dans lequel seront rangés par catégorie les
intitulés des exercices. L'espace à droite est vide,
c'est ici que nous grefferons les exercices eux-mêmes en
fonction du choix de l'utilisateur.</P>
<P>Depuis Glade, la vue de l'interface de <STRONG>Drill</STRONG>
sous forme d'arbre permet de comprendre son agencement :</P>
<CENTER>
<IMG src="../../common/images/article160/python2-1.png" width=
"262" height="345"><BR>
<STRONG>Fig. 2 - Vue en arbre de l'interface de Drill</STRONG>
</CENTER>
<P>Dans la Fig. 2, nous voyons que le widget nommé
<TT>hpanedTree</TT> (de type <TT>GtkPaned</TT>) ne contient qu'un
seul widget, <TT>frame2</TT> (de type <TT>GtkFrame</TT>), c'est
celui-ci qui est à gauche. <TT>frame2</TT> contient
lui-même le widget <TT>exerciceTree</TT>. En effet, il est
préférable de placer d'abord un widget
<TT>GtkFrame</TT> avec une ombre de type <TT>GTK_SHADOW_IN</TT>
dans un widget <TT>GtkPaned</TT>, cela évite de mordre sur
la poignée.</P>
<P>Pour finir la boîte de dialogue Gnome "À propos" de
<STRONG>Drill</STRONG> peut ressembler à celle-ci</P>
<CENTER>
<IMG src="../../common/images/article160/python2-2.png" width=
"246" height="258" alt="[Boîte de dialogue]"><BR>
<STRONG>Fig. 3 - Boîte de dialogue "À propos" de
Drill</STRONG>
</CENTER>
<P>Ses différentes rubriques sont éditées
depuis Glade, dans le feuillet <TT>Widget</TT> de la fenêtre
<TT>Propriétés</TT>.</P>
<P><B>Les noms des widgets et des fonctions de traitement</B></P>
<P>Appliquez les noms suivants à ces widgets afin de les
manipuler sous ces noms depuis Pyhton.</P>
<DL id="widgetname">
<DT><B>Fenêtre d'application Gnome :</B></DT>
<DD><TT>drillApp</TT></DD>
<DT><B>Poignée séparant l'arbre des exercices
:</B></DT>
<DD><TT>hpanedTree</TT></DD>
<DT><B>Arbre des exercices :</B></DT>
<DD><TT>exerciceTree</TT></DD>
<DT><B>Boîte de dialogue Gnome À-propos :</B></DT>
<DD><TT>about</TT></DD>
</DL>
<P>Ces widgets sont ceux dont les noms sont visibles sur la Fig.
2</P>
<P>Nous listons ici rapidement les noms des fonctions de
traitement. Si vous avez besoin d'informations
complémentaires sur le sujet référez-vous
à <A href="../July2000/article160.shtml">la partie I.</a></P>
<P></P>
<TABLE border="1" cellpadding="8">
<TR>
<TH>Nom de widget</TH>
<TH>Signal</TH>
<TH>Traitement</TH>
</TR>
<TR>
<TD>about</TD>
<TD>clicked</TD>
<TD>gtk_widget_destroy</TD>
</TR>
<TR>
<TD>about</TD>
<TD>close</TD>
<TD>gtk_widget_destroy</TD>
</TR>
<TR>
<TD>about</TD>
<TD>destroy</TD>
<TD>gtk_widget_destroy</TD>
</TR>
<TR>
<TD>button1 (icône nouveau dans<BR>
la barre à outils</TD>
<TD>clicked</TD>
<TD>on_new_activate</TD>
</TR>
<TR>
<TD>new</TD>
<TD>activate</TD>
<TD>on_new_activate</TD>
</TR>
<TR>
<TD>drillApp</TD>
<TD>destroy</TD>
<TD>on_exit_activate</TD>
</TR>
<TR>
<TD>exit</TD>
<TD>activate</TD>
<TD>on_exit_activate</TD>
</TR>
<TR>
<TD>about</TD>
<TD>activate</TD>
<TD>on_about_activate</TD>
</TR>
</TABLE>
<P><B>Derniers ajustements</B></P>
<P>Depuis Glade il est possible de spécifier la
géométrie des widgets. Dans notre affaire, vous
pouvez ajuster la taille de <TT>drillApp</TT> à 400 et 300
depuis l'onglet <TT>Commun</TT> du panneau de
<TT>Propriétés</TT>. Aussi, la position du diviseur
des panneaux horizontaux peut être ajustée à
100 au lieu de 1.</P>
<P>Ensuite, le widget <TT>exerciceTree</TT> doit être
ajusté afin de ne permettre qu'une seule sélection
à la fois. En effet un seul exercice peut être
sélectionné à la fois. Depuis le panneau de
<TT>Propriétés</TT>, choisir
<TT>Selection->Single</TT>. Les autres options de ce widget sont
de moindre importance.</P>
<P>Voilà! C'est fini en ce qui concerne
<STRONG>Drill</STRONG> lui-même. Nous commencerons à
développer des exercices dès le prochain article.
Pour le moment nous allons voir comment utiliser l'interface depuis
Python et nous intéresser à la manipulation du widget
<TT>GtkTree</TT>.</P>
<H3>Le code Python</H3>
<P>Le code source complet se trouve à la fin de ce document.
Il doit être sauvegardé dans le même dossier que
le fichier <TT>drill.glade</TT>.</P>
<H3>Les modules nécessaires</H3>
<P class="code">from gtk import * from gnome.ui import * from GDK
import * from libglade import *</P>
<H3>L'interface graphique avec LibGlade</H3>
<P>La construction de l'interface graphique et la connection des
fonctions de traitement avec LibGlade se fait de façon
analogue à l'exemple précédent. Nous ne
revenons pas sur cet aspect là.</P>
<P>Dans le programme python nous définissons des variables
globales :</P>
<UL>
<LI><TT>currentExercice</TT>: référence du widget
représentant l'exercice courant. Celui-ci est placé
dans la partie droite de la fenêtre d'application de
<STRONG>Drill</STRONG>. Les exercices seront également
créés à partir de Glade.</LI>
<LI><TT>exerciceTree</TT> : référence de l'arbre
à gauche dans la fenêtre d'application de
<STRONG>Drill</STRONG>.</LI>
<LI><TT>label</TT> : référence un label
(<TT>GtkLabel</TT>). Ce label est un palliatif à l'absence
d'exercice pour le moment. Il sera donc placé à
droite de l'arbre -- où les exercices prendront place --
et nous y afficherons les identifiants des exercices
sélectionnés.</LI>
</UL>
<BR>
<BR>
<P>L'arbre est créé par LibGlade, sa
référence est récupérée par
l'appel suivant:</P>
<P class="code">exerciceTree = wTree.get_widget
("exerciceTree")</P>
<P>Nous avons également besoin de la référence
des panneaux horizontaux, en fait la référence du
conteneur (<TT>GtkPaned</TT>) des deux panneaux horizontaux
séparés par une poignée. Celui à gauche
contient l'arbre ; celui à droite les exercices, nous y
placerons pour le moment le label :</P>
<P class="code">paned = wTree.get_widget ("hpanedTree") label =
GtkLabel ("Aucun exercice de sélectionné") label.show
() paned.pack2 (label)</P>
<P>Une fois encore l'utilisation conjointe du <B>Manuel de
référence de GTK+</B> -- sur les objets
<TT>GtkLabel</TT> et <TT>GtkPaned</TT> -- et du source Python
<TT>/usr/lib/python1.5/site-packages/gtk.py</TT> offre le
discernement nécessaire à la bonne utilisation des
objets.</P>
<H3>Le widget <TT>GtkTree</TT></H3>
<P>Nous arrivons ici à l'élément essentiel de
notre article, à savoir l'utilisation d'un arbre de type
<TT>GtkTree</TT>.</P>
<P>L'arbre est rempli par les appels successifs aux fonctions
<TT>addMathExercices()</TT>, <TT>addFrenchExercices()</TT>,
<TT>addHistoryExercices()</TT> et <TT>addGeographyExercices()</TT>.
Elles sont toutes semblables. Chacune de ces fonctions ajoutent une
sous catégorie (un sous arbre) ainsi que des titres
d'exercices (les items):</P>
<P class="code">def addMathExercices (): <br>
subtree = addSubtree ("Mathématiques")<br>
addExercice (subtree, "Exercice 1", "Math.
Ex1")<br>
addExercice (subtree, "Exercice 2", "Math. Ex2")</P>
<P><B>Le sous-arbre</B></P>
<P class="code">def addSubtree (name): <br>
global exerciceTree <br>
subTree = GtkTree ()<br>
item = GtkTreeItem (name) <br>
exerciceTree.append (item)<br>
item.set_subtree (subTree) <br>
item.show () <br>
item.connect ("select", selectSubtree) <br>
return subTree</P>
<P>Pour créer un sous-arbre dans un arbre existant, il faut
créer deux choses : un arbre <TT>GtkTree</TT> et un item
<TT>GtkTreeItem</TT> portant le nom du sous-arbre. Ensuite l'item
est ajouté à l'arbre racine -- notre arbre contenant
toutes les catégories -- puis nous greffons notre sous-arbre
à l'item grâce à sa méthode
<TT>set_subtree()</TT>. Enfin, l'événement
<TT>select</TT> est connecté à l'item, ainsi lorsque
la catégorie est sélectionnée, la fonction
<TT>selectSubtree()</TT> est appelée.</P>
<P><B>GtkTreeItem</B></P>
<P class="code">def addExercice (category, title, idValue): <br>
item = GtkTreeItem (title) <br>
item.set_data ("id", idValue) <br>
category.append (item) <br>
item.show () <br>
item.connect ("select", selectTreeItem)<br>
item.connect ("deselect", deselectTreeItem)</P>
<P>Les items portent comme titre les noms des exercices, ici en
général simplement <TT>Exercice 1</TT>, <TT>2</TT>,
... À chaque item nous associons un attribut
supplémentaire, <TT>id</TT>. GTK+ offre en effet la
possibilité d'ajouter à tout objet de type
<TT>GtkObject</TT> -- dont tous les widgets de GTK+ sont issus --
des attributs. Pour ce faire il existe deux méthodes
<TT>set_data (key, value)</TT> et <TT>get_data (key)</TT> pour
initialiser et récupérer la valeur d'un attribut.
L'item est ensuite ajouté à sa catégorie -- un
sous arbre. Sa méthode <TT>show()</TT> est appelée,
elle est nécessaire pour forcer l'affichage. Enfin les
événements <TT>select</TT> et <TT>deselect</TT> sont
connectés, l'événement <TT>deselect</TT> prend
lieu lorsque l'item perd la sélection. Chronologiquement, la
méthode <TT>deselectTreeItem()</TT> est appelée sur
l'item perdant la sélection, puis <TT>selectTreeItem()</TT>
est invoquée sur l'item prenant la sélection.</P>
<H3>Les fonctions de traitement</H3>
<P>Nous avons défini trois fonctions de traitement
<TT>selectTreeItem()</TT>, <TT>deselectTreeItem()</TT> et
<TT>selectSubtree()</TT>. Ces méthodes mettent à jour
le texte du label -- placé dans la zone de droite -- avec la
valeur de l'attribut <TT>id</TT>. C'est tout pour le moment.</P>
<H3>Le mot final</H3>
<P>Nous avons ici mis en place l'infrastructure dans laquelle nous
grefferons des exercices -- autant de nouveaux widgets que nous
découvrirons. Nous avons principalement étudié
le widget <TT>GtkTree</TT> et comment associer des attributs
à des widgets. Ce dernier mécanisme est très
souvent utilisé pour récupérer dans les
fonctions de traitement des informations supplémentaires
associées, ce que nous avons fait ici. En attendant le
prochain article, vous pouvez essayer de transformer le jeu
<STRONG>Couleur</STRONG>, étudié en partie 1, comme
un exercice dans <STRONG>Drill</STRONG>.</P>
<H3>Appendice: Le source complet</H3>
<P class="code"><BR>
#!/usr/bin/python<BR>
# Drill - Teo Serie<BR>
# Copyright Hilaire Fernandes 2001<BR>
# Release under the terms of the GPL licence<BR>
# You can get a copy of the license at http://www.gnu.org<BR>
<BR>
from gtk import *<BR>
from gnome.ui import *<BR>
from GDK import *<BR>
from libglade import *<BR>
<BR>
exerciceTree = currentExercice = label = None<BR>
<BR>
def on_about_activate(obj):<BR>
"display the about dialog"<BR>
about = GladeXML ("drill.glade", "about").get_widget ("about")<BR>
about.show ()<BR>
<BR>
def on_new_activate (obj):<BR>
global exerciceTree, currentExercice<BR>
<BR>
<BR>
def selectTreeItem (item):<BR>
global label<BR>
label.set_text ("L'exercice " +<BR>
item.get_data ("id") + "est sélectionné.")<BR>
<BR>
def deselectTreeItem (item):<BR>
global label<BR>
label.set_text ("L'exercice " +<BR>
item.get_data ("id") + "est
désélectionné.")<BR>
<BR>
def selectSubtree (subtree):<BR>
global label<BR>
label.set_text ("Aucun exercice de sélectionné")<BR>
<BR>
def addSubtree (name):<BR>
global exerciceTree<BR>
subTree = GtkTree ()<BR>
item = GtkTreeItem (name)<BR>
exerciceTree.append (item)<BR>
item.set_subtree (subTree)<BR>
item.show ()<BR>
item.connect ("select", selectSubtree)<BR>
return subTree<BR>
<BR>
def addExercice (category, title, id):<BR>
item = GtkTreeItem (title)<BR>
item.set_data ("id", id)<BR>
category.append (item)<BR>
item.show ()<BR>
item.connect ("select", selectTreeItem)<BR>
item.connect ("deselect", deselectTreeItem)<BR>
<BR>
<BR>
def addMathExercices ():<BR>
subtree = addSubtree ("Mathématiques")<BR>
addExercice (subtree, "Exercice 1", "Math. Ex1")<BR>
addExercice (subtree, "Exercice 2", "Math. Ex2")<BR>
<BR>
def addFrenchExercices ():<BR>
subtree = addSubtree ("Français")<BR>
addExercice (subtree, "Exercice 1", "Français Ex1")<BR>
addExercice (subtree, "Exercice 2", "Français Ex2")<BR>
<BR>
def addHistoryExercices ():<BR>
subtree = addSubtree ("Histoire")<BR>
addExercice (subtree, "Exercice 1", "Histoire Ex1")<BR>
addExercice (subtree, "Exercice 2", "Histoire Ex2")<BR>
<BR>
def addGeographyExercices ():<BR>
subtree = addSubtree ("Géographie")<BR>
addExercice (subtree, "Exercice 1", "Géographie Ex1")<BR>
addExercice (subtree, "Exercice 2", "Géographie Ex2")<BR>
<BR>
def initDrill ():<BR>
global exerciceTree, label<BR>
wTree = GladeXML ("drill.glade", "drillApp")<BR>
dic = {"on_about_activate": on_about_activate,<BR>
"on_exit_activate": mainquit,<BR>
"on_new_activate": on_new_activate}<BR>
wTree.signal_autoconnect (dic)<BR>
exerciceTree = wTree.get_widget ("exerciceTree")<BR>
# Temporary until we implement real exercice<BR>
paned = wTree.get_widget ("hpanedTree")<BR>
label = GtkLabel ("Aucun exercice de
sélectionné")<BR>
label.show ()<BR>
paned.pack2 (label)<BR>
# Free the GladeXML tree<BR>
wTree.destroy ()<BR>
# Add the exercices<BR>
addMathExercices ()<BR>
addFrenchExercices ()<BR>
addHistoryExercices ()<BR>
addGeographyExercices ()<BR>
<BR>
initDrill ()<BR>
mainloop ()</P>
</BODY>
</HTML>