Skip to content

Updating handlers with hiccupλ︎

Instead of including fiddly html code (and having to make sure you close tags), we will write our markup in Clojure syntax using hiccup.

Add dependenciesλ︎

Note:: Add hiccup dependenciesλ︎

[hiccup "1.0.5"]

Require hiccupλ︎

Note:: Add hiccup to your namespaceλ︎

[hiccup.core :refer :all]
[ :refer :all]

Your core.clj file should look like this

(ns todo-list.core
  (:require [ring.adapter.jetty :as jetty]
            [ring.middleware.reload :refer [wrap-reload]]
            [compojure.core :refer [defroutes GET]]
            [compojure.route :refer [not-found]]
            [ring.handler.dump :refer [handle-dump]]
            [hiccup.core :refer :all]
            [ :refer :all]))

Update the welcome handlerλ︎

Note:: Change the welcome handler to use hiccup rather than html codeλ︎

(defn welcome
  "A ring handler to respond with a simple welcome message"
  (html [:h1 "Hello, Clojure World"]
        [:p "Welcome to your first Clojure app, I now update automatically"]))

The html function create html code based on the keywords used. However, the html function does not create a full html web page.

Update the goodbye handlerλ︎

Note:: Change the goodbye handler to use hiccup rather than htmlλ︎

(defn goodbye
  "A song to wish you goodbye"
    (html5 {:lang "en"}
           [:head (include-js "myscript.js") (include-css "mystyle.css")]
            [:div [:h1 {:class "info"} "Walking back to happiness"]]
            [:div [:p "Walking back to happiness with you"]]
            [:div [:p "Said, Farewell to loneliness I knew"]]
            [:div [:p "Laid aside foolish pride"]]
            [:div [:p "Learnt the truth from tears I cried"]]]))

Using the html5 function a complete html page is created, with a header and body section.

See the API documentation.