さて、今日は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が呼び出されます。

• Top-Level API | React

他にも下記の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!"というアラートが出るようにしています。