sgcEditors, os Controles de Entrada Modernos para Delphi, C++ Builder & .NET

Os controles

Quinze entradas modernas em um só pacote

Formulários de reserva, páginas de configurações e filtros pedem sempre as mesmas entradas: um calendário, um seletor de data ou hora, um controle deslizante, uma cor, uma lista de tags, uma avaliação por estrelas, um número com unidades, um código com máscara, um preço, uma escolha em uma lista longa, uma caixa de pesquisa e um comentário. O sgcEditors entrega as quinze como uma família consistente. Cada controle existe para VCL e FireMonkey com as mesmas propriedades publicadas e os mesmos eventos, e para WinForms, WPF e Avalonia com os mesmos nomes, então o que você aprende em um controle vale para os outros. Eles compartilham um tema, uma cor de destaque e um modelo de teclado. Solte-os da página SGC Editors da paleta e eles ficam certos já na primeira execução.

• TsgcVCLMonthCalendar, TsgcVCLDatePicker, TsgcVCLTimePicker, TsgcVCLDateTimePicker
• TsgcVCLRangeSlider e TsgcVCLSpinEdit para números
• TsgcVCLColorPicker, TsgcVCLTokenEdit, TsgcVCLRating
• TsgcVCLButtonEdit, TsgcVCLSearchEdit, TsgcVCLMaskEdit, TsgcVCLCurrencyEdit, TsgcVCLLookupEdit, TsgcVCLMemo
• Todos descendem de TsgcVCLCustomEditor

Os controles Somente Registrada

Intervalos de preço e de datas com dois cursores

Filtros de preço, peso ou distância ficam melhores como um intervalo em uma trilha. O controle deslizante de intervalo escolhe um valor entre Min e Max com um cursor, ou um intervalo com dois cursores em RangeMode, na horizontal ou na vertical. Ele desenha marcas, rótulos e uma dica com o valor sobre o cursor arrastado, e um clique na trilha move para lá o cursor mais próximo. Os cursores nunca se cruzam, Step ajusta os valores e MinRange mantém uma distância mínima, então o filtro nunca fica vazio por acidente. Valores e rótulos seguem o locale do controle, inclusive os separadores decimais e de milhar.

• RangeMode com Value e EndValue
• Min, Max, Step e MinRange
• TickInterval, ShowLabels, ShowValueTip
• LabelFormat ou OnFormatLabel para moedas

Community: um cursor é desenhado e editado; EndValue é mantido, mas não é exibido.

Os controles Somente Registrada

Escolha qualquer cor, com alfa

Editores de tema, configurações de gráfico e designers de rótulo precisam de mais que uma paleta fixa. O seletor de cor empilha uma grade de amostras, um quadrado de saturação e valor, uma barra de matiz, uma barra de alfa e uma linha com uma pré-visualização e um campo hexadecimal, e Parts escolhe quais deles aparecem. O campo hexadecimal aceita #RGB, #RGBA, #RRGGBB e #RRGGBBAA. O seletor guarda o matiz separado da cor, então um cinza mantém o seu matiz e o quadrado nunca dá saltos enquanto o usuário arrasta. Defina a paleta da sua marca como amostras e os usuários ainda têm o seletor completo a um clique de distância.

• Parts com ecpSwatches, ecpHSV, ecpAlpha, ecpHex
• Swatches e SwatchColumns para a sua paleta
• SelectedColor como um valor ARGB
• OnChangeComplete quando o usuário solta o mouse

Community: somente amostras e hexadecimal; o quadrado HSV e a barra de alfa não são desenhados e o alfa é sempre $FF.

Os controles

Botões, pesquisa e anotações no mesmo estilo

Muitos campos precisam de um botão ao lado do texto: procurar um arquivo, abrir uma caixa de diálogo, limpar o valor. O edit com botões coloca botões de procurar, lista suspensa, pesquisa, limpar, mais, menos, texto ou desenhados pelo proprietário nos dois lados de um edit nativo, cada um com o seu atalho, e os leitores de tela listam cada botão pelo nome e podem acioná-lo. O edit de pesquisa dispara OnSearch após uma pausa na digitação ou na hora com Enter, e oferece de novo as pesquisas anteriores em um histórico suspenso. O memo é um editor de várias linhas com tema, com texto de dica, um contador de caracteres com limite opcional e uma altura que acompanha as linhas entre MinLines e MaxLines.

• TsgcVCLButtonEdit com Buttons e OnButtonClick
• TsgcVCLSearchEdit com SearchDelay, History e OnSearch
• TsgcVCLMemo com ShowCounter, MaxLength, AutoHeight

Os controles

Entrada com máscara e de moeda que você pode compartilhar com o .NET

Telefones, CEPs, números de conta e preços precisam de um formato fixo. O edit com máscara aceita uma máscara de entrada na sintaxe EditMask do Delphi ou na sintaxe MaskedTextBox do .NET, então uma mesma máscara se comporta igual em um aplicativo Delphi e em um .NET: os literais ficam fixos, cada posição aceita só o seu tipo de caractere, e Text devolve o valor com ou sem os literais. O edit de moeda guarda um valor Currency exato, um decimal no .NET, sem ponto flutuante. Ele mostra o formato de moeda completo da localidade enquanto não tem o foco, e um número agrupado com o símbolo ou o código ISO enquanto o usuário digita. MinValue, MaxValue e AllowNegative mantêm o valor no intervalo.

• EditMask e MaskSyntax: emxDelphi ou emxDotNet
• IsComplete, EditText e SaveLiterals
• Value, Decimals, CurrencyCode, SymbolMode
• PositivePattern e NegativePattern

Os controles

Escolha uma linha de uma lista de várias colunas

Clientes, produtos e países são escolhidos pelo nome, mas guardados pela chave. O edit de lookup abre uma lista suspensa de várias colunas com uma linha de cabeçalho opcional e a filtra enquanto o usuário digita. O edit mostra a coluna de exibição e KeyValue guarda a chave, como o código de um país por trás do nome. As linhas vêm de Items, uma linha por item com as células separadas por |, ou de OnGetItems para uma pesquisa em um servidor, e OnNotInList decide o que acontece com um texto que não corresponde a nenhuma linha. No .NET as linhas também podem vir de qualquer coleção por ItemsSource, DisplayMember e ValueMember, no WinForms, WPF e Avalonia.

• Columns com Title, Width e Alignment
• KeyColumn, DisplayColumn e KeyValue
• ShowHeader, MatchMode, DropDownRows
• .NET: ItemsSource, SelectedValue em todas as edições

Os controles

Um interruptor para configurações e opções

Páginas de configurações e painéis de opções ligam e desligam recursos. O interruptor é a forma moderna da caixa de seleção: uma trilha arredondada com um botão redondo que desliza para o novo estado, um texto opcional de cada lado e o texto On e Off dentro da trilha, se você quiser. Ele é desenhado de forma personalizada, usa a cor de destaque do tema enquanto está ligado e escala com o DPI. Uma alteração do usuário passa primeiro por OnChanging, de modo que uma regra do seu formulário pode recusá-la, e OnChange é executado após cada alteração, feita pelo usuário ou pelo código.

• TsgcVCLToggleSwitch e TsgcFMXToggleSwitch, e no .NET TsgcWinFormsToggleSwitch, TsgcWpfToggleSwitch e TsgcAvaloniaToggleSwitch
• Checked, Caption, CaptionPosition, ShowText com OnText e OffText, ReadOnly e Animated
• TrackOnColor, TrackOffColor e ThumbColor, ou as cores do tema, e SwitchWidth e SwitchHeight para o tamanho da trilha
• OnChanging cancela uma alteração do usuário com Allow, OnChange é disparado após cada alteração e Toggle muda o estado como o usuário faria
• Clique, arrasto do botão, Espaço, Esquerda e Direita, formulários da direita para a esquerda e uma caixa de seleção com o padrão Toggle para leitores de tela
• No WPF e no Avalonia, Checked tem vínculo bidirecional por padrão, e no WinForms dispara CheckedChanged para o vínculo de dados

O interruptor está em todas as edições, inclusive na Community.

Os controles

Um edit de endereço IP para IPv4 e IPv6

Configurações de rede, instalação de dispositivos e regras de firewall pedem endereços. No IPv4, o edit de endereço IP mostra quatro campos de octeto com separadores de ponto e passa para o campo seguinte enquanto o usuário digita, de modo que um endereço é tão rápido de digitar quanto em um edit simples e fica sempre bem formado: um valor acima de 255 é limitado, e os campos vazios viram 0 quando o foco sai do controle. No IPv6, ele é um único campo de texto que aceita dígitos hexadecimais, dois-pontos e pontos, valida o texto e o grava na forma canônica da RFC 5952 quando o foco sai, de modo que 2001:DB8:0:0:0:0:2:1 vira 2001:db8::2:1.

• TsgcVCLIPAddressEdit e TsgcFMXIPAddressEdit, e no .NET TsgcWinFormsIPAddressEdit, TsgcWpfIPAddressEdit e TsgcAvaloniaIPAddressEdit
• Mode escolhe IPv4 ou IPv6, Address é o valor e Octets lê ou define um campo de um endereço IPv4
• IsValid informa se o endereço está completo, e com Required um endereço vazio ou incompleto mostra a moldura de erro do tema
• Um ponto ou um terceiro dígito passa para o campo seguinte, Backspace no início de um campo volta, Esquerda e Direita cruzam os limites dos campos, e um endereço colado preenche todos os campos
• OnChange dispara após cada alteração, Clear esvazia o endereço, e os leitores de tela veem um edit com o padrão Value
• No WPF e no Avalonia, Address tem vínculo bidirecional por padrão, e no WinForms dispara AddressChanged para o vínculo de dados

O edit de endereço IP está em todas as edições, inclusive na Community.

Os controles

Um edit de duração para intervalos de tempo

Um timeout, um intervalo ou um tempo de execução é uma duração, não uma hora do dia. O edit de duração a mostra em segmentos, dias, horas, minutos, segundos e milissegundos, e o usuário edita um segmento por vez digitando, com as setas, a roda do mouse ou os botões de incremento. Um passo transborda para o segmento seguinte, de modo que 59 segundos mais um é um minuto, e o segmento mais alto exibido não tem limite, então sem dias 50 horas aparecem como 50:00:00.

• TsgcVCLTimeSpanEdit e TsgcFMXTimeSpanEdit, e no .NET TsgcWinFormsTimeSpanEdit, TsgcWpfTimeSpanEdit e TsgcAvaloniaTimeSpanEdit
• Value em milissegundos no Delphi e um TimeSpan no .NET, com as partes Days, Hours, Minutes, Seconds e Milliseconds
• Segments escolhe os segmentos exibidos e DisplayFormat grava o valor como relógio, 1.02:30:05.250, ou com unidades, 1d 2h 30m 5s 250ms
• MinValue e MaxValue limitam o valor, AllowNegative aceita um sinal de menos inicial, e Increment e ShowButtons definem o passo e os botões de incremento
• Seta para cima e para baixo alteram o segmento com foco, Page Up e Page Down o alteram de dez em dez, Esquerda, Direita e Tab se movem entre os segmentos, e os leitores de tela veem um spinner com o padrão RangeValue em segundos
• No WPF e no Avalonia, Value tem vínculo bidirecional por padrão, e no WinForms dispara ValueChanged para o vínculo de dados

O edit de duração está em todas as edições, inclusive na Community.

Os controles

Um seletor de fonte com visualização de cada família

Designers de relatórios, editores de etiquetas e páginas de configurações deixam o usuário escolher uma fonte. O seletor de fonte é um edit com um botão de lista suspensa cuja lista desenha cada família na sua própria fonte. Digitar filtra as famílias, as escolhidas mais recentemente aparecem primeiro acima de um separador, e um filtro mantém apenas as famílias de largura fixa, para um editor de código ou um terminal. A lista vem da plataforma até que o aplicativo a preencha.

• TsgcVCLFontPicker e TsgcFMXFontPicker, e no .NET TsgcWinFormsFontPicker, TsgcWpfFontPicker e TsgcAvaloniaFontPicker
• FontName é o valor, Fonts a lista de famílias e RefreshFonts a recarrega depois que uma fonte foi instalada
• ShowPreview desenha cada nome na sua própria fonte e PreviewText acrescenta um texto de exemplo depois do nome
• RecentCount e RecentFonts guardam as famílias escolhidas recentemente, para o aplicativo salvar e carregar de novo
• FontFilter mantém as famílias de largura fixa, e Alt+Seta para baixo abre a lista, Enter ou um clique escolhe uma família e Esc a fecha
• O seletor de fonte do Delphi desenha as fontes da visualização no Windows, no VCL e no FireMonkey; nas outras plataformas do FireMonkey os nomes são listados na fonte do tema
• No WPF e no Avalonia, FontName tem vínculo bidirecional por padrão

O seletor de fonte está em todas as edições, inclusive na Community.

Os controles

Uma lista com caixas de seleção para listas longas de opções

As colunas de uma grade, os filtros de um relatório ou os módulos de uma licença são listas longas de opções. A lista com caixas de seleção é uma lista com rolagem com uma caixa de seleção em cada linha, desmarcada, marcada ou acinzentada, e um indicador de habilitado por item. Uma linha de cabeçalho opcional Selecionar tudo marca ou desmarca todos os itens habilitados, e uma caixa de filtro opcional oculta as linhas que não contêm o texto digitado sem alterar o estado delas. Apenas as linhas visíveis são desenhadas, de modo que uma lista de 10000 itens continua rápida.

• TsgcVCLCheckListBox e TsgcFMXCheckListBox, e no .NET TsgcWinFormsCheckListBox, TsgcWpfCheckListBox e TsgcAvaloniaCheckListBox
• Items com Checked, State e ItemEnabled por item, e AllowGrayed para o terceiro estado
• ShowCheckAll mostra a linha Selecionar tudo de três estados e ShowFilter a caixa de filtro
• CheckAll, UncheckAll e CheckedCount, e OnClickCheck antes de OnChange para uma alteração do usuário
• Espaço alterna a linha com foco, Ctrl+A marca todos os itens, uma letra salta para o próximo item que começa com ela, e os leitores de tela veem itens de lista com o padrão Toggle
• No .NET, CheckedItems e CheckedIndices são listas somente leitura para o vínculo, e o evento ItemCheck vem antes de Change

A lista com caixas de seleção está em todas as edições, inclusive na Community.

Os controles

Uma lista dupla para escolher e ordenar itens

Escolher as colunas de um relatório, os membros de um grupo ou as etapas de um processo significa mover itens de uma lista para outra. A lista dupla desenha a lista Disponíveis à esquerda e a lista Selecionados à direita, com botões entre elas que movem as linhas selecionadas ou todas as linhas, e botões Subir e Descer no lado externo que reordenam a lista Selecionados. Um clique duplo ou um arrasto move um item para a outra lista, e um arrasto dentro da lista Selecionados a reordena.

• TsgcVCLDualListBox e TsgcFMXDualListBox, e no .NET TsgcWinFormsDualListBox, TsgcWpfDualListBox e TsgcAvaloniaDualListBox
• AvailableItems e SelectedItems, AvailableCaption e SelectedCaption, ShowCaptions e ShowReorderButtons
• SortAvailable insere em ordem os itens devolvidos, ShowFilter acrescenta uma caixa de filtro sobre cada lista, e ReadOnly mantém a seleção e recusa os movimentos
• MoveToSelected, MoveAllToSelected, MoveToAvailable, MoveAllToAvailable, MoveUp e MoveDown fazem o que os botões fazem
• OnMoving pode manter um item onde está, e OnChange dispara uma vez por operação
• Clique, Ctrl+clique, Shift+clique e Ctrl+A selecionam, Tab vai de uma lista para a outra, Ctrl+Direita e Ctrl+Esquerda movem, Ctrl+Cima e Ctrl+Baixo reordenam, e a exibição é espelhada em formulários da direita para a esquerda
• No WPF e no Avalonia, SelectedItems tem vínculo bidirecional por padrão, e no WinForms dispara SelectedItemsChanged

A lista dupla está em todas as edições, inclusive na Community.

Digitação, idioma e dados

Um NumPad para painéis touch

Um painel touch no chão de fábrica não tem teclado, e o teclado do sistema cobre metade da tela. O NumPad digita um número com teclas grandes o bastante para um dedo ou uma luva. Solte um pad fixado no formulário e ele escreve no controle que tem o foco, ou anexe um pad suspenso a um controle e um toque no controle abre o pad sob ele. O controle de destino não precisa de nenhuma alteração: o pad lê a sua faixa e as suas casas decimais e grava o valor como uma alteração do usuário, de modo que o arredondamento, os limites e o OnChange do destino rodam como se o usuário tivesse digitado.

• TsgcVCLNumPad fixado e TsgcVCLNumPadPopup como lista suspensa, também para FireMonkey e no .NET
• Digita no spin edit, no edit de moeda, em um edit padrão e nos gauges de botão giratório e de controle deslizante do sgcGauges
• Associate escolhe o destino, ou o pad acompanha o controle com foco
• Um display com o número digitado e uma linha de limites como Min 0 Max 120

O NumPad está em todas as edições, inclusive a Community. Ele faz parte do Pacote HMI do sgcUI para telas de operador.

Digitação, idioma e dados

Um teclado na tela para quiosques e telas touch

Um quiosque, um terminal de autoatendimento ou um painel de operador precisa de nomes, códigos e anotações, além de números. O teclado na tela é um teclado completo construído sobre o mesmo caminho de entrada do NumPad. Fixe-o no formulário e ele digita no controle que tem o foco, ou anexe um teclado suspenso que abre sob um edit quando o edit recebe o foco. O teclado nunca toma o foco, então o cursor e a seleção do destino ficam onde estão, e um edit padrão, um memo e os controles do sgcEditors não precisam de nenhuma alteração.

• TsgcVCLKeyboard fixado e TsgcVCLKeyboardPopup como lista suspensa, também para FireMonkey e no .NET para WinForms, WPF e Avalonia
• Associate escolhe o destino, ou o teclado acompanha o foco. AutoPopup, AutoPopupAll, PopupPosition e CloseOnEnter controlam a lista suspensa
• Páginas de letras, de símbolos e numérica, com Shift, Caps Lock, AltGr e teclas mortas para letras acentuadas
• Dez layouts integrados (en-US, en-GB, es-ES, fr-FR, de-DE, it-IT, pt-BR, nl-NL, pl-PL e tr-TR), seus próprios layouts com sgcKeyboardRegisterLayout e uma tecla de layout que percorre Layouts
• OnKeyText altera ou cancela o texto antes de ele ser escrito, e OnEnterKey roda depois do Enter
• Temas, formulários da direita para a esquerda e teclas que os leitores de tela anunciam

O teclado na tela está em todas as edições, inclusive a Community. Ele faz parte do Pacote HMI do sgcUI para painéis de operador e quiosques.

Digitação, idioma e dados

Cada controle fala o idioma do usuário

Equipes internacionais e produtos multilíngues precisam de datas que soem naturais para cada usuário. Cada controle tem o seu próprio FormatSettings, preenchido a partir do locale do usuário e alterável em tempo de execução, então dois controles no mesmo formulário podem até usar dois locales. O calendário e os seletores tiram dele os nomes de dias e meses, os formatos de data e hora, os textos de AM e PM e os separadores. FirstDayOfWeek e WeekNumbering seguem o locale ou a sua escolha, e os números usam os separadores decimais e de milhar corretos. As unidades, as dicas e os nomes acessíveis continuam sendo propriedades suas, então você os traduz junto com o resto do formulário.

• FormatSettings por controle
• FirstDayOfWeek: efdLocale ou efdMonday forçado
• WeekNumbering: ewnISO8601 por padrão
• TsgcEditorLocale para modelos headless
• Da direita para a esquerda para árabe e hebraico: os botões de incremento, de lista suspensa e de limpar passam para o outro lado, sliders, avaliações e o calendário correm a partir da direita, e o campo de edição é lido da direita para a esquerda

Digitação, idioma e dados

Verifique o formulário inteiro antes de salvar

Um formulário só está pronto quando todos os campos estão certos. O validador do sgcUICore verifica os controles de um formulário contra regras: obrigatório, intervalo, tamanho, expressão regular, e-mail, comparação com outro campo e o seu próprio código. Ele encontra os controles como o Smart Paste faz, então verifica os controles do sgcEditors e também os edits, memos, combos, caixas de seleção e seletores padrão, no VCL, FireMonkey, WinForms, WPF e Avalonia. O edit com máscara informa um valor incompleto e o edit de lookup um texto que não está na lista, sem nenhuma regra. Os erros aparecem como uma moldura na cor de erro do tema, um ícone com a mensagem como dica e uma lista de resumo opcional, e os leitores de tela leem a mensagem junto com o campo. No .NET o validador também mostra os erros da sua camada de dados: IDataErrorInfo e INotifyDataErrorInfo no WinForms e no WPF, os erros de validação de dados no Avalonia.

• TsgcVCLValidator, TsgcFMXValidator, TsgcWinFormsValidator, TsgcWpfValidator, TsgcAvaloniaValidator
• Regras uvrRequired, uvrRange, uvrLength, uvrRegex, uvrEmail, uvrCompare, uvrCustom
• Trigger: uvtExit por padrão, uvtChange ou uvtManual; Validate antes de salvar
• TsgcVCLValidationSummary lista os erros e foca o campo com um clique

Em todas as edições, inclusive na Community. As expressões regulares correspondem aos mesmos textos no Delphi 7 a 13 e no .NET.

Digitação, idioma e dados

Monte um formulário ou gere-o a partir dos seus dados

O controle de layout organiza os controles de um formulário, do sgcEditors e padrão, em grupos, grupos com abas e colunas, com os rótulos alinhados a uma só largura, divisores que o usuário pode arrastar e layouts da direita para a esquerda, e SaveLayout guarda a disposição como JSON. O formulário de dados é construído sobre ele. Aponte-o para um TDataSet, ou vincule um objeto de uma classe sua, e ele cria um controle do sgcEditors por campo, as regras de validação de cada campo, um resumo dos erros e um navegador para percorrer, incluir, editar, excluir e gravar registros. O Smart Paste preenche o registro inteiro a partir de um texto colado, como uma assinatura de e-mail ou um bloco de endereço, e marca os campos que preencheu. No .NET, os formulários de dados do WinForms, WPF e Avalonia aceitam um DataTable, uma lista ou um objeto.

• TsgcVCLLayoutControl, TsgcFMXLayoutControl; SaveLayout e LoadLayout
• TsgcVCLDataForm, TsgcFMXDataForm, TsgcWinFormsDataForm, TsgcWpfDataForm, TsgcAvaloniaDataForm
• Fields: título, tipo, obrigatório, limites, grupo, aba e ordem de cada campo; BindObject para uma classe
• SmartPasteFromClipboard, SmartPasteUndo e um botão Smart Paste no navegador

O controle de layout está em todas as edições, inclusive na Community; o Delphi Community não tem pacote de design para o sgcEditors, então nele é criado em código. O formulário de dados, as suas regras de validação e o seu Smart Paste são apenas da edição Registrada.

Teclado, DPI e temas

Nítido em todo monitor

Notebooks a 150 por cento ao lado de monitores externos a 100 por cento são normais hoje, e entradas borradas passam uma imagem barata. O sgcEditors organiza todo controle em pixels lógicos a 96 DPI e o desenha na escala da tela, sem nada a fazer no seu código. Quando um formulário VCL passa para um monitor com outro DPI, o edit interno e a sua fonte escalam com o controle, e uma lista suspensa é desenhada no DPI do monitor em que abre. Os rasters do FireMonkey seguem a escala da cena para Retina e Android.

• Layout em pixels lógicos, desenhado na escala da tela
• Os edits internos se reescalam em WM_DPICHANGED
• As listas suspensas usam o DPI do próprio monitor
• SaveToPNG recebe uma escala para imagens nítidas

Teclado, DPI e temas

Claro e escuro com uma propriedade

Os formulários parecem acabados quando toda entrada segue o mesmo tema. Cada controle tem um Theme, um AccentColor e um TextStyle, e as cores da moldura, da passagem do mouse, do estado pressionado, da seleção e do estado desabilitado são derivadas deles, então uma propriedade muda a aparência inteira. Os tokens são os mesmos que todo produto sgcUI usa, então editores colocados em um bloco do sgcDashboard ou sob uma sgcToolbar combinam sem trabalho extra. Um controle desabilitado se mistura ao fundo sozinho. Troque o tema em tempo de execução e todo editor se redesenha, pronto para uma configuração de modo escuro.

• Theme: utDefault (padrão, segue o tema da aplicação), utLight ou utDark
• AccentColor para seleção, cursores, preenchimento e anel de foco
• TextStyle para tamanho, negrito e cor
• Os mesmos tokens de tema de toda a suíte sgcUI