descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける
さて、今日はOm basedテンプレートから作ったhelloworld_om_based
プロジェクトにボタンでもつけていってみましょうか。
ようやくアプリ製作ぽくなってきましたね。
さて、アプリケーションの表示部分を変更するには、どこのファイルをいじればいいのでしょうか。
正解はsrc_front / helloworld_om_based_om / core.cljs
です。
ボタンなどを作るには、ここのClojurescriptファイルを修正します。
ボタンを置き、Alertを出してみる
Omは、独特な考え方でアプリケーションの状態を変化させていきます。
なので、その部分とは別に、まずは構造を変えてみるところからやっていきましょう。
まず、ちょっとDOMの構造を変えるところからやってみます。
現状、src_front / helloworld_om_based_om / core.cljs
のコードは下記の通りになっているはずです。
(ns helloworld_om_based-om.core
(:require [om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]
[figwheel.client :as fw :include-macros true]))
(enable-console-print!)
(fw/watch-and-reload
:websocket-url "ws://localhost:3449/figwheel-ws"
:jsload-callback 'mount-root)
(defonce app-state (atom {:message "Hello om world!"}))
(defn mount-root []
(om/root
(fn [state owner]
(reify om/IRender
(render [_]
(dom/h1 nil (:message state)))))
app-state
{:target (. js/document
(getElementById "app"))}))
(defn init! []
(mount-root))
(init!)
このうち、
(defn mount-root []
(om/root
(fn [state owner]
(reify om/IRender
(render [_]
(dom/h1 nil (:message state)))))
app-state
{:target (. js/document
(getElementById "app"))}))
の部分が、画面に出力されるコンポーネントを定義しているところなのですが、ここにdom/h1
という関数があるのがわかるとおもいます。
これは、DOMツリーを構築するための関数でここでは、h1タグを生成しています。h1があるので、他にもdivとかそういうHTMLタグに相当するものがあります。
実際は、om.dom/h1は、React.DOM.h1が呼び出されます。
他にも下記のHTML要素がサポートされています。
a abbr address area article aside audio b base bdi bdo big blockquote body br
button canvas caption cite code col colgroup data datalist dd del details dfn
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
h6 head header hr html i iframe img input ins kbd keygen label legend li link
main map mark menu menuitem meta meter nav noscript object ol optgroup option
output p param picture pre progress q rp rt ruby s samp script section select
small source span strong style sub summary sup table tbody td textarea tfoot th
thead time title tr track u ul var video wbr
それでは、上記のコードをちょっと変えてみましょう。
下記のように変更します。
(defn mount-root []
(om/root
(fn [state owner]
(reify om/IRender
(render [_]
(dom/div nil
(dom/h1 nil (:message state))
(dom/button #js {:onClick (fn [e]
(js/alert "pressed!"))}
"Hello")))))
app-state
{:target (. js/document
(getElementById "app"))}))
dom/h1
をdom/div
でくるみ、dom/h1
の下にdom/button
を配置しました。
dom/button
は、ボタンです。
で、ここにon-click時のイベントとして"pressed!"というアラートが出るようにしています。

ここで、再びElectronを起動するか、もしくはすでに起動中のElectronをみると、ボタンが表示されており、クリックすると"pressed!"とアラートが出るでしょう。
明日も続きを書きます。
Colophon
- 編集長
- Greative GK. 原一浩 ( kara_d )
- 製版システム
- Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
- Share this magazine!
- Follow designudge
- Follow @designudge