sgcNavigation, a mesma barra de navegação para FireMonkey, .NET e Delphi 7 a 13

Layout e modos

Uma barra lateral moderna em um só componente

A maioria das aplicações corporativas precisa da mesma coisa na borda esquerda do formulário principal: uma lista de páginas, agrupadas por área, com a página atual claramente marcada. Coloque um TsgcVCLNavigationBar no formulário, alinhe-o à esquerda e adicione os itens. Os cabeçalhos de grupo dão título às linhas abaixo deles em uma cor suave e nunca são selecionados. A linha selecionada recebe um fundo com tom de destaque e uma barra de destaque de 3 pixels, para que os usuários sempre vejam onde estão. Os estados de passagem do mouse e de clique, as dicas e as linhas desabilitadas são todos desenhados para você, e a barra parece finalizada já na primeira execução.

• Mode := nbmSidebar é o estilo padrão
• IsGroup transforma um item em um cabeçalho de grupo
• ItemHeight e GroupHeight definem a altura das linhas
• A roda do mouse rola listas longas e ScrollIntoView exibe qualquer item
• Da direita para a esquerda para árabe e hebraico: ícones e legendas trocam de lugar, e o recuo, os chevrons, as insígnias e o botão de recolher ficam espelhados

Layout e modos

Recolha em uma faixa de ícones, com animação

Barras laterais largas tomam espaço dos dados que seus usuários vieram ver. Defina Collapsed e a barra passa da largura expandida para uma faixa estreita de ícones em cerca de 150 ms. Na faixa, só os ícones são desenhados, a legenda vira dica, os cabeçalhos de grupo viram linhas separadoras e os emblemas viram pontos, então nada importante se perde. A barra define a própria largura, de modo que o conteúdo ao lado simplesmente a acompanha com alClient. Vincule a propriedade Collapsed a um botão de hambúrguer, a uma configuração do usuário ou à largura do formulário, e a faixa abre e fecha da mesma forma nos modos lateral e acordeão.

• Collapsed alterna entre as duas larguras
• ExpandedWidth (220) e CollapsedWidth (56) em pixels lógicos
• AnimateCollapse liga ou desliga a animação
• OnCollapsedChange avisa quando a faixa abre ou fecha

Shell de navegação

Uma árvore de vários níveis com pesquisa

Aplicações grandes superam uma lista plana de páginas. Defina Mode como nbmTree e a barra vira uma árvore com quantos níveis você precisar: os itens continuam sendo uma coleção plana e o Depth de um item define o seu nível, então o código que preenche a barra quase não muda. Cada nível é recuado e cada pai pode ser recolhido. Ative ShowSearch e uma linha de pesquisa acima dos itens filtra a árvore enquanto o usuário digita, mantém abertos os pais de cada resultado e destaca os caracteres correspondentes. A correspondência aproximada encontra 'Settings' a partir de 'stg'. O modo árvore e a pesquisa fazem parte de todas as edições.

• Mode := nbmTree e Depth por item
• ExpandAll, CollapseAll e Expand(aIndex, aRecursive)
• Filter com FilterMode nfmContains ou nfmFuzzy
• ShowSearch desenha a linha de pesquisa, Esc a limpa
• Direita e Esquerda expandem e recolhem, * expande um ramo inteiro

Shell de navegação

Uma trilha de navegação que acompanha a árvore

Árvores profundas precisam de um jeito de ver onde você está e de voltar para cima. A trilha de navegação mostra o caminho como uma linha de segmentos, por exemplo Mail, Folders, Work. Um clique em um segmento volta a ele, e o chevron depois de um segmento lista seus filhos para ir a outro lugar. Vincule-a a uma barra de navegação e ela acompanha o item selecionado, ou preencha-a por conta própria a partir de um Path ou dos Segments. Quando o caminho é longo demais, os primeiros segmentos se dobram em um botão de estouro. Na edição Registrada, um clique na área vazia, F4 ou Ctrl+L transforma a trilha de navegação em um campo de edição com o caminho completo, como a barra de endereços de um gerenciador de arquivos.

• NavigationBar vincula a trilha de navegação a uma barra
• Path, PathDelimiter e OnGetChildren por conta própria
• OnSegmentClick e AutoTruncate
• Somente Registrada modo de edição com OnPathEdit

Shell de navegação

Um formulário com abas, com as abas na barra de título

Navegadores, terminais e editores modernos colocam as abas na barra de título da janela, de modo que os documentos ganham toda a altura da tela. O formulário com abas faz o mesmo na sua aplicação. Solte-o em um formulário e vincule-o à faixa de abas: o sgcUI remove a barra de título nativa e desenha uma barra de título com tema, com o ícone da janela, as abas, o botão de nova aba e os botões de minimizar, maximizar e fechar, no tema sgcUI da aplicação, Classic ou Fluent, claro ou escuro. A janela mantém a sombra, as bordas de redimensionamento e o comportamento de maximizada, e o Windows 11 mostra os snap layouts quando o ponteiro repousa sobre o botão de maximizar. O espaço vazio à direita da última aba arrasta a janela. Na edição Registrada, o usuário arrasta uma aba para fora da faixa, para uma nova janela, e a solta na barra de título de outra janela, como em um navegador da web.

• TsgcVCLNavigationTabbedForm e TsgcFMXNavigationTabbedForm no Delphi e no C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow e TsgcAvaloniaNavigationTabbedWindow no .NET
• Tabs vincula a faixa de abas. No Delphi, Notebook move a faixa de um notebook para a barra de título, enquanto as páginas ficam no notebook
• Um clique duplo na faixa vazia maximiza a janela e um clique com o botão direito mostra o menu do sistema
• No WPF e no Avalonia, a propriedade anexada Tabs na janela a configura a partir do XAML
• Somente Registrada desacoplamento: TearOffMode move uma aba desacoplada para a janela sob o ponteiro, e ttmNewForm a abre em uma nova janela, a partir de OnCreateTearOffForm, que segue o ponteiro

O formulário com abas está em todas as edições, inclusive na Community. O desacoplamento está na edição Registrada, como o desacoplamento das abas. A moldura com tema exige o Windows com composição de desktop e, no FireMonkey, é aplicada somente no Windows: no macOS, Linux, iOS e Android a barra de título nativa permanece.

Gerenciador de docking Somente Registrada

Arraste os painéis para as guias de soltar

Aplicações com muitas janelas de ferramentas precisam de um espaço de trabalho que o usuário possa organizar. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager e TsgcAvaloniaDockManager ancoram painéis de ferramentas nos quatro lados do formulário, em divisões aninhadas com divisores e em grupos de abas. O usuário arrasta uma legenda ou uma aba, e as guias de soltar mostram onde ela pode ficar: uma bússola sobre o grupo sob o ponteiro divide esse grupo por um lado ou coloca o painel em abas dentro dele, as guias de borda o ancoram em uma borda do site inteiro, e um retângulo de pré-visualização na cor de destaque mostra o espaço que ele ocupará. Esc cancela o arrasto. A página Docking no Avalonia mostra o TsgcAvaloniaDockManager em XAML e C#.

• Panels.Add com Name, Caption, Placement e DockSize, e o seu próprio controle como Control
• DockPanel, ClosePanel, ShowPanel e ActivatePanel no código
• OnPanelDock pode recusar um dock, um flutuar ou uma mudança de ocultação automática
• Botões de fechar, fixar, maximizar e de menu em cada legenda

Gerenciador de docking Somente Registrada

Janelas flutuantes na área de trabalho

Um painel solto longe das guias flutua em uma janela própria, que o usuário move para outro lugar ou outro monitor. Uma janela flutuante contém uma disposição como o dock site, então mais painéis podem ser ancorados nela lado a lado ou em abas, e um clique duplo na sua legenda a ancora de novo. As janelas flutuantes são janelas de ferramentas sem borda, pertencentes ao formulário e fora da barra de tarefas, com uma legenda desenhada e uma borda que as redimensiona, e cada uma usa a escala do seu próprio monitor. Funcionam nas aplicações desktop VCL, WinForms, WPF, Avalonia e no FireMonkey no Windows e no macOS. No iOS e no Android os painéis não flutuam, e um arrasto mostra apenas as guias.

• FloatPanel(aPanel, aLeft, aTop) no código
• AllowFloating no gerenciador de docking e CanFloat por painel
• Placement := dplFloat inicia um painel flutuando com FloatWidth por FloatHeight
• Uma janela flutuante fora da área de trabalho visível volta para dentro dela quando uma disposição é carregada

Gerenciador de docking Somente Registrada

Salve a disposição e restaure-a

Os usuários esperam encontrar os painéis onde os deixaram. SaveLayout grava toda a organização como JSON compacto: as divisões e os seus tamanhos, os grupos e os seus painéis ativos, os grupos ocultados automaticamente de cada lado, as janelas flutuantes com os seus limites, o grupo maximizado e os painéis ocultos. LoadLayout a restaura na próxima inicialização. O texto é o mesmo no Delphi e no .NET, então um único arquivo de disposição serve aos dois. Um painel que a disposição cita mas que o formulário ainda não tem, como um documento que estava aberto, chega ao OnRestorePanel, onde o seu código cria o conteúdo dele ou o descarta.

• SaveLayout, SaveLayoutToFile e SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile e LoadLayoutFromStream retornam False com um texto estranho e não alteram nada
• OnRestorePanel para painéis criados em tempo de execução
• Um comando "Window" por painel transforma a paleta de comandos em um alternador de janelas

Edição Registrada no FireMonkey, VCL, WinForms, WPF e Avalonia, com suporte ao C++ Builder. Teclado, UI Automation, da direita para a esquerda, temas e alta DPI incluídos.

Itens que informam

Emblemas para contagens de não lidos

Os usuários devem perceber que algo precisa de atenção antes de abrir a página. Dê a um item um Badge, como uma contagem de não lidos ou a palavra Novo, e a barra o desenha como uma pílula na cor de destaque à direita da linha, com texto preto ou branco, o que for mais legível. Defina-o por código sempre que o valor mudar e a barra se redesenha sozinha. Na faixa recolhida, o emblema vira um ponto sobre o ícone. Como o emblema é texto simples, a mesma propriedade cobre contagens, rótulos curtos e palavras de status sem nenhum código de desenho personalizado.

• Badge é um texto curto por item
• Um Badge vazio não desenha nada
• A pílula usa o destaque do tema ou o seu AccentColor
• Combine com Hint para explicar a contagem

Itens que informam Somente Registrada

Vincule os itens às suas TActions

As aplicações baseadas em um TActionList já guardam seus comandos, legendas e regras de habilitação em um só lugar. Vincule um item a qualquer TAction do VCL ou do FireMonkey pela propriedade Action e seus Caption, Enabled, Visible, Hint e ImageIndex acompanham a ação. Um clique executa a ação com a barra como ActionComponent, e OnUpdate roda em ociosidade, então um item fica cinza assim que a ação é desabilitada. No .NET o mesmo trabalho é feito por Command e CommandParameter. Um único TActionList pode controlar o menu, a barra de ferramentas e os atalhos de teclado do formulário.

• Action vincula um item a qualquer TBasicAction
• O OnClick de um item é executado no lugar da ação
• Compilado sob SGC_NAVIGATION_ACTIONS
• .NET: Command e CommandParameter com ICommand

Community: atribua o OnClick do item ou o OnItemClick da barra no lugar de uma ação.

Teclado, temas e saída

Claro, escuro e a sua cor de destaque

Um menu que ignora o tema da aplicação parece um acréscimo solto. Theme define as cores de superfície, borda, texto, cabeçalho de grupo, passagem do mouse e destaque a partir dos tokens compartilhados do sgcUICore, de modo que uma barra e um sgcDashboard com o mesmo Theme combinam exatamente. AccentColor substitui o destaque pela cor da sua marca na barra de seleção, no retângulo de foco e nos emblemas. Uma barra hospedada em um bloco do dashboard segue sozinha o tema do dashboard. Troque o tema em tempo de execução e a barra se redesenha na hora, pronta para um botão de modo escuro na sua página de configurações.

• Theme: utDefault (padrão, segue o tema da aplicação), utLight ou utDark
• AccentColor como um valor $AARRGGBB, 0 mantém o destaque do tema
• Os mesmos tokens de todo produto sgcUI
• Os blocos do dashboard enviam seu tema para a barra