listbar — u_pbt_listbar #

← Komponentenreferenz · Inhalt des Handbuchs

Seitliche Navigationsleiste: einklappbare Abschnitte im Akkordeon-Stil, die Einträge mit Symbol enthalten, mit einem Akzentband auf dem aktuellen Eintrag und dem Einklappen zu einer Symbolleiste.

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

Auf einen Blick #

Dies ist die einzige Komponente der Bibliothek, die ib_auto_width veröffentlicht: Ihre natürliche Breite hat tatsächlich eine Bedeutung, da die eingeklappte Leiste deutlich schmaler ist als die ausgeklappte Leiste. Der übliche Fall ist im Übrigen bereits abgedeckt, ohne dass etwas zu aktivieren wäre — ib_collapsed = true verkleinert die Leiste auf die Symbolleiste und gibt ihr die Breite beim Ausklappen zurück.

Schnellstart #

// open-Event des Fensters

uo_nav.of_add_section(/*key*/ "nav", /*titel*/ "Navigation")
uo_nav.of_add_item(/*keys*/ "nav/accueil",   /*beschriftung*/ "Startseite",   /*symbol*/ "mono:img\home.svg")
uo_nav.of_add_item(/*keys*/ "nav/documents", /*beschriftung*/ "Dokumente", /*symbol*/ "mono:img\doc.svg")
uo_nav.of_add_item(/*keys*/ "nav/recherche", /*beschriftung*/ "Suche", /*symbol*/ "mono:img\find.svg")

uo_nav.of_add_section(/*key*/ "config", /*titel*/ "Einstellungen")
uo_nav.of_add_item(/*keys*/ "config/preferences", /*beschriftung*/ "Voreinstellungen", /*symbol*/ "mono:img\gear.svg")

// Die Auswahl wird auf dem EINTRAG gesetzt, ueber seinen vollstaendigen Pfad
uo_nav.of_select_item("nav", "accueil")

// Event ue_selection_changed von uo_nav : (string as_from_keys, string as_keys)
choose case as_keys
    case "nav/accueil"       ; of_ouvrir_accueil()
    case "nav/documents"     ; of_ouvrir_documents()
    case "config/preferences"; of_ouvrir_preferences()
end choose

Zwei Ebenen, ein zwingender Pfad #

Ein Eintragsbezeichner ist nur innerhalb seines Abschnitts eindeutig: Es gibt daher keine Abkürzung zum Eintrag. Jeder Zugriff führt über den Abschnitt, was die Schreibweise eindeutig macht — siehe Hierarchien.

// Komponente  ->  Abschnitt      ->  Eintrag     ->  Eigenschaft
uo_nav        .of_section("nav") .of_item("docs") .is_text = "Documents"

Auch die Events tragen den vollständigen Pfad, und den verlassenen Eintrag dazu: ue_selection_changed(as_from_keys, as_keys).

Eigenschaften #

Eigenschaften eines Abschnitts — n_pbt_listbar_section #

Eigenschaften eines Eintrags — n_pbt_listbar_item #

Methoden #

Auf der Komponente #

Auf einem Abschnitt — n_pbt_listbar_section #

Events #

Beispiele #

Vollständiges Seitenmenü #

uo_nav.of_set_redraw(false)

uo_nav.of_add_section("dossiers", "Ordner")
uo_nav.of_add_item("dossiers/recents",  "Zuletzt verwendet",  "mono:img\clock.svg")
uo_nav.of_add_item("dossiers/clients",  "Kunden",  "mono:img\user.svg")
uo_nav.of_add_item("dossiers/archives", "Archiv", "mono:img\box.svg")

uo_nav.of_add_section("outils", "Werkzeuge")
uo_nav.of_add_item("outils/import", "Importieren", "mono:img\import.svg")
uo_nav.of_add_item("outils/export", "Exportieren", "mono:img\export.svg")

uo_nav.of_set_redraw(true)
uo_nav.of_select_item("dossiers", "recents")

Einklappbare Leiste, die Platz freigibt #

// Zur Symbolleiste einklappen : die Leiste schrumpft von selbst (und nimmt ihre
// Breite wieder an, wenn Sie sie ausklappen).
uo_nav.ib_collapsed = true

// Event ue_auto_width von uo_nav : (long al_width)
// Die Leiste hat gerade ihre ideale Breite angenommen : was rechts davon liegt, neu ausrichten.
uo_contenu.x     = uo_nav.x + al_width
uo_contenu.width = parent.width - uo_contenu.x

Akkordeon: einen Abschnitt einklappen #

// Den selten benutzten Archiv-Abschnitt einklappen
uo_nav.of_section("archives").ib_collapsed = true

// Event ue_section_toggled von uo_nav : (string as_keys, boolean ab_collapsed)
of_enregistrer_preference("section_" + as_keys, String(ab_collapsed))

Auf die Navigation reagieren #

// Event ue_selection_changed von uo_nav : (string as_from_keys, string as_keys)
// Die Adresse traegt beide Ebenen : zwei Abschnitte koennen beide einen Eintrag "liste" haben.
n_pbt_utils lnv_utils   // autoinstantiate : nichts zu erzeugen, nichts zu zerstoeren
string ls_ids[]

if lnv_utils.of_split_path(as_keys, ls_ids) < 2 then return
choose case ls_ids[1]
    case "dossiers" ; of_ouvrir_dossier(ls_ids[2])
    case "outils"   ; of_lancer_outil(ls_ids[2])
end choose

Einen Auswahlwechsel ablehnen #

// Die Frage wird STANDARDMAESSIG gestellt: nichts zu aktivieren. Diese Zeile tut
// das Gegenteil und entfernt sie, wo die Abwaegung nichts bringt und kostet.
uo_nav.ib_veto_selection = false

// Event ue_selection_changing von uo_nav :
//   (string as_from_keys, string as_keys)
// FALSE zurueckzugeben haelt den Benutzer auf dem Eintrag, den er verlaesst.
if of_saisie_en_cours(as_from_keys) then
    MessageBox("Eingabe", "Schließen Sie die laufende Akte ab, bevor Sie navigieren.")
    return false
end if
return true

Einen Eintrag im laufenden Betrieb aktualisieren #

n_pbt_listbar_item lnv_entree

// Der vollstaendige Pfad ist zwingend : Komponente -> Abschnitt -> Eintrag
lnv_entree = uo_nav.of_section("dossiers").of_item("recents")
lnv_entree.is_text  = "Zuletzt verwendet (12)"
lnv_entree.is_image = "mono:img\clock_full.svg"

// Je nach Berechtigungen ausgrauen oder ausblenden, ohne die Leiste neu aufzubauen
uo_nav.of_section("outils").of_item("import").ib_enabled = of_a_le_droit("import")
uo_nav.of_section("outils").of_item("export").ib_visible = gb_mode_expert

Auswahl aus dem Code gesteuert #

// Die Auswahl woanders setzen : das Akzentband folgt
uo_nav.of_select_item("dossiers", "clients")

// Oder sie vollstaendig loeschen
uo_nav.of_clear_selection()

Die Leiste neu aufbauen #

// of_clear leert Abschnitte und Eintraege ; of_reset stellt zusaetzlich die Standardwerte der Komponente wieder her
uo_nav.of_clear()
of_construire_menu_selon_profil()

Best Practices #

• Ein Eintrag wird über seine Adresse hinzugefügt: of_add_item("nav/accueil", ...). Das Abschnitts-Handle dient nur noch dem Setzen einer Eigenschaft, und of_section("nav") liefert es beim ersten Zugriff.
• Verwenden Sie mono: für die Symbole: Sie werden mit dem Design umgefärbt, hell wie dunkel, und bleiben lesbar, sobald die Leiste zur Symbolleiste eingeklappt ist.
• Ein leerer Abschnittstitel dient als dezente Gruppierung: Die Einträge stehen weiter auseinander, ohne dass eine Kopfzeile erscheint.
• ib_collapsed verkleinert das Userobject auf die Symbolleiste, verschiebt aber Ihre anderen Steuerelemente nicht: Behandeln Sie ue_auto_width, um den frei gewordenen Platz zu nutzen, sonst bleibt er leer.
• Im Leistenmodus bleiben nur die Symbole übrig: Hinterlegen Sie auf jedem Eintrag einen Tooltip, damit die Beschriftungen weiterhin zugänglich bleiben.
• Die Frage wird standardmäßig gestellt: Ein leer gelassenes ue_selection_changing erlaubt den Wechsel immer, Sie müssen nichts tun. Schalten Sie sie mit ib_veto_selection = false dort ab, wo wiederholt geklickt wird — Tastaturnavigation, in einer Schleife gesteuerte Auswahl —, denn jede Frage kostet einen Hin- und Rückweg zu PowerBuilder.
• ib_enabled = false ist ib_visible = false vorzuziehen, wenn der Eintrag wieder verfügbar wird: Das Menü ändert dann nicht vor den Augen des Benutzers seine Form.

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.

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.

← Komponentenreferenz · Inhalt des Handbuchs