Lección 2: Botones | Curso de UI Emacs Lisp

Lección 2: Botones

En este capítulo vamos a profundizar en el uso de los botones y sus propiedades.

En Emacs disponemos de 4 tipos de widgets que nos permiten crear elementos pulsables, los cuales ejecutarán una acción cuando sean pulsados. Se diferencian entre sí por su aspecto visual o su comportamiento.

El widget link es el botón más sencillo de todos, ya que se trata de un texto envuelto entre 2 caracteres que al pulsarlo ejecuta una acción.

(widget-create 'link
               :notify (lambda (&rest ignore)
                         (message "¡Hola mundo!"))
                "Púlsame")

Mostrará el siguiente resultado:

[Púlsame]

Obligatoriamente debemos definir la propiedad :notify para indicar la acción que se ejecutará al pulsar el botón y el texto ("Púlsame") que se mostrará en el botón. Opcionalmente podemos definir las propiedades :widget-link-prefix y :widget-link-suffix para añadir un texto antes y después del texto del botón.

El widget url-link es similar al widget link, pero en lugar de ejecutar una acción al pulsarlo, abre una URL en el navegador. Para saber que navegador debe abrir se utiliza la variable browse-url-browser-function.

;; Abrir URLs en el navegador por defecto
(setq browse-url-browser-function 'browse-url-default-browser)

;; Abrir URLs en el navegador EWW
(setq browse-url-browser-function 'eww-browse-url)

(widget-create 'url-link
               :url "https://www.google.com"
               "Google")

Mostrará el siguiente resultado:

[Google]

Obligatoriamente debemos definir la propiedad :url para indicar la URL que se abrirá en el navegador y el texto ("Google") que se mostrará en el botón. Opcionalmente podemos definir las propiedades :widget-link-prefix y :widget-link-suffix para añadir un texto antes y después del texto del botón.

El widget info-link es similar al widget link, pero en lugar de ejecutar una acción al pulsarlo, abre un nodo de Info.

Un nodo de Info es un documento de texto plano que contiene información sobre un tema en concreto.

(widget-create 'info-link
               :node "emacs"
               "Emacs")

Mostrará el siguiente resultado:

[Emacs]

Obligatoriamente debemos definir la propiedad :node para indicar el nodo de Info que se abrirá y el texto ("Emacs") que se mostrará en el botón. Opcionalmente podemos definir las propiedades :widget-link-prefix y :widget-link-suffix para añadir un texto antes y después del texto del botón.

push-button

El widget push-button es similar al widget link.

(widget-create 'push-button
               :notify (lambda (&rest ignore)
                         (message "¡Hola mundo!"))
               :help-echo "Púlsame"
               "Púlsame")

Mostrará el siguiente resultado:

[Púlsame]

Obligatoriamente debemos definir la propiedad :notify para indicar la acción que se ejecutará al pulsar el botón y el texto ("Púlsame") que se mostrará en el botón. Opcionalmente podemos definir las propiedades :help-echo para mostrar un texto al cuando el ratón pase por encima del botón o esté el cursor encima.

Ejemplo

Vamos a realizar un buffer con el listado de nuestros marcadores favoritos, para rápidamente acceder a los sitios que más visitamos.

A continuación puedes ver el código:

;; -*- coding: utf-8 -*-
;; Imports
(require 'widget)

(eval-when-compile
  (require 'wid-edit))

;; Variables
(defvar buffer-name "*Bookmarks*")
(setq browse-url-browser-function 'eww-browse-url)
(defvar list-bookmark '(("Google" . "https://www.google.com")
                        ("DuckDuckGo" . "https://duckduckgo.com")
                        ("Emacs" . "https://www.gnu.org/software/emacs/")
                        ("Org" . "https://orgmode.org")
                        ("Reddit" . "https://www.reddit.com")
                        ("Youtube" . "https://www.youtube.com")))

;; Functions

(defun main-layout ()
  "Make widgets for the main layout."
  (interactive)
  ;; Create the buffer
  (switch-to-buffer buffer-name)
  ;; Clear the buffer
  (kill-all-local-variables)
  (let ((inhibit-read-only t))
    (erase-buffer))
  (remove-overlays)
  ;; Title
  (widget-insert "Bookmarks\n\n")
  ;; Create the widgets
  (dolist (bookmark list-bookmark)
    (widget-create 'url-link
		   :url (cdr bookmark)
		   (car bookmark))
    (widget-insert "\n\n"))
  ;; Display the buffer
  (use-local-map widget-keymap)
  (widget-setup)
  ;; Focus on the first link
  (widget-forward 1))
;; Initialization
(main-layout)

Ya podemos pulsar para ir a diferentes lugares o ejecutar funciones propias, pero no escribir. En el siguiente capítulo veremos los diferentes tipos de campos de texto.

Actividad 1

Crea una botón que cuando sea pulsado te diga el porcentaje del año que nos encontramos actualmente. Muestra el resultado en el minibuffer.

Por ejemplo:

  • Si estamos a 1 de enero, mostrará 0%
  • Si estamos a 1 de julio, mostrará 50%
  • Si estamos a 31 de diciembre, mostrará 100%
Actividad 2

Muestra 2 botones que cambien el color de fondo del buffer a rojo y azul respectivamente.

Actividad 3

Realiza un botón que cuando sea pulsado muestre el titulo del último artículo de Hacker News en el minibuffer.

Necesitarás realizar una petición HTTP a la API de Hacker News para el id del último artículo.

https://hacker-news.firebaseio.com/v0/maxitem.json

y con la id recoger el título con la siguiente ruta:

https://hacker-news.firebaseio.com/v0/item/38899706.json

Siendo 38899706 la id obtenida con el anterior endpoint.

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) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario