Cours : Visual-Basic

Interface utilisateur 

TD : Formulaires et contrôles

Initiation TD1-P3

TD : Mise en oeuvre des formulaires et contrôles (3)

Avant de continuer, si vous ne l'avez pas encore fait, lisez la page traitant des contrôles zones de texte (textBox). Nous allons beaucoup les utiliser dans ce TD.

Les contrôles

Nous allons utiliser divers types de contrôles (TextBox, Label, Option button, Frame, Command button ... ) pour créer une calculatrice simplissime (mais fonctionnelle) dans notre formulaire frmCalc.

Créons, pas à pas, l'interface utilisateur de notre calculatrice simplifiée. Tout d'abord, ajoutez 3 contrôles "Labels". Pour ne pas surcharger la liste des objets dans le module de code source, nous nommerons ces 3 labels du même nom : "lbl" (groupe de contrôles). 

L'icône d'un Label, dans la boite à outils, est : . Double-cliquez sur l'icône ou bien sélectionnez l'outil par un simple click et tracez le contrôle grâce à votre souris.

Utilisez les valeurs de propriétés suivantes :

Pour obtenir un formulaire ayant cet aspect :

Ajoutons, maintenant, un contrôle "Frame" et 4 boutons d'options nous permettant de sélectionner l'opération à utiliser. Le contrôle Frame est un cadre qui, ici, va servir de conteneur aux boutons d'option. Quel que soit le nombre de boutons d'options, pour un conteneur, un seul bouton d'option peut être actif. Visual-basic gère automatiquement cela. C'est à dire que, à chaque fois que l'utilisateur va sélectionner une des options, les autres seront automatiquement désélectionnées. Au final, dans le Frame, il ne pourra y avoir qu'une et une seule option de sélectionnée.

L'icône de la boite à outils correspondant au contrôle Frame est : nous le nommerons fraOp (pour frame opération)

Pour les boutons d'option, il faut utiliser : nous les nommerons optPlus, optMoins, optMult et optDiv. Attention, lorsque vous utilisez des boutons d'option, il ne faut pas faire double-click pour les mettre sur le formulaire.aire. Il faut sélectionner l'outil à l'aide d'un simple click, puis, à l'aide du bouton gauche, dessiner le contrôle sur le formulaire. Attention aussi, pour un contrôle bouton d'option, il ne faut pas le dessiner sur le fond du formulaire mais à l'intérieur du cadre (Frame) servant de conteneur. En effet, le conteneur doit "englober" toutes ses options

Le formulaire doit, maintenant, ressembler à ceci :

Pour vérifier si vous avez bien disposé les boutons d'option DANS le conteneur Frame, il suffit de sélectionner ce dernier (en cliquant sur la bordure) et de le faire bouger par glisser/déplacer à l'aide du bouton gauche de la souris. Les 4 boutons d'option doivent "suivre" automatiquement ce qui prouve qu'ils sont bien inclus dans le conteneur Frame. Dans le cas contraire, il faut détruire les boutons d'options qui ne sont pas inclus dans le Frame et les re-créer en faisant bien attention de dessiner le bouton d'option DANS le Frame et non de le dessiner à côté et de le déplacer ensuite. 

Vous allez, maintenant, ajouter 2 zones de texte (TextBox) permettant de saisir les 2 nombres à traiter. Utilisez, pour cela, les valeurs de propriétés suivantes :

Vous obtenez donc une interface comme suit :

Il ne vous reste plus qu'à ajouter une zone pour afficher le résultat et un bouton pour déclencher le calcul.

La zone d'affichage du résultat est particulière. En effet, l'utilisateur de doit pas pouvoir saisir dans cette zone qui est un résultat de calcul. L'idéal est d'utiliser un Label. En effet, le Label a cet avantage de ne pas consommer de ressource Windows. Il est donc bien plus efficace qu'une zone de texte qui serait verrouillée. Toutefois, pour ce qui est de son apparence, vous allez voir qu'il est très facile de lui donner l'aspect d'une TextBox. Pour cela, ajoutez un label sur le formulaire et utilisez les valeurs de propriété suivantes :

Vous obtenez un label que rien, au niveau de l'aspect, ne distingue d'une zone de texte. Il ne nous reste plus qu'à ajouter un bouton de commande (cmdCalc) pour déclencher le code source qui effectuera le calcul et affichera le résultat. Pour ce dernier contrôle "Bouton de commande", utilisez les valeurs de propriétés suivantes :

A ce stade, vous pouvez aussi vérifier que les valeurs des propriétés TabIndex des différents contrôles sont correctes. La valeur de TabIndex donne l'ordre dans lequel les contrôles seront activés lorsque l'utilisateur se sert de la touche "Tabulation" pour passer d'un contrôle à l'autre. La zone qui sera activée la première est celle portant le n° de TabIndex 0. Si ce contrôle n'est pas activable (cas d'un label par ex.) c'est le premier contrôle activable qui prendra le focus. Prenez en compte, dans cette numérotation, l'ensemble des contrôles, même s'ils ne sont pas activables. Cela simplifie grandement la gestion de certains raccourcis clavier (nous étudierons ce cas un peu plus loin). Pour notre formulaire frmCalc les valeurs de TabIndex vont de 0 (pour le label Chiffre 1) à 12 (pour le bouton Fermer).

Et voici le résultat final :

Le plus important reste à faire ! Notre formulaire est bien joli (tout est relatif !) mais ... il ne fait rien. Nous allons donc rentrer dans la partie la plus intéressante de ce TD : le codage de la gestion de l'interface utilisateur et des procédures de calcul.

Nous réaliserons plusieurs versions du code source de gestion de l'IHM et de calcul. D'une version minimaliste nous irons vers une version plus sophistiquée, plus sécurisée et plus conviviale. Vous pourrez ainsi découvrir, pas à pas, quels sont les pièges (et leurs solutions) d'une telle IHM (saisies numériques seulement, erreurs de calcul ... etc ...).

Vérifiez, en lançant votre code (Ctrl-F5) que tout fonctionne correctement. En cas de souci pour réaliser l'interface décrite ci-dessus, utilisez le lien ci-dessous pour télécharger le modèle du projet à ce stade (Ne faites pas l'économie de réaliser vous même les travaux décrits dans cette page. En effet, créer soi-même l'interface est bien plus formateur que de télécharger un formulaire tout fait !).

 

Début du TD1