Hinzufügen von visuellen Komponenten (IBX ohne Quellcode - Tutorial)

Nach oben zu Tutorial: Mit InterBase Express eine Anwendung ohne Quellcode erstellen

Fügen Sie die visuellen Komponenten hinzu, und verknüpfen Sie sie mit den bereits auf dem Formular vorhandenen Datenbankkomponenten.

Hinzufügen von Bereichen (TPanel)

Fügen Sie vier TPanel-Komponenten hinzu, und ordnen Sie sie wie in der folgenden Abbildung an. Die TPanel-Komponenten dienen als Rahmen zum Anordnen anderer Komponenten.

• Fügen Sie alle TPanel-Komponenten hinzu, wenn jeweils das Formular ausgewählt ist, damit alle TPanel-Komponenten dem Formular und nicht einer anderen TPanel-Komponente untergeordnet sind.
• Die TPanel-Komponente "Panel1" befindet sich oben links; ihre Höhe beträgt (Height) 215 und ihre Breite (Width) 260.
• "Panel2" befindet sich oben rechts; ihre Höhe beträgt (Height) 25 und ihre Breite (Width) 255.
• Fügen Sie die anderen Bereiche relativ zu den anderen hinzu.
• Sie können die Größe der TPanel-Komponenten mithilfe der Ziehpunkte festlegen.
• Sie können die Eigenschaft Caption aller TPanel-Komponenten auf leer setzen, da die Titel in der Anwendung nicht benötigt werden.

Bereich 1

Die TPanel-Komponente "Panel1" soll ein Bild und dessen Titel aufnehmen.

• Ziehen Sie eine TDBImage-Komponente auf die TPanel-Komponente "Panel1". Setzen Sie die Höhe (Height) der TDBImage-Komponente auf 170 und die Breite (Width) auf 250. Setzen Sie DataSource auf "DataSource1". Setzen Sie DataField mithilfe des Dropdown-Menüs auf "GRAPHIC": damit wird festgelegt, welches Tabellenfeld angezeigt werden soll.

• Platzieren Sie unterhalb der TDBImage-Komponente eine TDBText-Komponente, die den verbleibenden Platz in der TPanel-Komponente ausfüllt. TDBText ist ein datensensitives Steuerelement, das den Text aus einem Datenbankfeld aufnimmt. Setzen Sie DataSource auf "DataSource1". Setzen Sie die Eigenschaft DataField mithilfe des Dropdown-Menüs auf "COMMON_NAME". Erweitern Sie die Liste der Eigenschaft TDBText.Font, und ändern Sie die Eigenschaften folgendermaßen:
  • Ändern Sie Color im Dropdown-Menü in "clRed".
  • Ändern Sie Name in "MS Serif".
  • Ändern Sie Size in "14".
  • Erweitern Sie die Liste Style, und setzen Sie "fsBold" und "fsItalic" auf True.

• Wählen Sie die TIBDataSet-Komponente aus, und setzen Sie die Eigenschaft Active auf True. TDBImage sollte nun ein Bild anzeigen, und die Komponente TDBText einen Titel:

Bereich 2

Die TPanel-Komponente "Panel2" soll eine Beschriftung und einen Elementnamen aufnehmen.

• Platzieren Sie auf der linken Seite der TPanel-Komponente "Panel2" eine TLabel-Komponente. Setzen Sie die Eigenschaft Caption auf "About the". Ändern Sie die Eigenschaft Font folgendermaßen:
  • Ändern Sie Color im Dropdown-Menü in "clBlue".
  • Ändern Sie Name im Dropdown-Menü in "MS Sans Serif".
  • Ändern Sie Size in "8".
  • Setzen Sie unter Style "fsBold" auf True.

• Platzieren Sie neben der TLabel-Komponente eine TDBText-Komponente. Setzen Sie DataSource auf "DataSource1". Setzen Sie DataField mithilfe des Dropdown-Menüs auf "COMMON_NAME". Setzen Sie die Font-Eigenschaften auf dieselben Werte wie die der TLabel-Komponente.

Die TDBText-Komponente in der Komponente TPanel "Panel2" zeigt nun Daten an:

Bereich 3

Dieser Bereich enthält informativen Text aus der Datenbank in einem einzelnen datensensitiven TDBMemo-Steuerelement an.

• Ziehen Sie eine TDBMemo-Komponente auf die TPanel-Komponente "Panel3". Eine TDBMemo-Komponente enthält im Gegensatz zu einer TDBText-Komponente Text aus einem Datenfeld, der sehr lang sein kann.

• Ändern Sie die Eigenschaft BorderStyle in "bsNone".
• Setzen Sie die Eigenschaft Align der TDBMemo auf alClient.

• Ändern Sie die Eigenschaft Color in "clSilver".

• Ändern Sie ScrollBars in "ssVertical", damit Sie durch die Informationen blättern können.

• Verbinden Sie schließlich die TDBMemo-Komponente mit der Datenbank. Wählen Sie für die Eigenschaft DataSource "DataSource1" aus. Wählen Sie als Tabellenfeld für die DataField-Komponente aus dem Dropdown-Menü "NOTES" aus.

Weil TDBMemo ein datensensitives Steuerelement ist, zeigt es Memotext aus der Datenbank an. Das Formular sollte nun etwa folgendermaßen aussehen:

Bereich 4

Dieser Bereich zeigt Tabellenspalten der Datenbank an.

• Ziehen Sie eine TDBGrid-Komponente auf die TPanel-Komponente "Panel4". Setzen Sie die Eigenschaft Align der TDBGrid auf alClient.

• Setzen Sie die Eigenschaft DataSource mithilfe des Dropdown-Menüs auf "DataSource1". Die Komponente TDBGrid zeigt sofort die Spaltendaten aus der Datenbank an:

In nächsten Abschnitt passen Sie die Datenanzeige an.

Zurück

Hinzufügen von Datenbankkomponenten

Weiter

Anpassen der Datenanzeige