1.1.1. Webseitenaufbau

Die Hauptkomponente einer mit der PHP GUI erstellten Oberfläche ist immer eine Webseitenkomponente. Diese gibt das allgemeine Erscheinungsbild und ggf. globale Strukturelemente vor. So zeigt beispielsweise die Webseitenkomponente GhGuiWebPage den dunklen Seitenhintergrund und das Logo der GREYHOUND Webseite und bietet Methoden um das Hauptmenu, den Infobereich, den Inhaltsbereich und die Fußzeile mit Inhalten zu füllen, während die Webseitenkomponente GhGuiExtensionPage lediglich die Hintergrundfarbe des GREYHOUND Clients vorgibt, um eine nahtlose Integration als Erweiterung in den Client zu ermöglichen.

Die Inhalte der Webseite werden durch Einzelkomponenten dargestellt, beispielsweise Texte oder Eingabeelemente wie Buttons oder Auswahllisten. Die Einzelkomponenten können durch Strukturkomponenten arrangiert werden, beispielsweise tabellarisch oder in bestimmte Bereiche der Webseite aufgeteilt.

In der Übersicht der Komponenten werden die zur Verfügung stehenden Komponenten vorgestellt. Details zu den einzelnen Klassen finden sich in der Klassendokumentation der Webseitenkomponenten, Strukturkomponenten und Einzelkomponenten.

Die Herangehensweise beim Aufbau einer Webseite mit der PHP GUI ist wie folgt: Zunächst wird eine Webseitenkomponente erstellt. Dieser wird in der Regel eine Strukturkomponente hinzugefügt, in der die Inhalte arrangiert werden. Dies kann durch weitere, verschachtelte Strukturkomponenten und schließlich Einzelkomponenten erfolgen. Als letztes wird schließlich die Webseite angezeigt. Dies erzeugt den gesamten Webseiten-Quellcode und liefert ihn an den Webbrowser.

Das folgende Beispiel veranschaulicht, wie die PHP GUI in einer PHP Datei eingebunden wird und wie eine simple Webseite mit drei Bereichen aufgebaut wird: eine Spalte an der linken Seite, einen oberen Bereich und einen großen Inhaltsbereich rechts unten. Als Webseitenkomponente wird GhGuiExtensionPage verwendet, da diese außer der Hintergrundfarbe keinerlei Vorgaben macht. Für die Aufteilung der Seite in einzelne Bereiche wird die Strukturkomponente GhGuiBorderContainer genutzt, die fünf Bereiche für weitere Komponenten bietet: Links, Rechts, Oben, Unten und Mitte. Als Inhalte wird den Bereichen Links, Oben und Mitte jeweils die Einzelkomponente GhGuiText hinzugefügt, die lediglich einen Text enthält, der in dem Bereich angezeigt wird.

Beispiel für Webseitenaufbau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


<?php
// GREYHOUND PHP GUI laden:
require_once 'ghgui/ghgui.php';

// Webseite erstellen:
$page = new GhGuiExtensionPage('PHP GUI Beispiel');

// Webseiteninhalt in Bereiche aufteilen:
$pageLayout = new GhGuiBorderContainer();
$page->addComponent($pageLayout);

// Jedem der drei Bereiche wird ein kurzer Beispieltext hinzugefügt um die Struktur zu
// verdeutlichen:
$pageLayout->addLeftComponent(new GhGuiText('Linker Bereich'));
$pageLayout->addTopComponent(new GhGuiText('Oberer Bereich'));
$pageLayout->addCenterComponent(new GhGuiText('Mittlerer Bereich'));

// Webseite anzeigen:
$page->show();

Sollte die PHP GUI nicht im Pfad ghgui/ghgui.php erreichbar sein, so muss entweder der Pfad in der require_once Anweisung angepasst oder die PHP GUI im PHP Include-Pfad abgelegt werden. Für Webseiten, die vom GREYHOUND Server ausgeliefert werden (die also innerhalb des Server/Web Ordners einer GREYHOUND Installation liegen), ist der PHP Include-Pfad bereits so eingerichtet, dass die PHP GUI wie im Beispiel angegeben geladen werden kann.

Um das Erscheinungsbild zu beeinflussen, können den Komponenten CSS Klassen oder Stileigenschaften zugewiesen werden. Dazu dienen die Methoden addClass() und setStyle(), die bei allen Komponenten verfügbar sind. Auch bieten die meisten Komponenten weitere Optionen um ihre Darstellung anzupassen. So kann beispielsweise beim Hinzufügen von Komponenten zum oben verwendeten GhGuiBorderContainer, der die Webseite in die einzelnen Bereiche aufteilt, zusätzlich die Größe des jeweiligen Bereichs angegeben werden.

Nachfolgend wird das obige Beispiel erweitert, indem der linke Bereich auf 20% der Gesamtbreite und der obere Bereich auf 15% der Gesamthöhe eingestellt werden. Außerdem wird der linke Bereich grün, der obere Bereich blau und der mittlere Bereich gelb mit rotem Rahmen gefärbt:

Beispiel für die Anpassung der Darstellung der Komponenten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<?php
// GREYHOUND PHP GUI laden:
require_once 'ghgui/ghgui.php';

// Webseite erstellen:
$page = new GhGuiExtensionPage('PHP GUI Beispiel');

// Webseiteninhalt in Bereiche aufteilen:
$pageLayout = new GhGuiBorderContainer();
$page->addComponent($pageLayout);

// Linker Bereich erhält 20% Breite und wird hellgrün gefärbt:
$left = new GhGuiText('Linker Bereich');
$left->setStyle('background', '#afa');
$pageLayout->addLeftComponent($left, '20%');

// Der obere Bereich erhält 15% Höhe und wird hellblau gefärbt:
$top = new GhGuiText('Oberer Bereich');
$top->setStyle('background', '#aaf');
$pageLayout->addTopComponent($top, '15%');

// Der mittlere Bereich wird gelb mit rotem Rand gefärbt:
$center = new GhGuiText('Mittlerer Bereich');
$center->setStyle('background', '#ffa');
$center->setStyle('border', '2px solid #f00');
$pageLayout->addCenterComponent($center);

// Webseite anzeigen:
$page->show();