Lección 3: Campos

En esta lección estudiaremos los diferentes tipos de campos de texto que podemos utilizar cuando creamos interfaces en Emacs. Los campos de texto son una parte fundamental de cualquier formulario ya que permite al usuario introducir datos como texto, números, fechas, etc.

`editable-field`

Es el campo de texto de una sola línea.

(widget-create 'editable-field
      :format "Label: %v"
      :size 20
      "Texto por defecto")

Mostrandose de la siguiente manera:

editable-field

Algunos atributos que podemos utilizar son:

format: Formato que se mostrará en el campo de texto. %v es el valor por defecto. Si quiero que delante exista un texto similar a un label, puedo jugar con el orden como Nombre: %v.
tag: Texto por defecto que se mostrará en el campo de texto. Si no se especifica, el campo estará vacío o utilizará el último parámetro.
size: Tamaño del campo de texto en caracteres.
help-echo: Texto te ayuda que se mostrará sobre el ratón o en el minibuffer cuando se tenga el foco. Sería el equivalente al atributo placeholder con title de HTML adaptado a Emacs.
value-face: Tipografía del texto introducido por el usuario. Por defecto es widget-field-face o tu configuración.
secret: Si se establece un carácter el texto introducido por el usuario se ocultará con dicho carácter. Por ejemplo, con :secret ?* se mostrará ***** en vez de Texto.
valid-regexp: Expresión regular que debe cumplir el texto introducido por el usuario.
error: Texto que se dará cuando no se cumpla la expresión regular.
notify: Función que se ejecutará cuando se pulse RET o C-m en el campo de texto.
keymap: Mapa de teclas que se utilizará en el campo de texto. Por defecto es widget-keymap.

El último parámetro es el valor por defecto que tendrá el campo de texto. En caso de dejarlo vacío, el campo estará vacío.

El siguiente ejemplo se crea un clásico login de usuario y contraseña.

(widget-create 'editable-field
           :format "Usuario: %v"
           :help-echo "Introduce tu usuario"
           :size 15)
(widget-create 'editable-field
           :format "Contraseña: %v"
           :help-echo "Introduce tu contraseña"
           :size 15
           :secret ?*)

Si lo vas a ejecutar por tu cuenta, recuerda la estructura mencionada con anterioridad.

`text`

Es el campo multilínea o caja de texto, similar a textarea de HTML. Sus propiedades son iguales al campo editable-field pero con una sutil diferencia: al pulsar RET (o la tecla Enter) se inserta una nueva línea en lugar de avanzar al siguiente campo.

(widget-create 'text
      :format "Label: %v"
      :size 20
      "Texto por defecto")

Campo multilinea

Vamos a ver un ejemplo de aplicación donde disponemos de un campo multilinea que transforma todo su contenido a mayúsculas.

El código es el siguiente:

(setq widget-resultado nil)
(widget-create 'text
           :format "Texto a convertir: %v"
           :size 15
           :notify (lambda (widget &rest ignore)
             (widget-value-set widget-resultado (upcase (widget-value widget)))))
(widget-insert "\n\n")
(setq widget-resultado (widget-create 'item ""))

Es importante guardar las referencias de los widgets creados para poder manilularlos posteriormente. En este código, guardamos la referencia del campo item (lo estudiaremos con más profundidad en la siguiente lección) donde se mostrará el resultado en mayusculas.

Pero no de solo campos de texto vive el formulario. En la siguiente lección aprenderemos a crear seleccionables como checkboxes, radiobuttons, desplegables y listas editables, para enriquecer la interfaz.

Actividad 1

Crea un formulario de contacto con los siguientes campos:

Nombre
Apellidos
Correo electrónico
Mensaje

El campo de mensaje debe ser un campo de texto multilínea. No es necesario que tenga funcionalidad ni que se validen los datos (lo aprenderemos más adelante). Eso sí, no olvides de incluir un botón de envío.

Actividad 2

Implementa un formulario con un campo de texto multilinea y un botón. Cuando sea pulsado, se debe dar la vuelta todo el texto introducido en el campo de texto.

Actividad 3

Realiza un explicador de conceptos que use la API de Wikipedia.

Utiliza los siguientes campos.

Texto a buscar
Botón para realizar la búsqueda

Cuando se pulse en el botón, realiza una request al endpoint https://es.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&utf8=&srsearch=gato. Si observas el final de la ruta, se esta buscando la palabra gato.

Una vez obtenido los resultados de la request, debes mostrar el snippet en el minibuffer. Lo encontrarás en query > search[0] > snippet.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario