Building User Interfaces with Seesaw

Clojure/West 2012

Dave Ray (@darevay)

So, about Swing ...

So, about Swing ...

• Missed Abstractions
• Backwards Compatibility
• Neglect
• Arms and Legs

So, about Swing ...

• StackOverflow
• Ghost Town Forums
• No Fun

      (some #{:easy :simple} swing)
      ;=> nil
      

So, about Swing ...

• Stable, available, no dependencies

Seesaw's Goals

• Unified Abstractions
• Address Swing gotchas, hacks and workarounds
• Common case easy. Every case possible.

Make Me a Widget

Shortcuts/Color

:red

"#F00"

"#FF0000"

:my-app.core/my-color-resource

Shortcuts/Font

"ARIAL-BOLD-18"

{:name "ARIAL" :style :bold :size 18}

(seesaw.font/font :name "ARIAL"
                  :style :bold
                  :size 18)
      

:my-app.core/my-font-resource

Shortcuts/Icons

"http://example.com/icon.png"

(clojure.java.io/resource "path/to/icon.png")

:my-app.core/my-icon-resource

Shortcuts/Misc

; Keystroke
"ctrl C"
      

; Dimensions
[640 :by 480]
      

; Borders
[5 "Compound" 10]
      

Tell a Widget

(config! my-label :background :red
                  :foreground "#00FF00")
;=> my-label
      

Ask a Widget

(config my-label :background)
;=> #<Color java.awt.Color[r=255,g=0,b=0]>
      

What's a Widget Worth?

Inspired completely by Stathis Sideris' Clarity

What's a Widget Worth?

(value (textbox :text "HI"))
;=> "HI"
      

(value (slider :min 0 :max 11 :value 6))
;=> 6
      

(-> (combobox :model [1 2 3 4])
  (selection! 3)
  value)
;=> 3
      

(def form
  (grid-panel :columns 2
    :items ["First Name" (text :id :first-name)
            "Last Name"  (text :id :last-name)
            "Sex"        (combobox :id :sex
                              :model ["Female" "Male"])
            "Age"        (spinner  :id :age)]))
      

(-> (dialog :content form) pack! show!)
;=> :success
      

(value form)
=> {:first-name "Philip",
    :last-name  "Glass",
    :sex        "Male",
    :age        75}
      

Events: What Just Happened?

Events/Java+Swing

public interface MouseListener {
  void mouseClicked(MouseEvent e);
  void mouseEntered(MouseEvent e);
  void mouseExited(MouseEvent e);
  void mousePressed(MouseEvent e);
  void mouseReleased(MouseEvent e);
}

JLabel label = new JLabel();
label.addMouseListener(new MouseListener() {...});

      

Events/Clojure+Swing

(.addMouseListener my-panel
  (proxy [MouseAdapter] []
    (mouseClicked [this e]
      ... do something ...)))

(.addMouseMotionListener my-panel
  (proxy [MouseMotionAdapter] []
    (mouseMoved [this e]
      ... do something ...)))

(.addComponentListener my-panel
  (proxy [ComponentAdapter] []
    (componentResized [e]
      ... do something ...)))
      

Events/Seesaw

(listen my-panel
  :mouse-clicked     (fn [e] ... do something ...)
  :mouse-moved       (fn [e] ... do something ...)
  :component-resized (fn [e] ... do something))
      

Events/:selection

// List

JList myList = ...;
myList.addListSelectionListener(...);
      

(listen my-list :selection (fn [e] ...))
      

Events/:selection

// Tree

JTree myTree = ...;
myTree.addTreeSelectionListener(...);

// seriously?
      

(listen my-tree :selection (fn [e] ...))
      

Events/:selection

// Table

JTable myTable = ...;
myTable.getListSelectionModel()
       .addListSelectionListener(...);

// oh, come on.
      

(listen my-table :selection (fn [e] ...))
      

Events: Selection

// Group of mutually exclusive radio buttons
Enumeration<AbstractButton> bs =
  myButtons.getElements();

for(; bs.hasMoreElements();) {
  bs.nextElement().addItemListener(...);
}

// WTF, eh?
      

(listen buttons :selection (fn [e] ...))
      

Binding

Binding

(require '[seesaw.bind :as b])

(def safety        (checkbox :text "Safety"
                             :selected? false))

(def fire-missiles (button :text "Fire!"
                           :enabled? false))

(b/bind
  safety
  (property fire-missiles :enabled?))
      

Binding: tee + transform

...

(def status        (label :text "Safe"))

(b/bind
  safety
  (b/tee
    (property fire-missiles :enabled?)
    (b/bind
        (b/transform #(if % :red :green))
        (property status :background))
    (b/bind
        (b/transform #(if % "Armed" "Safe"))
        (property status :text))))
      

Binding: (inc)

(def volume-control (slider :min 0 :max 11 :value 5))

(def volume-atom (atom 5))

(b/bind volume-control
        volume-atom
        volume-control)
      

What About Those :ids?

How do you separate layout from behavior?

Selectors: Enlive + Swing

Select by :id

(select panel [:#first-name])
;=> JTextField
      

Select by :class

(select panel [:.dangerous])
;=> (JButton JButton JButton ...)
      

Select all children of widget with class :foo

 (select root [:.foo :> :*])
      

... and many, more

Selectors: Enlive + Swing

Plays nicely with "vectorized" config!

; Disable everything
(config! (select panel [:*]) :enabled? false)
      

Plays nicely with "vectorized" listen

; Add action handler to all widgets
; with class :dangerous
(listen (select panel [:.dangerous])
        :action (fn [e] ...))
      

Selectors: Enlive + Swing

Separate layout from behavior

(button   :id :open-doors :text "Open Pod Bay Doors")
(checkbox :id :safety :text "Safety")
(button   :id :launch-missiles :class ...)
(button   :id :fire-torpedoes :class :dangerous ...)

  ...
      

(defn add-behaviors [root]

  (listen (select root [:#open-doors]) :action
    (fn [_] ...))

  (listen (select root [:#safety]) :selection
    (fn [e]
      (config! (select root [:.dangerous])
               :enabled? (not (selection e)))))

  ...

"Seesaw is amazing and wonderful, but it still doesn't do much good for people who don't know Java/Swing already"

But wait, there's more!

Test Suite, i18n, Graphics, Improved layout, SwingX, Timers, DnD, Full screen, ...

All new for Summer 2012! Upshot

Seesaw's JavaFX-based Cousin

https://github.com/daveray/upshot

Recap

; Construct a widget
(def my-text (text :id :my-text :text "Hi" :font ...))
;=> #<JLabel ...>

; Change a widget
(config! my-text :enabled? false)
;=> #<JLabel ...>
      

; Get a widget's value
(value my-text)
;=> "Hi"
      

; Find out when things happen
(listen my-text :focus-gained (fn [e] ...))

; Bind widgets together
(bind my-text (property my-label :text))
      

; Find a widget
(select root [:#my-text])
;=> <JLabel ...>
      

; Explore a widget
(show-options my-text)

(show-events my-text)

      

Thanks!

• https://github.com/daveray/seesaw
• @darevay