sgcNavigation, la même barre de navigation pour FireMonkey, .NET et Delphi 7 à 13

Disposition et modes

Une barre latérale moderne dans un seul composant

La plupart des applications métier ont besoin de la même chose sur le bord gauche de la fiche principale : une liste de pages, regroupées par domaine, avec la page courante clairement repérée. Dépose un TsgcVCLNavigationBar sur la fiche, aligne-le à gauche et ajoute les éléments. Les en-têtes de groupe titrent les lignes qui suivent dans une couleur atténuée et ne sont jamais sélectionnés. La ligne sélectionnée reçoit un fond teinté de la couleur d'accentuation et une barre d'accentuation de 3 pixels, pour que l'utilisateur sache toujours où il se trouve. Les états survol et appui, les infobulles et les lignes désactivées sont tous dessinés pour toi, et la barre a l'air finie dès la première exécution.

• Mode := nbmSidebar est le style par défaut
• IsGroup transforme un élément en en-tête de groupe
• ItemHeight et GroupHeight règlent la hauteur des lignes
• La molette de la souris fait défiler les longues listes et ScrollIntoView affiche n'importe quel élément
• De droite à gauche pour l'arabe et l'hébreu : les icônes et les libellés échangent leur place, et le retrait, les chevrons, les badges et le bouton de réduction sont en miroir

Disposition et modes

Repli en rail d'icônes, animé

Les barres latérales larges prennent la place des données que tes utilisateurs sont venus voir. Active Collapsed et la barre passe de sa largeur déployée à un rail d'icônes étroit en 150 ms environ. Dans le rail, seules les icônes sont dessinées, le libellé devient l'infobulle, les en-têtes de groupe deviennent des lignes de séparation et les badges deviennent des points, donc rien d'important n'est perdu. La barre fixe elle-même sa largeur, de sorte que le contenu à côté suit simplement avec alClient. Lie la propriété Collapsed à un bouton hamburger, à un réglage utilisateur ou à la largeur de la fiche, et le rail s'ouvre et se ferme de la même façon en mode barre latérale et en mode accordéon.

• Collapsed bascule entre les deux largeurs
• ExpandedWidth (220) et CollapsedWidth (56) en pixels logiques
• AnimateCollapse active ou désactive l'animation
• OnCollapsedChange t'informe quand le rail s'ouvre ou se ferme

Shell de navigation

Une arborescence à plusieurs niveaux avec recherche

Les grandes applications dépassent vite une liste plate de pages. Définissez Mode sur nbmTree et la barre devient une arborescence avec autant de niveaux que nécessaire : les éléments restent une collection plate et le Depth d'un élément fixe son niveau, le code qui remplit la barre change donc à peine. Chaque niveau est indenté et chaque parent peut être replié. Activez ShowSearch et une ligne de recherche au-dessus des éléments filtre l'arborescence pendant la saisie, garde ouverts les parents de chaque résultat et met en évidence les caractères correspondants. La correspondance approximative trouve 'Settings' à partir de 'stg'. Le mode arborescence et la recherche font partie de toutes les éditions.

• Mode := nbmTree et Depth par élément
• ExpandAll, CollapseAll et Expand(aIndex, aRecursive)
• Filter avec FilterMode nfmContains ou nfmFuzzy
• ShowSearch dessine la ligne de recherche, Échap l'efface
• Droite et Gauche déplient et replient, * déplie une branche entière

Shell de navigation

Un fil d'Ariane qui suit l'arborescence

Les arborescences profondes demandent un moyen de voir où l'on se trouve et de remonter. Le fil d'Ariane présente le chemin comme une rangée de segments, par exemple Mail, Folders, Work. Un clic sur un segment y retourne, et le chevron après un segment liste ses enfants pour aller ailleurs. Liez-le à une barre de navigation et il suit l'élément sélectionné, ou remplissez-le seul à partir d'un Path ou des Segments. Quand le chemin est trop long, les premiers segments se replient dans un bouton de débordement. Dans l'édition Enregistrée, un clic sur la zone vide, F4 ou Ctrl+L transforme le fil d'Ariane en champ de saisie avec le chemin complet, comme la barre d'adresse d'un gestionnaire de fichiers.

• NavigationBar lie le fil d'Ariane à une barre
• Path, PathDelimiter et OnGetChildren en autonome
• OnSegmentClick et AutoTruncate
• Enregistrée uniquement mode édition avec OnPathEdit

Shell de navigation

Un formulaire à onglets avec les onglets dans la barre de titre

Les navigateurs, les terminaux et les éditeurs modernes placent leurs onglets dans la barre de titre de la fenêtre, pour que les documents disposent de toute la hauteur de l'écran. Le formulaire à onglets fait de même pour votre application. Déposez-le sur un formulaire et liez-le au bandeau d'onglets : sgcUI supprime la barre de titre native et dessine une barre de titre thématisée avec l'icône de la fenêtre, les onglets, le bouton de nouvel onglet et les boutons Réduire, Agrandir et Fermer, dans le thème sgcUI de l'application, Classic ou Fluent, clair ou sombre. La fenêtre conserve son ombre, ses bords de redimensionnement et son comportement une fois agrandie, et Windows 11 affiche les dispositions Snap quand le pointeur reste sur le bouton Agrandir. L'espace vide à droite du dernier onglet déplace la fenêtre. Dans l'édition Enregistrée, l'utilisateur glisse un onglet hors du bandeau vers une nouvelle fenêtre et le dépose sur la barre de titre d'une autre fenêtre, comme dans un navigateur web.

• TsgcVCLNavigationTabbedForm et TsgcFMXNavigationTabbedForm en Delphi et C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow et TsgcAvaloniaNavigationTabbedWindow en .NET
• Tabs lie le bandeau d'onglets. En Delphi, Notebook déplace le bandeau d'un notebook dans la barre de titre, les pages restant dans le notebook
• Un double clic sur le bandeau vide agrandit la fenêtre et un clic droit affiche le menu système
• En WPF et Avalonia, la propriété attachée Tabs de la fenêtre la configure depuis XAML
• Enregistrée uniquement détachement : TearOffMode déplace un onglet détaché vers la fenêtre sous le pointeur, et ttmNewForm l'ouvre dans une nouvelle fenêtre issue de OnCreateTearOffForm qui suit le pointeur

Le formulaire à onglets est dans toutes les éditions, Community comprise. Le détachement est dans l'édition Enregistrée, comme celui des onglets. Le cadre thématisé exige Windows avec la composition du bureau, et sous FireMonkey il n'est appliqué que sur Windows : sous macOS, Linux, iOS et Android, la barre de titre native reste.

Gestionnaire d'ancrage Enregistrée uniquement

Faites glisser les panneaux vers les guides de dépôt

Les applications qui ont beaucoup de fenêtres d'outils ont besoin d'un espace de travail que l'utilisateur peut organiser. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager et TsgcAvaloniaDockManager ancrent les panneaux d'outils sur les quatre côtés de la fiche, en divisions imbriquées avec des séparateurs et en groupes d'onglets. L'utilisateur fait glisser une légende ou un onglet, et des guides de dépôt montrent où il peut atterrir : une boussole sur le groupe situé sous le pointeur divise ce groupe sur un côté ou y ajoute le panneau en onglet, les guides de bord l'ancrent sur un bord du site entier, et un rectangle d'aperçu à la couleur d'accentuation montre la place qu'il prendra. Échap annule le glissement. La page Ancrage pour Avalonia montre TsgcAvaloniaDockManager en XAML et C#.

• Panels.Add avec Name, Caption, Placement et DockSize, et votre propre contrôle comme Control
• DockPanel, ClosePanel, ShowPanel et ActivatePanel en code
• OnPanelDock peut refuser un ancrage, un flottement ou un changement de masquage automatique
• Boutons fermer, épingler, agrandir et menu sur chaque légende

Gestionnaire d'ancrage Enregistrée uniquement

Fenêtres flottantes sur le bureau

Un panneau déposé en dehors des guides flotte dans une fenêtre à lui, que l'utilisateur déplace vers un autre endroit ou un autre moniteur. Une fenêtre flottante contient une disposition comme le site d'ancrage, de sorte que d'autres panneaux peuvent y être ancrés côte à côte ou en onglets, et un double clic sur sa légende l'ancre à nouveau. Les fenêtres flottantes sont des fenêtres d'outils sans bordure appartenant à la fiche et absentes de la barre des tâches, avec une légende dessinée et une bordure qui les redimensionne, et chacune utilise l'échelle de son propre moniteur. Elles fonctionnent dans les applications de bureau VCL, WinForms, WPF, Avalonia et FireMonkey sous Windows et macOS. Sous iOS et Android, les panneaux ne flottent pas et un glissement n'affiche que les guides.

• FloatPanel(aPanel, aLeft, aTop) en code
• AllowFloating sur le gestionnaire d'ancrage et CanFloat par panneau
• Placement := dplFloat démarre un panneau flottant à FloatWidth sur FloatHeight
• Une fenêtre flottante hors de la zone de travail visible revient dedans au chargement d'une disposition

Gestionnaire d'ancrage Enregistrée uniquement

Enregistrez la disposition et restaurez-la

Les utilisateurs s'attendent à retrouver leurs panneaux là où ils les ont laissés. SaveLayout écrit tout l'agencement en JSON compact : les divisions et leurs tailles, les groupes et leurs panneaux actifs, les groupes masqués automatiquement de chaque côté, les fenêtres flottantes avec leurs limites, le groupe agrandi et les panneaux masqués. LoadLayout le restaure au démarrage suivant. Le texte est le même en Delphi et en .NET, un seul fichier de disposition sert donc aux deux. Un panneau que la disposition nomme mais que la fiche n'a pas encore, comme un document qui était ouvert, arrive dans OnRestorePanel, où votre code crée son contenu ou l'abandonne.

• SaveLayout, SaveLayoutToFile et SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile et LoadLayoutFromStream renvoient False sur un texte étranger et ne changent rien
• OnRestorePanel pour les panneaux créés à l'exécution
• Une commande « Window » par panneau transforme la palette de commandes en sélecteur de fenêtres

Édition Enregistrée sous FireMonkey, VCL, WinForms, WPF et Avalonia, avec prise en charge de C++ Builder. Clavier, UI Automation, écriture de droite à gauche, thèmes et haute résolution inclus.

Des éléments qui informent

Des badges pour les compteurs non lus

Les utilisateurs doivent voir qu'un élément demande leur attention avant d'ouvrir la page. Donne un Badge à un élément, par exemple un compteur de non lus ou le mot Nouveau, et la barre le dessine en pilule de la couleur d'accentuation à droite de la ligne, avec un texte noir ou blanc, selon le plus lisible. Définis-le depuis le code chaque fois que la valeur change et la barre se redessine d'elle-même. Dans le rail replié, le badge devient un point sur l'icône. Comme le badge est un simple texte, la même propriété couvre les compteurs, les libellés courts et les mots d'état sans code de dessin personnalisé.

• Badge est un texte court par élément
• Un Badge vide ne dessine rien
• La pilule utilise l'accentuation du thème ou ton AccentColor
• À combiner avec Hint pour expliquer le compteur

Des éléments qui informent Enregistrée uniquement

Relie les éléments à tes TAction

Les applications construites sur une TActionList ont déjà leurs commandes, leurs libellés et leurs règles d'activation au même endroit. Relie un élément à n'importe quelle TAction VCL ou FireMonkey via sa propriété Action et ses Caption, Enabled, Visible, Hint et ImageIndex suivent l'action. Un clic exécute l'action avec la barre comme ActionComponent, et OnUpdate s'exécute en temps libre, donc un élément se grise dès que son action est désactivée. En .NET, Command et CommandParameter font le même travail. Une seule TActionList peut piloter le menu, la barre d'outils et les raccourcis clavier de la fiche.

• Action relie un élément à n'importe quelle TBasicAction
• Le OnClick d'un élément s'exécute à la place de l'action
• Compilé sous SGC_NAVIGATION_ACTIONS
• .NET : Command et CommandParameter avec ICommand

Community : affecte le OnClick de l'élément ou le OnItemClick de la barre à la place d'une action.

Clavier, thèmes et rendu

Clair, sombre et ta couleur d'accentuation

Un menu qui ignore le thème de l'application paraît plaqué. Theme définit les couleurs de surface, de bordure, de texte, d'en-tête de groupe, de survol et d'accentuation à partir des jetons partagés de sgcUICore, donc une barre et un sgcDashboard avec le même Theme s'accordent exactement. AccentColor remplace l'accentuation par la couleur de ta marque pour la barre de sélection, le rectangle de focus et les badges. Une barre hébergée dans une tuile de tableau de bord suit d'elle-même le thème du tableau de bord. Change le thème à l'exécution et la barre se redessine aussitôt, prête pour un interrupteur de mode sombre dans ta page de paramètres.

• Theme : utDefault (par défaut, suit le thème de l'application), utLight ou utDark
• AccentColor comme valeur $AARRGGBB, 0 conserve l'accentuation du thème
• Les mêmes jetons que tous les produits sgcUI
• Les tuiles du tableau de bord transmettent leur thème à la barre