sgcNavigation, dieselbe Navigationsleiste für FireMonkey, .NET und Delphi 7 bis 13

Layout und Modi

Eine moderne App-Seitenleiste in einer Komponente

Die meisten Geschäftsanwendungen brauchen am linken Rand des Hauptformulars dasselbe: eine nach Bereichen gruppierte Liste von Seiten, in der die aktuelle Seite klar markiert ist. Platziere eine TsgcVCLNavigationBar auf dem Formular, richte sie links aus und füge die Einträge hinzu. Gruppenkopfzeilen betiteln die darunterliegenden Zeilen in gedämpfter Farbe und werden nie ausgewählt. Die ausgewählte Zeile erhält einen Hintergrund in der Akzentfarbe und einen 3 Pixel breiten Akzentbalken, damit Anwender immer sehen, wo sie sind. Hover- und Gedrückt-Zustände, Hinweise und deaktivierte Zeilen werden für dich gezeichnet, sodass die Leiste schon beim ersten Start fertig wirkt.

• Mode := nbmSidebar ist der Standardstil
• IsGroup macht einen Eintrag zur Gruppenkopfzeile
• ItemHeight und GroupHeight legen die Zeilenhöhen fest
• Das Mausrad scrollt lange Listen, und ScrollIntoView zeigt jeden beliebigen Eintrag
• Rechts nach links für Arabisch und Hebräisch: Symbole und Beschriftungen tauschen die Plätze, und Einzug, Chevrons, Badges und die Schaltfläche zum Einklappen sind gespiegelt

Layout und Modi

Animiert zu einer Symbolleiste reduzieren

Breite Seitenleisten nehmen den Platz der Daten weg, wegen derer deine Anwender gekommen sind. Setze Collapsed, und die Leiste klappt in etwa 150 ms von ihrer vollen Breite zu einer schmalen Symbolleiste zusammen. Dort werden nur die Symbole gezeichnet, die Beschriftung wird zum Hinweis, Gruppenkopfzeilen werden zu Trennlinien und Badges zu Punkten, sodass nichts Wichtiges verloren geht. Die Leiste bestimmt ihre Breite selbst, der Inhalt daneben folgt einfach mit alClient. Binde die Eigenschaft Collapsed an eine Hamburger-Schaltfläche, eine Benutzereinstellung oder die Formularbreite, und die Symbolleiste öffnet und schließt sich im Seitenleisten- wie im Akkordeon-Modus auf dieselbe Weise.

• Collapsed schaltet zwischen den beiden Breiten um
• ExpandedWidth (220) und CollapsedWidth (56) in logischen Pixeln
• AnimateCollapse schaltet die Animation ein oder aus
• OnCollapsedChange meldet, wann sich die Symbolleiste öffnet oder schließt

Navigationsshell

Ein mehrstufiger Baum mit Suche

Große Anwendungen wachsen aus einer flachen Liste von Seiten heraus. Setzen Sie Mode auf nbmTree, und die Leiste wird zu einem Baum mit so vielen Ebenen, wie Sie brauchen: Die Einträge bleiben eine flache Sammlung, und das Depth eines Eintrags legt seine Ebene fest, sodass sich der Code, der die Leiste füllt, kaum ändert. Jede Ebene ist eingerückt, und jedes übergeordnete Element lässt sich einklappen. Mit ShowSearch filtert eine Suchzeile über den Einträgen den Baum während der Eingabe, hält die übergeordneten Elemente jedes Treffers geöffnet und hebt die passenden Zeichen hervor. Die unscharfe Suche findet 'Settings' aus 'stg'. Baum-Modus und Suche sind in jeder Edition enthalten.

• Mode := nbmTree und Depth pro Eintrag
• ExpandAll, CollapseAll und Expand(aIndex, aRecursive)
• Filter mit FilterMode nfmContains oder nfmFuzzy
• ShowSearch zeichnet die Suchzeile, Esc leert sie
• Rechts und Links klappen auf und zu, * klappt einen ganzen Zweig auf

Navigationsshell

Ein Breadcrumb, das dem Baum folgt

Tiefe Bäume brauchen eine Möglichkeit, zu sehen, wo man ist, und nach oben zu springen. Das Breadcrumb zeigt den Pfad als Reihe von Segmenten, zum Beispiel Mail, Folders, Work. Ein Klick auf ein Segment geht dorthin zurück, und der Chevron hinter einem Segment listet dessen Kinder auf, um woandershin zu gehen. Verknüpfen Sie es mit einer Navigationsleiste, und es folgt dem ausgewählten Eintrag, oder füllen Sie es eigenständig aus einem Path oder aus den Segments. Ist der Pfad zu lang, klappen die vorderen Segmente in eine Überlauf-Schaltfläche. In der Edition Registered macht ein Klick auf den leeren Bereich, F4 oder Strg+L aus dem Breadcrumb ein Eingabefeld mit dem vollständigen Pfad, wie die Adressleiste eines Dateimanagers.

• NavigationBar verknüpft das Breadcrumb mit einer Leiste
• Path, PathDelimiter und OnGetChildren eigenständig
• OnSegmentClick und AutoTruncate
• Nur Registered Bearbeitungsmodus mit OnPathEdit

Navigationsshell

Ein Formular mit den Registerkarten in der Titelleiste

Browser, Terminals und moderne Editoren setzen ihre Registerkarten in die Fensterüberschrift, damit die Dokumente die volle Bildschirmhöhe bekommen. Das Formular mit Registerkarten tut das Gleiche für Ihre Anwendung. Legen Sie es auf ein Formular und verbinden Sie es mit der Registerkartenleiste: sgcUI entfernt die native Fensterüberschrift und zeichnet eine Titelleiste im Theme mit dem Fenstersymbol, den Registerkarten, der Schaltfläche für eine neue Registerkarte und den Schaltflächen zum Minimieren, Maximieren und Schließen, im sgcUI-Theme der Anwendung, Classic oder Fluent, hell oder dunkel. Das Fenster behält seinen Schatten, seine Größenrahmen und sein Verhalten im maximierten Zustand, und Windows 11 zeigt die Snap-Layouts, wenn der Zeiger auf der Schaltfläche zum Maximieren ruht. Der leere Platz rechts neben der letzten Registerkarte verschiebt das Fenster. In der Edition Registered zieht der Benutzer eine Registerkarte aus der Leiste in ein neues Fenster und legt sie auf der Titelleiste eines anderen Fensters ab, wie in einem Webbrowser.

• TsgcVCLNavigationTabbedForm und TsgcFMXNavigationTabbedForm in Delphi und C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow und TsgcAvaloniaNavigationTabbedWindow in .NET
• Tabs verbindet die Registerkartenleiste. In Delphi verschiebt Notebook die Leiste eines Notebooks in die Titelleiste, während die Seiten im Notebook bleiben
• Ein Doppelklick auf die leere Leiste maximiert das Fenster, ein Rechtsklick zeigt das Systemmenü
• In WPF und Avalonia richtet die angehängte Eigenschaft Tabs am Fenster alles aus XAML ein
• Nur Registered Abtrennen: TearOffMode verschiebt eine abgetrennte Registerkarte in das Fenster unter dem Zeiger, und ttmNewForm öffnet sie in einem neuen Fenster aus OnCreateTearOffForm, das dem Zeiger folgt

Das Formular mit Registerkarten ist in jeder Edition enthalten, auch in Community. Das Abtrennen ist in der Edition Registered, wie das Abtrennen der Registerkarten. Der Rahmen im Theme braucht Windows mit Desktopkomposition, und unter FireMonkey wird er nur unter Windows angewendet: Unter macOS, Linux, iOS und Android bleibt die native Titelleiste.

Docking-Manager Nur Registered

Panels auf die Drop-Guides ziehen

Anwendungen mit vielen Werkzeugfenstern brauchen einen Arbeitsbereich, den der Benutzer selbst anordnen kann. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager und TsgcAvaloniaDockManager docken Werkzeugfenster an den vier Seiten des Formulars an, in verschachtelten Splits mit Splittern und in Registerkartengruppen. Der Benutzer zieht eine Beschriftung oder eine Registerkarte, und Drop-Guides zeigen, wo sie landen kann: Ein Kompass auf der Gruppe unter dem Zeiger teilt diese Gruppe an einer Seite oder fügt das Panel als Registerkarte hinzu, die Randführungen docken es an einem Rand der ganzen Site an, und ein Vorschaurechteck in der Akzentfarbe zeigt den Platz, den es einnehmen wird. Esc bricht das Ziehen ab. Die Seite Avalonia Docking zeigt TsgcAvaloniaDockManager in XAML und C#.

• Panels.Add mit Name, Caption, Placement und DockSize und Ihrem eigenen Steuerelement als Control
• DockPanel, ClosePanel, ShowPanel und ActivatePanel im Code
• OnPanelDock kann ein Andocken, ein Schweben oder einen Wechsel des automatischen Ausblendens ablehnen
• Schaltflächen für Schließen, Pin, Maximieren und Menü auf jeder Beschriftung

Docking-Manager Nur Registered

Schwebende Fenster auf dem Desktop

Ein Panel, das abseits der Guides abgelegt wird, schwebt in einem eigenen Fenster, das der Benutzer an eine andere Stelle oder auf einen anderen Monitor verschiebt. Ein schwebendes Fenster hält ein Layout wie die Dock-Site, sodass weitere Panels nebeneinander oder als Registerkarten hineingedockt werden können, und ein Doppelklick auf seine Beschriftung dockt es wieder an. Schwebende Fenster sind rahmenlose Werkzeugfenster im Besitz des Formulars, die nicht in der Taskleiste erscheinen, mit gezeichneter Beschriftung und einem Rand zum Ändern der Größe, und jedes verwendet die Skalierung seines eigenen Monitors. Sie funktionieren in den Desktop-Anwendungen für VCL, WinForms, WPF und Avalonia sowie in FireMonkey unter Windows und macOS. Unter iOS und Android schweben Panels nicht, und ein Ziehen zeigt nur die Guides.

• FloatPanel(aPanel, aLeft, aTop) im Code
• AllowFloating am Docking-Manager und CanFloat pro Panel
• Placement := dplFloat startet ein Panel schwebend mit FloatWidth mal FloatHeight
• Ein schwebendes Fenster außerhalb des sichtbaren Arbeitsbereichs wird beim Laden eines Layouts dorthin zurückgesetzt

Docking-Manager Nur Registered

Das Layout speichern und wiederherstellen

Benutzer erwarten, ihre Panels dort wiederzufinden, wo sie sie gelassen haben. SaveLayout schreibt die ganze Anordnung als kompaktes JSON: die Splits und ihre Größen, die Gruppen und ihre aktiven Panels, die automatisch ausgeblendeten Gruppen jeder Seite, die schwebenden Fenster mit ihren Grenzen, die maximierte Gruppe und die ausgeblendeten Panels. LoadLayout stellt sie beim nächsten Start wieder her. Der Text ist in Delphi und .NET derselbe, sodass eine Layoutdatei beiden dient. Ein Panel, das das Layout nennt, das aber im Formular noch nicht existiert, etwa ein Dokument, das geöffnet war, erreicht OnRestorePanel, wo Ihr Code seinen Inhalt erstellt oder es verwirft.

• SaveLayout, SaveLayoutToFile und SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile und LoadLayoutFromStream geben bei einem fremden Text False zurück und ändern nichts
• OnRestorePanel für Panels, die zur Laufzeit erstellt werden
• Ein "Window"-Befehl pro Panel macht aus der Befehlspalette einen Fensterumschalter

Edition Registered unter FireMonkey, VCL, WinForms, WPF und Avalonia, mit C++ Builder-Unterstützung. Tastatur, UI Automation, Rechts-nach-links, Themes und hohe DPI inklusive.

Einträge, die informieren

Badges für ungelesene Einträge

Anwender sollten sehen, dass etwas Aufmerksamkeit braucht, bevor sie die Seite öffnen. Gib einem Eintrag ein Badge, etwa eine Zahl ungelesener Einträge oder das Wort Neu, und die Leiste zeichnet es als Pille in der Akzentfarbe am rechten Zeilenrand, mit schwarzem oder weißem Text, je nachdem, was besser lesbar ist. Setze es per Code, wenn sich der Wert ändert, und die Leiste zeichnet sich neu. In der reduzierten Symbolleiste wird das Badge zu einem Punkt auf dem Symbol. Da das Badge einfacher Text ist, deckt dieselbe Eigenschaft Zahlen, kurze Bezeichnungen und Statuswörter ab, ganz ohne eigenen Zeichencode.

• Badge ist ein kurzer Text pro Eintrag
• Ein leeres Badge zeichnet nichts
• Die Pille nutzt die Akzentfarbe des Themes oder deine AccentColor
• Kombiniere es mit Hint, um die Zahl zu erklären

Einträge, die informieren Nur Registered

Einträge mit deinen TActions verbinden

Anwendungen auf Basis einer TActionList haben ihre Befehle, Beschriftungen und Aktivierungsregeln bereits an einem Ort. Verknüpfe einen Eintrag über die Eigenschaft Action mit einer beliebigen VCL- oder FireMonkey-TAction, und Caption, Enabled, Visible, Hint und ImageIndex folgen der Aktion. Ein Klick führt die Aktion mit der Leiste als ActionComponent aus, und OnUpdate läuft im Leerlauf, sodass ein Eintrag sofort ausgegraut wird, wenn seine Aktion deaktiviert ist. In .NET übernehmen Command und CommandParameter dieselbe Aufgabe. Eine TActionList kann das Menü, die Symbolleiste und die Tastenkürzel des Formulars steuern.

• Action verknüpft einen Eintrag mit einer beliebigen TBasicAction
• Ein OnClick des Eintrags wird anstelle der Aktion ausgeführt
• Kompiliert unter SGC_NAVIGATION_ACTIONS
• .NET: Command und CommandParameter mit ICommand

Community: Weise stattdessen das OnClick des Eintrags oder das OnItemClick der Leiste zu, statt einer Aktion.

Tastatur, Themes und Ausgabe

Hell, dunkel und deine Akzentfarbe

Ein Menü, das das Theme der Anwendung ignoriert, wirkt aufgesetzt. Theme legt Oberfläche, Rahmen, Text, Gruppenkopfzeile, Hover und Akzent aus den gemeinsamen sgcUICore-Tokens fest, sodass eine Leiste und ein sgcDashboard mit demselben Theme exakt zusammenpassen. AccentColor ersetzt den Akzent durch deine Markenfarbe für den Auswahlbalken, das Fokusrechteck und die Badges. Eine Leiste in einer Dashboard-Kachel folgt von selbst dem Theme des Dashboards. Wechsle das Theme zur Laufzeit, und die Leiste zeichnet sich sofort neu, bereit für einen Dunkelmodus-Schalter auf deiner Einstellungsseite.

• Theme: utDefault (Standard, folgt dem Anwendungs-Theme), utLight oder utDark
• AccentColor als $AARRGGBB-Wert, 0 behält den Akzent des Themes bei
• Dieselben Tokens wie in jedem sgcUI-Produkt
• Dashboard-Kacheln geben ihr Theme an die Leiste weiter