I want to get this behavior: when the button is pressed with user the button's text and the label's text should are changed together.
But the problem is button and label have the equal name of keys for the text properties. And I can't store equal keys in one hash-map.
;;I have two atoms keeps the state of button text and state of label text
(def *button-text (atom
{:text "click me"}))
(def *label-text (atom
{:text "press the button"}))
;;I have the root function which should accepts arguments for button and label props.
But these props have equal names - text - and I can't store two equal keys in one map.
{:fx/type root
:text (:text *button-text)
:text (:text *label-text)}
;;This will cause an error.
This is how I solved this problem. But is too much of the code and out of normal way.
(ns examp.core
(:gen-class)
(:require [cljfx.api :as fx])
(:import [javafx.application Platform]))
(def *button-text (atom
{:text "click me"}))
(def *label-text (atom
{:text "press the button"}))
(def renderer (fx/create-renderer))
(defn root [{:keys [one two]}]
(let [button-text (:text one)
label-text (:text two)]
{:fx/type :stage
:showing true
:title "Window"
:width 250
:height 150
:scene {:fx/type :scene
:root {:fx/type :v-box
:alignment :center
:spacing 10
:children [{:fx/type :label
:text label-text}
{:fx/type :button
:min-width 100
:min-height 50
:text button-text
:on-action (fn [_]
(if (= button-text "click me")
(do
(swap! *button-text assoc :text "clicked")
(swap! *label-text assoc :text "button is pressed")
(renderer
{:fx/type root
:one #*button-text
:two #*label-text}))
(do
(swap! *button-text assoc :text "click me")
(swap! *label-text assoc :text "presse the button")
(renderer
{:fx/type root
:one #*button-text
:two #*label-text}))))}]}}}))
(defn -main [& args]
(Platform/setImplicitExit true)
(renderer {:fx/type root
:one #*button-text
:two #*label-text}))
Before I will show you my attempt, here is the link to the official Cljfx examples repository. These examples should be useful for you, as they show practices for managing app state, event handling and so on.
For this situation, I recommend studying e05_fn_fx_like_state.clj- this is also an example I based my code on:
(ns examp.core
(:require [cljfx.api :as fx])
(:gen-class))
(def *state
(atom {:label-text "Click the button."
:button-text "Click me!"}))
(defn root [{:keys [label-text button-text]}]
{:fx/type :stage
:showing true
:title "Window"
:width 250
:height 150
:scene {:fx/type :scene
:root {:fx/type :v-box
:alignment :center
:spacing 10
:children [{:fx/type :label
:text label-text}
{:fx/type :button
:text button-text
:min-width 100
:min-height 50
:on-action {:key :button-action}}]}}})
(defn map-event-handler [event]
(when (= (:key event) :button-action)
(if (= (:button-text #*state) "Click me!")
(reset! *state {:label-text "The button was clicked!"
:button-text "Clicked!"})
(reset! *state {:label-text "Click the button."
:button-text "Click me!"}))))
(def renderer
(fx/create-renderer
:middleware (fx/wrap-map-desc root)
:opts {:fx.opt/map-event-handler map-event-handler}))
(defn -main [& args]
(fx/mount-renderer *state renderer))
Related
Hi guys I'm new at Clojure and ClojureScript...
I'm filling out 2 select element ... What I wonna do is update the second select depending on what option the user choose in the first select.
This is my code:
(ns easy-recipe.components.calculate
(:require [reagent.core :as r :refer [atom]]
[ajax.core :as ajax]
[reagent.session :as session]
[easy-recipe.components.common :refer [input select button]]
[easy-recipe.bulma.core :refer [horizontal-select horizontal-input-has-addons table columns box]]))
(defn handler [request]
(session/put! :categories (get-in request [:body :categories]))
(session/put! :breads (get-in request [:body :breads]))
(session/put! :recipes (get-in request [:body :recipes])))
(defn error-hadler [request]
(let [errors {:server-error (get-in request [:body :erros])}]
errors))
(defn get-categories-breads-recipes []
(ajax/GET "/api/calculate"
{:handler handler
:error-hadler error-hadler}))
(defn select-fun-wrapper [breads]
(fn [e]
(let [category_value (-> e .-target .-value)]
(reset! breads
(filter
#(= category_value (str (% :category_id)))
(session/get :breads))))))
(defn calculate-page []
(get-categories-breads-recipes)
(let [fields (atom {})
categories (atom nil)
breads (atom nil)
recipe (atom nil)]
(fn []
(reset! categories (session/get :categories))
;(reset! breads (filter #(= 1 (% :category_id)) (session/get :breads)))
[:div.container
[box
[horizontal-select "Category"
[select "category" "select" #categories (select-fun-wrapper breads)]]
[horizontal-select "Bread"
[select "bread" "select" #breads #()]]
[horizontal-input-has-addons "Quantity"
[input "quantity" "input" :text "" fields]
[button "quantity-btn" "button" "Add" #() nil]]]
[box
[columns
[table ["Ingredients" "Quantity"] #recipe]
[table ["Product" " "] [["30 Panes" "x"]]]]]])))
As you have noticed the breads reset! is commented... now the "select-fun-wrapper" is working fine, it updates the bread select depening on the category option selected... but if I uncomment that line the "select-fun-wrapper" will stop working (not updating the second select)... I wonna know why does it happend?
I can not leave this line commented because right now I have the problem thar the "Bread" select starts empthy... How could I fill the bread atom without using the reset! function?
Extra code (if it makes it clear):
(ns easy-recipe.bulma.core)
(defn horizontal-select [label select]
[:div.field.is-horizontal
[:div.field-label.is-normal>label.label label]
[:div.field-body>div.field.is-narrow>div.control>div.select.is-fullwidth
select]])
....
(ns easy-recipe.components.common)
(defn select [id class options function]
[:select {:id id :class class :on-change function}
(for [opt options]
^{:key (opt :id)}
[:option {:value (opt :id)} (opt :name)])])
....
I have a component:
(defn inner-input [cljs_element activeEl title]
(let [form (atom title)]
(fn [cljs_element activeEl title]
[:input {:type "text"
:onChange #(reset! form (.. % -target -value))
:on-blur #(change-title cljs_element (.. % -target -value))
:style {:display (if (:active (:node cljs_element)) "block" "none")
:width (* (+ 1 (count #form)) 8)
:max-width 730
:min-width 170}
:value #form}])))
It is nested in other component:
(defn card-input [cljs_element activeEl]
(fn [cljs_element activeEl]
(let [title (:title (:node cljs_element))]
[:div
[inner-input cljs_element activeEl title]])))
When i type data to the input in the inner-input component, i need update the local state form. And when the outer component card-input updates i want to reset my form to new title prop from argument. How can i achieve that?
I tried put (reset! form title) between let and fn in the inner-input component but it will not help
You can use reagent/track! to listen to changes to title, and reagent/dispose to stop listening. You can alternatively use add-watch and remove-watch, but track is a more convenient syntax.
(defn inner-input [title]
(reagent/with-let
[form (reagent/atom #title)
watch (reagent/track! (fn [] (reset! form #title)))]
[:label
"Inner input"
[:input {:on-change (fn [e]
(reset! form (.. e -target -value)))
:on-blur (fn [e]
(reset! title (.. e -target -value)))
:value #form}]]
(finally
(reagent/dispose! watch))))
(defn card-input []
(reagent/with-let
[title (reagent/atom "hello")]
[:div
[:label "Title"
[:input {:on-change (fn [e]
(reset! title (.. e -target -value)))
:value #title}]]
[inner-input title]]))
Now if you type in the inner input it will only update the outer when you exit the input box, but changing the outer title will immediately change the inner one. Is that what you wanted?
But if you don't want to pass title as a ratom and have to pass it as a value, then instead you can compare it to the previous value to determine if it changed, and reset form only when it changes.
(when (not= #previous-title title)
(do (reset! previous-title title)
(reset! form title)))
This code can go in render seeing as it is safe to call when form changes... nothing will happen.
I just learn Reagent in Clojurescript, I am just following some tutorial but maybe I miss something I have this code for the state
(defonce app-state (atom {:text "Hello Chestnut!" :click-count 0}))
and the rendered view
(defn article []
[:div
[:div "The atom" [:code "click-count"] " has value : " (:click-count #app-state)]
[:input {:type "button" :value "Add"
:on-click #(swap! (:click-count #app-state) inc)}]
]
)
I'm trying to increment the state when they button is pressed, but I got this error on the console
Error: No protocol method ISwap.-swap! defined for type number: 0
the atom should be swapped not the :click-count
(swap! app-state update :click-count inc)
I am trying to use Clojure - Seesaw to read from a file and convert the string into a map (variables) so that I can use them to print to a GUI. Below is my current code:
(ns store.core
(:gen-class)
(:require [seesaw.core :as seesaw]))
(defn -main
[& args]
(seesaw/show!
(spit "amovies.txt" "")
;(spit "amovies.txt" (pr-str [{:id 1 :qty 4 :name "movie1" :price 3.50}
; {:id 2 :qty 5 :name "movie2" :price 3.00}]) :append true)
(spit "amovies.txt" "movie: Movie_Name\nprice: 5\nid: 1\nquantity: 2" :append true)
(print (read-string (slurp "amovies.txt")))
(with-open [rdr (reade "amovies.txt")]
(doseq [line (line-seq rdr)]
(println-str line)))
I am stuck figuring out how to read the string from amovies.txt line by line and then create a map with it. The desired output should be something like
movie: Movie_Name
price: 5
id: 1
quantity: 2
but in a way so that if I were to say, :movie, it would reference the name of the movie.
Can someone help? All help is appreciated!
1
(def movies-as-map
(let [lines (with-open [rdr (reade "amovies.txt")]
(line-seq rdr))]
(binding [*read-eval* false]
(map read-string lines))))
2
user> (def movie
(binding [*read-eval* false]
(read-string
"{:id 1 :qty 4 :name \"movie1\" :price 3.50}")))
#'user/movie
user> (keys movie)
(:id :qty :name :price)
Will work with this
(spit "amovies.txt"
(pr-str [{:id 1 :qty 4 :name "movie1" :price 3.50}
{:id 2 :qty 5 :name "movie2" :price 3.00}])
:append true)
But not with this
(spit "amovies.txt"
"movie: Movie_Name\nprice: 5\nid: 1\nquantity: 2"
:append true)
docs: https://clojure.github.io/clojure/branch-master/clojure.core-api.html#clojure.core/read-string
Wrong args being passed to show!
It looks like your passing a ton of arguments to seesaw/show!.
The documentation states
Usage: (show! targets)
Show a frame, dialog or widget.
If target is a modal dialog, the call will block and show! will
return the dialog's result. See (seesaw.core/return-from-dialog).
Returns its input.
I am having trouble swapping a value in a table. When I press the button, instead of the value being changed the whole table is removed and I can't figure out why. Below is my code. (rt refers to a reagent-table by frozenlock https://github.com/Frozenlock/reagent-table)
(ns <namespace name>
(:require [reagent.core :as reagent :refer [atom]]
[reagent-table.core :as rt]
[clojure.walk :as walk]))
(def table-data {:headers ["1" "2" "3" "4"]
:rows [["A"]]})
(defonce tdata (atom table-data))
(defn replace-value [struct]
(walk/prewalk-replace {"A" "hello"} (struct :rows)))
(defn change-value [tdata]
[:div
[:input.btn.btn-primary
{:type :submit
:on-click #(swap! tdata replace-value)
:value "Change"}]
])
(defn tablescreen []
[:div
[:div.container
[:div.span12
[rt/reagent-table tdata]
[change-value tdata]]]
])
Initally on the screen it shows the table. However, when pressing the button, I expected "A" to change to "hello". However, when pressing the button the whole table is removed from the view and only the button is left