sgcEditors, los controles de entrada modernos para Delphi, C++ Builder & .NET

Los controles

Quince entradas modernas en un solo paquete

Los formularios de reserva, las páginas de ajustes y los filtros piden siempre las mismas entradas: un calendario, un selector de fecha u hora, un deslizador, un color, una lista de etiquetas, una valoración con estrellas, un número con unidades, un código con máscara, un precio, una opción de una lista larga, un cuadro de búsqueda y un comentario. sgcEditors te da las quince como una familia coherente. Cada control existe para VCL y FireMonkey con las mismas propiedades y eventos publicados, y para WinForms, WPF y Avalonia con los mismos nombres, así que lo que aprendes con un control se aplica a los demás. Comparten un tema, un color de acento y un modelo de teclado. Colócalos desde la página SGC Editors de la paleta y se ven bien desde la primera ejecución.

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

Los controles Solo registrada

Rangos de precio y de fecha con dos tiradores

Los filtros de precio, peso o distancia se leen mejor como un rango sobre un carril. El deslizador de rango elige un valor entre Min y Max con un tirador, o un rango con dos tiradores en RangeMode, en horizontal o en vertical. Dibuja marcas, etiquetas y una burbuja con el valor sobre el tirador arrastrado, y un clic en el carril mueve allí el tirador más cercano. Los tiradores nunca se cruzan, Step ajusta los valores y MinRange mantiene una separación mínima, así que el filtro nunca puede quedar vacío por accidente. Los valores y las etiquetas siguen el idioma regional del control, incluidos los separadores decimal y de millares.

• RangeMode con Value y EndValue
• Min, Max, Step y MinRange
• TickInterval, ShowLabels, ShowValueTip
• LabelFormat u OnFormatLabel para monedas

Community: se dibuja y edita un solo tirador; EndValue se conserva pero no se muestra.

Los controles Solo registrada

Elige cualquier color, con alfa

Los editores de temas, los ajustes de gráficos y los diseñadores de etiquetas necesitan más que una paleta fija. El selector de color apila una cuadrícula de muestras, un cuadrado de saturación y valor, una barra de tono, una barra de alfa y una fila con vista previa y un editor hexadecimal, y Parts elige cuáles aparecen. El editor hexadecimal acepta #RGB, #RGBA, #RRGGBB y #RRGGBBAA. El selector mantiene el tono separado del color, así que un gris conserva su tono y el cuadrado nunca salta mientras el usuario arrastra. Define la paleta de tu marca como muestras y los usuarios siguen teniendo el selector completo a un clic.

• Parts con ecpSwatches, ecpHSV, ecpAlpha, ecpHex
• Swatches y SwatchColumns para tu paleta
• SelectedColor como valor ARGB
• OnChangeComplete cuando el usuario suelta el ratón

Community: solo muestras y hexadecimal; el cuadrado HSV y la barra de alfa no se dibujan y el alfa es siempre $FF.

Los controles

Botones, búsqueda y notas con el mismo estilo

Muchos campos necesitan un botón junto al texto: buscar un archivo, abrir un diálogo, borrar el valor. El editor con botón coloca botones de examinar, desplegable, búsqueda, borrar, más, menos, de texto o dibujados por ti a cada lado de un editor nativo, cada uno con su propio atajo, y los lectores de pantalla nombran cada botón y pueden pulsarlo. El editor de búsqueda lanza OnSearch tras una pausa al escribir o de inmediato con Intro, y vuelve a ofrecer las búsquedas anteriores en un historial desplegable. El memo es un editor multilínea con tema, con texto de ayuda, un contador de caracteres con límite opcional y una altura que sigue las líneas entre MinLines y MaxLines.

• TsgcVCLButtonEdit con Buttons y OnButtonClick
• TsgcVCLSearchEdit con SearchDelay, History y OnSearch
• TsgcVCLMemo con ShowCounter, MaxLength, AutoHeight

Los controles

Entrada con máscara y de moneda que puedes compartir con .NET

Los teléfonos, los códigos postales, los números de cuenta y los precios necesitan un formato fijo. El editor con máscara acepta una máscara de entrada en la sintaxis EditMask de Delphi o en la sintaxis MaskedTextBox de .NET, así que una misma máscara se comporta igual en una aplicación Delphi y en una .NET: los literales quedan fijos, cada posición acepta solo su tipo de carácter y Text devuelve el valor con o sin los literales. El editor de moneda guarda un valor Currency exacto, un decimal en .NET, sin coma flotante. Muestra el formato de moneda completo de la configuración regional mientras no tiene el foco, y un número agrupado con el símbolo o el código ISO mientras el usuario escribe. MinValue, MaxValue y AllowNegative mantienen el importe dentro del rango.

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

Los controles

Elige una fila de una lista de varias columnas

Los clientes, los productos y los países se eligen por nombre pero se guardan por clave. El editor lookup abre un desplegable de varias columnas con una fila de cabecera opcional y lo filtra mientras el usuario escribe. El editor muestra la columna de visualización y KeyValue conserva la clave, como el código de un país detrás de su nombre. Las filas vienen de Items, una línea por fila con las celdas separadas por |, o de OnGetItems para una búsqueda en un servidor, y OnNotInList decide qué pasa con un texto que no coincide con ninguna fila. En .NET las filas también pueden venir de cualquier colección mediante ItemsSource, DisplayMember y ValueMember, en WinForms, WPF y Avalonia.

• Columns con Title, Width y Alignment
• KeyColumn, DisplayColumn y KeyValue
• ShowHeader, MatchMode, DropDownRows
• .NET: ItemsSource, SelectedValue en todas las ediciones

Los controles

Un interruptor para ajustes y opciones

Las páginas de ajustes y los paneles de opciones activan y desactivan funciones. El interruptor es la forma moderna de la casilla de verificación: una pista redondeada con un pulgar redondo que se desliza al nuevo estado, un texto opcional a cada lado y el texto On y Off dentro de la pista si lo quieres. Está dibujado a medida, toma el color de acento del tema mientras está activado y escala con el DPI. Un cambio del usuario pasa primero por OnChanging, de modo que una regla de tu formulario puede rechazarlo, y OnChange se ejecuta después de cada cambio, del usuario o por código.

• TsgcVCLToggleSwitch y TsgcFMXToggleSwitch, y en .NET TsgcWinFormsToggleSwitch, TsgcWpfToggleSwitch y TsgcAvaloniaToggleSwitch
• Checked, Caption, CaptionPosition, ShowText con OnText y OffText, ReadOnly y Animated
• TrackOnColor, TrackOffColor y ThumbColor, o los colores del tema, y SwitchWidth y SwitchHeight para el tamaño de la pista
• OnChanging cancela un cambio del usuario con Allow, OnChange se dispara después de cada cambio y Toggle cambia el estado como lo haría el usuario
• Clic, arrastre del pulgar, Espacio, Izquierda y Derecha, formularios de derecha a izquierda y una casilla de verificación con el patrón Toggle para lectores de pantalla
• En WPF y Avalonia Checked se enlaza en ambos sentidos por defecto, y en WinForms dispara CheckedChanged para el enlace de datos

El interruptor está en todas las ediciones, también en Community.

Los controles

Un editor de dirección IP para IPv4 e IPv6

Los ajustes de red, la configuración de dispositivos y las reglas de cortafuegos piden direcciones. En IPv4 el editor de dirección IP muestra cuatro campos de octeto con separadores de punto y pasa al siguiente campo mientras el usuario escribe, de modo que introducir una dirección es tan rápido como en un editor simple y la dirección siempre está bien formada: un valor superior a 255 se limita, y los campos vacíos pasan a 0 cuando el foco sale del control. En IPv6 es un solo campo de texto que admite dígitos hexadecimales, dos puntos y puntos, valida el texto y lo escribe en la forma canónica del RFC 5952 cuando el foco sale, de modo que 2001:DB8:0:0:0:0:2:1 se convierte en 2001:db8::2:1.

• TsgcVCLIPAddressEdit y TsgcFMXIPAddressEdit, y en .NET TsgcWinFormsIPAddressEdit, TsgcWpfIPAddressEdit y TsgcAvaloniaIPAddressEdit
• Mode elige IPv4 o IPv6, Address es el valor y Octets lee o establece un campo de una dirección IPv4
• IsValid indica si la dirección está completa, y con Required una dirección vacía o incompleta muestra el marco de error del tema
• Un punto o un tercer dígito pasa al siguiente campo, Retroceso al principio de un campo vuelve atrás, Izquierda y Derecha cruzan los límites de los campos, y una dirección pegada rellena todos los campos
• OnChange se dispara después de cada cambio, Clear vacía la dirección, y los lectores de pantalla ven un editor con el patrón Value
• En WPF y Avalonia Address se enlaza en ambos sentidos por defecto, y en WinForms dispara AddressChanged para el enlace de datos

El editor de dirección IP está en todas las ediciones, también en Community.

Los controles

Un editor de duración para intervalos de tiempo

Un tiempo de espera, un intervalo o un tiempo de ejecución es una duración, no una hora del día. El editor de duración la muestra en segmentos, días, horas, minutos, segundos y milisegundos, y el usuario edita un segmento cada vez escribiendo, con las teclas de flecha, la rueda del ratón o los botones de incremento. Un paso se acarrea al segmento siguiente, así que 59 segundos más uno es un minuto, y el segmento más alto mostrado no tiene límite, de modo que sin días 50 horas se muestran como 50:00:00.

• TsgcVCLTimeSpanEdit y TsgcFMXTimeSpanEdit, y en .NET TsgcWinFormsTimeSpanEdit, TsgcWpfTimeSpanEdit y TsgcAvaloniaTimeSpanEdit
• Value en milisegundos en Delphi y un TimeSpan en .NET, con las partes Days, Hours, Minutes, Seconds y Milliseconds
• Segments elige los segmentos mostrados y DisplayFormat escribe el valor como reloj, 1.02:30:05.250, o con unidades, 1d 2h 30m 5s 250ms
• MinValue y MaxValue limitan el valor, AllowNegative admite un signo menos inicial, y Increment y ShowButtons fijan el paso y los botones de incremento
• Arriba y Abajo cambian el segmento con foco, RePág y AvPág lo cambian de diez en diez, Izquierda, Derecha y Tab se mueven entre los segmentos, y los lectores de pantalla ven un spinner con el patrón RangeValue en segundos
• En WPF y Avalonia Value se enlaza en ambos sentidos por defecto, y en WinForms dispara ValueChanged para el enlace de datos

El editor de duración está en todas las ediciones, también en Community.

Los controles

Un selector de fuente con vista previa de cada familia

Los diseñadores de informes, los editores de etiquetas y las páginas de ajustes dejan que el usuario elija una tipografía. El selector de fuente es un editor con un botón desplegable cuya lista dibuja cada familia con su propia tipografía. Escribir filtra las familias, las elegidas más recientemente se listan primero sobre un separador, y un filtro conserva solo las familias de ancho fijo, para un editor de código o un terminal. La lista viene de la plataforma hasta que la aplicación la rellena.

• TsgcVCLFontPicker y TsgcFMXFontPicker, y en .NET TsgcWinFormsFontPicker, TsgcWpfFontPicker y TsgcAvaloniaFontPicker
• FontName es el valor, Fonts la lista de familias y RefreshFonts la recarga después de instalar una fuente
• ShowPreview dibuja cada nombre con su propia tipografía y PreviewText añade un texto de ejemplo tras el nombre
• RecentCount y RecentFonts guardan las familias elegidas recientemente, para que la aplicación las guarde y las cargue de nuevo
• FontFilter conserva las familias de ancho fijo, y Alt+Abajo abre la lista, Intro o un clic elige una familia y Escape la cierra
• El selector de fuente de Delphi dibuja las tipografías de la vista previa en Windows, en VCL y FireMonkey; en las demás plataformas de FireMonkey los nombres se listan con la fuente del tema
• En WPF y Avalonia FontName se enlaza en ambos sentidos por defecto

El selector de fuente está en todas las ediciones, también en Community.

Los controles

Una lista con casillas de verificación para listas largas de opciones

Las columnas de una cuadrícula, los filtros de un informe o los módulos de una licencia son listas largas de opciones. La lista con casillas de verificación es una lista con desplazamiento y una casilla en cada fila, sin marcar, marcada o en gris, y un indicador de habilitado por elemento. Una fila de encabezado opcional Seleccionar todo marca o desmarca todos los elementos habilitados, y un cuadro de filtro opcional oculta las filas que no contienen el texto escrito sin cambiar su estado. Solo se dibujan las filas visibles, así que una lista de 10000 elementos sigue siendo rápida.

• TsgcVCLCheckListBox y TsgcFMXCheckListBox, y en .NET TsgcWinFormsCheckListBox, TsgcWpfCheckListBox y TsgcAvaloniaCheckListBox
• Items con Checked, State y ItemEnabled por elemento, y AllowGrayed para el tercer estado
• ShowCheckAll muestra la fila Seleccionar todo de tres estados y ShowFilter el cuadro de filtro
• CheckAll, UncheckAll y CheckedCount, y OnClickCheck antes de OnChange para un cambio del usuario
• Espacio cambia la fila con foco, Ctrl+A marca todos los elementos, una letra salta al siguiente elemento que empieza por ella, y los lectores de pantalla ven elementos de lista con el patrón Toggle
• En .NET CheckedItems y CheckedIndices son listas de solo lectura para el enlace, y el evento ItemCheck llega antes que Change

La lista con casillas de verificación está en todas las ediciones, también en Community.

Los controles

Una lista doble para elegir y ordenar elementos

Elegir las columnas de un informe, los miembros de un grupo o los pasos de un proceso significa mover elementos de una lista a otra. La lista doble dibuja la lista Disponibles a la izquierda y la lista Seleccionados a la derecha, con botones entre ellas que mueven las filas seleccionadas o todas las filas, y botones Subir y Bajar en el lado exterior que reordenan la lista Seleccionados. Un doble clic o un arrastre mueve un elemento a la otra lista, y un arrastre dentro de la lista Seleccionados la reordena.

• TsgcVCLDualListBox y TsgcFMXDualListBox, y en .NET TsgcWinFormsDualListBox, TsgcWpfDualListBox y TsgcAvaloniaDualListBox
• AvailableItems y SelectedItems, AvailableCaption y SelectedCaption, ShowCaptions y ShowReorderButtons
• SortAvailable inserta ordenados los elementos devueltos, ShowFilter añade un cuadro de filtro sobre cada lista, y ReadOnly conserva la selección y rechaza los movimientos
• MoveToSelected, MoveAllToSelected, MoveToAvailable, MoveAllToAvailable, MoveUp y MoveDown hacen lo que hacen los botones
• OnMoving puede dejar un elemento donde está, y OnChange se dispara una vez por operación
• Clic, Ctrl+clic, Mayús+clic y Ctrl+A seleccionan, Tab pasa de una lista a la otra, Ctrl+Derecha y Ctrl+Izquierda mueven, Ctrl+Arriba y Ctrl+Abajo reordenan, y la vista se refleja en formularios de derecha a izquierda
• En WPF y Avalonia SelectedItems se enlaza en ambos sentidos por defecto, y en WinForms dispara SelectedItemsChanged

La lista doble está en todas las ediciones, también en Community.

Escritura, idioma y datos

Un NumPad para paneles táctiles

Un panel táctil en la planta no tiene teclado, y el teclado del sistema cubre la mitad de la pantalla. El NumPad escribe un número con teclas lo bastante grandes para un dedo o un guante. Coloca un teclado acoplado en el formulario y escribe en el control que tiene el foco, o asocia un teclado desplegable a un control y un toque en el control abre el teclado debajo de él. El destino no necesita ningún cambio: el teclado lee su rango y sus decimales y escribe el valor como un cambio del usuario, de modo que el redondeo, los límites y OnChange del destino se ejecutan como si el usuario hubiera escrito el valor.

• TsgcVCLNumPad acoplado y TsgcVCLNumPadPopup como lista desplegable, también para FireMonkey y en .NET
• Escribe en el editor de giro, el editor de moneda, un campo de edición estándar y los indicadores de mando giratorio y de deslizador de sgcGauges
• Associate elige el destino, o el teclado sigue al control con el foco
• Una pantalla con el número escrito y una línea de límites como Min 0 Max 120

El NumPad está en todas las ediciones, también en Community. Forma parte del paquete HMI de sgcUI para pantallas de operador.

Escritura, idioma y datos

Un teclado en pantalla para quioscos y pantallas táctiles

Un quiosco, un terminal de autoservicio o un panel de operador necesita nombres, códigos y notas, además de números. El teclado en pantalla es un teclado completo construido sobre la misma vía de entrada que el NumPad. Acóplalo en el formulario y escribe en el control que tiene el foco, o asocia un teclado desplegable que se abre debajo de un editor cuando el editor recibe el foco. El teclado nunca toma el foco, de modo que el cursor y la selección del destino se quedan donde están, y un editor estándar, un memo y los controles de sgcEditors no necesitan ningún cambio.

• TsgcVCLKeyboard acoplado y TsgcVCLKeyboardPopup como lista desplegable, también para FireMonkey y en .NET para WinForms, WPF y Avalonia
• Associate elige el destino, o el teclado sigue al foco. AutoPopup, AutoPopupAll, PopupPosition y CloseOnEnter controlan la lista desplegable
• Páginas de letras, de símbolos y numérica, con Mayús, Bloq Mayús, AltGr y teclas muertas para las letras acentuadas
• Diez distribuciones integradas (en-US, en-GB, es-ES, fr-FR, de-DE, it-IT, pt-BR, nl-NL, pl-PL y tr-TR), tus propias distribuciones con sgcKeyboardRegisterLayout y una tecla de distribución que recorre Layouts
• OnKeyText cambia o cancela el texto antes de escribirlo, y OnEnterKey se ejecuta después de Intro
• Temas, formularios de derecha a izquierda y teclas que los lectores de pantalla anuncian

El teclado en pantalla está en todas las ediciones, también en Community. Forma parte del paquete HMI de sgcUI para pantallas de operador y quioscos.

Escritura, idioma y datos

Cada control habla el idioma del usuario

Los equipos internacionales y los productos multilingües necesitan fechas que se lean con naturalidad para cada usuario. Cada control tiene su propio FormatSettings, rellenado desde el idioma regional del usuario y modificable en tiempo de ejecución, así que dos controles de un formulario pueden usar incluso dos idiomas distintos. El calendario y los selectores toman de él los nombres de días y meses, los formatos de fecha y hora, las cadenas AM y PM y los separadores. FirstDayOfWeek y WeekNumbering siguen el idioma regional o tu elección, y los números usan los separadores decimal y de millares correctos. Las unidades, las sugerencias y los nombres accesibles siguen siendo propiedades tuyas, así que los traduces con el resto del formulario.

• FormatSettings por control
• FirstDayOfWeek: efdLocale o efdMonday forzado
• WeekNumbering: ewnISO8601 por defecto
• TsgcEditorLocale para modelos sin ventana
• De derecha a izquierda para árabe y hebreo: los botones de incremento, desplegable y borrado pasan al otro lado, los controles deslizantes, las valoraciones y el calendario corren desde la derecha, y el campo de edición se lee de derecha a izquierda

Escritura, idioma y datos

Comprueba todo el formulario antes de guardar

Un formulario solo está terminado cuando cada campo es correcto. El validador de sgcUICore comprueba los controles de un formulario con reglas: obligatorio, rango, longitud, expresión regular, correo electrónico, comparación con otro campo y tu propio código. Encuentra los controles igual que Smart Paste, así que comprueba por igual los controles de sgcEditors y los editores, memos, combos, casillas y selectores estándar, en VCL, FireMonkey, WinForms, WPF y Avalonia. El editor con máscara comunica un valor incompleto y el editor lookup un texto que no está en la lista, sin ninguna regla. Los errores se muestran como un marco con el color de error del tema, un icono con el mensaje como información emergente y una lista resumen opcional, y los lectores de pantalla oyen el mensaje junto con el campo. En .NET el validador también muestra los errores de tu capa de datos: IDataErrorInfo e INotifyDataErrorInfo en WinForms y WPF, los errores de validación de datos en Avalonia.

• TsgcVCLValidator, TsgcFMXValidator, TsgcWinFormsValidator, TsgcWpfValidator, TsgcAvaloniaValidator
• Reglas uvrRequired, uvrRange, uvrLength, uvrRegex, uvrEmail, uvrCompare, uvrCustom
• Trigger: uvtExit por defecto, uvtChange o uvtManual; Validate antes de guardar
• TsgcVCLValidationSummary lista los errores y da el foco al campo con un clic

En todas las ediciones, Community incluida. Las expresiones regulares coinciden con los mismos textos en Delphi 7 a 13 y en .NET.

Escritura, idioma y datos

Organiza un formulario, o genéralo a partir de tus datos

El control de diseño organiza los controles de un formulario, tanto los de sgcEditors como los estándar, en grupos, grupos con pestañas y columnas, con los títulos alineados a un mismo ancho, divisores que el usuario puede arrastrar y diseños de derecha a izquierda, y SaveLayout guarda la disposición como JSON. El formulario de datos se apoya en él. Apúntalo a un TDataSet, o enlaza un objeto de tu propia clase, y crea un control de sgcEditors por campo, las reglas de validación de cada campo, un resumen de los errores y un navegador para recorrer, añadir, editar, eliminar y guardar registros. Smart Paste rellena todo el registro a partir de un texto pegado, como una firma de correo o un bloque de dirección, y marca los campos que rellenó. En .NET, los formularios de datos de WinForms, WPF y Avalonia aceptan un DataTable, una lista o un objeto.

• TsgcVCLLayoutControl, TsgcFMXLayoutControl; SaveLayout y LoadLayout
• TsgcVCLDataForm, TsgcFMXDataForm, TsgcWinFormsDataForm, TsgcWpfDataForm, TsgcAvaloniaDataForm
• Fields: título, tipo, obligatorio, límites, grupo, pestaña y orden de cada campo; BindObject para una clase
• SmartPasteFromClipboard, SmartPasteUndo y un botón Smart Paste en el navegador

El control de diseño está en todas las ediciones, Community incluida; Delphi Community no tiene paquete de tiempo de diseño para sgcEditors, así que allí se crea en código. El formulario de datos, sus reglas de validación y su Smart Paste son solo de la edición Registrada.

Teclado, DPI y temas

Nítido en cada monitor

Los portátiles al 150 por ciento junto a monitores externos al 100 por ciento son hoy lo normal, y las entradas borrosas dan mala imagen. sgcEditors organiza cada control en píxeles lógicos a 96 DPI y lo dibuja a la escala de la pantalla, sin nada que hacer en tu código. Cuando un formulario VCL pasa a un monitor con otro DPI, el editor interior y su fuente se escalan con el control, y un desplegable se dibuja al DPI del monitor en el que se abre. Los rásteres de FireMonkey siguen la escala de la escena para Retina y Android.

• Diseño en píxeles lógicos, dibujado a la escala de la pantalla
• Los editores interiores se reescalan con WM_DPICHANGED
• Los desplegables usan el DPI de su propio monitor
• SaveToPNG admite una escala para imágenes nítidas

Teclado, DPI y temas

Claro y oscuro con una propiedad

Los formularios parecen terminados cuando todas las entradas siguen el mismo tema. Cada control tiene un Theme, un AccentColor y un TextStyle, y los colores del marco, el hover, el estado pulsado, la selección y el estado deshabilitado se derivan de ellos, así que una propiedad cambia todo el aspecto. Los tokens son los que usa cada producto sgcUI, así que los editores colocados en una tarjeta de sgcDashboard o bajo un sgcToolbar coinciden sin trabajo extra. Un control deshabilitado se funde con el fondo por sí solo. Cambia el tema en tiempo de ejecución y cada editor se repinta, listo para un ajuste de modo oscuro.

• Theme: utDefault (predeterminado, sigue el tema de la aplicación), utLight o utDark
• AccentColor para la selección, los tiradores, el relleno y el anillo de foco
• TextStyle para tamaño, negrita y color
• Los mismos tokens de tema que toda la suite sgcUI