TP – Introduction à Windev

Objectif : se familiariser avec les éditeurs d’IHM et d’analyse et de requêtes. Accès aux propriétés des champs –
Introduction au Wlangage.- Lecture et affichage des informations d’une base de données.

Créer un projet appelé ‘TP_intro’, sans analyse (c’est-à-dire sans MLD associé). Pour cela, répondez à toutes
les questions posées (il est possible de modifier par la suite si besoin).

1. On se propose de développer la fenêtre suivante (bouton ‘Nouveau’) :

Création d’un projet

1
Puis créez une fenêtre vierge :

Par la suite, le menu ‘Création’ affiche le bandeau qui va permettre de glisser des nouveaux champs dans la
fenêtre vierge :

2
 Créez maintenant les champs qui
figurent dans le volet ci-dessous,
en respectant les noms. Modifier
les propriétés (onglet ’Général’
ou ‘Détail’ de la description) pour
qu’ils apparaissent tels que sur la
copie d’écran.

 Deux boutons Ok et Annuler

 Deux images avec un affichage
homothétique

centré, sans bordure,

 Un interrupteur avec trois options, sur 3
colonnes avec un libellé et un cadre,
 Un libellé pour afficher le but de la fenêtre,
caractères de taille 18, de couleur bleue foncée,
 Un champ notation ayant le libellé ‘Niveau’,
 Trois potentiomètres horizontaux pour la saisie
des distances hebdomadaires. .
(Nb : vous n’aurez sûrement pas ce même
potentiomètre graphique, mais ce n’est pas
grave),
 Un champ de saisie pour la date de naissance
(avec un icône calendrier),
 Des champs de saisie pour la date de naissance, le nom, le prénom et le numéro de téléphone de la
personne affichée.

Un double clic sur un champ de la fenêtre permet d’accéder aux onglets de

paramétrage des propriétés du champ.

Le code du champ peut être affiché en cliquant sur le deuxième bouton en

bas de la liste d’onglets. Cependant, lorsqu’un élément est sélectionné, un
raccourci (F2) permet d’accéder directement au code. Il en est de même
pour accéder au code de la fenêtre.

3
 2. Modifier la fenêtre pour qu’elle possède un titre, un icône, une barre de messages et une couleur de
fond.
3. Tester en cliquant sur Go (Test de la fenêtre).
Taper la touche tabulation plusieurs fois pour
passer d’un champ à l’autre.

Il est possible de régler l’ordre de navigation.

Définir l’ordre suivant et tester à nouveau.

Taper F5 sous l’éditeur…

Remarque :

Permet de paramétrer l’affichage et notamment de récupérer le volet de l’Explorateur de projet

dans le cas où vous l’auriez fermé… Effectivement, ce volet souvent affiché sur la partie droite de
la fenêtre est très utile…

4. Codage

Sélectionner le champ voulu et taper sur F2 pour accéder à son code. Saisissez petit à petit les codes suivants
en testant à chaque fois.

Code du clic du bouton Btn_ok

Info(" Validation et fermeture de la fenêtre…")

Ferme

Pour que le bouton Ok puisse aussi être activé avec la touche ‘Enter’, il faut le définir comme bouton de
validation. Tester.

Code du clic du bouton Btn_annuler

SI OuiNon("Voulez-vous fermer cette fenêtre ?") ALORS

Ferme
SINON
ToastAffiche("Fermeture annulée")
FIN

Pour que le bouton Annuler puisse aussi être activé avec la touche ‘Escape’, il faut le définir comme bouton
d’abandon. Tester.

4
Aide en ligne : Positionner le curseur sur la fonction OuiNon et taper F1. Chercher la bonne syntaxe pour
sélectionner l’option Non par défaut.

Code de modification de Sel_sexe

SELON SEL_sexe
// Homme
CAS 1
IMG_homme..Visible = Vrai
IMG_femme..Visible = Faux
// Femme
CAS 2
IMG_homme..Visible = Faux
IMG_femme..Visible = Vrai
FIN

Tester. On s’aperçoit qu’un problème a lieu lors du premier affichage (les deux images sont visibles).

Il est possible d’en masquer une lors de l’initialisation des champs. Par exemple, en mettant dans le code
d’initialisation de sel_sexe :
IMG_homme..Visible = Faux
IMG_femme..Visible = Vrai

Tester. On s’aperçoit qu’il y a incohérence à l’ouverture de la fenêtre car le sélecteur est initialisé à homme
et c’est l’image Img_femme qui est visible… on peut rajouter Sel_sexe = 2 au code d’initialisation de
Sel_sexe (un sélecteur est considéré comme un entier).

Code de modification de l’interrupteur Int_Sport

On souhaiterait que seuls les potentiomètres de saisie de la distance hebdomadaire des sports sélectionnés
soient actifs. Un interrupteur est considéré comme un tableau de booléens :
SI INT_Sport[1] ALORS
POT_Distance_hebdo_Nat..etat=Actif
SINON
POT_Distance_hebdo_Nat..etat=Grisé
FIN
Tester et faire de même pour le vélo et la course à pied…

S’inspirer du code d’initialisation du sélecteur pour régler les problèmes d’initialisation (cases non cochées
mais potentiomètres actifs…).

Créer interrupteur (case à cocher) pour permettre de préciser si la personne est licenciée dans un club :
appelons le Int_licence

5
 5. Modifier les valeurs maximales des potentiomètres (100 pour natation, 1500 pour vélo et 300 pour
cap).

Définir 4 cases de 200 pixels de large pour la barre de message de la fenêtre (double clic).

Faire afficher les valeurs des potentiomètres lorsqu’ils sont modifiés…

Par exemple, pour le code de modification du potentiomètre pot_vélo :

CBM_velo="vélo : " + Pot_vélo

Tenter de modifier le code du potentiomètre pour que la couleur du texte d’affichage dans les cases de la
barre de messages varie en fonction des valeurs des potentiomètres…

Par exemple, pour la natation : rouge en dessous de 6, noir entre 6 et 10 et vert au dessus de 10. Uutiliser
le mot clé SELON ainsi que la propriété CBM_nat..Couleur=…

Nous allons maintenant nous interresser à la sauvegarde des informations dans une base de données

6. Création de la base de données

Demander la description du projet et choissir d’y associer une nouvelle

analyse.

Sous l’éditeur d’analyse, créer la description du fichier Personne suivante :

IDPersonne est un identifiant automatique. Nom, Prénom, Tel sont des

chaines de caractère, Date_naiss est au format date, Dist_h_nat,
Dist_h_vélo, Dist_h_cap sont des entiers non signés, Licencié est un
booléen.

6
Sexe est de type « liste, combo » rempli avec les valeurs « Madame, Monsieur » (il sera stocké comme un
entier). Sport (cf. copie d’écran) est de type interrupteur avec les 3 valeurs Natation, vélo, course à pied (il
sera stocké comme un tableau de booléens).

Ne pas oublier de préciser que c’est un tableau de dimension 3.

Nom et Licencié peuvent être définis comme des « clés avec doublon », ce qui permettra de parcourir les
données selon ces critères de tris.

Cliquer sur l’icône en forma de drapeau pour valider la description de l’analyse.

7. Création physiques des fichiers de données

La création de l’analyse permet de valider la description des futurs fichiers de données, mais elle ne les crée
pas.

Les fichiers de données sont stockés dans le répertoire ‘exe’, lui-même inclus dans le dossier du projet.

7
Vérifier qu’il n’y a aucun fichier dans ce répertoire‘exe’.

Ouvrir le code du projet et taper le code d’initialisation : HCréationSiInexistant("*")

Lancer la fenêtre une fois et vérifier que les fichiers Personne.fic (fichier de données) et Personne.ndx (fichier
d’index) ont été créées dans le répertoire ‘exe’.

8. Consultation des fichiers de données

L’outil WdMap permet de consulter / modifier / supprimer directement les données des fichiers décrits dans
l’analyse. Lancer WdMap et ajouter trois enregistrements.

9. Liaison des champs avec les données

Pour chaque champ, demander l’onglet liaison dans la description et sélectionner la rubrique concernée.

Dans le code d’initialisation de la fenêtre, taper le code suivant :

HLitPremier(Personne,Nom)
FichierVersEcran()

Tester. HlitPremier est un ordre de lecture dans le fichier. FichierVersEcran remplace en une seule instruction
l’affection de chaque champ lié avec la valeur de la rubrique lue. (Sai_Nom = Personne.nom ; Sai_Prénom=
Personne.Prénom ; etc…).

Les images n’étant pas liées à des rubriques, on s’aperçoit qu’il faut gérer par programmation leur mise à
jour. Il en est de même pour la visibilité des potentiomètres…

Puisque ce code existe déjà dans la partie ‘modification’ du sélecteur Sel_sexe et dans l’interrupteur
Int_Sport, il est possible de demander l’exécution de ce code.

Pour cela, il suffit d’ajouter les lignes suivantes dans le code d’initialisation de la fenêtre :
ExécuteTraitement(SEL_sexe,trtModification) // mise à jour des images
ExécuteTraitement(INT_Sport,trtModification) // mise à jour des potentiomètres

10. Modification des données

Remplacer le code du bouton Btn_ok par :

EcranVersFichier() // affectation des valeurs des champs vers les rubriques liées
HModifie(Personne) // écriture de l’enregistrement

Tester en modifiant les données affichées dans la fenêtre.

8
 11. Cas des champs non reliés à des rubriques

Si un champ n’est pas relié à une rubrique, par exemple Int_licence. Il faut gérer par programme la
sauvegarde de sa valeur dans la base de données (rubrique Personne.Licencié).

Pour cela, il faut ajouter avant Hmodifie(Personne) l’instruction suivante :

Personne.Licencié = Int_licence[1] // peut être vrai ou Faux

De même avant chaque affichage (après un lecture dans le fichier Personne, il faut exécuter
l’instruction suivante : Int_licence[1] = Personne.Licencié

12. Lecture séquentielle des données

Créer les deux boutons suivants en choisissant le style

libellé + picto, choisir les images dans le catalogue en
tapant les mots clés gauche et droite.

Code du bouton Btn_Précédent

HLitPrécédent(Personne)
SI PAS HEnDehors(Personne) ALORS
FichierVersEcran()
ExécuteTraitement(INT_Sport,trtModification) // mise à jour des potentiomètres
Btn_OnOff..Enfoncé= Personne.Licencié // mise à jour du bouton
SINON
ToastAffiche("Premier enregistrement")
FIN

Code du bouton Btn_Suivant

HLitSuivant(Personne)
SI PAS HEnDehors(Personne) ALORS
FichierVersEcran()
ExécuteTraitement(INT_Sport,trtModification) // mise à jour des potentiomètres
Btn_OnOff..Enfoncé= Personne.Licencié // mise à jour du bouton
SINON
ToastAffiche("Dernier enregistrement")
FIN

9
 13. Amélioration de la présentation

Modifier les styles et réorganiser les champs pour que la fenêtre ressemble à cette copie d’écran…

Les champs Sai_nom et Sai_prénom sont sans libellé,

le texte de la zone de saisie est en taille 18, le cadre
de la zone de saisie est juste constitué d’un trait bas
et contiennent un message d’incitation à la saisie
quand ils sont vides (cf. onglet Aide). Les deux images
sont superposées. L’interrupteur n’a pas de cadre, il
se présente sur une seule colonne et le texte de ses
options est en gras.

14. Ancrage des champs

Lorsque l’utilisateur redimensionne la fenêtre, l’organisation spatiale des champs doit s’adapter.

Choisir d’ancrer les champs de la manière suivante :

10