BUILDING DECLARATIVE GUIS WITH CLOJURE, JAVAFX AND FN-FX DR. NILS BLUM-OESTE

Transcription

1 BUILDING DECLARATIVE GUIS WITH CLOJURE, JAVAFX AND FN-FX DR. NILS BLUM-OESTE

2 INTRODUCTION AND WHY? Reasons to build a desktop app with JavaFX

3 WHY DO I NEED A SOLUTION FOR DESKTOP GUIS? Working on an application for statistical analysis in science and research

4 WHY NOT ELECTRON? (a.k.a. "What the hell is wrong with you?")

5 WHAT IS JAVAFX?

6 HOW TO USE FN-FX Application state, declaring UIs and handling events

7 ENTRY POINT AND STATE MANAGEMENT (def app-state (atom {})) (defn start [] (let [handler-fn #(swap! app-state handle-event %) ui-state (agent (fx-dom/app handler-fn))] (add-watch app-state :ui (fn [ _ new-state] (send ui-state #(fx-dom/update-app % (stage new-state)))))))

8 UI DECLARATION (defui Stage (render [this {:keys [project-name] :as state}] (controls/stage :title "App Title" :shown true :scene (controls/scene :root (controls/button :text (str "Show " project-name))))))

9 UI EVENTS Declaration: (controls/button :text "Open file" :on-action {:event :open-file :fn-fx/include {:fn-fx/event #{:target}}}) (defmulti handle-event (fn [_ {:keys [event]}] event)) Handling: (defmethod handle-event :open-file [state {:keys [fn-fx/includes]}] (let [window (-> (get-in includes [:fn-fx/event :target]).getscene.getwindow) dialog (doto (FileChooser.) (.settitle "Open file")) file (util/run-and-wait (.showopendialog dialog window))] (assoc state :file file)))

10 HOW DOES IT WORK? Reflection and Diffing!

11 (defui Table (render [this {:keys [data]}] (controls/table-view :columns (map-indexed (fn [index name] (table-column {:index index :name name})) (first data)) :items (rest data) :placeholder (controls/label :text "Import some data first")))) REFLECTION: EXAMPLE

12 REFLECTION: IMPLEMENTATION fn-fx.render-core: (defn get-setter [^Class klass prop] (let [prop-name (str "set" (util/kabob->class (name prop))) ^Method method (->> (.getmethods klass) (filter #(= prop-name (.getname ^Method %))) (filter #(= 1 (count (.getparameters ^Method %)))) first) _ (assert method (str "No property " prop " on type " klass)) to-type (.gettype ^Parameter (first (.getparameters method)))] (.setaccessible method true) (fn [inst val] (let [^objects arr (make-array Object 1)] (aset arr 0 (convert-value val to-type)) (.invoke method inst arr)))))

13 DIFFING: RECURSIVELY DIFF UI-STATE fn-fx.diff: (defn diff [dom a b] (let [refresh-node (fn [node compo-a compo-b] (set-once! compo-b :dom-node node) (diff-component dom node (:props compo-a) (:props compo-b)) node) new-node (fn [compo] (let [node (create-component! dom (:type compo))] (assert node "No Node returned by create-component!") (refresh-node node nil compo)))] (condp = [(val-type a) (val-type b)] [:nil :comp] (->Created (new-node b)) [:val :val] (if (= a b) (->Noop b)

14 MY CONCLUSIONS SO FAR halgari/fn-fx brings the "React model" to the JVM no major road blocks so far, but: fn-fx in alpha very little documentation, check the example code some changes to fn-fx were required some non-trivial issues to work around I will continue working with it

15 THANKS! Full demo on GitHub: bit.ly/fnfx-example Need a freelancer? nils@blum-oeste.de Time for your questions!

16 SUPPLEMENTARY

17 HOW DOES IT LOOK?

18 EVENT INCLUDES (defn gather-event-data "Given an instance object and and event, gather information from the template's include specs and add them to the template." [inst event {:keys [fn-fx/include] :as template}] (assoc template :fn-fx/includes (reduce-kv (fn [acc id props] (if-let [node (if (= id :fn-fx/event) event (tree-search/find-nearest-by-id inst (str id)))] (assoc acc id (reduce (fn [acc prop] (assoc acc prop (get-property node prop)))

19 MANDATORY CONSTRUCTOR ARGUMENTS (defui Plot (render [this {:keys [data]}] (diff/component [:javafx.scene.chart.scatterchart [] [(javafx.scene.chart.numberaxis.) (javafx.scene.chart.numberaxis.)]] {:data (data->series data)})))

20 INITIALIZATION AND FORCE CLOSING PROCESS (ns fn-fx-ui.javafx-init (:require [fn-fx-ui.core :as core]) (:gen-class :extends javafx.application.application)) (defn -start [app stage] (core/start {:root-stage? false})) javafx-init.clj: (defn -main [& args] (javafx.application.application/launch fn_fx_ui.javafx_init (into-array String args))) (defn force-exit [root-stage?] (reify javafx.event.eventhandler (handle [this event] (when-not root-stage? (println "Closing application") (javafx.application.platform/exit))))) core.clj: