Walkthrough and simple app

docs/CodeWalkthrough.md

@@ -51,12 +51,13 @@ This app:
 XXX screenshot
 
 To run the code:
-A. Install Java 8  (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
-B. Install leiningen  (http://leiningen.org/#install)
+ * Install Java 8  (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
+ * Install leiningen  (http://leiningen.org/#install)
 
-1. git clone https://github.com/Day8/re-frame.git
-2. cd re-frame/examples/simple
-3. lein do clean, figwheel
+Then:
+1. `git clone https://github.com/Day8/re-frame.git`
+2. `cd re-frame/examples/simple`
+3. `lein do clean, figwheel`
 4. open http://localhost:3449/example.html
 
 
@@ -472,7 +473,7 @@ It has two tasks:
 ```clj
 (defn ^:export run
   []
-  (dispatch-sync [:initialize])     ;; puts a value into application state
+  (rf/dispatch-sync [:initialize])     ;; puts a value into application state
   (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                   (js/document.getElementById "app")))
 ```

examples/simple/devsrc/simple/dev.cljs

@@ -1,5 +1,5 @@
-(ns simpleexample.dev
-  (:require [simpleexample.core :as example]
+(ns simple.dev
+  (:require [simple.core :as example]
             [figwheel.client :as fw]))
 
 (fw/start {:on-jsload example/run

examples/simple/project.clj

@@ -11,7 +11,7 @@
 
   :profiles {:dev {:cljsbuild
                    {:builds {:client {:source-paths ["devsrc"]
-                                      :compiler     {:main "simpleexample.dev"
+                                      :compiler     {:main "simple.dev"
                                                      :asset-path "js"
                                                      :optimizations :none
                                                      :source-map true

examples/simple/src/simple/core.cljs

@@ -39,13 +39,10 @@
 ;; -- Domino 4 - Query  -------------------------------------------------------
 
 (rf/reg-sub
-  :time-str
+  :time
   (fn [db _]     ;; db is current app state. 2nd usused param is query vector
     (-> db
-        :time
-        .toTimeString
-        (clojure.string/split " ")
-        first)))
+        :time)))
 
 (rf/reg-sub
   :time-color
@@ -58,15 +55,18 @@
 (defn clock
   []
   [:div.example-clock
-   {:style {:color (rf/listen [:time-color])}}
-   (rf/listen [:time-str])])      ;; XXX listen
+   {:style {:color @(rf/subscribe [:time-color])}}
+   (-> @(rf/subscribe [:time])
+       .toTimeString
+       (clojure.string/split " ")
+       first)])
 
 (defn color-input
   []
   [:div.color-input
    "Time color: "
    [:input {:type "text"
-            :value (rf/listen [:time-color])
+            :value @(rf/subscribe [:time-color])
             :on-change #(rf/dispatch [:time-color-change (-> % .-target .-value)])}]])  ;; <---
 
 (defn ui
@@ -80,7 +80,7 @@
 
 (defn ^:export run
   []
-  (dispatch-sync [:initialize])     ;; puts a value into application state
+  (rf/dispatch-sync [:initialize])     ;; puts a value into application state
   (reagent/render [ui]              ;; mount the application's ui into '<div id="app" />'
                   (js/document.getElementById "app")))