|
|
|
Comment réaliser ce formulaire « A propos» pas à pas
(en cours d'écriture)
La création du formulaire
Préparatifs
Pour se familiariser, on va voir comment utiliser certains éléments sur un formulaire. Pour cela on va partir du formulaire "about.wfm" de dUflp. (vous pouvez le télécharger) Ce formulaire permet d'afficher des informations sur le logiciel en cours.
On va lui ajouter des informations complémentaires, comme la version de dBase installée, le système d'exploitation utilisé, le nom de l'ordinateur, etc
Pour cela il faut donner à
l'utilisateur la possibilité d'accéder à ces infos.
Réalisation Ouvrez le formulaire "About.wfm" qui se trouve dans le répertoire "Samples" de dbase. Si vous double-cliquez sur son nom, vous verrez son état de départ.
Le formulaire de départ
Vous devinez qu'il sera un peu petit pour afficher toutes les informations que l'on souhaite. Il faudra donc augmenter sa hauteur. Mais on ne souhaite pas afficher systématiquement toutes les informations, cela se fait sur demande de l'utilisateur.
On va donc ajouter un bouton qui permettra à l'utilisateur de nous dire, "je veux plus de détails".
- Ajouter un bouton
Les outils visuels de conception sont très pratiques.
Dans la fenêtre navigator, faites un clic-droit sur le nom du fichier que nous allons prendre, "about.wfm". Dans le popup qui s'affiche, sélectionner le deuxième ligne "Design form"
Ho, pleins de choses apparaissent : le formulaire au centre de l'écran, un formulaire nommé "Component Palette" un autre formulaire nommé "about.wfm - Inspector"
Le formulaire d'outils de conception "palette de composants"
Si vous ne voyez pas ces deux derniers formulaires, allez sur la barre de menu principale, cherchez View (a droite de FIle Edit) puis Tools Windows et cochez "inspector" et "component palette".
le menu de l'affichage des outils des conceptions
Allez dans "Componnent Palette", sélectionnez l'icone du bouton et faites un tirer-déposer sur le formulaire about.wfm
le composant bouton-poussoir
Un beau bouton-poussoir est maintenant affiché et est sélectionné (des poignées de dimensionnement l'entourent). Afin que son utilisation soit claire on va modifier le nom "Pushbutton" qui n'est pas très explicite.
Regardez maintenant dans l'inspecteur (image ci-dessous). L'onglet Propriétés (Properties) doit être affiché Cherchez la propriété text, notée Pushbutton et saisissez « Plus de détails ». Le texte s'affiche immédiatement sur le bouton. On va aussi modifier la propriété name, qui est le nom que dBase va utiliser pour identifier ce bouton car Pushbutton n'est pas très parlant pour un francophone. Pour faciliter la compréhension, on va commencer son nom par pb pour pushbutton puis le mot detail puisque c'est l'action que l'on veut. Saisissez donc "pbDetails" dans la propriété name L'inspecteur remet en capitales le nom saisi. Par prudence, il est recommandé de ne pas saisir de caractères accentués. Dans l'inspecteur vous devez voir :
L'inspecteur de propriétés
Revenons au formulaire. Le résultat du formulaire n'est pas forcément très joli, c'est un peu tassé. Utilisez la souris et tirez un peu le bas du cadre du formulaire pour faire un peu de place. Et arrangez la présentation afin qu'elle vous convienne, dans mon cas :
Aspect visuel du formulaire
- faire travailler le bouton
Maintenant, il va falloir que ce bouton fasse bien ce que l'on veut, créer de la place sur le formulaire pour afficher des informations diverses. On doit donc modifier la hauteur du formulaire. La hauteur d'un formulaire est définie par la propriété height. Il suffit de dire à dBase d'augmenter la taille du formulaire lorsque l'utilisateur appuie sur le bouton "Plus de détails" Dans l'inspecteur choisissez maintenant l'onglet "Events" (événements"). En haut, le premier événement nous intéresse, il s'agit de onClick, c'est à dire ce qui doit être fait quand on appuie sur le bouton. A droite de l'événement, pour plus de facilité, cliquez
sur la clé anglaise L'éditeur de code s'ouvre et automatiquement crée le code
dBase doit savoir que l'on s'adresse au formulaire (form), et que l'on veut changer sa hauteur, soit l'instruction
Le résultat dans l'éditeur de code, doit donc être :
Fermez l'éditeur de code et lancez le formulaire. Pour cela appuyez simplement le bouton "éclair" de la barre qui se trouve a côté de celui actuellement sélectionné.
le bouton "lancer l'exécution" du formulaire
Les aides à la conception disparaissent. Le formulaire est prêt à s'agrandir...
Pour cela appuyer sur le bouton marqué "Plus de détails" Super le formulaire s'agrandit bien afin de faire de la place pour afficher des données. Tout va bien alors ? Pas tout à fait. Si l'on voit bien l'effet de la commande, en fait on ne peut plus réduire la taille du formulaire ! On ne peut que le fermer totalement !
Eh oui, nous avons eu une fausse-bonne idée. Il faut que l'on puisse aussi revenir à la taille lors de l'ouverture.
Comment faire ? Le plus évident est d'ajouter un troisième bouton, "Réduire". Mais on peut, en se fatiguant un peu, faire faire le travail par le bouton marqué "Plus de détails" afin que lorsque le formulaire est à sa taille maxi, il puisse réduire la taille. Il se transforme en une sorte de switch : soit on affiche la totalité du formulaire, soit sa forme réduite.
On va en fait modifier le code du formulaire afin : - que sa taille soit celle de sa hauteur totale (14 dans notre cas) - que cette taille soit réduite lors de son ouverture - que le bouton plus de détail réagisse en fonction de la taille du formulaire pour soit l'agrandir, soit le réduire.
Accroître la taille du formulaire.
Il suffit de changer la propriété height de l'objet form. Cela va se faire grâce à l'inspecteur Cherchez la propriété height de form. Notez sa valeur actuelle, elle nous resservira (7.32 dans cet exemple) et saisissez à la place 14.
La propriété height (hauteur) de form
Comme vous pouvez le remarquez, tant que vous n'avez pas validé la modification, la valeur apparaît sur fond jaune. Validez. Magique, la taille du formulaire augmente aussitôt ! Ah oui, mais quand il s'ouvre on ne veut que la taille réduite. Pour cela on va utiliser l'événement onOpen du formulaire. Cliquez sur l'onglet Events et cherchez, vers le bas onOpen. Appuyez sur la clé anglaise
Relancez le formulaire pour voir s'il travaille bien comme escompté à l'ouverture. Hé oui, il a bien sa taille réduite.
Abordons maintenant le bouton marqué "Plus de détails" On veut qu'il agrandisse le formulaire si sa taille est réduite, et qu'il fasse le contraire quand le formulaire est à sa grande taille. On sait que sa taille réduite est, donc notre cas, de 7.32. Il suffit de lui dire que si la taille du formulaire est de 7.32, il doit l'agrandir. On va donc ré-ouvrir dans l'inspecteur l'événement onClick du bouton pbDetails
La boîte de sélection
Saisissez le code suivant (en l'adaptant à votre situation) :
Exécutez le formulaire en appuyant sur le bouton Eclair.
Appuyez sur le bouton marqué "Plus de détails". Le formulaire s'agrandit ! Ré-appuyez dessus, le formulaire se réduit !
Ah oui, mais il y a un problème, lorsque le formulaire est à sa taille maximale, le bouton affiche encore "Plus de détails". On a oublié de modifier le texte du bouton en fonction de la situation !
Allons vite corriger cette bévue, en retournant modifier
l'événement "onClick" après être revenu au mode
conception
Donc, ou en sommes-nous ? On a bien avancé ! Notre formulaire comprend un bouton de plus qui permet d'adapter sa taille en fonction des informations souhaitées.
Il ne reste plus qu'à mettre le principal, les-dites informations !
Le nom du système d'exploitation est renvoyé par l'instruction Os(), celle de dBase par version(1), celle du Bde par version(.89), le nom du poste par la variable d'environnement ComputerName, le répertoire de dDbase par _dbwinhome.
On va donc ajouter une fonction, nommée Infos, qui permettra de connaitre tous ces éléments. Pour cela on va ouvrir l'éditeur de code :
Ouverture de l'éditeur de code source
Une partie de votre écran doit ressembler à ceci :
Le fichier about.wfm dans l'éditeur de code
Descendez à l'aide de la barre défilement verticale tout en bas. Positionnez vous au-dessus de la dernière ligne du fichier où est noté endclass
Saisissez le code suivant :
Il ne reste plus qu'à permettre l'affichage de ces informations.
On va utiliser le composant TextLabel, l'un des composants permettant d'afficher du texte sur un formulaire.
Les deux composants pour afficher du texte
Ces deux composants sont presque identiques. Lorsqu'un simple affichage de données est nécessaire, TextLabel, moins gourmand en ressources mémoires que Text est préférable.
Dupliquer des composants
On va donc déposer 4 composants TextLabel sur le formulaire, que l'on nommera par exemple ( propriété name) Txt_Windows Txt_Dbase Txt_Bde Txt_RepDbase
et l'on va initialiser la valeur de texte de ces composants à "Indéterminée" (propriété Text)
On va donc repositionner sur la surface de conception du formulaire et créer le premier, Txt_Windows. Comme les 3 suivants sont sur le même modèle, une fois le premier créé, on peut le dupliquer ! Ainsi, comme la valeur de la propriété text est la même, seuls les noms TextLabel1, TextLabel2, TextLabel3 seront à modifier afin que le code soit plus facile à lire.
Un Clic-Droit sur le premier élément créé permet d'accéder à un menu
On remplace les propriétés "name" des objets TextLabel par les noms souhaités par exemple txt_bde, txt_dbase, txt_rep_dbase.
Arrangez les éléments. Quoi, cette suite de noms tous identiques ne vous plait-pas ? En effet, cette série de "indéterminée" n'est pas très compréhensible. Il suffit de modifier les propriétés text en précisant quelle fonction on souhaite et t l'on obtient une interface de conception plus explicite.
Le formulaire en cours de finition
Il est temps de voir ce que cela donne; Lancez l'exécution
Ah, je crois qu'il manque quelque chose. Mais oui, les informations ne s'affichent pas !
Bien sûr, nous n'avons pas reliées les variables aux composants.
Il est temps de revenir à la fonction infos, afin de passer les informations des variables aux propriétés text. Repasser en mode d'édition du formulaire. Pour trouver la fonction infos, il suffit de chercher dans l'arborescence situé à gauche de l'écran, ou se trouve cette fonction
L'arborescence -Trouver la fonction Infos
Un clic sur ce nom et l'éditeur de code se positionne aussitôt au bon endroit. Sous la dernière ligne, ajouter les suivantes :
Sauvegardez, et relancez le formulaire
Quoi, il n'affiche pas les informations espérées, mais seulement "indéterminées". Rien de plus normal ! Qu'avons nous fait : nous avons créé une fonction Infos et pourtant renseigné les variables text des différents composants Oui, mais quand cette fonction s'exécute-t-elle ? En effet, elle n'est jamais appelée. Il faut dire au formulaire de l'exécuter lors de l'ouverture du formulaire. On va donc ajouter la ligne suivante dans l'événement onOpen de l'objet Form. Deux solutions, soit passer par l'inspecteur, soit directement dans l'éditeur de code, en recherchant l'endroit ou se trouve : function form_onOpen. Sous la ligne concernant la hauteur à l'ouverture définie précédemment, ajouter
Sauvegardez, et relancez le formulaire
Le formulaire avec les infos
Eh oui, encore un souci ! Vous venez de vous apercevoir de deux défauts : la deuxième ligne d'infos est manifestement coupée !. Et on n'a oublié le nom de l'ordinateur. La encore on va voir toute la facilité offerte par dBase depuis plus de 15 ans ! On va repasser en mode conception, étirer les poignées du composant affichant la version de dBase (d'ou l'intérêt d'avoir rendu le formulaire compréhensible même en mode conception)
Les poignées du composant pour modifier sa taille directement à l'écran
et ajouter un composant TexteLabel pour le nom de la machine, sans oublier de modifier en conséquence la fonction info La propriété text du nouveau composant peut être mise à : Nom du poste de travail et dans la fonction infos on va ajouter les deux lignes suivantes :
Pourquoi deux lignes ? Nous n'avions pas lors de la création de la fonction Infos indiqué la commande return qui indique que la fonction est terminée. Ce n'est plus une obligation dans les dernières versions de dBase, mais pour la lisibilité du code et la pratique cette habitude peut être conservée utilement, surtout que lorsqu'une fonction devra fournir de éléments a d'autres modules, on utilisera cette commande. Allez, c'est le moment de vérité. Sauvegardez, et relancez le formulaire
Le formulaire avec les informations désirées Les finitions Dans le cas ci-dessous, on voit que le nom du poste est un peu abscons, et que seul un initié peut penser qu'il s'agit du nom du poste. Il y a donc nécessité de donner des éclaircissements. Le plus simple est de le préciser dans la propriété text du composant. Modifier la ligne ainsi dans la fonction Infos à l'aide de l'éditeur de code :
Sauvegardez, et relancez le formulaire
Une interface un peu plus compréhensible Comme vous l'avez peut-être remarqué, votre formulaire, dans sa partie haute n'est pas identique à la copie d 'écran ci-dessus. Un trés minime travail de francisation du formulaire a été fait, mais non expliqué car ce n'est pas le sujet de ce pas à pas. Mais si vous souhaitez, il suffit de modifier les lignes de code du début ainsi :
Modifier le texte par défaut qui s'affiche Les couleurs des caractères ne sont pas forcément les mêmes que celles ci-dessus. Cela dépend du paramétrage de votre éditeur de code. Pour modifier ces paramètres :
Les couleurs de l'éditeur de code par défaut de dBase Et voilà, nous avons enfin une belle boîte "A propos" avec des informations complémentaires.
Quelques informations sur l'environnement d'exécution du programme
Note : Le fichier apropos.zip contient les deux formulaires celui de départ about.wfm et celui d'arrivée apropos.wfm.
Réalisé avec dBase Plus 2.6.0.1. - 13 mars 2010 © M. Abraham Tous droits réservés - Reproduction interdite sur tout type de support. Le formulaire about.wfm est sous copyright dBase Inc. A usage non commercial, le tutoriel l'accompagnant, sous réserve d'adresser une carte postale à son auteur, est libre de droits. |
.
: le formulaire repasse en mode conception.
