1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

(ns glimmer-gfx.counter
  "The glimmer counter, rendered by gfx's own rasterizer.

   Compare examples/ in glimmer-vidya: the component is the same shape, because
   the component never knew which backend it had."
  (:require [glimmer.ratom :as ra]
            [glimmer.core :as ui]
            [glimmer-gfx.core]))          ; installs the backend

(def state (ra/atom {:count 0 :volume 40 :loud? false}))

(defn app []
  (let [{:keys [count volume loud?]} (ra/deref state)]
    [:page {:max-width 440}
     [:card {:spacing 8}
      [:title {:label "Counter"}]
      [:label {:label (str "Count: " count)}]
      [:hbox {:spacing 8}
       [:button {:label "- 1" :on-click #(ra/swap! state update :count dec)}]
       [:button {:label "+ 1" :kind :primary
                 :on-click #(ra/swap! state update :count inc)}]
       [:button {:label "reset" :on-click #(ra/swap! state assoc :count 0)}]]
      [:spacer {:size 6}]
      [:label {:label "Volume" :dim true}]
      [:slider {:value volume :min 0 :max 100
                :on-change #(ra/swap! state assoc :volume (long %))}]
      [:checkbox {:label "loud" :checked loud?
                  :on-click #(ra/swap! state update :loud? not)}]]]))

(defn -main [& _]
  (ui/run app :title "glimmer-gfx" :width 480 :height 340))