Draft
CSS Clojure
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
resources/public/css
src
.gitignore
README.md
index.html
project.clj

README.md

Hello. This project is the place where I can keep all my thoughts about how the clojurescript port of GWT may actually look.

First here is straightforward implementation of basic GWT widgets using simple dom manipulations. It's not full completed yet:

(defn new-button [name]
  (let [button (.createElement js/document "BUTTON")]
    (set! (.-type button) "button")
    (set! (.-innerHTML button) (or name ""))
    (set-class! button :gwt-Button)))

(defn new-text-box []
  (-> (let [text-box (.createElement js/document "INPUT")]
        (set! (.-type text-box) "text")
        text-box)
    (dommy/add-class! :gwt-TextBox)
    ->TextBox))

(defn new-label-base [& {:keys [inline?]}]
  (if inline?
    (.createElement js/document "span")
    (.createElement js/document "div")))

(defn new-label []
  (let [label (new-label-base :inline? false)]
    (dommy/add-class! label :gwt-Label)))

; implementation using simple dom manipulation
(let [send-button (new-button "Send")
      name-field (new-text-box)
      error-label (new-label)]
  (dommy/add-class! send-button :sendButton)
  (dommy/append! (by-id "nameFieldContainer") name-field)
  (dommy/append! (by-id "sendButtonContainer") send-button)
  (dommy/append! (by-id "errorLabelContainer") error-label))

And now look at another version of the same UI built with Clojurescript om:

(defn button [data owner]
  (om/component
    (dom/button #js {:type "button" :className (str "gwt-Button" " " (:className data))} (:name data))))

(defn text-box [data owner]
  (reify
    om.core/IRender
    (render [_]
      (dom/input #js {:type "text" :className "gwt-TextBox"}))
    om.core/IDidMount
    (did-mount [_]
      (when (:focus? data)
        (.focus (om/get-node owner))))))

(defn label [data owner]
  (om/component
    (if (:inline? data)
      (dom/span #js {:className "gwt-Label"})
      (dom/div #js {:className "gwt-Label"}))))

(def app-state
  (atom
    {:button {:name "Send" :className "sendButton"}
     :text-box {:focus? true}
     :label {:inline? false}}))

(om/root button (:button @app-state)
  {:target (by-id "sendButtonContainer")})
(om/root text-box (:text-box @app-state)
  {:target (by-id "nameFieldContainer")})
(om/root label (:label @app-state)
  {:target (by-id "errorLabelContainer")})