Utilisation des dispositions de grille et de flux

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriel : Utilisation des dispositions FireMonkey


Ce tutoriel illustre comment utiliser les dispositions FireMonkey pour créer une interface simple de calculatrice.

Fiche générale de la calculatrice

  1. Sélectionnez Fichier > Nouveau > Autre.... > Projets Delphi > Application multi-périphérique > Application vide:
    FireMonkey HD Application.png
     Création d'une application Delphi HD
  2. Redimensionnez la fiche sur 210x250 (ou sur d'autres dimensions que prendra votre calculatrice) en définissant les propriétés Height et Width dans l'inspecteur d'objets, lorsque la fiche détient la focalisation.
  3. Ajoutez un bouton TFlowLayout sur la fiche.
    • Dans l'inspecteur d'objets, avec TFlowLayout détenant la focalisation, effectuez les opérations suivantes :
      • Définissez la propriété Name sur PrincipalLayout.
      • Définissez la propriété Align sur None.
      • Définissez la propriété Justify sur Center.
      • Définissez la propriété JustifyLastLine sur Center.
      • Définissez la propriété VerticalGap sur 3 pour obtenir un aspect aéré.

Affichage de la calculatrice

Ajoutez un TEdit à la disposition PrincipalLayout pour qu'il serve d'écran à la calculatrice.

  • Dans l'inspecteur d'objets, avec TEdit détenant la focalisation, effectuez les opérations suivantes :
    • Définissez la propriété Name sur Display.
    • Définissez Width sur 200 (ou sur une autre valeur qui tient dans les dimensions choisies de la fiche).

Display calculator.png

 Affichage de la calculatrice

Boutons de la calculatrice

Une calculatrice a plusieurs types de boutons :

  • Boutons de mémoire : Effacer la mémoire (MC), Afficher la valeur de la mémoire (MR), Ajouter à la mémoire (M+), et Soustraire de la mémoire (M-)
  • Boutons gérant les données d'entrée : Backspace , effacer/annuler (C), et annuler entrée (CE).
  • Opérations : +, -, *, /, changement de signe (+/-).
  • Bouton Egal =
  • Bouton de chiffres (0 à 9), et un bouton point -- ..

Dans ce cas, il y a au total 25 boutons. Pour un usage plus facile, les boutons les plus importants (les plus utilisés) seront deux fois plus gros que le reste des boutons. Les boutons importants sont : Backspace, +, =, et 0. Pour cette disposition, un bouton normal est dimensionné à 50 pixels en largeur et à 30 pixels en hauteur.

Calculator memory buttons.png

Boutons de mémoire

Pour les boutons de mémoire, ajoutez un TGridLayout au composant PrincipalLayout.

  • Dans l'inspecteur d'objets, avec TGridLayout détenant la focalisation, effectuez les opérations suivantes :
    • Définissez la propriété Name sur MemoryButtonsGrid.
    • Définissez Width sur 200 (ou sur une autre valeur qui tient dans les dimensions choisies de la fiche).
    • Définissez ItemWidth sur un quart de la largeur totale de la disposition, dans ce cas 50.
    • Définissez ItemHeight sur 30 (ou une autre valeur, selon la forme que vous voulez attribuer aux boutons) pour obtenir une forme rectangulaire pour les boutons.
    • Définissez Height sur 30, ou sur la même valeur que ItemHeight. Cela préservera l'aspect au sein de la disposition PrincipalLayout.
  • Ajoutez 4 objets TButton au MemoryButtonsGrid, un pour chacune des opérations de mémoire listée ci-dessus.

Le résultat doit ressembler à l'image située sur la droite.


Calculator manage input buttons.png

Boutons de gestion des données d'entrée

Les boutons de gestion des données d'entrée n'ont pas la même largeur, ils sont donc ajoutés à la fiche par le biais d'un autre TFlowLayout. Ajoutez un bouton TFlowLayout sur le composant PrincipalLayout.

  • Dans l'inspecteur d'objets, avec TFlowLayout détenant la focalisation, effectuez les opérations suivantes :
    • Définissez la propriété Name sur ManageInputDataButtons.
    • Définissez la propriété JustifyLastLine sur Center.
    • Définissez Width sur 200 (ou sur la même valeur que MemoryButtonsGrid).
    • Définissez Height sur 30 (ou sur la même valeur que MemoryButtonsGrid).
  • Ajoutez 3 objets TButton à ManageInputDataButtons.
    • Dans l'inspecteur d'objets, effectuez les opérations suivantes pour chaque bouton :
      • Définissez Text sur Backspace, C, ou CE.
      • Définissez Height sur 30 (ou sur la même valeur que ManageInputDataButtons).
      • Pour les boutons C et CE, définissez la propriété Width sur 50 ou sur la valeur utilisée pour la largeur des boutons de MemoryButtonsGrid.
      • Pour le bouton Backspace, définissez la propriété Width sur 100 ou sur le double de la largeur d'un bouton normal.


Boutons d'opérations et de chiffres

Calculator regular operations buttons.png

+ et = sont les opérations les plus utilisées. Ainsi, leurs boutons sont traités séparément. Pour le reste des opérations, les boutons normaux sont utilisés.

  1. Pour ajouter les boutons d'opérations normaux, ajoutez un TGridLayout au PrincipalLayout.
    • Dans l'inspecteur d'objets, avec TGridLayout détenant la focalisation, effectuez les opérations suivantes :
      • Définissez la propriété Name sur RegularOperationButtons.
      • Définissez Width sur 200 (ou sur une autre valeur qui tient dans les dimensions choisies de la fiche).
      • Définissez ItemWidth sur un quart de la largeur totale de la disposition, dans ce cas 50.
      • Définissez ItemHeight sur 30 (ou une autre valeur, selon la forme que vous voulez attribuer aux boutons) pour obtenir une forme rectangulaire pour les boutons.
      • Définissez Height sur 30 (ou sur la même valeur que ItemHeight).
    • Ajoutez 4 objets TButton au RegularOperationButtons, un pour chacune des opérations normales listées ci-dessus.
      Le résultat doit ressembler à l'image située sur la droite.
  2. 0 est le chiffre le plus utilisé, et le bouton 0 est plus gros que les boutons relatifs aux autres chiffres. Les chiffres sont séparés en 2 groupes :
    • Les boutons 1 à 9 ont les mêmes dimensions et ils peuvent être ajoutés par le biais d'un TGridLayout avec 3 colonnes et 3 lignes.
    • Les boutons 0 et . sont ajoutés par le biais d'un TFlowLayout, car ils n'ont pas la même taille que les autres.
    Calculator regular digits buttons.png
    1. Pour regrouper tous les boutons de chiffres, ajoutez un TFlowLayout au composant PrincipalLayout.
      • Dans l'inspecteur d'objets, avec TFlowLayout détenant la focalisation, effectuez les opérations suivantes :
        • Définissez la propriété Name sur DigitsButtons.
        • Définissez Width sur 150 ou 3 fois la largeur d'un bouton normal.
        • Définissez Height sur 120 ou 4 fois la hauteur d'un bouton normal.
        • Définissez la propriété Justify sur Center.
        • Définissez la propriété JustifyLastLine sur Center.
    2. Ajoutez un objet TGridLayout au DigitsButtons pour ajouter les boutons de chiffres normaux.
      • Dans l'inspecteur d'objets, avec TGridLayout détenant la focalisation, effectuez les opérations suivantes :
        • Définissez la propriété Name sur RegularDigitsButtons.
        • Définissez la propriété Width sur 150.
        • Définissez la propriété ItemWidth sur 50.
        • Définissez ItemHeight sur 30.
        • Définissez Height sur 90 ou 3 fois la hauteur d'un bouton normal.
      • Ajoutez 9 objets TButton au RegularDigitsButtons, un pour chacune des opérations normales listées ci-dessus.
      Calculator special digits buttons.png
    3. Ajoutez un objet TFlowLayout au DigitsButtons pour ajouter les boutons de chiffres 0 et ..
      • Dans l'inspecteur d'objets, avec TFlowLayout détenant la focalisation, effectuez les opérations suivantes :
        • Définissez la propriété Name sur SpecialDigitsButtons.
        • Définissez la propriété Width sur 150.
        • Définissez Height sur 30 ou sur la hauteur d'un bouton normal.
        • Définissez la propriété JustifyLastLine sur Center.
      • Ajoutez 2 TButtons sur SpecialDigitsButtons.
        • Dans l'inspecteur d'objets, effectuez les opérations suivantes pour chaque bouton :
          • Définissez Text sur 0 et ..
          • Définissez Height sur 30 ou sur la hauteur d'un bouton normal.
          • Pour le bouton ., définissez la propriété Width sur 50 ou sur la largeur d'un bouton normal.
          • Pour le bouton 0, définissez la propriété Width sur 100 ou sur le double de la largeur d'un bouton normal.
      Le résultat doit ressembler à l'image située sur la droite.
  3. Pour ajouter le reste des boutons d'opérations normaux, ajoutez un TGridLayout au PrincipalLayout.
    • Dans l'inspecteur d'objets, avec TGridLayout détenant la focalisation, effectuez les opérations suivantes :
      • Définissez la propriété Name sur SpecialOperationButtons.
      • Définissez Width sur 50 ou sur la largeur d'un bouton normal.
      • Définissez la propriété ItemWidth sur 50.
      • Définissez ItemHeight sur 60 ou sur deux fois la valeur de la hauteur d'un bouton normal.
      • Définissez Height sur 120, ou sur deux fois la valeur de ItemHeight.
    • Ajoutez 2 TButtons sur SpecialOperationButtons.

L'interface doit ressembler à celle de l'image suivante.

Calculator interface.png

Précédent

Voir aussi

Récupérée de « https://docwiki.embarcadero.com/RADStudio/Alexandria/f/index.php?title=Utilisation_des_dispositions_de_grille_et_de_flux&oldid=207405 »