Interface graphique en Prolog avec XPCE


précédentsommairesuivant

IV. L'éditeur de boîte de dialogue de XPCE.

IV-A. Création d'une boîte de dialogue.

XPCE propose un éditeur qui permet de construire rapidement des boîtes de dialogue et de gérer les actions entre les composants. Cet IDE s'obtient en affichant le manuel de XPCE (commande manpce. sous le prompt Prolog ou en cliquant sur le menu Help/XPCE (GUI) manual qui fait apparaître ceci :

Image non disponible

Sur cette boîte de dialogue on clique sur Tools/Dialog Editor pour obtenir

Image non disponible

On donne un nom et notre première boîte de dialogue vide est faite :

Image non disponible

Nous sommes automatiquement en mode de création.

IV-B. Signification des icônes.

La signification des dessins de la barre du bas est indiquée lorsqu'on passe le pointeur de la souris dessus.

Image non disponible

Ici, le pointeur était placé sur le deuxième icône à partir de la gauche.

IV-C. Insertion des composants dans la boîte de dialogue.

Pour insérer un composant dans notre boîte de dialogue, il suffit de faire glisser le composant voulu de la barre des composant dans la boîte de dialogue. En 4 glisser-déposer notre boîte de dialogue est fabriquée.

Image non disponible

IV-D. Modifications des variables des composants.

Il faut maintenant définir les caractéristiques des différents composants. Pour cela, un double click sur le composant voulu fait apparaître un éditeur de propriétés : par exemple si on clique sur le composant de saisie de texte :

Image non disponible

Il faut valider par Entrée les modifications pour qu'elles soient prises en compte.

Image non disponible

IV-E. Aide sur les composants.

On peut obtenir une aide pour renseigner les différents champs en cliquant sur Help :

Image non disponible

Les liens verts permettent une navigation hypertexte.

IV-F. Signification des symboles.

V signifie qu'on a affaire à une propriété de l'objet (variable en langage XPCE).
Ainsi type est une variable du composant, la notation <-> signifie que cette variable est accessible dans les deux sens, -> on peut lui attribuer une valeur, <- on peut demander sa valeur
Voici un tableau résumé des différents symboles

V class - selector: type Variable inaccessible directement
V class <- selector: type Variable pouvant être lue mais pas modifiée
V class <->selector: type Variable pouvant être lue et modifiée
V class ->selector: type Variable qui ne peut qu'être lue
M class ->selector: type ... Méthode Send avec argument typés
M class <- selector: type ... -->type Méthode Get avec arguments typés, retournant une valeur de ce type
R Class.attribute: type Variable de Classe avec type

IV-G. Browser de classe.

On peut obtenir un browser des classes en sélectionnant une des options du menu obtenu par un clic droit dans la page affichée.

Image non disponible

On peut naviguer dans le browser de classe en cliquant sur les mots dans la barre en haut à droite ou sur les + dans le texte du dessous.

IV-H. Obtention du code associé dans un source Prolog.

Une fois que toutes les valeurs des propriétés des composants ont été fixées, on peut obtenir le code correspondant à la boîte en glissant l'ID de la boîte de dialogue dans un fichier source Prolog.

Image non disponible

On peut bien sûr modifier ce code à la main, en particulier le layout.
Pour visualiser la boîte de dialogue, écrivons un petit programme très court :

Prolog
Sélectionnez
xpce_calcul :-
       make_dialog(D, 'C_Prolog'),
       send(D,open).
Image non disponible

IV-I. Implémentation des actions des boutons.

Il ne reste plus qu'à implémenter les actions des boutons Calcul et Cancel.
En cliquant sur le bouton Action de la boîte de dialogue initiale, on fait apparaître un bouton behaviour model.

Image non disponible

En cliquant sur le bouton behaviour model, on fait apparaître une autre boîte de dialogue.

Image non disponible

On fait glisser les différents composants de la boîte de dialogue C_prolog dans cette boîte, pour en définir les interactions.

Image non disponible

Ici, on va faire interagir le bouton calcul avec le champ de saisie Expr_Item et le label d'affichage Resultat_Item. selection dans le rectangle de Resultat_Item représente la saisie utilisateur
Cette interaction appellera Prolog, il faut donc ajouter Prolog dans cette boîte, cela se fait par un clic droit sur une zone vide de la boîte de dialogue.

Image non disponible

Un nom du fichier pour enregistrer le code Prolog est automatiquement proposé (ici C_Prolog.pl), on peut en saisir un autre. Le prédicat Prolog appelé est le prédicat lance_calcul du programme précédent. Pour le créer dans la fenêtre behaviour, il faut, en utilisant le clic droit sur la zone @prolog, ajouter un send port de type other.Il faut tout de suite taper le nom de ce port, c'est lance_calcul.

Cette opération de saisie du nom n'est pas évidente du tout, il faut y penser, car on ne voit apparaître que le petit triangle rouge de saisie au bord d'un trait vertical. Il n'est pas évident de comprendre qu'on a le droit d'écrire quelque chose !

Image non disponible

Maintenant, avec un glisser de message du bouton calcul vers lance_calcul on crée une liaison symbolisée par une flèche noire, avec un disque au milieu. On glisse selection du champs de saisie vers le disque pour signifier que le champ de saisie sera utilisé comme argument.
Pour signifier que Resultat_Item doit être un argument du prédicat, on ajoute à l'aide du clic droit un « get port » self.

Image non disponible

Ensuite, on fait glisser le self vers le rectangle « lance_calcul », le chiffre 2 apparaît au milieu de la fléche. L'interaction entre le bouton, le champ de saisie et le label d'affichage est déclarée.
Comme l'IDE ne gère pas les couleurs ni les fontes, on peut ajouter à la boîte de dialogue une méthode initialise qui s'en chargera.

Image non disponible

Il ne nous reste plus qu'a faire glisser comme précédemment l'ID de la boîte de dialogue dans un fichier programme Prolog (C_Prolog.pl ou un autre).

Prolog
Sélectionnez
dialog('C_Prolog',
       [ object        :=
	   C_Prolog,
	 parts         :=
	   [ C_Prolog  := dialog('Prolog au travail !'),
	     Expr_Item := text_item(text_item),
	     Resultat_Item      := label(name, 'I'),
	     Calcul    := button('Calcul'),
	     Cancel    := button('Cancel')
	   ],
	 modifications :=
	   [ Expr_item := [ label := 'Saisissez votre calcul'
			      ],
           Calcul := [  default_button = @on
                     ]
	   ],
	 layout        :=
	   [ area(Text_item,
		  area(20, 15, 300, 24)),
	     area(Name,
		  area(20, 65, 300, 18)),
	     area(Calcul,
		  area(100, 110, 80, 24)),
	     area(Cancel,
		  area(220, 110, 80, 24))
	   ],
	 behaviour     :=
	   [ Calcul := [ message := message(@prolog,
					    lance_calcul,
					    Expr_Item?selection,
					    Resultat_Item)
		       ]
	   ],
	 initialise    :=
	   []
       ]).

L'action des boutons est définie dans la section behaviour. On peut donc ajouter aisément le code du bouton Cancel qui consiste à envoyer le message destroy à la boîte de dialogue. On ajoute à la fin les codes manquants pour l'initialisation de la couleur et la taille des fontes.
On a rajouté dans le source le code des prédicats, calcule et lance_calcul et le programme est terminé.

Prolog
Sélectionnez
dialog('C_Prolog',
       [ object        :=
	   C_Prolog,
	 parts         :=
	   [ C_Prolog  := dialog('Prolog au travail !'),
	     Expr_Item := text_item(text_item),
	     Resultat_Item      := label(name, ''),
	     Calcul    := button('Calcul'),
	     Cancel    := button('Cancel')
	   ],
	 modifications :=
	   [ Expr_Item := [ label := 'Saisissez votre calcul'
			      ],
           Calcul := [  default_button = @on
                     ]
         ],
	 layout        :=
	   [ area(Expr_Item,
		  area(20, 15, 300, 24)),
	     area(Resultat_Item,
		  area(20, 65, 300, 18)),
	     area(Calcul,
		  area(100, 110, 80, 24)),
	     area(Cancel,
		  area(220, 110, 80, 24))
	   ],
	 behaviour     :=
	   [ Calcul := [ message := message(@prolog,
					    lance_calcul,
					    Expr_Item?selection,
					    Resultat_Item)
		       ],
	     Cancel := [
			message := message(C_Prolog, destroy)
		       ]
	   ],
	 initialise    :=
	   [
	     send(Resultat_Item, colour, red),
	     send(Resultat_Item, font, font(times, bold, 18))
	   ]
       ]).

calcule(Atom, A) :-
        term_to_atom(Expr, Atom),
        A is Expr.

lance_calcul(Expr, Resultat) :-
	calcule(Expr, Res),
	sformat(Str, '~w = ~w', [Expr, Res]),
	send(Resultat, selection, Str).

xpce_calcul :-
       make_dialog(D, 'C_Prolog'),
       send(D,open).

On obtient :

Image non disponible

IV-J. Construction d'un programe Prolog.

Pour terminer on peut créer un exécutable indépendant appelant Prolog.
Sous le prompt Prolog, on tape

Prompt Prolog
Sélectionnez
?- qsave_program('xpce_calcul.exe', [goal(xpce_calcul), stand_alone(true)]).

Nous obtenons un programme xpce_calcul.exe qui devra être placé dans le répertoire /Program Files/pl/bin pour fonctionner correctement.
Un double click sur xpce_calcul.exe dans l'explorateur Windows permet le lancement.

Image non disponible

précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.