tilesbox — `u_pbt_tilesbox` #

← Komponentenreferenz · Inhalt des Handbuchs

Panel mit gruppierten Kacheln im Startbildschirm-Stil: vier Kachelgrößen, Farben, Plaketten, animierte Kacheln, einklappbare Gruppen und Umsortieren mit der Maus.

▶ Live ansehen — Demoanwendung, Kachel Tiles box: die Vorschau, der zugehörige Code und diese Seite, nebeneinander.

Auf einen Blick #

Userobject	`u_pbt_tilesbox`
Item-Klassen	`n_pbt_tilesbox_group` (Gruppe) → `n_pbt_tilesbox_tile` (Kachel)
Wofür	Einen Startbildschirm oder einen Funktionsstarter anbieten: anklickbare, von Weitem lesbare Kacheln, nach Thema geordnet
Opt-in-Optionen	`ib_reorderable`: Kacheln mit der Maus verschieben und in der Größe ändern

Schnellstart #

// open-Event des Fensters

// Eine Kachel wird an ihrer ADRESSE hinzugefuegt : die Gruppe, dann ihre eigene Id
uo_tiles.of_add_group(/*key*/ "office", /*title*/ "Verwaltung")

// Dann ihre Kacheln, jede mit ihrer Groesse
uo_tiles.of_add_tile(/*keys*/ "office/clients",   /*text*/ "Kunden",   /*image*/ "mono:img\clients.svg",   /*size*/ "medium")
uo_tiles.of_add_tile(/*keys*/ "office/invoices",  /*text*/ "Rechnungen",  /*image*/ "mono:img\factures.svg",  /*size*/ "medium")
uo_tiles.of_add_tile(/*keys*/ "office/stock",     /*text*/ "Bestand",     /*image*/ "mono:img\stock.svg",     /*size*/ "small")

// Event ue_tile_clicked von uo_tiles: (string as_keys)
choose case as_keys
    case "office/clients"  ; open(w_clients)
    case "office/invoices" ; open(w_invoices)
    case "office/stock"    ; open(w_stock)
end choose

Das Modell: Gruppen und Kacheln #

Das Panel enthält Gruppen, jede mit ihrem Titel und ihrer einklappbaren Kopfzeile. Die Kacheln gehören zu einer Gruppe: Ihr Bezeichner ist nur innerhalb dieser Gruppe eindeutig. Der Zugriff läuft daher immer über den vollständigen Pfad. Die Hinzufügungen leben auf der Komponente: ein Handle trägt nur Eigenschaften.

// Pflichtpfad: Gruppe, dann Kachel
uo_tiles.of_tile(/*keys*/ "office/invoices").is_badge = "12"

Auch die Events tragen die vollständige Adresse (as_keys, die Gruppe, dann die Kachel). Siehe Gemeinsame Basis · Die Items.

Eigenschaften #

Eigenschaft	Typ	Standard	Zweck
`ib_reorderable`	boolean	`false`	Erlaubt dem Benutzer, die Kacheln neu anzuordnen: mit der Maus oder über die Tastatur mit Strg+Links/Rechts (eine Stelle in der Gruppe, in Leserichtung) und Strg+Oben/Unten (in die vorherige oder nächste Gruppe); ein Rechtsklick ändert die Größe. Maus und Tastatur lösen dasselbe `ue_tile_moved` aus
`is_scroll`	string	`SCROLL_HORIZONTAL`	Bildlaufrichtung: `SCROLL_VERTICAL` (die Kacheln brechen um) oder `SCROLL_HORIZONTAL` (Spalten im Startbildschirm-Stil)
`ib_show_group_headers`	boolean	`true`	`false` blendet die Gruppenkopfzeilen aus. Nützlich, wenn der Bereich nur eine einzige Gruppe enthält: Es gibt nichts zu benennen und die Kopfzeile frisst nur Höhe. Ohne Kopfzeile gibt es auch kein Chevron mehr: Die Gruppen werden immer ausgeklappt angezeigt
`ii_anim_duration`	integer	`180`	Dauer der Ein-/Ausklappanimation einer Gruppe in Millisekunden; `0` = sofort
`ii_tile_unit`	integer	`0`	Grundgröße einer Kachel in Pixeln: jede Kachelgröße (klein, mittel, breit, groß) ist ein Vielfaches davon, sodass ein Wert das ganze Brett dichter oder luftiger macht. `0` gibt sie dem Thema zurück
`ii_badge_size`	integer	`0`	Höhe der Kachel-Plaketten in Pixeln, für die ganze Box (`0` = die Größe aus dem Design). Die Schriftgröße folgt von selbst. Die Farbe einer Plakette gehört zur Kachel, weil sie etwas bedeutet; ihre Größe nicht
`is_theme_style`	string	`""`	Visueller Stil der Komponente (Konstanten `THEME_STYLE_*`); leer = der der Anwendung, bei jeder Änderung übernommen
`is_theme_mode`	string	`""`	Helle oder dunkle Variante (Konstanten `THEME_MODE_*`); leer = die der Anwendung, bei jeder Änderung übernommen
`il_theme_accent`	long	`-1`	Akzentfarbe dieser Komponente (`-1` = Akzent der Anwendung, sonst der des Designs)
`is_tooltip`	string	`""`	Einfacher Tooltip beim Überfahren der Komponente
`is_super_tooltip_title`	string	`""`	Titel des erweiterten Tooltips (hat Vorrang vor `is_tooltip`)
`is_super_tooltip_text`	string	`""`	Text des erweiterten Tooltips (Rich-Markup zulässig)
`is_super_tooltip_image`	string	`""`	Bild des erweiterten Tooltips

Methoden #

Methode	Zweck
`of_group (string as_key)` → `n_pbt_tilesbox_group`	Liefert das Handle einer Gruppe (wird beim ersten Zugriff erzeugt). Ein Schlüssel, der keine Gruppe benennt (nie hinzugefügt, leer, mit `/` oder `	`), liefert das wirkungslose Handle: es schreibt nichts und wird leer gelesen — es erzeugt die Gruppe nie, das tut` of_add_group`
`of_add_group (string as_key, string as_title)` → `long`	Fügt eine Gruppe hinzu. Liefert `0` nach der Anwendung, `-5` wenn der Schlüssel leer ist, ein `/` oder ein `	`enthält oder bereits vergeben ist,` -2` wenn die Komponente nicht erzeugt ist
`of_add_tile (string as_keys, string as_text, string as_image, string as_size)` → `long`	Fügt eine Kachel an ihrer Adresse hinzu, `"office/clients"`: die Gruppe, in der sie landet, dann ihre eigene Kennung. Liefert `0` nach der Anwendung, `-5` wenn die Adresse nicht `Gruppe/Kachel` lautet, wenn die Gruppe nie mit `of_add_group` hinzugefügt wurde, wenn der Schlüssel in dieser Gruppe bereits vergeben ist (oder leer ist oder ein `	`enthält), wenn die Größe keine der vier ist,` -2` wenn die Komponente nicht erzeugt ist. Eine Überladung lässt Symbol und Größe weg
`of_tile (string as_keys)` → `n_pbt_tilesbox_tile`	Liefert das Handle einer Kachel über ihre Adresse (wird beim ersten Zugriff erzeugt). Eine Adresse, die keine Kachel benennt (nicht `Gruppe/Kachel` oder eine nie hinzugefügte Kachel), liefert das wirkungslose Handle: es schreibt nichts und liest sich leer
`of_add_live_item (string as_keys, string as_text)` → `long`	Fügt dem Laufband einer Kachel eine Seite hinzu, an ihrer Adresse; ab zwei Seiten wechselt die Kachel zwischen ihnen. Die erste Seite löscht `is_live_text`; `of_tile(adresse).of_count()` liest die Zahl der Seiten. Liefert `0` nach der Anwendung, `-5` bei leerem Text oder wenn unter dieser Adresse keine Kachel existiert, `-2` wenn die Komponente nicht erzeugt ist
`of_clear_live_items (string as_keys)` → `long`	Leert das Laufband einer Kachel: sie hört auf zu wechseln und zeigt wieder ihre einfache Seite. Liefert `0` nach der Anwendung, `-5` wenn unter dieser Adresse keine Kachel existiert, `-2` wenn die Komponente nicht erzeugt ist
`of_remove_group (string as_key)` → `long`	Entfernt eine Gruppe und alle ihre Kacheln. Liefert `0` nach der Anwendung, `-5` wenn es keine solche Gruppe gibt, `-2` wenn die Komponente nicht erzeugt ist
`of_insert_tile (string as_keys, string as_text, long al_position)` → `long`	Fügt eine Kachel an einer bestimmten Position innerhalb ihrer Gruppe ein (Position ab 1 gezählt). Liefert `0` nach der Anwendung, `-5` bei denselben Ablehnungen wie `of_add_tile`, `-2` wenn die Komponente nicht erzeugt ist
`of_insert_tile (string as_keys, string as_text, string as_image, string as_size, long al_position)` → `long`	Ebenso, mit Symbol und Größe (`small` / `medium` / `wide` / `large`): eine Kachel ist ein Bild mit einer Beschriftung darunter, und ihre Größe ist im Raster sichtbar. Liefert `0` nach der Anwendung, `-5` bei denselben Ablehnungen wie `of_add_tile`, `-2` wenn die Komponente nicht erzeugt ist
`of_move_tile (string as_keys, long al_position)` → `long`	Verschiebt eine vorhandene Kachel an eine andere Position ihrer Gruppe, mit Symbol, Größe, Farben und Seiten. Wie beim Ziehen löst es `ue_tile_moved` und dann `ue_layout_changed` aus — nichts, wenn die Kachel schon an dieser Stelle ist. Liefert `0` nach der Anwendung, `-5` wenn unter dieser Adresse keine Kachel existiert, `-2` wenn die Komponente nicht erzeugt ist
`of_move_tile (string as_keys, string as_to_key, long al_position)` → `long`	Schickt die Kachel in eine andere Gruppe, `as_to_key`, an die angegebene Position — was die Maus tut. Sie behält Farben, Tooltip, Plakette und Seiten und wechselt die Adresse: schon die nächste Zeile erreicht sie unter der neuen. Löst `ue_tile_moved` und dann `ue_layout_changed` aus. Liefert `0` nach der Anwendung, `-5` wenn unter `as_keys` keine Kachel existiert, wenn `as_to_key` keine Gruppe benennt oder ihr Schlüssel dort bereits vergeben ist, `-2` wenn die Komponente nicht erzeugt ist
`of_remove_tile (string as_keys)` → `long`	Entfernt eine einzelne Kachel, der Rest des Panels bleibt erhalten. Liefert `0` nach der Anwendung, `-5` wenn unter dieser Adresse keine Kachel existiert, `-2` wenn die Komponente nicht erzeugt ist
`of_clear ( )` → `long`	Leert das Panel (Gruppen und Kacheln) und behält seine Einstellungen; die dafür ausgegebenen Handles werden freigegeben. Liefert `0` nach der Anwendung, `-2` wenn die Komponente nicht erzeugt ist
`of_get_layout ( )` → `string`	Liest die aktuelle Anordnung als JSON zurück: die Gruppen in ihrer Reihenfolge, eingeklappt oder nicht, und ihre Kacheln in ihrer Reihenfolge mit ihrer Größe. Was Ihr Code ausgeblendet hat, steht nicht darin: das ist Sache der Anwendung (die Rechte), nicht die Anordnung des Benutzers. Ein undurchsichtiger Text: unverändert speichern und dann an `of_set_layout` zurückgeben
`of_set_layout (string as_state_json)` → `long`	Stellt eine mit `of_get_layout` gelesene oder mit `ue_layout_changed` erhaltene Anordnung wieder her: Reihenfolge, eingeklappte Gruppen und Größen. Was Ihr Code ausgeblendet hat, bleibt ausgeblendet, was auch immer die Anordnung sagt: setzen Sie die Rechte davor oder danach, das ist gleich. Eine Kachel wird über ihre Gruppe und ihren Schlüssel wiedergefunden; was die Anordnung nicht nennt, behält seinen Platz. Löst ein `ue_layout_changed` aus, wenn sich die Anordnung geändert hat, sonst keins. Liefert `0` nach der Anwendung, `-5` bei einem leeren Text, einem, der kein JSON oder keine Anordnung ist, `-2` wenn die Komponente nicht erzeugt ist
`of_reset ( )` → `long`	Leert den Inhalt und setzt die Eigenschaften auf ihre Standardwerte zurück. Liefert `0` nach der Anwendung, `-2` wenn die Komponente nicht erzeugt ist

Auf einer Gruppe — `n_pbt_tilesbox_group` #

Mitglied	Typ	Standard	Zweck
`is_title`	string	der Schlüssel	In der Kopfzeile angezeigter Titel, Rich-Text-Auszeichnung zulässig
`ib_collapsed`	boolean	`false`	Eingeklappte Gruppe: Ihre Kacheln sind unter der Kopfzeile verborgen. Das Setzen löst `ue_group_toggled` und dann `ue_layout_changed` aus, wenn sich der Zustand ändert, wie ein Klick auf die Kopfzeile
`ib_enabled`	boolean	`true`	Gesamte Gruppe ausgegraut und inaktiv: ihre Kopfzeile klappt sie nicht mehr ein, ihre Kacheln reagieren nicht mehr, keine Kachel kann hineingezogen werden
`ib_visible`	boolean	`true`	Gruppe ausgeblendet, ohne aus dem Modell entfernt zu werden. Das ist Sache der Anwendung (die Rechte): die Anordnung enthält es nicht, und `of_set_layout` blendet sie nie wieder ein
`il_back_color` · `il_text_color` · `il_back_color_hover` · `il_text_color_hover` · `il_accent`	long	`-1`	Farben der Kopfzeile der Gruppe — Hintergrund, Titel, beide unter dem Mauszeiger, und eine Akzentlinie unter der Kopfzeile. Sie gehen nicht auf die Kacheln über, die ihre eigenen behalten
`is_tooltip`	string	`""`	Einfacher Tooltip beim Überfahren der Kopfzeile der Gruppe
`is_super_tooltip_title`	string	`""`	Titel des erweiterten Tooltips der Kopfzeile (hat Vorrang vor `is_tooltip`)
`is_super_tooltip_text`	string	`""`	Text des erweiterten Tooltips der Kopfzeile (Rich-Markup erlaubt)
`is_super_tooltip_image`	string	`""`	Bild des erweiterten Tooltips der Kopfzeile

Auf einer Kachel — `n_pbt_tilesbox_tile` #

Mitglied	Typ	Standard	Zweck
`is_title`	string	`""`	Text auf der Kachel. Von `of_add_tile` gesetzt; hier geschrieben ändert er sich, gelesen sagt er, was die Kachel gerade zeigt
`is_image`	string	`""`	Symbol der Kachel (Dateipfad, `bibliothek.dll:Name`, `mono:`, `tint:`). Eine leere Zeichenkette entfernt das Symbol. Eine `wide`- oder `large`-Kachel zeigt ihr Symbol in seiner echten Größe: ein SVG bleibt scharf
`is_size`	string	`SIZE_MEDIUM`	Größe: `SIZE_SMALL`, `SIZE_MEDIUM`, `SIZE_WIDE`, `SIZE_LARGE`; jeder andere Wert wird abgelehnt, nichts wird geschrieben und `of_get_last_error` sagt warum. Vom Code gesetzt ist sie ein Wert: sie löst `ue_layout_changed` aus, nie `ue_tile_resized` (das sagt, dass der Benutzer sie gewählt hat)
`il_back_color` · `il_text_color`	long	`-1`	Hintergrund und Text dieser Kachel, als `RGB(r,g,b)` (`-1` = was das Design vorgibt)
`il_back_color_hover` · `il_text_color_hover`	long	`-1`	Dieselben zwei, aber unter dem Mauszeiger
`il_accent`	long	`-1`	Akzent dieser Kachel: er wird zu dem Hintergrund, den das Design ihr sonst gäbe (`-1` = der der Komponente)
`is_badge`	string	`""`	In der Ecke der Kachel angezeigte Plakette (ein Zähler, ein kurzer Status)
`il_badge_color`	long	`-1`	Hintergrund der Plakette, als PowerBuilder-RGB (`-1` = die Farbe aus dem Design; `0` ist Schwarz)
`is_live_text`	string	`""`	Über die Kachel gelegter fester Text; die erste Seite von `of_add_live_item` löscht ihn (er wird dann leer gelesen), Rich-Text-Auszeichnung zulässig
`ib_enabled`	boolean	`true`	Kachel ausgegraut und nicht anklickbar
`ib_visible`	boolean	`true`	Kachel ausgeblendet, ohne aus ihrer Gruppe entfernt zu werden. Wie bei einer Gruppe enthält die Anordnung es nicht
`is_tooltip`	string	`""`	Einfacher Tooltip beim Überfahren der Kachel
`is_super_tooltip_title`	string	`""`	Titel des erweiterten Tooltips der Kachel (hat Vorrang vor `is_tooltip`)
`is_super_tooltip_text`	string	`""`	Text des erweiterten Tooltips der Kachel (Rich-Markup erlaubt)
`is_super_tooltip_image`	string	`""`	Bild des erweiterten Tooltips der Kachel

Die Symbole akzeptieren alle von der Bibliothek erkannten Formen: Pfad, mono:, tint:, DLL-Ressource. Eine wide- oder large-Kachel zeigt ihr Symbol in seiner echten Größe: ein SVG bleibt dort scharf; ein Rasterbild muss groß genug geliefert werden.

Die vier Größen #

Größe	Platzbedarf	Typische Verwendung
`small`	1 Feld	Nachrangige Verknüpfung; die Beschriftung wird nicht angezeigt: geben Sie ihr einen Tooltip (`is_tooltip`)
`medium`	2 × 2 Felder	Referenzgröße: Symbol und Beschriftung
`wide`	4 × 2 Felder	Längliche Kachel, ideal für einen animierten Text
`large`	4 × 4 Felder	Hauptkachel des Bildschirms

Events #

Event	Ausgelöst wenn
`ue_tile_clicked (string as_keys)`	Auf eine Kachel wird geklickt
`ue_tile_moved (string as_keys, string as_to_key, long al_index)`	Eine Kachel hat sich bewegt: mit der Maus gezogen, mit Strg+Pfeiltasten verschoben oder durch `of_move_tile` Ihres Codes — dasselbe Ereignis für dieselbe Verschiebung, nichts, wenn sie schon an ihrem Platz war. `as_keys` ist die Adresse, von der sie kommt, `as_to_key` die Zielgruppe, `al_index` die neue Position
`ue_group_toggled (string as_key, boolean ab_collapsed)`	Eine Gruppe wird ein- oder ausgeklappt: über ihre Kopfzeile oder durch ihr von Ihrem Code gesetztes `ib_collapsed` (nichts, wenn sie schon in diesem Zustand ist); `ue_layout_changed` folgt
`ue_tile_rclicked (string as_keys, long al_x, long al_y)`	Rechtsklick auf eine Kachel oder Menütaste (Umschalt+F10) darauf: ihre Adresse und der Punkt in Bildschirmpixeln — über die Tastatur die linke untere Ecke der Kachel. Ein Menü der Bibliothek öffnet sich dort, wie es ist
`ue_tile_resized (string as_keys, string as_size)`	Der Benutzer hat einer Kachel über ihr Kontextmenü eine andere Größe gegeben (nur angezeigt, solange `ib_reorderable` `true` ist); `as_size` trägt die neue Größe
`ue_layout_changed (string as_layout_json)`	Die Anordnung hat sich geändert, durch den Benutzer oder Ihren Code: eine Kachel gezogen oder durch `of_move_tile` verschoben, eine Größe im Menü gewählt oder über `is_size` gesetzt, eine Gruppe über ihre Kopfzeile oder durch `ib_collapsed` eingeklappt, eine Anordnung durch `of_set_layout` zurückgegeben (einmal). Trägt die gesamte Anordnung, denselben Text wie `of_get_layout`
`ue_ready ( )`	Die Komponente ist fertig geladen; alles zuvor Gesendete wurde nachgespielt
`ue_runtime_missing ( )`	Die WebView2-Runtime fehlt: die Komponente bleibt leer
`ue_bg_color (long al_color)`	Die Komponente hat ihre Design-Hintergrundfarbe berechnet; das Userobject hat sie bereits übernommen (`backcolor`)

Beispiele #

Gemischte Größen innerhalb einer Gruppe #

// Mit einer leeren Box und einer Gruppe beginnen
uo_tiles.of_clear()
uo_tiles.of_add_group(/*key*/ "home", /*title*/ "Startseite")

// Vier Kacheln in vier Groessen
uo_tiles.of_add_tile(/*keys*/ "home/dashboard", /*text*/ "Dashboard", /*image*/ "mono:img\chart.svg",  /*size*/ "large")
uo_tiles.of_add_tile(/*keys*/ "home/clients", /*text*/ "Kunden",         /*image*/ "mono:img\users.svg",  /*size*/ "medium")
uo_tiles.of_add_tile(/*keys*/ "home/agenda",  /*text*/ "Kalender",          /*image*/ "mono:img\cal.svg",    /*size*/ "wide")
uo_tiles.of_add_tile(/*keys*/ "home/help",    /*text*/ "Hilfe",            /*image*/ "mono:img\help.svg",   /*size*/ "small")

Plakette, Farbe und animierte Kachel #

// Local variables
n_pbt_tilesbox_tile lnv_tile
long ll_new_count

// Die Zahl der wartenden Elemente, aus Ihren Daten gelesen
ll_new_count = 12

// Eine Plakette meldet eine Anzahl wartender Elemente
uo_tiles.of_tile(/*keys*/ "home/clients").is_badge = String(ll_new_count)

// Rot, wenn der Rueckstand kritisch wird, sonst die Farbe des Designs (-1)
if ll_new_count > 50 then
    uo_tiles.of_tile(/*keys*/ "home/clients").il_badge_color = RGB(/*red*/ 200, /*green*/ 30, /*blue*/ 30)
else
    uo_tiles.of_tile(/*keys*/ "home/clients").il_badge_color = -1
end if

// Eine eigene Farbe hebt eine Kachel hervor : Hintergrund, Text und das,
// was aus beiden unter dem Mauszeiger wird
lnv_tile = uo_tiles.of_tile(/*keys*/ "home/dashboard")
lnv_tile.il_back_color = RGB(/*red*/ 0, /*green*/ 103, /*blue*/ 192)
lnv_tile.il_back_color_hover = RGB(/*red*/ 0, /*green*/ 80, /*blue*/ 150)
lnv_tile.il_text_color = RGB(/*red*/ 255, /*green*/ 255, /*blue*/ 255)

// ANIMIERTE Kachel: jede hinzugefuegte Seite laeuft der Reihe nach ueber die Kachel.
// Eine Seite wird ueber die KOMPONENTE hinzugefuegt, an der Adresse der Kachel
uo_tiles.of_clear_live_items(/*keys*/ "home/agenda")
uo_tiles.of_add_live_item(/*keys*/ "home/agenda", /*text*/ "3 Termine heute")
uo_tiles.of_add_live_item(/*keys*/ "home/agenda", /*text*/ "Teambesprechung um 14:00 Uhr")
uo_tiles.of_add_live_item(/*keys*/ "home/agenda", /*text*/ "2 überfällige Nachfassaktionen")

Ein fester Text statt eines Durchlaufs #

// is_live_text legt EINEN dauerhaften Text auf die Kachel (Rich-Text-Auszeichnung zulaessig)
uo_tiles.of_tile(/*keys*/ "home/dashboard").is_live_text = "[b]48[/b] Bestellungen heute"

Einklappbare Gruppen #

// Local variables
n_pbt_tilesbox_group lnv_admin

// Eine Gruppe mit ihren zwei Kacheln, dann ein Handle auf die Gruppe
uo_tiles.of_add_group(/*key*/ "admin", /*title*/ "Administration")
uo_tiles.of_add_tile(/*keys*/ "admin/users",  /*text*/ "Benutzer", /*image*/ "mono:img\users.svg", /*size*/ "medium")
uo_tiles.of_add_tile(/*keys*/ "admin/params", /*text*/ "Einstellungen", /*image*/ "mono:img\gear.svg",  /*size*/ "medium")
lnv_admin = uo_tiles.of_group(/*key*/ "admin")

// Diese Gruppe startet eingeklappt: der Benutzer oeffnet sie, wenn er sie braucht
lnv_admin.ib_collapsed = true

// Eine ganze Gruppe kann je nach Rechten auch ausgegraut werden
lnv_admin.ib_enabled = (is_profile = "ADMIN")

// Event ue_group_toggled von uo_tiles
if as_key = "admin" and not ab_collapsed then of_trace("Verwaltungsbereich geoeffnet")

Ein Bereich mit einer einzigen Gruppe, ohne Kopfzeile #

// Eine einzige Gruppe hat nichts zu benennen : ihre Kopfzeile frisst nur Hoehe.
// Ohne Kopfzeile auch kein Chevron mehr : die Kacheln bleiben immer sichtbar.
uo_tiles.ib_show_group_headers = false
uo_tiles.of_add_group(/*key*/ "all", /*title*/ "")

Eine Kachel zwischen zwei Gruppen verschieben #

Mit ib_reorderable = true zieht der Benutzer eine Kachel dorthin, wohin er will, auch von einer Gruppe in eine andere. Das Event ue_tile_moved liefert beide Gruppen und die neue Position. Über die Tastatur rückt die Kachel mit dem Fokus mit Strg+Links/Rechts um eine Stelle vor oder zurück (in Leserichtung: von rechts nach links umgekehrt) und wechselt mit Strg+Oben/Unten in die vorherige oder nächste Gruppe — dasselbe ue_tile_moved, dieselben Ablehnungen (Schlüssel bereits vergeben, Gruppe deaktiviert oder eingeklappt). Eine deaktivierte oder eingeklappte Gruppe wird übersprungen. Während des Ziehens bricht Esc es ab, und das Panel rollt, wenn sich der Mauszeiger seinem Rand nähert. Die Tab-Taste hält nur einmal pro Gruppe: die Pfeiltasten durchlaufen die Kacheln (und ohne ib_reorderable auch Strg+Pfeil).

// Dem Benutzer das Umordnen erlauben : standardmaessig false, anfordern
uo_tiles.ib_reorderable = true

// Event ue_tile_moved von uo_tiles
// as_keys = woher sie kommt, as_to_key = wohin sie geht, al_index = Position
// Local variables
n_pbt_utils lnv_utils   // autoinstantiate : nichts zu erzeugen, nichts zu zerstoeren

// Einen Gruppenwechsel protokollieren (durch den Benutzer oder Ihren Code)
if lnv_utils.of_parent(/*keys*/ as_keys) <> as_to_key then
    of_trace("Kachel " + lnv_utils.of_leaf(/*keys*/ as_keys) + " verschoben von " + lnv_utils.of_parent(/*keys*/ as_keys) + " nach " + as_to_key)
end if

// Event ue_layout_changed von uo_tiles: die gewaehlte Anordnung aufbewahren
is_layout_json = as_layout_json

// Beim naechsten Oeffnen: den Bildschirm so wiederherstellen, wie der Benutzer ihn eingerichtet hatte
if is_layout_json <> "" then uo_tiles.of_set_layout(/*state_json*/ is_layout_json)

Um den Bildschirm festzusetzen, genügt es, das Umsortieren abzuschalten:

// Freeze the screen : the tiles stay where they are
uo_tiles.ib_reorderable = false

Aus dem Code heraus umsortieren #

// Die Kachel "help" an den Anfang ihrer Gruppe setzen (Positionen ab 1 gezaehlt) : wie
// beim Ziehen loest der Aufruf ue_tile_moved und dann ue_layout_changed aus
uo_tiles.of_move_tile(/*keys*/ "home/help", /*position*/ 1)

// Die Kachel "agenda" in eine ANDERE Gruppe schicken, mit Farben, Plakette und Seiten
uo_tiles.of_move_tile(/*keys*/ "home/agenda", /*to_key*/ "admin", /*position*/ 1)

// Eine neue Kachel an zweiter Position einfuegen
uo_tiles.of_insert_tile(/*keys*/ "home/quotes", /*text*/ "Angebote", /*position*/ 2)

// Eine Kachel entfernen, ohne den Rest anzuruehren
uo_tiles.of_remove_tile(/*keys*/ "home/help")

// Jeder Aufruf liefert -5, wenn die Adresse nichts benennt (oder, beim Einfuegen oder in eine
// andere Gruppe, einen vergebenen Schluessel)

Auf den Rechtsklick reagieren #

// Event ue_tile_rclicked von uo_tiles : (string as_keys, long al_x, long al_y)
// Local variables
n_pbt_utils lnv_utils   // autoinstantiate : nichts zu erzeugen, nichts zu zerstoeren
m_tile_context lm_menu

// Die anvisierte Kachel merken (Instanzvariablen, vom Menue gelesen)
is_target_group = lnv_utils.of_parent(/*keys*/ as_keys)
is_target_tile = lnv_utils.of_leaf(/*keys*/ as_keys)

// Ihr Menue, am Mauszeiger des FENSTERS ; al_x, al_y sind Bildschirmpixel :
// unveraendert an of_show eines contextmenu der Bibliothek uebergeben
lm_menu = create m_tile_context
lm_menu.m_main.PopMenu(parent.PointerX(), parent.PointerY())
destroy lm_menu

Best Practices #

Eine large-Kachel pro Bildschirm genügt: Sie ist der Haupteinstiegspunkt, der Rest muss lesbar bleiben.
small-Kacheln zeigen ihre Beschriftung nicht an — füllen Sie stets den Tooltip des Items aus.
Behalten Sie il_back_color den Kacheln vor, die sich abheben sollen: Über zwei oder drei Farben hinaus verliert der Bildschirm seine Hierarchie. Und wenn Sie einen hellen Hintergrund setzen, setzen Sie il_text_color gleich mit — der Text des Designs ist darauf nicht garantiert lesbar.
Ziehen Sie of_add_live_item (Durchlauf) dem is_live_text (fester Text) vor, wenn Sie mehrere Informationen auf derselben Kachel unterbringen wollen.
Wenn Sie das Umsortieren aktiv lassen, bewahren Sie die Anordnung über of_get_layout / ue_layout_changed auf und spielen Sie of_set_layout beim Öffnen wieder ein.
Verwenden Sie ib_visible und ib_enabled (Gruppe oder Kachel), um das Panel an die Rechte des Benutzers anzupassen, statt es neu aufzubauen. Die Anordnung berührt sie nie: setzen Sie die Rechte vor oder nach of_set_layout, das ist gleich.
Wenn der Platz für Kacheln nicht ausreicht, ziehen Sie die kompakte seitliche Navigation der listbar vor; für häufige Aktionen die toolbar.

Vom gemeinsamen Sockel geerbt #

Diese Mitglieder gibt es bei jeder visuellen Komponente — sie sind nicht dieser eigen. Sie werden einmal in den übergreifenden Kapiteln beschrieben; diese Tabelle sagt nur, wo man sie liest.

Mitglieder	Rolle	Beschrieben in
`of_count` · `of_keys_at` · `of_has`	Durchlaufen, was die Komponente enthält	3.2 Die Items
`of_reset`	Die Komponente zurücksetzen	3.6 Eine Komponente zurücksetzen: `of_reset()`
`of_register_shortcut` · `of_clear_shortcuts`	Tastenkürzel der Komponente	3.5 Tastenkombinationen
`of_is_created` · `of_is_ready` · `of_get_last_error`	Ob sie entstanden ist, ob sie bereit ist, was fehlschlug	3.7 Diagnose
`of_save_as_png` · `of_save_as_jpg`	Die Darstellung als Bild exportieren	3.8 Die Darstellung als Bild exportieren
`of_set_redraw`	Änderungen zu einem einzigen Neuzeichnen bündeln	3.10 Best Practices
`of_preload_icons`	Symbole ohne Verzögerung	Sofortige Anzeige: `of_icon`
`of_set_translation`	Eine Beschriftung der Komponente übersetzen	5.2 Eine Beschriftung anpassen: `of_set_translation`
`of_focus_webview`	Der Komponente den Fokus geben	6.4 Tastatur und Fokus
`of_print` · `of_print_to_pdf`	Drucken oder ein PDF schreiben	6.9 Drucken
`of_set_property` · `of_get_property` · `of_component_name`	Eine Eigenschaft über ihren Namen steuern	3.1 Die Eigenschaften-Engine
`is_accessible_name` · `is_accessible_description`	Name und Beschreibung, die ein Bildschirmleser sagt	3.4 Optionale Eigenschaften und Events

Zwei Helfer werden nicht geerbt: of_icon und of_escape_markup liegen auf n_pbt_utils. Deklarieren Sie eines — n_pbt_utils lnv_utils, nichts zu erzeugen — und rufen Sie sie darauf auf.