Réalisation d'une application pas à pas avec 4D

Image non disponible


précédentsommairesuivant

VI. Remplacement des boutons

VI-A. Bouton "Terminé"

On va maintenant remplacer les boutons utilisés par d'autres plus esthétiques et définir la fonction du bouton.

On fait un double clic sur le bouton " Terminé " pour faire apparaître sa liste de propriétés.

Lorsque la liste s'affiche, on va changer le nom de variable exemple " b_ter ".

Image non disponible

Dans la propriété type, on va choisir " bouton image ".

Image non disponible

Le bouton va changer est s'est transformé comme suit :

Image non disponible

On observe aussi que les propriétés relatives à l'image " la référence et la source " ont changé.

Image non disponible

L'image sera appelée de la bibliothèque d'image par son nom ou bien son numéro, mais pour le moment aucune image ne figure dans la bibliothèque.

Nous allons maintenant voir comment ajouter une image pour la bibliothèque.

VI-A-1. Comment ajouter une image à la bibliothèque

Ouvrir la boîte à outils Image non disponible.

On clique sur Image non disponible.

Cliquez sur le menu déroulant en bas et choisissez " Ouvrir ".

Image non disponible

Choisissez l'image, dans notre cas on a choisit " Fermer.png ".

Image non disponible
On voit que l'image choisie est réellement réalisée sur 4 images qui présentent les 4 états du bouton :
  1. Affiché
  2. Cliqué
  3. Survolé
  4. Désactivé

La fenêtre des propriétés d'image va s'afficher.

On va donner un nom à l'image et indiquer qu'elle est composée de 4 images, donc 1 colonne et 4 lignes. On va également changer la taille pour 48 x 48.

Image non disponible

Cliquer sur OK pour enregistrer les changements.

la bibliothèque d'image n'est plus vide maintenant puisqu'on a importé la 1ère image.

VI-A-2. Importation de l'image à partir de la bibliothèque

On ferme maintenant la boîte à outils et on va revenir au formulaire, on clique deux fois sur le bouton pour afficher la liste des propriétés, et on change la source et le numéro d'image que le bouton doit utiliser.

Image non disponible

On va remarquer que le bouton a changé et prend cette forme :

Image non disponible

On va essayer de le modifier pour qu'il s'affiche correctement.

Le bouton doit être affiché sur 1 colonne et 4 lignes.

Image non disponible

On va activer les animations suivantes : Bascule sur passage du curseur, Retour sur relâchement du clic et Dernière imagette si désactivé.

Image non disponible

Régler la largeur et la hauteur à 48.

Image non disponible

Alors le bouton prend sa forme idéale.

Pour tester, on clique sur exécuter Image non disponible.

VI-B. Les autres boutons de formulaire

On va maintenant répéter ces manipulations avec chacun des boutons de formulaire. On va donc faire appel dans la bibliothèque d'image à chaque bouton.

La source est toujours la bibliothèque d'image mais il ne faut pas oublier de changer le numéro pour chaque image.

Tous les boutons doivent être sur 1 ligne x 1 colonne.

Image non disponible

Voici les cases à cocher dans les propriétés d'animation.

Image non disponible

VI-C. Création des textes

Maintenant on va créer des textes pour ces boutons.

Dans le formulaire bibliothèque on clique sur le bouton Image non disponible.

On choisit alors la zone du texte avec le curseur et on saisit le nom du bouton.

Dans la propriété texte, on va déterminer la police du texte, la taille, gras, italique, souligné, et même la couleur de la police.

Image non disponible

Après avoir effectué ces changements sur chacun des boutons du formulaire, on exécute le travail effectué en cliquant sur

Maintenant, le formulaire doit s'afficher ainsi :

Image non disponible

Appuyez sur Terminé pour fermer le formulaire.

VI-D. Les boutons fonctionnels

On va maintenant ajouter les boutons fonctionnels en haut et à gauche du bouton Terminé.

Ces boutons sont : Ajouter, Rechercher, Trier, Imprimer, Etats et Supprimer.

La source est toujours la bibliothèque d'image sans oublier de changer le numéro pour chaque image.

Les boutons doivent être découpés en 4 lignes x 1 colonne.

Image non disponible

Les propriétés d'animation sont :

Image non disponible

On va aussi créer des textes pour ces boutons.

Après exécution, le formulaire doit être affiché comme ci-dessous.

Image non disponible

Pour le moment, on ne va pas programmer ces boutons, nous le ferons plus loin.


précédentsommairesuivant

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

  

Copyright © 2009 Alex Vimory. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.