CLOG for non-CLOG people - ie HTML + JS + what-eva' people

[rabbibotton]

This little sample will show you why CLOG is for you and why CLOG is for WEB not just GUI and more!

1. Let's start with a piece of HTML

  <div id="search-section">
        <form id="searchForm" onsubmit="handleSearch(); return false;">
            <input type="text" id="queryInput" placeholder="Enter your query">
            <button type="submit">Search</button>
        </form>
    </div>

2. Let's turn it in to CLOG - using the builder I used Project -> new project from template -> Basic HTML Project (you can of course just use code here or roll your own in emacs/lem)

3. We start with this simple template - run it (tsample:start-app) so we go LIVE also :P

(defpackage #:tsample
  (:use #:cl #:clog)
  (:export start-app))

(in-package :tsample)

(defun on-new-window (body)
  ;; Use the panel-box-layout to center horizontally
  ;; and vertically our div on the screen.
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "Hello")))

(defun start-app ()
  (initialize 'on-new-window
   :static-root (merge-pathnames "./www/"
                  (asdf:system-source-directory :tsample)))
  (open-browser))

4. Let us put up our HTML getting rid of the form's onsubmit (evaluate the change and then refresh browser).

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "  <div id=\"search-section\">
        <form id=\"searchForm\">
            <input type=\"text\" id=\"queryInput\" placeholder=\"Enter your query\">
            <button type=\"submit\">Search</button>
        </form>
    </div>")))

5. So now that our HTML is up - let's bind it to the LISP side - notice how I say what class each item is, the default is clog-element:

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "  <div id=\"search-section\">
        <form id=\"searchForm\">
            <input type=\"text\" id=\"queryInput\" placeholder=\"Enter your query\">
            <button type=\"submit\">Search</button>
        </form>
    </div>")
    (let* ((search-section (attach-as-child body "search-section" :clog-type 'clog-div))
           (search-form    (attach-as-child body "searchForm" :clog-type 'clog-form))
           (query-input    (attach-as-child body "queryInput" :clog-type 'clog-form-element)))
      nil)))

6. Hmm I also want the button - but no ID so we have to add an ID to the button and then can bind it too:

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "  <div id=\"search-section\">
        <form id=\"searchForm\">
            <input type=\"text\" id=\"queryInput\" placeholder=\"Enter your query\">
            <button id='submitButton' type=\"submit\">Search</button>
        </form>
    </div>")
    (let* ((search-section (attach-as-child body "search-section" :clog-type 'clog-div))
           (search-form    (attach-as-child body "searchForm" :clog-type 'clog-form))
           (query-input    (attach-as-child body "queryInput" :clog-type 'clog-form-element))
           (submit-button  (attach-as-child body "submitButton" :clog-type 'clog-button)))
      nil)))

7. NOW SOME MAGIC :)

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "  <div id=\"search-section\">
        <form id=\"searchForm\">
            <input type=\"text\" id=\"queryInput\" placeholder=\"Enter your query\">
            <button id='submitButton' type=\"submit\">Search</button>
        </form>
    </div>")
    (let* ((search-section (attach-as-child body "search-section" :clog-type 'clog-div))
           (search-form    (attach-as-child body "searchForm" :clog-type 'clog-form))
           (query-input    (attach-as-child body "queryInput" :clog-type 'clog-form-element))
           (submit-button  (attach-as-child body "submitButton" :clog-type 'clog-button)))
      (declare (ignore search-section search-form))
      ;; Disable the button (could just add this to HTML)
      (setf (disabledp submit-button) t)
      ;; Add event to turn submit on when content off when none and to demo
      ;; the LIVE nature of CLOG
      (set-on-key-down query-input
                       (lambda (obj data)
                         (declare (ignore obj))
                         (create-div body :content (format nil "-> ~A" (getf data :key)))
                         (setf (disabledp submit-button)
                               (< (length (text-value query-input)) 1)))))))

OH ya - that is CLOG power :P

8. Now let's handle form submit - no round trip submits here dude

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (create-div (center-panel layout) :content "  <div id=\"search-section\">
        <form id=\"searchForm\">
            <input type=\"text\" id=\"queryInput\" placeholder=\"Enter your query\">
            <button id='submitButton' type=\"submit\">Search</button>
        </form>
    </div>")
    (let* ((search-section (attach-as-child body "search-section" :clog-type 'clog-div))
           (search-form    (attach-as-child body "searchForm" :clog-type 'clog-form))
           (query-input    (attach-as-child body "queryInput" :clog-type 'clog-form-element))
           (submit-button  (attach-as-child body "submitButton" :clog-type 'clog-button)))
      (declare (ignore search-section))
      ;; Disable the button (could just add this to HTML)
      (setf (disabledp submit-button) t)
      ;; Add event to turn submit on when content off when none and to demo
      ;; the LIVE nature of CLOG
      (set-on-key-down query-input
                       (lambda (obj data)
                         (declare (ignore obj))
                         (create-div body :content (format nil "-> ~A" (getf data :key)))
                         (setf (disabledp submit-button)
                               (< (length (text-value query-input)) 1))))
      (set-on-submit search-form
                     (lambda (obj)
                       (declare (ignore obj))
                       (let ((result (text-value query-input)))
                         (when (not (equal result ""))
                           (create-div body :content (format nil "=> ~A" result))
                           (setf (disabledp submit-button) t)
                           (setf (text-value query-input) ""))))))))

9. Alternatively I could have not used HTML at all and instead did:

(defun on-new-window (body)
  (let* ((layout (create-panel-box-layout body)))
    (center-children (center-panel layout))
    (let* ((search-section (center-panel layout))
           (search-form (create-form search-section))
           (query-input (create-form-element search-form :input
                                             :style "placeholder:'Enter your query'"))
           (submit-button (create-form-element search-form :submit
                                               :value "Search")))
      ;; Disable the button (could just add this to HTML)
      (setf (disabledp submit-button) t)
      ;; Add event to turn submit on when content off when none and to demo
      ;; the LIVE nature of CLOG
      (set-on-key-down query-input
                       (lambda (obj data)
                         (declare (ignore obj))
                         (create-div body :content (format nil "-> ~A" (getf data :key)))
                         (setf (disabledp submit-button)
                               (< (length (text-value query-input)) 1))))
      (set-on-submit search-form
                     (lambda (obj)
                       (declare (ignore obj))
                       (let ((result (text-value query-input)))
                         (when (not (equal result ""))
                           (create-div body :content (format nil "=> ~A" result))
                           (setf (disabledp submit-button) t)
                           (setf (text-value query-input) ""))))))))

[aykaramba]

Love it! Thanks!

[adiwow]

Awesome!

[khinsen]

Nice example for what I like about CLOG: being at the interface between Lisp and the Web!

[tluyben]

Ah, the non-html version is quite a bit nicer imho! as you want this checked / colored in your editor, strings are not nice for html (with escaping etc). So possibly what you already have or the library (I forgot the name) that uses

  (:p (:i (:input etc 

or HTML templates. The latter is nice to move large swaths of existing html over to CLOG, but then you need some DSL inside the html for looping etc, so that's not very nice really.

[khinsen]

There are many libraries for writing HTML as s-expressions. I use cl-who, which is straightforward and good enough for me, but there are fancier ones such as spinneret (whose huge dependency list is a bit scary).

[tluyben]

Ah yes, I was thinking of cl-who, thanks. Will check the other one as well, but I guess, I am too scared of a lot of dependencies (ptsd from working with npm etc).