<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <META NAME="GENERATOR" CONTENT="lfparser_2.31">
 <META NAME="LFCATEGORY" CONTENT="SoftwareDevelopment">
 <link rel="icon" HREF="../../common/images/lf-16.png" TYPE="image/png">
 <TITLE>lf224, SoftwareDevelopment: D&eacute;velopper des Applications Gnome avec Python (Partie 2)</TITLE>
<style type="text/css">
<!--
 td.top {font-family: Arial,Geneva,Verdana,Helvetica,sans-serif; font-size:12 }
 pre { font-family:monospace,Courier }
 p.cl { color:#EE9500 }
 a.nodec { text-decoration:none }
 p.trans { font-size:8pt; text-align:right }
 p.clbox { width:50%; alignment:center; background-color:#FFD700; 
           border-style:none; border-width:medium; border-color:#FFD700; 
           padding:0.5cm;  text-align:center }
 p.code { width:80%; alignment:center; background-color:#aedbe8; 
          border-style:none; border-width:medium; border-color:#aedbe8; 
          padding:0.1cm;  text-align:left }
 p.foot { background-color:#AAAAAA; color:#FFFFFF; border-style:none; 
          border-width:medium; border-color:#AAAAAA; padding:0.5cm ; 
          margin-top:0.1cm; margin-right:1cm; margin-left:1cm; 
          text-align:center }
 .mark  { background-color:#e6e6ff }
-->
</style>
 
</HEAD>
<BODY bgcolor="#ffffff" text="#000000">
 <!-- this is generated html code. NEVER use this file for your
 translation work. Instead get the file with the same article number
 and .meta.shtml in its name. Translate this meta file and then
 use lfparser program to generate the final article -->
 <!-- lfparser can be obtained from http://www.linuxfocus.org/~guido/dev/lfparser.html -->

<!-- this is used by a number of tools:
 =LF=AUTHOR: Hilaire     Fernandes
 =LF=CAT___: SoftwareDevelopment
 =LF=TITLE_: D&eacute;velopper des Applications Gnome avec Python (Partie 2)
 =LF=NUMBER: 224
 =LF=ANAME_: article224.shtml
 -->

<!-- 2pdaIgnoreStart -->

<!-- start navegation bar -->
 <!-- top navegation bar -->
 <TABLE summary="topbar_1" cellspacing="0" cellpadding="0" border="0" align="center" width="90%">
   <TR bgcolor="#2e2292">
     <TD class="top"><TABLE summary="topbar_1_logo" cellspacing="0" cellpadding="0" border="0" width=
       "100%">
         <TR><TD width="319"><IMG src="../../common/images/logolftop_319x45.gif"
           alt="[LinuxFocus-icon]" width="319" height="45" align="left" 
           border="0"></TD>

           <TD class="top">
             <TABLE summary="topbar_1_links" width="100%">
               <TR align="right">
                 <TD class="top"><A class="nodec" href="../index.shtml"><FONT color=
                 "#DDDDDD" size="2">Sommaire</FONT></A> &nbsp;|&nbsp; <A class=
                 "nodec" href="../map.html"><FONT color=
                 "#DDDDDD" size="2">Carte</FONT></A> &nbsp;|&nbsp; <A class="nodec" href="../Themes/index.html"><FONT color=
                 "#DDDDDD" size="2">Index</FONT></A> &nbsp;|&nbsp; <A class="nodec" href="../Search/index.html"><FONT color=
                 "#DDDDDD" size="2">Recherche</FONT></A> </TD>
               </TR>

               <TR align="right">
                 <TD class="top">
                   <HR width="100%" noshade size="1">
                 </TD>
               </TR>
             </TABLE>
           </TD>
         </TR>
       </TABLE>
     </TD>
   </TR>
 </TABLE>
 <!-- end top navegation bar -->
 <!-- blue bar -->
 <TABLE summary="topbar_2" cellspacing="0" cellpadding="0" border="0" align="center"
 width="90%">
   <TR bgcolor="#00ffff">
     <TD><IMG src="../../common/images/transpix.gif" width="1" height=
     "2" alt=""></TD>
   </TR>
 </TABLE>
 <!-- end blue bar -->
 <!-- bottom navegation bar -->
 <TABLE summary="topbar_3" cellspacing="0" cellpadding="0" border="0" align="center"
 width="94%">
   <TR bgcolor="#000000">
     <TD>
       <TABLE summary="topbar_3_links" cellspacing="0" cellpadding="1" border="0" width=
       "100%">
         <TR align="center">
           <TD WIDTH="20%"><A class="nodec" href="../News/index.shtml"><FONT color=
           "#FFFFFF">Nouvelles</FONT></A> </TD>
           <TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
           <TD WIDTH="20%"><A class="nodec" href="../Archives/index.html"><FONT color=
           "#FFFFFF">Archives</FONT></A> </TD>
           <TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
           <TD WIDTH="20%"><A class="nodec" href="../Links/index.html"><FONT color=
           "#FFFFFF">Liens</FONT></A> </TD>
           <TD WIDTH="5%"><FONT color="#FFFFFF">|</FONT> </TD>
           <TD WIDTH="20%"><A class="nodec" href="../aboutus.html"><FONT color=
           "#FFFFFF">A propos</FONT></A> </TD>
         </TR>
       </TABLE>
     </TD>
   </TR>
 </TABLE>
 <!-- end bottom navegation bar -->
<!-- stop navegation bar -->

<!-- SSI_INFO -->

<!-- tr_staticssi include virtual -->
<!-- tr_staticssi exec cmd -->
<!-- addedByLfdynahead ver 1.4 --><TABLE ALIGN="right" border=0><TR><TD ALIGN="right"><FONT SIZE="-1" FACE="Arial,Helvetica">Ce document est disponible en: <A href="../../English/January2002/article224.shtml">English</a> &nbsp;<A href="../../Castellano/January2002/article224.shtml">Castellano</a> &nbsp;<A href="../../ChineseGB/January2002/article224.shtml">ChineseGB</a> &nbsp;<A href="../../Deutsch/January2002/article224.shtml">Deutsch</a> &nbsp;<A href="../../Francais/January2002/article224.shtml">Francais</a> &nbsp;<A href="../../Nederlands/January2002/article224.shtml">Nederlands</a> &nbsp;<A href="../../Portugues/January2002/article224.shtml">Portugues</a> &nbsp;<A href="../../Turkce/January2002/article224.shtml">Turkce</a> &nbsp;</FONT></TD></TR></TABLE><br>
 


<!-- SSI_INFO STOP -->
<!-- 2pdaIgnoreStop -->

<!-- SHORT BIO ABOUT THE AUTHOR -->
<TABLE ALIGN=LEFT BORDER=0  WIDTH="190" summary="about the author">
<TR>
<TD>

<!-- 2pdaIgnoreStart -->
<!-- PALM DOC -->
<TABLE BORDER=0 hspace=4 vspace=4 summary="pda download"> <TR> <TD>
<font size=1> <img src="../../common/images/2doc.gif" width=34 align=left border=0 height=22 alt="convert to palm"><a href="http://cgi.linuxfocus.org/cgi-bin/2ztxt">Convert to GutenPalm</a><br>or <a href="http://cgi.linuxfocus.org/cgi-bin/2pda">to PalmDoc</a></font>
</TD> </TR> </TABLE>
<!-- END PALM DOC -->
<!-- 2pdaIgnoreStop -->
<br>
<IMG src="../../common/images/HilaireFernandes_color.png" width=
    "124" height="172" alt="Hilaire Fernandes">
<BR>par  Hilaire Fernandes <br> <small>&lt;hilaire(at)ofset.org&gt;</small>
<BR><BR>
<I>L&acute;auteur:</I><BR>
<P>Hilaire Fernandes est le vice-pr&eacute;sident d'<A href=
    "http://www.ofset.org">OFSET</A>, une organisation pour promouvoir
    le d&eacute;veloppement de logiciels &eacute;ducatifs libres pour
    le bureau Gnome. Il a aussi &eacute;crit Dr.Geo, un logiciel
    prim&eacute; de g&eacute;om&eacute;trie dynamique, et il est
    actuellement occup&eacute; avec Dr.Genius un autre logiciel
    &eacute;ducatif de math&eacute;matiques pour le bureau Gnome.</P>
<!-- TRANSLATED TO fr -->
<!-- TRANSLATED TO STOP -->
<BR><i>Sommaire</i>:
<UL>
  <LI><A HREF="#224lfindex0">Outils n&eacute;cessaires</A></LI>
  <LI><A HREF="#224lfindex1">Drill, notre support</A></LI>
  <LI><A HREF="#224lfindex2">Construction de l'interface avec Glade</A></LI>
  <LI><A HREF="#224lfindex3">Le code Python</A></LI>
  <LI><A HREF="#224lfindex4">Les modules n&eacute;cessaires</A></LI>
  <LI><A HREF="#224lfindex5">L'interface graphique avec LibGlade</A></LI>
  <LI><A HREF="#224lfindex6">Le widget GtkTree</A></LI>
  <LI><A HREF="#224lfindex7">Les fonctions de traitement</A></LI>
  <LI><A HREF="#224lfindex8">Le mot final</A></LI>
  <LI><A HREF="#224lfindex9">Appendice: Le source complet</A></LI>
  <LI><A HREF="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=224&amp;lang=fr">Discussion sur cet article</A></LI>
</UL>

</TD></TR></TABLE>
<!-- HEAD OF THE ARTICLE -->
<br>&nbsp;
<H2>D&eacute;velopper des Applications Gnome avec Python (Partie 2)</H2>
 <IMG src="../../common/images/article160/gnome.png" width="48"
    height="48" alt="Gnome" hspace="10">
<!-- ABSTRACT OF THE ARTICLE -->
<P><i>R&eacute;sum&eacute;</i>:
<P>
<P>Cette s&eacute;rie d'articles est sp&eacute;cialement
    &eacute;crite pour des d&eacute;butants en programmation sous Gnome
    et GNU/Linux. Le langage de d&eacute;veloppement choisi, Python,
    &eacute;vite la surcharge habituelle avec des langages
    compil&eacute;s comme le C. Avant d'&eacute;tudier cet article
    quelques notions de programmation sous Python sont
    n&eacute;cessaires.</P>
<br><!-- HR divider --><center><font color="#8282e0"><b>_________________ _________________ _________________</b></font></center><br> 
<!-- BODY OF THE ARTICLE -->


    <A NAME="224lfindex0">&nbsp;</A>
<H2>Outils n&eacute;cessaires</H2>


    <P>Pour les besoins logiciels &agrave; l'ex&eacute;cution du
    programme d&eacute;crit dans cet article, vous pouvez vous
    r&eacute;f&eacute;rer &agrave; la liste de la m&ecirc;me rubrique
    de la <A href="../July2000/article160.shtml">partie I</a> de cette s&eacute;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&eacute;f&eacute;rer &agrave; la partie
    I.</P>
    <BR clear="all">


    <A NAME="224lfindex1">&nbsp;</A>
<H2><STRONG>Drill</STRONG>, notre support</H2>


    <P>La premi&egrave;re partie avait pour objectif de montrer les
    m&eacute;canismes et les modes d'interactions entre les
    diff&eacute;rents composants d'un programme &eacute;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&eacute;r&ecirc;t et la facilit&eacute; de
    d&eacute;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&eacute;rents widgets de Gnome. Le pr&eacute;sent article
    s'attache principalement &agrave; mettre en place ce cadre. Les
    articles suivants s'appuieront sur celui-ci, en lui ajoutant des
    fonctionnalit&eacute;s, pour illustrer les diff&eacute;rents
    widgets de Gnome.</P>

    <P>Notre cadre logiciel s'appelle <STRONG>Drill</STRONG>. C'est une
    plate-forme &agrave; caract&egrave;re &eacute;ducatif sur laquelle
    nous grefferons des exercices. Attention, les exercices ont pour
    seule pr&eacute;tention p&eacute;dagogique d'illustrer l'usage des
    widgets !</P>

    <A NAME="224lfindex2">&nbsp;</A>
<H3>Construction de l'interface avec Glade</H3>


    <P><B>Les widgets</B></P>

    <P>La fen&ecirc;tre de l'application est cr&eacute;&eacute;e
    &agrave; l'aide de Glade. Comme dans l'article
    pr&eacute;c&eacute;dent, vous cr&eacute;ez dans un premier temps
    une fen&ecirc;tre d'une application Gnome. Dans celle-ci vous
    supprimez les menus et ic&ocirc;nes inutiles.</P>

    <P>La zone principale de <STRONG>Drill</STRONG> est
    subdivis&eacute;e en deux espaces gr&acirc;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&ecirc;tre principale de Drill</STRONG>
    </CENTER>

    <P>Ils sont s&eacute;par&eacute;s verticalement par une
    poign&eacute;e permettant d'ajuster la subdivision. L'espace de
    gauche est occup&eacute; par un arbre (widget <TT>GtkTree</TT>)
    dans lequel seront rang&eacute;s par cat&eacute;gorie les
    intitul&eacute;s des exercices. L'espace &agrave; droite est vide,
    c'est ici que nous grefferons les exercices eux-m&ecirc;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&eacute;
    <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 &agrave; gauche. <TT>frame2</TT> contient
    lui-m&ecirc;me le widget <TT>exerciceTree</TT>. En effet, il est
    pr&eacute;f&eacute;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 &eacute;vite de mordre sur
    la poign&eacute;e.</P>

    <P>Pour finir la bo&icirc;te de dialogue Gnome "&Agrave; propos" de
    <STRONG>Drill</STRONG> peut ressembler &agrave; celle-ci</P>

    <CENTER>
      <IMG src="../../common/images/article160/python2-2.png" width=
      "246" height="258" alt="[Bo&icirc;te de dialogue]"><BR>
      <STRONG>Fig. 3 - Bo&icirc;te de dialogue "&Agrave; propos" de
      Drill</STRONG>
    </CENTER>

    <P>Ses diff&eacute;rentes rubriques sont &eacute;dit&eacute;es
    depuis Glade, dans le feuillet <TT>Widget</TT> de la fen&ecirc;tre
    <TT>Propri&eacute;t&eacute;s</TT>.</P>

    <P><B>Les noms des widgets et des fonctions de traitement</B></P>

    <P>Appliquez les noms suivants &agrave; ces widgets afin de les
    manipuler sous ces noms depuis Pyhton.</P>

    <DL id="widgetname">
      <DT><B>Fen&ecirc;tre d'application Gnome :</B></DT>

      <DD><TT>drillApp</TT></DD>

      <DT><B>Poign&eacute;e s&eacute;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&icirc;te de dialogue Gnome &Agrave;-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&eacute;mentaires sur le sujet r&eacute;f&eacute;rez-vous
    &agrave; <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&ocirc;ne nouveau dans<BR>
         la barre &agrave; 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&eacute;cifier la
    g&eacute;om&eacute;trie des widgets. Dans notre affaire, vous
    pouvez ajuster la taille de <TT>drillApp</TT> &agrave; 400 et 300
    depuis l'onglet <TT>Commun</TT> du panneau de
    <TT>Propri&eacute;t&eacute;s</TT>. Aussi, la position du diviseur
    des panneaux horizontaux peut &ecirc;tre ajust&eacute;e &agrave;
    100 au lieu de 1.</P>

    <P>Ensuite, le widget <TT>exerciceTree</TT> doit &ecirc;tre
    ajust&eacute; afin de ne permettre qu'une seule s&eacute;lection
    &agrave; la fois. En effet un seul exercice peut &ecirc;tre
    s&eacute;lectionn&eacute; &agrave; la fois. Depuis le panneau de
    <TT>Propri&eacute;t&eacute;s</TT>, choisir
    <TT>Selection-&gt;Single</TT>. Les autres options de ce widget sont
    de moindre importance.</P>

    <P>Voil&agrave;! C'est fini en ce qui concerne
    <STRONG>Drill</STRONG> lui-m&ecirc;me. Nous commencerons &agrave;
    d&eacute;velopper des exercices d&egrave;s le prochain article.
    Pour le moment nous allons voir comment utiliser l'interface depuis
    Python et nous int&eacute;resser &agrave; la manipulation du widget
    <TT>GtkTree</TT>.</P>

    <A NAME="224lfindex3">&nbsp;</A>
<H3>Le code Python</H3>


    <P>Le code source complet se trouve &agrave; la fin de ce document.
    Il doit &ecirc;tre sauvegard&eacute; dans le m&ecirc;me dossier que
    le fichier <TT>drill.glade</TT>.</P>

    <A NAME="224lfindex4">&nbsp;</A>
<H3>Les modules n&eacute;cessaires</H3>


    <P class="code">from gtk import * from gnome.ui import * from GDK
    import * from libglade import *</P>

    <A NAME="224lfindex5">&nbsp;</A>
<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&ccedil;on
    analogue &agrave; l'exemple pr&eacute;c&eacute;dent. Nous ne
    revenons pas sur cet aspect l&agrave;.</P>

    <P>Dans le programme python nous d&eacute;finissons des variables
    globales :</P>

    <UL>
      <LI><TT>currentExercice</TT>: r&eacute;f&eacute;rence du widget
      repr&eacute;sentant l'exercice courant. Celui-ci est plac&eacute;
      dans la partie droite de la fen&ecirc;tre d'application de
      <STRONG>Drill</STRONG>. Les exercices seront &eacute;galement
      cr&eacute;&eacute;s &agrave; partir de Glade.</LI>

      <LI><TT>exerciceTree</TT> : r&eacute;f&eacute;rence de l'arbre
      &agrave; gauche dans la fen&ecirc;tre d'application de
      <STRONG>Drill</STRONG>.</LI>

      <LI><TT>label</TT> : r&eacute;f&eacute;rence un label
      (<TT>GtkLabel</TT>). Ce label est un palliatif &agrave; l'absence
      d'exercice pour le moment. Il sera donc plac&eacute; &agrave;
      droite de l'arbre -- o&ugrave; les exercices prendront place --
      et nous y afficherons les identifiants des exercices
      s&eacute;lectionn&eacute;s.</LI>
    </UL>
    <BR>
    <BR>


    <P>L'arbre est cr&eacute;&eacute; par LibGlade, sa
    r&eacute;f&eacute;rence est r&eacute;cup&eacute;r&eacute;e par
    l'appel suivant:</P>

    <P class="code">exerciceTree = wTree.get_widget
    ("exerciceTree")</P>

    <P>Nous avons &eacute;galement besoin de la r&eacute;f&eacute;rence
    des panneaux horizontaux, en fait la r&eacute;f&eacute;rence du
    conteneur (<TT>GtkPaned</TT>) des deux panneaux horizontaux
    s&eacute;par&eacute;s par une poign&eacute;e. Celui &agrave; gauche
    contient l'arbre ; celui &agrave; 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&eacute;lectionn&eacute;") label.show
    () paned.pack2 (label)</P>

    <P>Une fois encore l'utilisation conjointe du <B>Manuel de
    r&eacute;f&eacute;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&eacute;cessaire &agrave; la bonne utilisation des
    objets.</P>

    <A NAME="224lfindex6">&nbsp;</A>
<H3>Le widget <TT>GtkTree</TT></H3>


    <P>Nous arrivons ici &agrave; l'&eacute;l&eacute;ment essentiel de
    notre article, &agrave; 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&eacute;gorie (un sous arbre) ainsi que des titres
    d'exercices (les items):</P>

    <P class="code">def addMathExercices (): <br>
    subtree = addSubtree ("Math&eacute;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&eacute;er un sous-arbre dans un arbre existant, il faut
    cr&eacute;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&eacute; &agrave; l'arbre racine -- notre arbre contenant
    toutes les cat&eacute;gories -- puis nous greffons notre sous-arbre
    &agrave; l'item gr&acirc;ce &agrave; sa m&eacute;thode
    <TT>set_subtree()</TT>. Enfin, l'&eacute;v&eacute;nement
    <TT>select</TT> est connect&eacute; &agrave; l'item, ainsi lorsque
    la cat&eacute;gorie est s&eacute;lectionn&eacute;e, la fonction
    <TT>selectSubtree()</TT> est appel&eacute;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&eacute;n&eacute;ral simplement <TT>Exercice 1</TT>, <TT>2</TT>,
    ... &Agrave; chaque item nous associons un attribut
    suppl&eacute;mentaire, <TT>id</TT>. GTK+ offre en effet la
    possibilit&eacute; d'ajouter &agrave; tout objet de type
    <TT>GtkObject</TT> -- dont tous les widgets de GTK+ sont issus --
    des attributs. Pour ce faire il existe deux m&eacute;thodes
    <TT>set_data (key, value)</TT> et <TT>get_data (key)</TT> pour
    initialiser et r&eacute;cup&eacute;rer la valeur d'un attribut.
    L'item est ensuite ajout&eacute; &agrave; sa cat&eacute;gorie -- un
    sous arbre. Sa m&eacute;thode <TT>show()</TT> est appel&eacute;e,
    elle est n&eacute;cessaire pour forcer l'affichage. Enfin les
    &eacute;v&eacute;nements <TT>select</TT> et <TT>deselect</TT> sont
    connect&eacute;s, l'&eacute;v&eacute;nement <TT>deselect</TT> prend
    lieu lorsque l'item perd la s&eacute;lection. Chronologiquement, la
    m&eacute;thode <TT>deselectTreeItem()</TT> est appel&eacute;e sur
    l'item perdant la s&eacute;lection, puis <TT>selectTreeItem()</TT>
    est invoqu&eacute;e sur l'item prenant la s&eacute;lection.</P>

    <A NAME="224lfindex7">&nbsp;</A>
<H3>Les fonctions de traitement</H3>


    <P>Nous avons d&eacute;fini trois fonctions de traitement
    <TT>selectTreeItem()</TT>, <TT>deselectTreeItem()</TT> et
    <TT>selectSubtree()</TT>. Ces m&eacute;thodes mettent &agrave; jour
    le texte du label -- plac&eacute; dans la zone de droite -- avec la
    valeur de l'attribut <TT>id</TT>. C'est tout pour le moment.</P>

    <A NAME="224lfindex8">&nbsp;</A>
<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&eacute;couvrirons. Nous avons principalement &eacute;tudi&eacute;
    le widget <TT>GtkTree</TT> et comment associer des attributs
    &agrave; des widgets. Ce dernier m&eacute;canisme est tr&egrave;s
    souvent utilis&eacute; pour r&eacute;cup&eacute;rer dans les
    fonctions de traitement des informations suppl&eacute;mentaires
    associ&eacute;es, ce que nous avons fait ici. En attendant le
    prochain article, vous pouvez essayer de transformer le jeu
    <STRONG>Couleur</STRONG>, &eacute;tudi&eacute; en partie 1, comme
    un exercice dans <STRONG>Drill</STRONG>.</P>

    <A NAME="224lfindex9">&nbsp;</A>
<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&eacute;lectionn&eacute;.")<BR>
    <BR>
    def deselectTreeItem (item):<BR>
     global label<BR>
     label.set_text ("L'exercice " +<BR>
     item.get_data ("id") + "est
    d&eacute;s&eacute;lectionn&eacute;.")<BR>
    <BR>
    def selectSubtree (subtree):<BR>
     global label<BR>
     label.set_text ("Aucun exercice de s&eacute;lectionn&eacute;")<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&eacute;matiques")<BR>
     addExercice (subtree, "Exercice 1", "Math. Ex1")<BR>
     addExercice (subtree, "Exercice 2", "Math. Ex2")<BR>
    <BR>
    def addFrenchExercices ():<BR>
     subtree = addSubtree ("Fran&ccedil;ais")<BR>
     addExercice (subtree, "Exercice 1", "Fran&ccedil;ais Ex1")<BR>
     addExercice (subtree, "Exercice 2", "Fran&ccedil;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&eacute;ographie")<BR>
     addExercice (subtree, "Exercice 1", "G&eacute;ographie Ex1")<BR>
     addExercice (subtree, "Exercice 2", "G&eacute;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&eacute;lectionn&eacute;")<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>
  



<!-- 2pdaIgnoreStart -->
<A NAME="talkback">&nbsp;</a>
<h2>Discussion sur cet article</h2>
Chaque article poss&egrave;de sa page de discussion. Vous pouvez y soumettre un commentaire ou lire ceux d&acute;autres lecteurs:
<center>
<table border="0"  CELLSPACING="2" CELLPADDING="1" summary="tb-button-outerpart">
 <tr BGCOLOR="#C2C2C2"><td align=center>
  <table border="3"  CELLSPACING="2" CELLPADDING="1" summary="tb-button">
   <tr BGCOLOR="#C2C2C2"><td align=center>
    <A href="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=224&amp;lang=fr"><b>&nbsp;page de discussion&nbsp;</b></a>
   </td></tr></table>
</td></tr></table>
</center>

<HR size="2" noshade>
<!-- ARTICLE FOOT -->
<CENTER><TABLE WIDTH="98%" summary="footer">
<TR><TD ALIGN=CENTER BGCOLOR="#9999AA" WIDTH="50%">
<A HREF="../../common/lfteam.html">Site Web maintenu par l&acute;&eacute;quipe d&acute;&eacute;dition LinuxFocus</A>
<BR><FONT COLOR="#FFFFFF">&copy; Hilaire     Fernandes, <a href="../../common/copy.html">FDL</a> <BR><a href="http://www.linuxfocus.org">LinuxFocus.org</a></FONT>
</TD>
<TD BGCOLOR="#9999AA">
<!-- TRANSLATION INFO -->
<font size=2>Translation information:</font>
<TABLE summary="translators">
  <tr><td><font size="2">fr --&gt; -- : Hilaire Fernandes <small>&lt;hilaire(at)ofset.org&gt;</small></font></td></tr>
</TABLE>
</TD>
</TR></TABLE></CENTER>
<p><font size=1>2002-10-04, generated by lfparser version 2.31</font></p>
<!-- 2pdaIgnoreStop -->
</BODY>
</HTML>