Ajouter des composants visuels (tutoriel IBX sans code)

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriel : Utilisation de InterBase Express pour créer une application sans code

Ajoutez les composants visuels et liez-les aux composants de base de données déjà présents sur la fiche.

Ajouter des panneaux

Ajoutez quatre composants TPanel, en les positionnant comme illustré dans la figure ci-dessous. Le composant TPanels fournit un cadre de travail pour le positionnement des autres composants.

PanelsIDE-InterBaseExpress.png

  • Ajoutez chaque TPanel quand la fiche est sélectionnée, afin que chaque TPanel soit un enfant de la fiche, et pas l'enfant d'un autre TPanel.
  • Le composant TPanel "Panel1" est situé dans la partie supérieure gauche, et ses propriétés Height et Width sont définies respectivement sur 215 et 260.
  • "Panel2" est situé dans la partie supérieure droite et ses propriétés Height et Width sont définies respectivement sur 25 et 255.
  • Ajoutez les autres panneaux relatifs aux premiers panneaux.
  • Vous pouvez saisir les poignées situées sur les panneaux et les faire glisser afin de remplir l'espace.
  • Vous pouvez définir tous les TPanel.Captions sur une chaîne vide, car ces libellés n'ont aucune utilité dans l'application.

Panel 1

Le composant TPanel "Panel1" contient une image et son libellé.

  • Faites glisser un composant TDBImage sur le composant TPanel "Panel1". Définissez les propriétés Height et Width du composant TDBImage respectivement sur 170 et 250. Définissez DataSource sur "DataSource1". Définissez DataField sur "GRAPHIC" depuis le menu déroulant : ceci sélectionne le champ de la table qui est affiché.
  • Placez un composant TDBText sous le composant TDBImage, en remplissant l'espace restant du TPanel. TDBText est un contrôle orienté données qui contient le texte d'un champ de base de données. Définissez sa propriété DataSource sur "DataSource1". Définissez la propriété DataField sur "COMMON_NAME" depuis le menu déroulant. Développez la liste de la propriété TDBText.Font et modifiez les propriétés comme suit
    • Définissez Color sur "clRed" depuis la liste déroulante.
    • Définissez Font sur "MS Serif".
    • Définissez Size sur "14".
    • Développez la liste Style et cochez "fsBold" et "fsItalic".
  • Sélectionnez le composant TIBDataSet et définissez sa propriété Active sur true. Le composant TDBImage doit maintenant afficher une image, et le composant TDBText doit afficher un libellé :

PanelsFishIDE-InterBaseExpress.png

Panel 2

Le composant TPanel "Panel2" contient un libellé et un nom d'élément.

  • Placez un composant TLabel sur le côté gauche du composant TPanel "Panel2". Définissez la propriété Caption sur "About the". Modifiez sa propriété Font comme suit
    • Définissez Color sur "clBlue" depuis la liste déroulante.
    • Définissez Name sur "MS Sans Serif" depuis la liste déroulante.
    • Définissez Size sur "8".
    • Sous Style, cochez "fsBold".
  • Faites glisser un composant TDBText auprès du composant TLabel. Définissez sa propriété DataSource sur "DataSource1". Définissez DataField sur "COMMON_NAME" depuis le menu déroulant. Définissez ses propriétés Font afin qu'elles correspondent à celles définies pour le composant TLabel.
Le composant TDBText du TPanel "Panel2" affiche maintenant les données :

PanelsFishTextIDE-InterBaseExpress.png

Panel 3

Ce panneau contient du texte d'information de la base de données dans un contrôle orienté données TDBMemo unique.

  • Placez un composant TDBMemo dans la partie supérieure du composant TPanel "Panel3". Un composant TDBMemo contient le texte d'un champ de données qui peut être très long, ce qui le distingue d'un composant TDBText.
  • Définissez la propriété Color sur "clSilver".
  • Définissez la propriété ScrollBars sur "ssVertical" afin de permettre le défilement des informations.
  • Finalement, connectez le composant TDBMemo sur la base de données. Sélectionnez "DataSource1" pour la propriété DataSource. Pour sélectionner le champ de la table, choisissez "NOTES" pour DataField depuis le menu déroulant.
Puisque TDBMemo est un contrôle orienté données, il affiche le texte du mémo de la base de données. La fiche a maintenant l'aspect suivant :

PanelsFishMemoIDE-InterBaseExpress.png

Panel 4

Ce panneau présente les colonnes de la table de base de données.

  • Placez un composant TDBGrid dans la partie supérieure du composant TPanel "Panel4". Définissez la propriété Align de TDBGrid sur 'alClient.
  • Définissez la propriété DataSource sur "DataSource1" depuis le menu déroulant. Dès que vous l'avez fait, le composant TDBGrid affiche immédiatement les données des colonnes de la base de données :

PanelsFishDBGrid-InterBaseExpress.png


Dans la section suivante, vous allez personnaliser l'affichage des données.

Précédent

Ajouter des composants de base de données

Suivant

Personnaliser l'affichage des données