Ce tutoriel a été écrit par Klaus.
Structure pour un programme WindowsL’objectif de ce tutoriel est de montrer la méthode à adopter pour réaliser un programme avec Panoramic en tirant tous les avantages de l’environnement Windows.
Pour cela, nous allons réaliser un programme effectuant des traitements sur des nombres et des textes, avec une interface visuelle agréable, plusieurs boutons cliquables, un menu d’application, entre autres.
Nous allons procéder étape par étape, avec des explications détaillées à chaque niveau, et un code source Panoramic évoluant en conséquence, jusqu'au programme complet.
Quelques arguments préalables
=============================Pour un nouveau Panoramicien, pour quelqu'un venant du Basic sous DOS ou d'un Basic similaire, la logique inhérente à Panoramic n'est pas immédiatement perceptible. Nous en avons maintes fois fait l'expérience, et le forum déborde de discussions à ce sujet.
Voilà donc le moment idéal pour éclaircir les idées sur certains points essentiels.
Dans les "anciens Basics", on programmait en mode linéaire. Le programmeur savait à tout moment, quelle était l'instruction à exécuter, l'instruction suivante et l'instruction précédente. On se déplaçait dans programme par des GOTO, éventuellement un ONERROR GOTO, ou par des GOSUB. Mais dans tous les cas, l'instruction suivante était parfaitement prévue. Pour obtenir une réponse de l'utilisateur, on utilisait INPUT ou similaire, et on savait que le programme "attendait" la réponse, et que rien d'autre ne s'exécutait pendant ce temps. Pour afficher des résultats, on utilisait PRINT ou ses dérivés. Une vraie gestion d'écran était très difficile (certains se sont résolus à envoyer des séquences ESCAPE à l'écran forçant ainsi le positionnement du curseur avant l'utilisation des commandes PRINT et INPUT). Un exemple d'un tel programme est le suivant:
- Code:
-
label mot_suivant
dim longueur%, mot_a_analyser$
mot_suivant:
mot_a_analyser$ = ""
print
print "Donnez un mot: ";
input mot_a_analyser$
if len(mot_a_analyser$)=0 then terminate
print
print "Vous avez saisi:" + mot_a_analyser$
longueur% = len(mot_a_analyser$)
print "Ce mot a "+str$(longueur%)+" lettres."
goto mot_suivant
Explication: on saisit un mot (sans espaces !), on valide par RETURN, le programme affiche alors le nombre de lettres dans ce mot et recommence. Pour sortir du programme, il suffit de taper RETURN seul.
Ce mode de programmation est bien sûr toujours possible en Panoramic. Mais il y a un hic: de cette manière, on ne peut absolument pas profiter des objets Panoramic, ni des événements, qui perturbent totalement le déroulement linéaire du programme. Alors, nous allons reprendre le même programme en mode Panoramic Windows.
Auparavant, nous allons établir quelques conventions élémentaires, afin de rendre le code plus facile à lire (et donc à maintenir).
Convention 1: Nous allons toujours utiliser des noms de variables longs décrivant leur utilisation, sauf pour des variables vraiment temporaires, des indices, etc. Un exemple:
- Code:
-
dim mot_a_analyser$, longueur%, n%
Convention 2: Nous allons toujours utiliser des noms de labels longs décrivant leur utilisation. Un exemple:
- Code:
-
label mot_suivant
Convention 3: Nous allons toujours placer toutes les commandes LABEL au début du programme, suivi par toutes les commandes DIM. Un exemple:
- Code:
-
label mot_suivant
dim longueur%, mot_a_analyser$
' reste du programme
Convention 4: nous allons toujours utiliser les indentations pour indiquer visuellement les niveaux d'imbrication des commandes. Pour cela, nous allons convenir d'un décalage à droite pour indiquer un niveau de profondeur supplémentaire - dans ce tutoriel, nous allons utiliser une indentation de 4. Il faudra donc décaler de 4 positions à droite tout ce qui suit une commande qui ouvre un niveau supplémentaire et replacer la commande refermant ce niveau décalé de 4 positions à gauche. Trop compliqué ? Voici à quoi cela ressemblera:
- Code:
-
dim i%, depenses(100), somme_globale, somme_inférieure_a_100, somme_supérieure_a_100
dim n_petit%, n_grand%
somme_globale = 0
somme_inferieure_a_100 = 0
somme_superieure_a_100 = 0
n_petit% = 0
n_grand% = 0
for i%=1
somme_globale = somme_globale + depenses(i%)
if depense%(i%<100)
somme_inferieure_a_100 = somme_inferieure_a_100 + depenses(i%
n_petit% = n_petit% + 1
else
somme_superieure_a_100 = somme_superieure_a_100 + depenses(i%
n_grand% = n_grand% + 1
end_if
next i%
print "Somme globale: "+str$(somme_globale)
print str$(n_petit%)+" petites dépenses pour un total de "+str$(somme_inferieure_a_100)
print str$(n_grand%)+" grandes dépenses pour un total de "+str$(somme_superieure_a_100)
Ce n'est pas plus lisible comme ça ? Bien sûr, il faudra appliquer cela systématiquement à toutes les commandes créant un nouveau niveau. Quelques exemples, sans être exhaustif:
FOR, WHILE, REPEAT, IF, ELSE, SELECT, CASE etc ouvrent un niveau ==> décalage à droite pour les commandes suivantes
NEXT, END_WHILE, END_REPEAT, END_IF, ELSE, END_SELECT etc ferment un niveau ==> décalage à gauche pour ces commandes
Et tant qu'il n'y a pas de changement de niveau, on ne change pas le décalage.
Convention 5: nous allons systématiquement insérer des lignes blanches pour séparer visuellement des sections de code, par exemple entre deux sous-programmes, et nous allons insérer systématiquement des commentaires clairs introduits par le signe ' (apostrophe).
Convention 6: pour pouvoir travailler en mode Windows, avec des événements, il faut faire d'abord toutes les initialisations (ce qui est à faire une seule fois, au début du programme. Ensuite, il faut passer en mode "événement. La commende END sert à cela. A partir de ce moment, le programme est géré exclusivement pas des événements pour lesquels il faut prévoir des sous-programmes spécifiques. Ces sous-programmes seront appelés automatiquement par Panoramic, lorsque l'événement correspondant arrive, et après le traitement de l'événement, il faut quitter cette routine par un simple RETURN. Parmi les événements, on trouve:
ON_CLICK - l'utilisateur a cliqué sur un objet Panoramic
ON_CHANGE - l'utilisateur a changé le contenu d'un objet
ON_TIMER - un "minuteur" est arrivé à expiration
etc. Une fois la commande END exécutée, tant qu'aucun événement n'arrive, Panoramic n'appelle absolument aucune routine. L'attente se passe dans Panoramic, et nous n'avons aucune boucle d'attente ou de surveillance à programmer. Cela conduit à la structure globale suivante, pour un programme Panoramic:
- Code:
-
...toutes les commandes LABEL
...toutes les commandes DIM
...toutes les commandes pour l'initialisation (variables, création d'objets, etc)
END
SUBROUTINE evenement_1:
...traitement de l'événement
RETURN
SUBROUTINE evenement_2:
...traitement de l'événement
RETURN
Nous allons maintenant appliquer ces 6 conventions à notre programme de saisie du début du tutoriel.
Etape 1: la structure de base du programme.Ici, nous allons placer les déclarations des labels, des variables, les initialisations et la commande END:
- Code:
-
' Tutoriel sur la structure pour un programme Windows
' tous les labels du programme
' toutes les variables du programme
dim longueur%, mot_a_analyser$
' toutes les initialisations
' (cette section sera remplie au cours du tutoriel)
end
' traitement des événements
' (cette section sera remplie au cours du tutoriel)
Maintenant, il faut créer l'interface visuel. Cela comprend l'ensemble des éléments affichés par le programme, pour informer l'utilisateur, pour permettre la saisie des informations, l'affichage des résultats, provoquer des actions à la demande de l'utilisateur, etc.
L'ensemble de l'interface visuel est constitué d'objets Panoramic. Les objets de Panoramic sont comme des pièces d'un jeu de construction, avec lesquelles nous allons bâtir l'interface visuel.
Les objets sont identifiés par un numéro, à partir de zéro. L'objet zéro est toujours défini par Panoramic dès que le programme démarre: c'est la fenêtre principale. Par défaut, tout se passe dans cette fenêtre. Nous allons donc simplement ajouter des objets supplémentaires à cette fenêtre. Plus tard, nous verrons comment gérer plusieurs fenêtres.
Les objets ont des attributs: position à l'écran, dimension, police de caractère, et beaucoup d'autres. En fonction des objets, ces attributs sont déterminés par des commandes spécifiques, ciblés par le numéro d'objet. Exemple: WIDTH 3,220 indique que l'objet numéro 3 doit avoir une largeur de 220 pixels.
Pour réaliser notre programme, nous avons besoin de 2 objets essentiels: l'un pour pouvoir saisir le mot à analyser, l'autre pour pouvoir afficher le résultat, donc le nombre de lettres dans le mot saisi.
Le mot à analyser sera saisi dans un objet de type EDIT. Cet objet réalise un champ de saisi dans lequel l'utilisateur peut entrer un texte quelconque. Nous allons donc utiliser la séquence suivante pour définir cet objet:
- Code:
-
' champ de saisie
edit 10 : ' champ de saisie
top 10,20 : left 10,200 : ' position du coin en haut à gauche du champ dans la fenêtre
Le résultat sera affiché dans un autre objet, mais nous n'allons pas utiliser un champ EDIT car le résulat n'est pas censé être modifié. Il faut juste l'afficher. Nous allons donc utiliser un objet ALPHA:
- Code:
-
' affichage du nombre de caractères
ALPHA 20 : ' zone d'affichage
top 20,80 : left 20,200 : ' position du coin en haut à gauche de la zone d'affichage dans la fenêtre
font_size 20,12 : ' pour avoir une taille lisible facilement
Nous allons maintenant afficher des libellés pour indiquer le sens des informations présentées à l'écran. Les objets ALPHA seront utilisés pour cela:
- Code:
-
' libellés des champs affichés
alpha 1 : top 1,20 : left 1,10 : caption 1,"Mot à analyser:"
alpha 2 : top 2,80 : left 2,10 : caption 2,"Nombre de lettres:"
Il manque encore un élément essentiel: quelque chose pour déclencher l'analyse une fois que le mot est saisi dans l'objet 10. Pour cela, nous allons utiliser un bouton à cliquer, qui est réalisé par l'objet BUTTON:
- Code:
-
' bouton déclenchant l'analyse
button 30 : ' bouton déclenchant l'analyse
top 30,50 : left 30,200 : ' position eu coin en haut à gauche du bouton
caption 30,"Analyse" : ' libellé du bouton
Alors, comment ce bouton va déclencer l'action souhaitée ? C'est maintenant que nous allons toucher réellement la puissance de Panoramic avec la gestion des événements. Un clic sur un bouton est un "événement" que Windows signale à Panoramic. Il faut déclarer à Panoramic que pour cet événement, un sous-programme particulier doit être appelé. Panoramic va alors appeler ce sous-programme comme si le programmeur l'avait appelé par GOSUB. Si aucun sous-programme n'a été déclaré pour cet événement, Panoramic l'ignore simplement.
Tous les sous-programmes événement sont déclarés à Panoramic par une commande ON_xxx, avec xxx déterminant le type d'événement. Dans notre cas, nous utiliserons la commande ON_CLICK:
à placer dans la section des labels:
- Code:
-
label analyser_mot : ' déclarer la routine événement:
informer Panoramic de la routine événement à appeler
- Code:
-
ON_CLICK 30,analyser_mot : ' placé après la création de l'objet 30 pour informer Panoramic
la routine elle-même, à placer après la commande END:
- Code:
-
' réception d'un clic sur le bouton "Analyser"
analyser_mot:
' placer ici le traitement de l'événement
return
Maintenant, nous allons rédiger le code de traitement de l'événement. Ce code consiste à afficher le nombre de lettres du mot saisi dans l'objet 20. Pour cela, il faut récupérer le mot saisi dans l'objet 10:
- Code:
-
mot_a_analyser$ = text$(10) : ' récupérer le mot saisi
' et afficher le résultat dans l'objet 20
longueur% = len(mot_a_analyser$)
caption 20,"Ce mot a "+str$(longueur%)+" lettres."
Maintenant, nous avons toutes les briques pour construire notre programme:
- Code:
-
' Tutoriel sur la structure pour un programme Windows
' tous les labels du programme
label analyser_mot : ' déclarer la routine événement:
' toutes les variables du programme
dim longueur%, mot_a_analyser$
' toutes les initialisations
' champ de saisie
edit 10 : ' champ de saisie
top 10,20 : left 10,200 : ' position du coin en haut à gauche du champ dans la fenêtre
' affichage du nombre de caractères
ALPHA 20 : ' zone d'affichage
top 20,80 : left 20,200 : ' position du coin en haut à gauche de la zone d'affichage dans la fenêtre
font_size 20,12 : ' pour avoir une taille lisible facilement
' libelles des champs affichés
alpha 1 : top 1,20 : left 1,10 : caption 1,"Mot à analyser:"
alpha 2 : top 2,80 : left 2,10 : caption 2,"Nombre de lettres:"
' bouton déclenchant l'analyse
button 30 : ' bouton déclenchant l'analyse
top 30,50 : left 30,200 : ' position du coin en haut à gauche du bouton
caption 30,"Analyse" : ' libellé du bouton
ON_CLICK 30,analyser_mot : ' placé après la création de l'objet 30 pour informer Panoramic
end
' traitement des événements
analyser_mot:
mot_a_analyser$ = text$(10) : ' récupérer le mot saisi
' et afficher le résultat dans l'objet 20
longueur% = len(mot_a_analyser$)
caption 20,"Ce mot a "+str$(longueur%)+" lettres."
return
Voilà, nous avons un premier programme opérationnel ! Récapitulons les éléments importants de ce tutoriel:
- structure de base du programme: déclarations -> initialisations -> END -> sous-programmes
- conventions de noms des variables et labels
- documentation par commentaires
- approche de la notion des événements
- réalisation d'un premier programme gérant un événement par clic sur un bouton
Dans le tutoriel suivant, nous allons reprendre ce programme pour l'étendre, ajouter d'autres événements, améliorer l'aspect visuel, ajouter un menu système.
Accueil 
Calendrier
