1.1.4. Icons
Einige Komponenten (z.B. Buttons) können zusätzlich oder alternativ zur Beschriftung mit Icons versehen werden. Hierzu wird der Komponente über die Methode setIcon() der Name eines Icons zugewiesen.
Die Icons sind in sogenannten Icon-Sets enthalten, d.h. die verfügbaren Icons und ihre Namen richten sich nach dem verwendeten Icon-Set. Jeder Komponente kann über die Methode setIconSet() ein Icon-Set zugeordnet werden. Komponenten, denen kein Icon-Set zugeordnet wurde, verwenden das der Strukturkomponente, in der sie enthalten sind. Die Webseitenkomponenten enthalten ein Standard-Icon-Set, sofern ihnen nicht explizit ein anderes zugeordnet wird. Die Icons dieses Standard-Icon-Sets werden im Abschnitt Standard-Icons aufgeführt.
Das folgende Beispiel zeigt ein Button, das neben seiner Beschriftung das Icon stop zeigt (dieses Icon ist im Standard-Icon-Set enthalten und zeigt ein Stopp-Schild):
Beispiel eines Buttons mit Icon:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// GREYHOUND PHP GUI laden:
require_once 'ghgui/ghgui.php';
// Webseite erstellen:
$page = new GhGuiExtensionPage('PHP GUI Beispiel');
// Formular zur Webseite hinzufügen:
$form = new GhGuiForm();
$page->addComponent($form);
// Button zum Absenden des Formulars hinzufügen:
$button = new GhGuiButton('Absenden');
$form->addComponent($button);
// Icon setzen:
$button->setIcon('stop');
// Webseite anzeigen:
$page->show();
Komponenten, die Bäume darstellen (GhGuiTree und GhGuiComboTree), bieten zwei Möglichkeiten, die Icons der einzelnen Baumelemente festzulegen. Zum einen können die Icons für Elemente mit untergeordneten Elementen ("Äste") in geschlossenem und geöffnetem Zustand sowie das Icon für Elemente ohne untergeordnete Elemente ("Blätter") festgelegt werden. Dies wird über die Methode setTreeIcons() angegeben, der die Namen der drei Icons übergeben werden.
Zum anderen können aber auch die Elemente des Baums selbst den Namen eines Icons und den eines Icons für den geöffneten Zustand festlegen. Dies geschieht analog zur Beschriftung über entsprechende Dateneigenschaften. Das Datenobjekt muss eine Eigenschaft für den Namen des darzustellenden Icons besitzen, optional eine weitere Dateneigenschaft für den Namen des Icons in geöffnetem Zustand (wenn es untergeordnete Elemente hat und diese ausgeklappt werden). Die Namen dieser Objekteigenschaften werden über die Methode setTreeIconProperties() angegeben.
Das folgende Beispiel zeigt einen Baum, dem sowohl Icons für die drei Standardfälle (geschlossener Ast, geöffneter Ast, Blatt) übergeben werden, sowie die Dateneigenschaften für Elemente (itemIcon) und geöffnete Elemente (itemIconOpen). Die Elemente, die über dieses Dateneigenschaften nicht verfügen, erhalten die festgelegten Standard-Icons.
Beispiel eines Baums mit individuellen Icons:
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
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
<?php
// GREYHOUND PHP GUI laden:
require_once 'ghgui/ghgui.php';
// Webseite erstellen:
$page = new GhGuiExtensionPage('PHP GUI Beispiel');
// Formular zur Webseite hinzufügen:
$form = new GhGuiForm();
$page->addComponent($form);
// Baum mit Daten aus Arrays aufbauen:
$treeData = new GhCoreTree();
// Element zur ersten Ebene hinzufügen (mit ID 100 und icons 'currency_euro' und 'currency_euro_add'):
$treeData->add(100, 'Buchhaltung', array('itemId' => 'item01', 'itemIcon' => 'currency_euro', 'itemIconOpen' => 'currency_euro_add'));
// Untergeordnete Elemente zuordnen (zum Element mit der ID 100, mit Icons 'cube_blue' bzw. 'cube_green'):
$treeData->addChild(101, 100, 'Einkauf', array('itemId' => 'item02', 'itemIcon' => 'cube_blue'));
$treeData->addChild(102, 100, 'Verkauf', array('itemId' => 'item03', 'itemIcon' => 'cube_green'));
// Weiteres Element zur ersten Ebene hinzufügen (mit ID 200, ohne Icon):
$treeData->add(200, 'Kundenservice', array('itemId' => 'item04'));
// Untergeordnetes Element zum Element mit ID 200 zuordnen (ohne Icon):
$treeData->addChild(201, 200, 'Produktanfragen', array('itemId' => 'item05'));
// Baum-Komponente erzeugen und Baum zuordnen (Formularfeld 'treeSelection' nennen):
$tree = new GhGuiTree('treeSelection', $treeData);
// Baum ins Formular einfügen:
$form->addComponent($tree);
// Standard-Icons für Baumelemente setzen:
// 'clipboard_next' für geschlossene Äste
// 'clipboard_next_down' für geöffnete Äste
// 'clipboard' für Blätter (Elemente ohne untergeordnete Elemente)
$tree->setTreeIcons('clipboard_next', 'clipboard_next_down', 'clipboard');
// Dateieigenschaften für Icons setzen:
// 'itemIcon' für geschlossene Äste und Blätter
// 'itemIconOpen' für geöffnete Äste
$tree->setTreeIconProperties('itemIcon', 'itemIconOpen');
// Webseite anzeigen:
$page->show();
| Unterthemen |
|---|
| 1.1.4.1. Standard-Icons |
| Themen dieser Ebene |
|---|
| 1.1.1. Webseitenaufbau |
| 1.1.2. Formulare |
| 1.1.3. Datenobjekte |
| 1.1.4. Icons |