Lección 1: Introducción | Curso de UI Emacs Lisp

Lección 1: Introducción

Emacs

Bienvenidos a un curso de Emacs Lisp orientado a las interfaces de usuario.

Doy por hecho que ya sabes programar en Emacs Lisp, si no es así, te recomiendo visitar mi curso de Emacs Lisp.

Todo lo que aprenderás en el curso se basa en el paquete widget de Emacs, que nos permite crear interfaces de usuario de forma sencilla y rápida. Para más información puedes consultar la documentación oficial de Emacs en la Web o en el propio Emacs con C-h R widget RET.

Si estas listo, y tu Emacs esta abierto, podemos iniciarnos creando una básica interfaz.

Para hacerte una idea del potencial de widget ejecutaré una interfaz de ejemplo copiada directamente de la documentación oficial.

Ejemplo de UI

Si quieres interacturar con ella, copia el siguiente código en un buffer nuevo, o en *scratch*, y evalúalo (M-x eval-buffer RET).

(require 'widget)

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

(defvar widget-example-repeat)

(defun widget-example ()
  "Create the widgets from the Widget manual."
  (interactive)
  (switch-to-buffer "*Widget Example*")
  (kill-all-local-variables)
  (make-local-variable 'widget-example-repeat)
  (let ((inhibit-read-only t))
    (erase-buffer))
  (remove-overlays)
  (widget-insert "Here is some documentation.\n\n")
  (widget-create 'editable-field
                 :size 13
                 :format "Name: %v " ; Text after the field!
                 "My Name")
  (widget-create 'menu-choice
                 :tag "Choose"
                 :value "This"
                 :help-echo "Choose me, please!"
                 :notify (lambda (widget &rest ignore)
                           (message "%s is a good choice!"
                                    (widget-value widget)))
                 '(item :tag "This option" :value "This")
                 '(choice-item "That option")
                 '(editable-field :menu-tag "No option" "Thus option"))
  (widget-create 'editable-field
                 :format "Address: %v"
                 "Some Place\nIn some City\nSome country.")
  (widget-insert "\nSee also ")
  (widget-create 'link
                 :notify (lambda (&rest ignore)
                           (widget-value-set widget-example-repeat
                                             '("En" "To" "Tre"))
                           (widget-setup))
                 "other work")
  (widget-insert
   " for more information.\n\nNumbers: count to three below\n")
  (setq widget-example-repeat
        (widget-create 'editable-list
                       :entry-format "%i %d %v"
                       :notify
                       (lambda (widget &rest ignore)
                         (let ((old (widget-get widget
                                                ':example-length))
                               (new (length (widget-value widget))))
                           (unless (eq old new)
                             (widget-put widget ':example-length new)
                             (message "You can count to %d." new))))
                       :value '("One" "Eh, two?" "Five!")
                       '(editable-field :value "three")))
  (widget-insert "\n\nSelect multiple:\n\n")
  (widget-create 'checkbox t)
  (widget-insert " This\n")
  (widget-create 'checkbox nil)
  (widget-insert " That\n")
  (widget-create 'checkbox
                 :notify (lambda (&rest ignore) (message "Tickle"))
                 t)
  (widget-insert " Thus\n\nSelect one:\n\n")
  (widget-create 'radio-button-choice
                 :value "One"
                 :notify (lambda (widget &rest ignore)
                           (message "You selected %s"
                                    (widget-value widget)))
                 '(item "One") '(item "Another One.")
                 '(item "A Final One."))
  (widget-insert "\n")
  (widget-create 'push-button
                 :notify (lambda (&rest ignore)
                           (if (= (length
                                   (widget-value widget-example-repeat))
                                  3)
                               (message "Congratulation!")
                             (error "Three was the count!")))
                 "Apply Form")
  (widget-insert " ")
  (widget-create 'push-button
                 :notify (lambda (&rest ignore)
                           (widget-example))
                 "Reset Form")
  (widget-insert "\n")
  (use-local-map widget-keymap)
  (widget-setup))

(widget-example)

Con widgets puedes moverte por los campos con TAB y ejecutar los botones con RET (o Intro).

No pretendo que entiendas que esta ocurriendo, lo irás asimilando en las siguientes lecciones. Pero si quiero aclarar el formato que usaremos para ejecutar los ejemplos o resolver las actividades:

(switch-to-buffer "Ejemplo")
(kill-all-local-variables)
(let ((inhibit-read-only t))
  (erase-buffer))
(remove-overlays)
;; ----------- Inicio de tu código ------------
(widget-create 'editable-field
	       :format "Label: %v"
	       :size 20
	       "Texto por defecto")
;; ----------- Final de tu código ------------
(use-local-map widget-keymap)
(widget-setup)
(widget-forward 1)

Ahora ya sabes que tipo de interfaces podemos lograr con Emacs. Es el momento de conocer por separado cada uno de los elementos, y alguna sorpresa, para construir prototipos o apps de todo tipo.

Iniciaremos el viaje con el componente más elemental: los botones.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario