sgcNavigation, la misma barra de navegación para FireMonkey, .NET y Delphi 7 a 13

Diseño y modos

Una barra lateral moderna en un solo componente

La mayoría de las aplicaciones de negocio necesita lo mismo en el borde izquierdo del formulario principal: una lista de páginas, agrupadas por área, con la página actual claramente marcada. Coloca un TsgcVCLNavigationBar en el formulario, alinéalo a la izquierda y añade los elementos. Los encabezados de grupo titulan las filas que tienen debajo con un color atenuado y nunca se seleccionan. La fila seleccionada recibe un fondo teñido con el acento y una barra de acento de 3 píxeles, así que los usuarios siempre ven dónde están. Los estados al pasar el ratón y al pulsar, las sugerencias y las filas deshabilitadas se dibujan por ti, de modo que la barra parece terminada desde la primera ejecución.

• Mode := nbmSidebar es el estilo predeterminado
• IsGroup convierte un elemento en un encabezado de grupo
• ItemHeight y GroupHeight fijan la altura de las filas
• La rueda del ratón desplaza las listas largas y ScrollIntoView muestra cualquier elemento
• De derecha a izquierda para árabe y hebreo: los iconos y los títulos intercambian su sitio, y la sangría, los chevrones, las insignias y el botón de contraer están reflejados

Diseño y modos

Contracción a un riel de iconos, animada

Las barras laterales anchas le quitan espacio a los datos que tus usuarios han venido a ver. Activa Collapsed y la barra se pliega desde su ancho expandido a un riel de iconos estrecho en unos 150 ms. En el riel solo se dibujan los iconos, el título pasa a ser la sugerencia, los encabezados de grupo se convierten en líneas separadoras y las insignias en puntos, así que no se pierde nada importante. La barra fija su propio ancho, de modo que el contenido que tiene al lado la sigue con alClient. Enlaza la propiedad Collapsed a un botón de hamburguesa, a un ajuste del usuario o al ancho del formulario, y el riel se abre y se cierra igual en modo barra lateral y en modo acordeón.

• Collapsed alterna entre los dos anchos
• ExpandedWidth (220) y CollapsedWidth (56) en píxeles lógicos
• AnimateCollapse activa o desactiva la animación
• OnCollapsedChange te avisa cuando el riel se abre o se cierra

Estructura de navegación

Un árbol de varios niveles con búsqueda

Las aplicaciones grandes se quedan pequeñas con una lista plana de páginas. Establece Mode en nbmTree y la barra se convierte en un árbol con tantos niveles como necesites: los elementos siguen siendo una colección plana y el Depth de un elemento fija su nivel, así que el código que rellena la barra apenas cambia. Cada nivel está sangrado y cada padre se puede contraer. Activa ShowSearch y una fila de búsqueda sobre los elementos filtra el árbol mientras el usuario escribe, mantiene abiertos los padres de cada coincidencia y resalta los caracteres coincidentes. La coincidencia aproximada encuentra 'Settings' a partir de 'stg'. El modo árbol y la búsqueda forman parte de todas las ediciones.

• Mode := nbmTree y Depth por elemento
• ExpandAll, CollapseAll y Expand(aIndex, aRecursive)
• Filter con FilterMode nfmContains o nfmFuzzy
• ShowSearch dibuja la fila de búsqueda, Esc la borra
• Derecha e Izquierda expanden y contraen, * expande una rama entera

Estructura de navegación

Una ruta de navegación que sigue al árbol

Los árboles profundos necesitan una forma de ver dónde estás y de saltar hacia arriba. La ruta de navegación muestra el camino como una fila de segmentos, por ejemplo Mail, Folders, Work. Un clic en un segmento vuelve a él, y el chevrón tras un segmento lista sus hijos para ir a otro sitio. Enlázala a una barra de navegación y sigue al elemento seleccionado, o rellénala por su cuenta desde un Path o desde los Segments. Cuando el camino es demasiado largo, los primeros segmentos se pliegan en un botón de desbordamiento. En la edición Registrada, un clic en el área vacía, F4 o Ctrl+L convierten la ruta de navegación en un campo de edición con la ruta completa, como la barra de direcciones de un gestor de archivos.

• NavigationBar enlaza la ruta de navegación a una barra
• Path, PathDelimiter y OnGetChildren por su cuenta
• OnSegmentClick y AutoTruncate
• Solo registrada modo de edición con OnPathEdit

Estructura de navegación

Un formulario con pestañas en la barra de título

Los navegadores, los terminales y los editores modernos ponen sus pestañas en el título de la ventana, de modo que los documentos ganan toda la altura de la pantalla. El formulario con pestañas hace lo mismo con tu aplicación. Colócalo en un formulario y enlázalo con la tira de pestañas: sgcUI quita el título nativo y dibuja una barra de título con tema, con el icono de la ventana, las pestañas, el botón de nueva pestaña y los botones de minimizar, maximizar y cerrar, en el tema sgcUI de la aplicación, Classic o Fluent, claro u oscuro. La ventana conserva su sombra, sus bordes de redimensionado y su comportamiento al maximizarse, y Windows 11 muestra los diseños de ajuste (snap layouts) cuando el puntero se detiene sobre el botón de maximizar. El espacio vacío a la derecha de la última pestaña arrastra la ventana. En la edición registrada el usuario arrastra una pestaña fuera de la tira hacia una ventana nueva y la suelta en la barra de título de otra ventana, como en un navegador web.

• TsgcVCLNavigationTabbedForm y TsgcFMXNavigationTabbedForm en Delphi y C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow y TsgcAvaloniaNavigationTabbedWindow en .NET
• Tabs enlaza la tira de pestañas. En Delphi, Notebook mueve la tira de un notebook a la barra de título, mientras las páginas siguen en el notebook
• Un doble clic en la tira vacía maximiza la ventana y un clic derecho muestra el menú del sistema
• En WPF y Avalonia, la propiedad adjunta Tabs de la ventana lo configura desde XAML
• Solo registrada separación: TearOffMode mueve una pestaña separada a la ventana que hay bajo el puntero, y ttmNewForm la abre en una ventana nueva desde OnCreateTearOffForm, que sigue al puntero

El formulario con pestañas está en todas las ediciones, Community incluida. La separación está en la edición registrada, igual que la separación de las pestañas. El marco con tema necesita Windows con composición de escritorio y, en FireMonkey, se aplica solo en Windows: en macOS, Linux, iOS y Android se mantiene la barra de título nativa.

Gestor de acoplamiento Solo registrada

Arrastra los paneles a las guías de colocación

Las aplicaciones con muchas ventanas de herramientas necesitan un espacio de trabajo que el usuario pueda organizar. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager y TsgcAvaloniaDockManager acoplan los paneles de herramientas en los cuatro lados del formulario, en divisiones anidadas con divisores y en grupos con pestañas. El usuario arrastra un título o una pestaña, y las guías de colocación muestran dónde puede soltarse: una brújula sobre el grupo bajo el puntero divide ese grupo por un lado o añade el panel como pestaña, las guías de borde lo acoplan en un borde de todo el sitio, y un rectángulo de vista previa con el color de acento muestra el espacio que ocupará. Esc cancela el arrastre. La página Acoplamiento en Avalonia muestra TsgcAvaloniaDockManager en XAML y C#.

• Panels.Add con Name, Caption, Placement y DockSize, y tu propio control como Control
• DockPanel, ClosePanel, ShowPanel y ActivatePanel en código
• OnPanelDock puede rechazar un cambio de acoplamiento, de flotante o de ocultación automática
• Botones de cerrar, fijar, maximizar y menú en cada título

Gestor de acoplamiento Solo registrada

Ventanas flotantes en el escritorio

Un panel soltado lejos de las guías flota en una ventana propia, que el usuario puede llevar a otro lugar u otro monitor. Una ventana flotante contiene un diseño como el sitio de acoplamiento, de modo que se pueden acoplar más paneles en ella, uno junto a otro o como pestañas, y un doble clic en su título la acopla de nuevo. Las ventanas flotantes son ventanas de herramientas sin borde, propiedad del formulario y fuera de la barra de tareas, con un título dibujado y un borde que permite redimensionarlas, y cada una usa la escala de su propio monitor. Funcionan en las aplicaciones de escritorio VCL, WinForms, WPF y Avalonia y en FireMonkey en Windows y macOS. En iOS y Android los paneles no flotan, y un arrastre solo muestra las guías.

• FloatPanel(aPanel, aLeft, aTop) en código
• AllowFloating en el gestor de acoplamiento y CanFloat por panel
• Placement := dplFloat inicia un panel flotante de FloatWidth por FloatHeight
• Una ventana flotante fuera del área de trabajo visible vuelve a ella al cargar un diseño

Gestor de acoplamiento Solo registrada

Guarda el diseño y restáuralo

Los usuarios esperan encontrar sus paneles donde los dejaron. SaveLayout escribe toda la organización como JSON compacto: las divisiones y sus tamaños, los grupos y sus paneles activos, los grupos con ocultación automática de cada lado, las ventanas flotantes con sus límites, el grupo maximizado y los paneles ocultos. LoadLayout la restaura en el siguiente inicio. El texto es el mismo en Delphi y .NET, así que un solo archivo de diseño sirve para ambos. Un panel que el diseño nombra pero que el formulario aún no tiene, como un documento que estaba abierto, llega a OnRestorePanel, donde tu código crea su contenido o lo descarta.

• SaveLayout, SaveLayoutToFile y SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile y LoadLayoutFromStream devuelven False ante un texto ajeno y no cambian nada
• OnRestorePanel para los paneles creados en tiempo de ejecución
• Un comando "Window" por panel convierte la paleta de comandos en un conmutador de ventanas

Edición Registrada en FireMonkey, VCL, WinForms, WPF y Avalonia, con compatibilidad con C++ Builder. Teclado, UI Automation, de derecha a izquierda, temas y alta resolución DPI incluidos.

Elementos que informan

Insignias para contadores de no leídos

Los usuarios deben ver que algo requiere atención antes de abrir la página. Dale a un elemento un Badge, como un contador de no leídos o la palabra Nuevo, y la barra lo dibuja como una píldora del color de acento a la derecha de la fila, con texto negro o blanco, el que se lea mejor. Establécelo desde código cada vez que cambie el valor y la barra se repinta sola. En el riel contraído la insignia se convierte en un punto sobre el icono. Como la insignia es texto simple, la misma propiedad cubre contadores, etiquetas cortas y palabras de estado sin ningún código de dibujo propio.

• Badge es un texto corto por elemento
• Un Badge vacío no dibuja nada
• La píldora usa el acento del tema o tu AccentColor
• Combínalo con Hint para explicar el contador

Elementos que informan Solo registrada

Conecta los elementos a tus TAction

Las aplicaciones construidas sobre un TActionList ya tienen sus comandos, títulos y reglas de habilitación en un solo lugar. Enlaza un elemento a cualquier TAction de VCL o FireMonkey mediante su propiedad Action y su Caption, Enabled, Visible, Hint e ImageIndex siguen a la acción. Un clic ejecuta la acción con la barra como su ActionComponent, y OnUpdate se ejecuta en reposo, de modo que un elemento se pone gris en cuanto su acción se deshabilita. En .NET el mismo trabajo lo hacen Command y CommandParameter. Un solo TActionList puede gobernar el menú, la barra de herramientas y los atajos de teclado del formulario.

• Action enlaza un elemento a cualquier TBasicAction
• El OnClick de un elemento se ejecuta en lugar de la acción
• Se compila bajo SGC_NAVIGATION_ACTIONS
• .NET: Command y CommandParameter con ICommand

Community: asigna el OnClick del elemento o el OnItemClick de la barra en lugar de una acción.

Teclado, temas y salida

Claro, oscuro y tu color de acento

Un menú que ignora el tema de la aplicación parece añadido a la fuerza. Theme fija los colores de superficie, borde, texto, encabezado de grupo, hover y acento a partir de los tokens compartidos de sgcUICore, así que una barra y un sgcDashboard con el mismo Theme coinciden exactamente. AccentColor sustituye el acento por el color de tu marca en la barra de selección, el rectángulo de foco y las insignias. Una barra alojada en una tarjeta de dashboard sigue sola el tema del dashboard. Cambia el tema en tiempo de ejecución y la barra se repinta al instante, lista para un interruptor de modo oscuro en tu página de ajustes.

• Theme: utDefault (predeterminado, sigue el tema de la aplicación), utLight o utDark
• AccentColor como valor $AARRGGBB, 0 mantiene el acento del tema
• Los mismos tokens que todos los productos sgcUI
• Las tarjetas del dashboard transmiten su tema a la barra