Conception d'interfaces graphiques simples avec dialog/Xdialog

1. Introduction

Cet article présente dialog et Xdialog pour construire des interfaces graphiques aux scripts shell. Il suppose que vous connaissez la programmation shell. La dernière version de ce document se trouve ici.

dialog est un utilitaire permettant de construire des interfaces graphiques basées sur la console. Xdialog est l'équivalent pour X. Les deux programmes sont plus ou moins compatibles et faciles à programmer. dialog est présent dans la plupart des distributions GNU/Linux. Si vous souhaitez le compiler depuis les sources, procurez-vous une archive tar ici. Xdialog est disponible ici.

Ces deux programmes sont des logiciels libres et tournent sur de nombreuses plates-formes *nix. La plupart des exemples donnés dans ce tutoriel sont adaptés d'exemples fournis avec les sources de dialog.

2. Les bases

Voici le premier script dialog que j'ai essayé. Il affiche une simple fenêtre OUI/NON.

#!/bin/bash
DIALOG=${DIALOG=dialog}

$DIALOG --title " Mon premier dialog" --clear \
	--yesno "Bonjour, ceci est mon premier programme dialog" 10 30

case $? in
	0)	echo "Oui choisi. ";;
	1)	echo "Non choisi. ";;
	255)	echo "Appuyé sur Echap. ";;
esac

Copiez les lignes ci-dessus dans un fichier, par exemple ouinon.sh et rendez-le exécutable :

$chmod u+x ouinon.sh

Essayez maintenant de lancer le programme :

$./ouinon.sh

Une copie d'écran du résultat est présentée ci-dessous[1] :

À présent, changez la ligne

DIALOG=${DIALOG=dialog}

en

DIALOG=${DIALOG=Xdialog}

Essayez de lancer le programme à partir d'un terminal X. Voici ce que vous obtenez :

Observons de plus près le programme ci-dessus. La première ligne est simplement un commentaire qui indique en outre que le shell bash est utilisé pour exécuter ce programme :

DIALOG=${DIALOG=dialog}

La ligne ci-dessus affecte la valeur dialog à la variable DIALOG. La véritable fenêtre dialog est dessinée par la ligne suivante :

$DIALOG --title " Mon premier dialog" --clear \
	-yesno "Bonjour, ceci est mon premier programme dialog" 10 30

Les options utilisées sont :

• --title : cette option définit le titre de votre fenêtre ;

• --clear : cette option efface l'écran avant de dessiner ;

• --yesno : cette option dessine la fenêtre avec le texte indiqué à l'intérieur de la fenêtre.

Le texte à afficher dans la fenêtre oui/non est indiqué entre guillemets. Le texte s'étend en fonction de la largeur de la fenêtre ; faites appel à \n pour forcer un saut de ligne. Les deux derniers nombres spécifient la largeur et la hauteur de la fenêtre. Pour vous déplacer entre oui et non, utilisez la touche Tab.

Le programme dialog attend maintenant une entrée utilisateur. Quand vous appuyez sur Entrée sur oui ou non, ou si vous appuyez sur la touche Echap, le programme se termine et la valeur de retour est disponible dans la variable shell $? que vous pouvez traiter par la suite.

3. Lire une entrée

Le programme suivant lit une chaîne de caractères que vous entrez et la réaffiche.

#!/bin/sh
DIALOG=${DIALOG=dialog}
fichtemp=`tempfile 2>/dev/null` || fichtemp=/tmp/test$$
trap "rm -f $fichtemp" 0 1 2 5 15
$DIALOG --title "Ma fenêtre d'entrée" --clear \
        --inputbox "Bonjour, voici un exemple de fenêtre d'entrée\n
Essayez de saisir votre nom ci-dessous:" 16 51 2> $fichtemp

valret=$?

case $valret in
  0)
    echo "La chaîne d'entrée est `cat $fichtemp`";;
  1)
    echo "Appuyé sur Annuler.";;
  255)
    if test -s $fichtemp ; then
        cat $fichtemp
    else
        echo "Appuyé sur Echap."
    fi
    ;;
esac

Essayez de lancer le programme dans la console et sous X (après avoir changé dialog en Xdialog comme précédemment). Admirez le résultat :

Ce programme est un peu plus complexe que notre précédent programme de fenêtre oui/non. Les lignes suivantes créent un fichier temporaire :

fichtemp=`tempfile 2>/dev/null` || fichtemp=/tmp/test$$
trap "rm -f $fichtemp" 0 1 2 5 15

La première ligne ci-dessus essaie de créer un fichier temporaire à l'aide de l'utilitaire tempfile. Si ce dernier échoue, un fichier temporaire est configué manuellement dans /tmp. La seconde ligne met en place une routine d'interception. Quand le script se termine (sur erreur ou non), la commande trap supprime le fichier temporaire. Les nombres affichés sont les signaux qui seront interceptés.

dialog est alors lancé comme suit :

$DIALOG --title "Ma fenêtre d'entrée" --clear \
        --inputbox "Bonjour, voici un exemple de fenêtre d'entrée\n
         Essayez de saisir votre nom ci-dessous :" 16 51 2> $fichtemp

Le programme dialog écrit sa sortie sur la sortie d'erreur standard par défaut. Par conséquent, la chaîne d'entrée que vous saisissez est envoyée vers la sortie d'erreur standard que nous redirigeons vers notre fichier temporaire. Vous pourrez reprendre le texte saisi dans le fichier temporaire pour le traiter ultérieurement.

4. Construire un menu

Essayez le programme suivant à la fois dans une console et sous X (après avoir changé dialog en Xdialog comme précédemment) :

#!/bin/sh
DIALOG=${DIALOG=dialog}
 fichtemp=`tempfile 2>/dev/null` || fichtemp=/tmp/test$$
trap "rm -f $fichtemp" 0 1 2 5 15
$DIALOG --clear --title "Mon chanteur français favori" \
	--menu "Bonjour, choisissez votre chanteur français favori :" 20 51 4 \
	 "Brel" "Jacques Brel" \
	 "Aznavour" "Charles Aznavour" \
 	 "Brassens" "Georges Brassens" \
	 "Nougaro" "Claude Nougaro" \
	 "Souchon" "Alain Souchon" \
	 "Balavoine" "Daniel Balavoine" 2> $fichtemp
valret=$?
choix=`cat $fichtemp`
case $valret in
 0)	echo "'$choix' est votre chanteur français préféré";;
 1) 	echo "Appuyé sur Annuler.";;
255) 	echo "Appuyé sur Echap.";;
esac

Voici le résultat (en mode console) :

Et en mode graphique :

La logique est exactement la même que pour la fenêtre d'entrée. Nous redirigeons le choix que vous avez fait vers un fichier temporaire, puis nous traitons la valeur de retour de dialog et le contenu du fichier temporaire.

5. Liste radio et liste à choix multiples

Les listes radio et les listes à choix multiples peuvent être programmées exactement comme des menus. Un exemple de liste radio simple est donné ci-dessous.

#! /bin/sh
DIALOG=${DIALOG=dialog}
fichtemp=`tempfile 2>/dev/null` || fichtemp=/tmp/test$$
trap "rm -f $fichtemp" 0 1 2 5 15

$DIALOG --backtitle "Choisissez votre chanteur préféré" \
	--title "Mon chanteur préféré" --clear \
        --radiolist "Bonjour, vous pouvez choisir votre chanteur préféré ici  " 20 61 5 \
	"Brel" "Jacques Brel" off\
         "Aznavour" "Charles Aznavour" off\
          "Brassens" "Georges Brassens" ON\
           "Nougaro" "Claude Nougaro" off\
            "Souchon" "Alain Souchon" off\
             "Balavoine" "Daniel Balavoine" off 2> $fichtemp
valret=$?
choix=`cat $fichtemp`
case $valret in
  0)
   echo "'$choix' est votre chanteur préféré";;
  1)
   echo "Appuyé sur Annuler.";;
  255)
   echo "Appuyé sur Echap.";;
esac

Voici le résultat :

Pour créer des listes à choix multiples, changez simplement l'option --radiolist en --checklist.

6. Construire une barre d'avancement

Une barre d'avancement basée sur dialog peut servir à indiquer la progression du chargement de votre programme. La construction d'une barre d'avancement n'est pas évidente. Jetez un coup d'½il à l'exemple suivant :

#!/bin/sh
DIALOG=${DIALOG=dialog}
compteur=10
(
while test $compteur != 110
do
echo $compteur
echo "XXX"
echo "Le nouveau\n\message ($compteur pourcent)"
echo "XXX"
compteur=`expr $compteur + 10`
sleep 1
done
) |
$DIALOG --title "Ma barre d'avancement" --gauge "Bonjour, ceci est une barre d'avancement" 20 70 0

Ici, le programme dialog prend son entrée dans le code affiché entre parenthèses. Ce code donne le nombre à utiliser pour la barre d'avancement et le message à afficher. Le message à afficher dans la fenêtre de progression doit être entouré par echo "XXX". Voici la copie d'écran d'une barre d'avancement :

7. Sélections de fichiers

Voici le code typique d'une fenêtre dialog de sélection de fichiers :

#!/bin/sh
DIALOG=${DIALOG=dialog}

fichier=`$DIALOG --stdout --title "Choisissez un fichier" --fselect $HOME/ 14 48`

case $? in
	0)
		echo "\"$fichier\" choisi";;
	1)
		echo "Appuyé sur Annuler.";;
	255)
		echo "Fenêtre fermée.";;
esac

Voici le résultat :

Notez que le programme ci-dessus utilise une technique différente pour reperndre le fichier sélectionné. Comme mentionné précédemment, toutes les sorties de dialog sont envoyées par défaut sur la sortie d'erreur standard par défaut. Toutefois, l'option --stdout permet d'envoyer les informations de sortie à la sortie standard qui à son tour peut être affectée à une variable. Cette astuce peut également servir dans d'autres fenêtres dialog comme les menus, les fenêtres oui/non, etc.

8. Calendriers et horloges

#!/bin/sh
DIALOG=${DIALOG=dialog}

datechoisie=`$DIALOG --stdout --title "CALENDRIER" --calendar "Choisissez une date..." 0 0 7 7 1981`

case $? in
  0)
	echo "Date saisie : $datechoisie.";;
  1)
	echo "Appuyé sur Annuler.";;
  255)
        echo "Fenêtre fermée.";;
esac

#!/bin/sh

DIALOG=${DIALOG=dialog}
heure=`$DIALOG --stdout --title "HORLOGE" --timebox "Saisissez l'heure..." 0 0 12 34 56`

case $? in
  0)
    echo "Heure saisie : $heure.";;
  1)
    echo "Appuyé sur Annuler.";;
  255)
    echo "Fenêtre fermée.";;
esac

9. Autres possibilités

Xdialog offre quelques fonctionnalités supplémentaires : vues arborescentes, fenêtres d'échelles, d'édition, etc. Regardez ici. La page de manuel de dialog contient des informations intéressantes sur d'autres composants de dialog, comme les fenêtres de mots de passe, de fin de texte, etc. On y trouve également des options pour changer les couleurs, les ombres, etc.

10. Astuces

Vous pouvez choisir entre dialog et Xdialog au démarrage avec le fragment de code suivant :

if [ -z $DISPLAY ]
   then
      DIALOG=dialog
   else
      DIALOG=Xdialog
fi

Testez ce programme sur une console ainsi que sous X et observez la différence :

#!/bin/sh
 if [ -z $DISPLAY ]
  then
	DIALOG=dialog
  else
	DIALOG=Xdialog
 fi
$DIALOG --yesno "C'est drôle" 0 0

11. Références

1. La page de manuel de dialog : à lire absolument si vous comptez écrire quelques scripts dialog utiles. Il y a plusieurs autres options qui vous permettent de modifier l'apparence des fenêtres.

2. Des exemples à propos de dialog sur http://www.fifi.org/doc/dialog/examples/ : tous les exemples de ce tutoriel sont des versions modifiées d'exemples de cette page. Si vous avez une distribution Debian, d'autres exemples sont disponibles dans /usr/share/doc/dialog/examples.

3. La page dialog de Linux Focus.

4. La page de Xavier Garreau.

5. De la documentation sur Xdialog sur http://thgodef.nerim.net/xdialog/doc/index.html : cette page contient des informations exhaustives sur Xdialog.

Je travaille comme consultant en technologie de l'information à l'assemblée législative du Kerala à Trivandrum, en Inde. Je suis passionné par Linux depuis 1996. Titulaire d'un mastère d'informatique de l'université de Cochin, je m'intéresse à tous les systèmes d'exploitation. Pendant mon temps libre, j'aime écouter de la musique classique indienne.