TextField: Introducción de texto

El hecho de que Xojo sea un IDE significa, entre otras muchas cosas, que ofrece una completa librería de controles gráficos listos para usar en el diseño gráfico de las interfaces de usuario de nuestras aplicaciones, y varios de ellos están relacionados con la entrada de datos por parte de los usuarios. Uno de los principales es el TextField, disponible para la creación de aplicaciones Desktop, Web (WebTextField) y iOS (iOSTextField). Se trata del más básico y admite una única línea de texto. Eso sí, no por ello deja de ser un control realmente flexible.

Definir contenido: Text

La propiedad más importante de este control es Text, puesto que con ella podremos recuperar el texto que haya tecleado el usuario sobre dicho campo de texto y también podremos asignar cualquier otro contenido de tipo texto (Text o String) para que sea mostrado por el control en cuestión, con la particularidad de que podrá ser editado por el usuario. Dicha propiedad está disponible en todas las plataformas de despliegue soportadas sin variaciones.

Evidentemente, podemos definir el texto mostrado como punto de partida por el control en el apartado Initial State del Panel Inspector. Aquí también encontramos la propiedad CueText, en aplicaciones Desktop y Web, o PlaceHolder en las aplicaciones iOS. En cualquier caso, el texto introducido aquí será el mostrado de forma discreta por el control cuando esté vacío, ofreciendo así una indicación al usuario del tipo de entrada esperada por la aplicación.

Opcionalmente, la implementación Desktop y Web de este control también ofrece la propiedad HelpTag. Aquí es donde podremos introducir el texto a mostrar al usuario, como pequeña ayuda, sobre el proósito del control. Dicho texto se mostrará automáticamente cuando el usuario deje el apuntador del ratón sobre el ratón durante un breve periodo de tiempo.

Contraseñas

En otros casos también es muy conveniente la propiedad de tipo booleano Password. Cuando se activa dicha propiedad, el contenido del TextField será sustituido por una sucesión de boliches para que no resulte visible tanto cuando es el usuario quien teclea como cuando definimos el contenido mediante código. La activación de la propiedad Password resulta idónea para la introducción de contraseñas, tal y como indica su nombre.

Al igual que ocurre con la propiedad Text, la propiedad Password está disponible en la creación y despliegue de aplicaciones Desktop (macOS, Windows, Linux), así como en Web y móvil nativo iOS. La única particularidad en este sentido es que aquellos navegadores que lo soporten, como puede ser el caso de Safari en macOS, detectarán el control como campo de texto de contraseña ofreciendo la capacidad de guardarla o bien de rellenarla con un preajuste previamente guardado. En el caso de las aplicaciones iOS el comportamiento también será el habitual en las aplicaciones nativas de este tipo, mostrando rápidamente el texto de la tecla pulsada antes de ocultarlo a continuación con el símbolo del boliche.

Aspecto del TextField

Sobre las propiedades relacionadas fundamentalmente con el aspecto que tendrá el texto mostrado por este control, en el apartado Atributos del Panel Inspector de un TextField de escritorio podemos determinar tanto el tipo, como el tamaño y estilo, al igual que sucede también en el uso de dicho control en las aplicaciones iOS; mientras que en el área principal del Inspector de Propiedades podremos cambiar la alineación del texto, el color de texto y también color de fondo (sólo en Desktop, no así en iOS).

En el caso de las aplicaciones Web, todas las cuestiones relativas al estilo del texto vendrán determinadas por la asignación de un Estilo Web definido previamente, y cuya creación y asignación puedes ver en el vídeo que acompaña a esta entrada.

Particularidades por plataforma

El uso de este control en las aplicaciones Desktop también permite configurar otras características de su aspecto, tal y como pueda ser por ejemplo el uso de un borde (no es posible definir su color y/o grosor), el uso de un anillo de enfoque característico para indicar que es el control activo para aceptar las pulsaciones de teclado, y la capacidad ya indicada de aceptar un color de fondo; algo que también es posible en el uso del control en aplicaciones Web, mediante la correspondiente propiedad en la definición de un estilo web.

Limitar texto introducido

Existen varias formas de limitar el texto introducido, ya sea por tipo o por cantidad. La más sencilla es obviamente esta segunda opción, disponible tanto en la implementación del control para las aplicaciones Desktop como Web mediante el uso de la propiedad LimitText.

Aplicar formato al texto introducido

Son muchos los tipos de aplicaciones en los que deseariamos aplicar un formato detemrinado al texto introducido por el usuario, y de hecho en las propiedades del TextField encontraremos la forma de hacerlo, si bien de modos diferentes y con mayor o menor flexibilidad en función de que se trate de una aplicación Desktop, Web o iOS.

Desktop

Por ejemplo, en el uso del TextField con las aplicaciones Desktop (macOS, Windows, Linux) podemos utilizar la propiedad Mask para aplicar un formato determinado a los datos introducidos. En este caso, el formato se aplicará cuando el control pierda el foco. Por ejemplo, la siguiente secuencia aplicada a la propiedad Mask:

###,###.00\ \€

El TextField formateará automáticamente el número: 123456 como

123.456,00 €

Ten en cuenta que si bien en la definición hemos utilizado la notación anglosajona (la coma como separador de miles y el punto como separador de decimales), nuestra aplicación aplicará los ajustes regionales configurados en el equipo sobre el que se ejecute la aplicación. Es decir, lo hará correctamente.

Web

Más que de una aplicación de formato, en este caso podríamos hablar de una combinación entre formato y restricción. Para ello se puede seleccionar cualquiera de las opciones recogidas en el menú desplegable Type bajo el apartado Appearance del Panel Inspector:

• Normal. El WebTextField admitirá y mostrará cualquier texto asignado.
• Password. Como se ha indicado en el apartado anterior, se comportará como un campo de texto para la introducción de contraseñas.
• E-mail Address. El control mostrará un anillo de error (en color rojo) si el texto introducido no corresponde a una dirección de correo; si bien solo diferencia la presencia del signo de arroba (‘@’) y la presencia de un punto (‘.’) en la composición del texto introducido.
• Number. En este caso el control mostrará un anillo de error si su contenido no es exclusivamente numérico. Es similar al ejemplo visto con el uso de Mask para una aplicación de escritorio, salvo que en este caso el control suma unos pequeños elementos para aumentar o reducir su valor numérico en pasos de uno.
• Telephone Number. En principio debería de aceptar un número telefónico como valor, si bien en la práctica (y en el momento de escribir esto) admite cualquier tipo de dato.
• URL. Al igual que en el anterior caso, debería de admitir y mostrar únicamente el contenido correspondiente a una composición válida de URL, si bien en la práctica admite cualquier tipo de contenido de texto.

iOS

En este caso se trata más bien de indicar el tipo de teclado que se mostrará cuando el usuario de la aplicación haga tap sobre el control de texto, pudiendo elegir así el más adecuado para la introducción de valores numéricos, URL, e-mail o texto general, entre algunas de las múltiples opciones disponibles.