Componentes para Delphi VCL: TDJMEdit y TDJMEditButton
He publicado en cocosistemas/TDJMEdit: un Edit mejorado para Delphi VCL el componente TEdit que he programado y utilizo en mis proyectos. Tiene formato de números, moneda, fechas, etc. Es el primer toque distintivo de una aplicación, que los números se le muestren en pantalla en un formato agradable (y.. elegante?).
Sirvan estos componentes también para ver una vez más la potencia de Delphi y/o ver cómo se programan componentes (no son muy complejos así que puedes estudiar el código).
TDJMEdit
Heredado de TEdit, sirve para:
- strings
- fechas
- números
- tiempo (hh:mm)
IMPORTANTE!!! PUEDES PROBARLO SIN NECESIDAD DE INSTALARLO, INCLUYE DEMO!!
Se incluye paquetes para instalarlo en Delphi XE2 y para instalarlo en Delphi Berlin. Cualquier versión igual o superior a la XE2 no debe dar mayor problema. Con la versión Delphi 7 no funciona (tiene cosas del lenguaje que Delphi 7 no tiene)
La demo
Los proyectos de test crean los componentes en tiempo de ejecución, así que puedes probarlo sin necesidad de instalar el componente. Son los proyectos de los directorios TestBerlin y TestXE2
Características y propiedades
editType
Evidentemente, la propiedad más importante:
- etString el Edit actúa como un edit de texto, normal
- etInteger solamente acepta números enteros, (ver más adelante la sección formato de números).
- etFloat admite números con decimales. Los que sean, no redondea, no corta decimales, deja el número tal y como haya sido tecleado
- etFloatRounded admite números con decimales. Redondea (y rellena) a decimals decimales.
- etFloatRoundedEx como etFloatRounded pero **si el número tiene más decimales de lo indicado en decimals, no redondea.
- etDate admite fechas
- etTime admite horas:minutos
por favor, sigue leyendo para ver las diferencias entre los distintos tipos de Edit
etFloat, etFloatRounded y etFloatRoundedEx
Quizás sea la característica de este componente que lo diferencie de los otros cientos de componentes que puedas encontrar en internet.
etFloat Respeta todos los decimales que tenga el número. “no le hace nada”
//nº = 1234,123713279123 -> 1234,123713279123
//nº = 1234,1237 -> 1234,1237
etFloatRounded redondea a “decimals” decimales. Si el número tiene menos, añade los necesarios.
//nº = 1234,123713279123, decimals = 3 -> 1234,124
//nº = 1234,12, decimals = 3 -> 1234,120
etFloatRoundedEx como etFloatRounded pero si el nº tiene más decimales, no lo corta/redondea
//nº = 1234,123713279123, decimals = 3 -> 1234,123713279123
//nº = 1234,12, decimals = 3 -> 1234,120
el uso de etFloatRoundedEx está pensado para trabajar por ejemplo con tres decimales, que el usuario teclee normalmente tres decimales y hasta ahí, sea como etFloatRounded, pero si, por ejemplo; estamos visualizando datos grabados en la base de datos y hubiera algún importe con más de tres decimales, que no lo redondee. Esta es la diferencia. Es algo así como ‘vamos a trabajar con x decimales, pero si tuvieramos alguno mal guardado, lo vamos a visualizar, no vamos a engañar al usuario’. Es un concepto importante. Yo soy de la opinión de mostrar en pantalla siempre lo que tenga en la base de datos, eso ahorra problemas. Por eso si estoy visualizando datos de la base de datos con este edit (ojo, a “mano”, el componente no es data-aware), si tengo alguno incorrecto, con más decimales, quiero verlo, no ocultarlos. Ese es el motivo de la existencia de etFloatRoundedEx
formato de números
Con las propiedades DecimalSeparator y THousandSeparator puedes controlar los caracteres utilizados para el signo de decimales y el de miles. Inicialmente el componente los toma de lo que tengas puesto en formatSettings http://docwiki.embarcadero.com/Libraries/Rio/en/System.SysUtils.FormatSettings
etInteger y todos los etFloat* tienen formato de números con los separadores decimal y de miles.
obteniendo/asignando valores
las propiedades valueFloat, valueInteger, valueDate, valueTime son las que debes utilizar para obtener/asignar los valores del Edit en tu programa. Mira la demo para ver como se utilizan. Para etString utiliza text, como siempre.
Utiliza la función isEmpty para ver si hay un string vacío, una fecha nula o una hora vacía. Para números esto no tiene sentido (0 no es vacío, es cero, utiliza valueFloat o valueInteger para eso).
tecleando números y fechas
El usuario no debe (ni puede) teclear los separadores, esto es:
- 12.345,65 lo teclea con 12345,65 (etFloat*, etInteger)
- 30/01/2010 lo teclea con 30012010 (etDate)
- 10:30 lo teclea con 1030 (etTime)
teclas especiales
Si se teclea ESC, el componente recupera el valor que tenía antes de OnEnter. Es como un undo de emergencia
Los caracteres . y , se intercambian. Da igual lo que teclee el usuario, se convierten a DecimalSeparator. Esto es por comodidad, el usuario no debe preocuparse por teclear . o ,.
En el caso de etDate, F2 muestra un calendario y F3 toma el dia de hoy. (creo que eso es mucho mejor que un datepicker)
las fechas van en formato dd/mm/yyyy por ahora no tengo previsto considerar otros formatos.
Con la propiedad EditKeyByTab puedes indicar qué caracter quieres que se utilize para salir del edit y pasar al siguiente control. Inicialmente se crea como el caracter intro. Es decir, por defecto, estos edits pasan de control en control con la tecla intro.
auto-completado
En etDate y etTime el componente intenta auto-completar todo lo que pueda. Así si en una fecha solo se teclea un 2 (por ejemplo), se toma el dia 2 del mes actual del año actual. Lo mismo hace con etTime
colores
El componente tiene ColorOnFocus, ColorOnNotFocus, FontColorOnFocus y FontColorOnNotFocus para cambiar el color del fondo y el texto cuando se obtiene/abandona el foco.
NumbersAlignedRight
Esta propiedad indica que los etFloat* y etInteger están alineados a la derecha.
CurrencySymbol
El símbolo de moneda. Se puede dejar en blanco y entonces no se utilizará.
personalizar
En el caso de que los colores no sean de tu gusto, los separadores… etc, no vayas modificando cada uno de los TDJMEdit de tu proyecto, pueden llegar a ser muchos. Te aconsejo que te hagas tu propio componente, heredado de este, y en el constructor le pongas tu personalización. Creo que esa es la forma correcta de hacerlo.
por favor, si vas a modificar algo, hazme un pull request, no es necesario que hagas un fork. Si puedo incorporar tus sugerencias, lo haré. Y para los bugs, abres un issue :)
DJMEditButton
Es el mismo edit, pero además tiene un speedbutton asociado. Podemos definir el tipo de imagen que aparecerá en el botón (lupa, carpeta, etc). Dispone de un evento OnClickButton donde podremos actuar en consecuencia. Muy útil para botones de búsqueda, seleccionar directorios, abrir ventanas modales de petición de datos.. cosas así.