1.3. PHP GUI Beispiel: IFrame-Ausgabe

Im Folgenden werden die Konzepte der PHP GUI anhand eines Beispiels verdeutlicht.

Beispiel mit Ausgabe im IFrame

In diesem Beispiel soll eine grafische Oberfläche mit drei Bereichen entstehen. Im linken Bereich wird ein Baum angezeigt, im oberen eine Liste mit mehreren Spalten und im rechten unteren Bereich werden mehrere Karteireiter dargestellt, unter anderem mit einigen Eingabeelementen und einem Bereich für die Ausgabe. Der Ausgabebereich wird in einem IFrame platziert, in das die Daten sämtlicher Eingabeelemente auf der Webseite (Auswahl im Baum, in der Liste und die Werte der Eingabeelemente im Karteireiter) abgesendet werden.

Das Beispiel ist in zwei Dateien aufgeteilt. Der Hauptteil inklusive aller Eingabeelemente wird durch eine Datei erzeugt (z.B. phpgui-example.php), während der Inhalt für das IFrame mit der Ausgabe von einer zweiten Datei (in diesem Beispiel phpgui-example-iframe.php) erzeugt wird.

Hauptteil - phpgui-example.php:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110


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

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

// Gesamten Inhalt in ein Formular setzen:
$form = new GhGuiForm('phpgui-example-iframe.php');
$page->addComponent($form);

// Ein verstecktes Formularfeld hinzufügen:
$form->addHiddenField('formSubmitted', 'yes');

// Webseiteninhalt in drei Bereiche aufteilen: links einen Baum, oben eine Liste/Tabelle und unten Karteireiter mit Inhalten:
// Der linke Bereich nimmt die komplette Höhe ein (LAYOUT_SIDEBAR) und die Bereiche können in der Größe vom Benutzer
// verändert werden (durch Ziehen der Trennlinie - dazu dient der zweite Parameter: true).
$pageLayout = new GhGuiBorderContainer(GhGuiBorderContainer::LAYOUT_SIDEBAR, true);
$form->addComponent($pageLayout);

// Baum-Komponente erzeugen und zum linken Bereich hinzufügen (mit 15% Breite für den linken Bereich):
$tree = new GhGuiTree('tree');
$pageLayout->addLeftComponent($tree, '15%');

// Listen-Komponente erzeugen und zum oberen Bereich hinzufügen (mit 20% Höhe für den oberen Bereich):
// Die Liste soll Mehrfachauswahl (per Shift/Strg) ermöglichen (SELECTION_EXTENDED).
$list = new GhGuiDataGrid('list', GhGuiDataGrid::SELECTION_EXTENDED);
$pageLayout->addTopComponent($list, '20%');

// Tab-Container für die Karteireiter im mittleren Bereich erzeugen:
$tabs = new GhGuiTabContainer();
$pageLayout->addCenterComponent($tabs);
// Falls der Formularwert "tab" abgeschickt wurde den entsprechenden Karteireiter auswählen:
$currentTab = GhCoreGlobals::getValue('tab');
if($currentTab)
  $tabs->setSelectedTab($tab);

// Karteireiter für einige Eingabekomponenten erzeugen und hinzufügen:
// Der Karteireiter erhält die Beschriftung "Eingabe", kann nicht geschlossen werden, und erhält das Icon "document_edit".
// Der Karteireiter ist in zwei Bereiche aufgeteilt, einen oberen Bereich mit den Komponenten und einem unteren Bereich
// mit einem IFrame, das beim Absenden des Formulars die Ausgabe zeigt:
$inputTab = new GhGuiBorderContainer(GhGuiBorderContainer::LAYOUT_HEADLINE, true);
$tabs->addTab('Formular', $inputTab, false, 'document_edit');


// Die Komponenten werden tabellarisch aufgelistet, jeweils mit Beschriftung.
$input = new GhGuiTableContainer(1, true);
$inputTab->addTopComponent($input, '40%');

// Textbereich zum Eingeben einer Nachricht hinzufügen (Größe: 4 Zeilen und 40 Spalten):
$message = new GhGuiTextArea('message', 'Dies ist eine Test-Nachricht...' . "\n" . 'Mit mehrzeiligem Inhalt.', 4, 40);
$input->addCell($message, 'Nachricht:');

// Button zum Absenden des Formulars hinzufügen:
$submit = new GhGuiButton('Absenden');
$input->addCell($submit, '');
// Dem Button das Icon 'media_play_green' geben:
$submit->setIcon('media_play_green');


// Karteireiter für ein IFrame erzeugen und hinzufügen:
// Der Karteireiter erhält die Beschriftung "Ausgabe", kann nicht geschlossen werden und erhält das Icon "window".
$iframe = new GhGuiIframe('phpgui-example-iframe.php');
$inputTab->addCenterComponent($iframe, '60%');

// Das Formular soll in das IFrame abgeschickt werden:
$form->setTarget($iframe);


// Karteireiter mit Text erzeugen und hinzufügen:
// Der Karteireiter erhält die Beschriftung "Test" und kann geschlossen werden (der dritte Parameter hat den Wert true).
$tabs->addTab('Test', new GhGuiText('Dieser Karteireiter kann geschlossen werden.'), true, 'barcode');

// Struktur und Inhalt des Baums festlegen:
$treeItems = new GhCoreTree();
$treeItems->add(100, 'Buchhaltung', array('itemId' => 'tree01'));
$treeItems->addChild(101, 100, 'Einkauf', array('itemId' => 'tree02'));
$treeItems->addChild(102, 100, 'Verkauf', array('itemId' => 'tree03'));
$treeItems->add(200, 'Kundenservice', array('itemId' => 'tree04'));
$treeItems->addChild(201, 200, 'Produktanfragen', array('itemId' => 'tree05'));
$treeItems->addChild(202, 200, 'Retouren', array('itemId' => 'tree06'));
$treeItems->addChild(210, 200, 'Mitteilungen', array('itemId' => 'tree07'));
$treeItems->addChild(211, 210, 'Lob', array('itemId' => 'tree08'));
$treeItems->addChild(212, 210, 'Tadel', array('itemId' => 'tree09'));
// Daten dem Baum zuweisen:
$tree->setTree($treeItems);
// Festlegen, dass die ID (itemId) des gewählten Eintrags im Formular übermittelt wird:
$tree->setValueProperty('itemId');

// Struktur und Inhalt der Liste festlegen:
// Versteckte Spalte für die ID (itemId) der Listenelemente zur Liste hinzufügen:
$list->addColumn('itemId');
// Festlegen, dass die ID (itemId) der gewählten Listenelemente im Formular übermittelt wird:
$list->setValueProperty('itemId');
// Weitere Spalten mit Beschriftungen hinzufügen:
$list->addColumn('itemLabel', 'Betreff');
$list->addColumn('itemFrom', 'Absender');
$list->addColumn('itemDate', 'Datum', null, GhGuiFormatter::DATETIME_GERMAN);
// Liste mit Daten befüllen:
$listItems = array(
  array('itemId' => 'item01', 'itemLabel' => 'Helau!', 'itemDate' => '2011-11-11 11:11:11', 'itemFrom' => 'Clown'),
  array('itemId' => 'item02', 'itemLabel' => 'Produktanfrage', 'itemDate' => '2011-11-02 09:46:02', 'itemFrom' => 'K. Kunde'),
  array('itemId' => 'item03', 'itemLabel' => 'Make $$$ fast', 'itemDate' => '1970-01-01 00:00:00', 'itemFrom' => 'SpamKing'),
  array('itemId' => 'item04', 'itemLabel' => 'Neues aus der Welt der Technik', 'itemDate' => '1982-08-26 12:34:56', 'itemFrom' => 'Commodore Business Machines')
);
$list->addRows($listItems);


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

Ausgabe im IFrame - phpgui-example-iframe.php:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


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

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

// Textkomponente mit weißem Hintergrund erzeugen und zur Webseite hinzufügen:
$text = new GhGuiText();
$text->setStyle('background', '#fff');
$text->setStyle('padding', '8px');
$page->addComponent($text);

// Überschrift zur Textkomponente hinzufügen:
$text->addHeading('IFrame');

// Ausgabe zur Textkomponente hinzufügen:
$text->addText('Dies ist der Inhalt des IFrames.');
$text->addHorizontalLine();

// Wenn Formulardaten vorliegen werden diese ausgegeben:
if(GhCoreGlobals::getValue('formSubmitted'))
{
  // Übergebene Formularwerte auslesen:
  $treeSelection = GhCoreGlobals::getValue('tree');
  $listSelection = GhCoreGlobals::getValue('list');
  $message = GhCoreGlobals::getValue('message');

  // Ausgabe:
  if($treeSelection)
    $text->addParagraph('Es wurde das Element ' . $treeSelection . ' des Baums ausgewählt.')->addLineBreak();
  else
    $text->addParagraph('Es wurde kein Element des Baums ausgewählt.')->addLineBreak();

  if(is_array($listSelection) && !empty($listSelection))
    $text->addParagraph('Es wurden Listeneinträge mit folgenden IDs ausgewählt: ' . implode(', ', $listSelection) . '.')->addLineBreak();
  else
    $text->addParagraph('Es wurden keine Listeneinträge ausgewählt.')->addLineBreak();

  $text->addText('Die folgende Nachricht wurde eingegeben:');
  $text->addLineBreak();
  // HTML-Zeichen in der Nachricht maskieren und Zeilenumbrüche umwandeln:
  $text->addText($message, true, true);
}
// Andernfalls wird eine entsprechende Nachricht ausgegeben:
else
  $text->addText('Das Formular wurde noch nicht abgeschickt.');

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