1. Introduction

Welcome to an Emacs Lisp course focused on user interfaces.

I assume you already know how to program in Emacs Lisp; if that is not the case, I recommend visiting my Emacs Lisp course.

Everything you will learn in the course is based on the Emacs widget package, which lets us create user interfaces quickly and easily. For more information you can check the official Emacs documentation on the Web or within Emacs itself with C-h R widget RET.

If you are ready, and your Emacs is open, we can get started by creating a basic interface.

To give you an idea of the power of widget, I will run an example interface copied directly from the official documentation.

If you want to interact with it, copy the following code into a new buffer, or into *scratch*, and evaluate it (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)

With widgets you can move between the fields with TAB and run the buttons with RET (or Enter).

I do not expect you to understand what is happening; you will gradually absorb it in the following lessons. But I do want to clarify the format we will use to run the examples or solve the activities:

(switch-to-buffer "Ejemplo")
(kill-all-local-variables)
(let ((inhibit-read-only t))
  (erase-buffer))
(remove-overlays)
;; ----------- Start of your code ------------
(widget-create 'editable-field
           :format "Label: %v"
           :size 20
           "Default text")
;; ----------- End of your code ------------
(use-local-map widget-keymap)
(widget-setup)
(widget-forward 1)

Now you know what kind of interfaces we can achieve with Emacs. It is time to get to know each of the elements separately, plus a surprise or two, so we can build prototypes or apps of all kinds.

We will begin the journey with the most elementary component: buttons.