clog/tutorial/19-tutorial.lisp
2021-03-04 13:51:20 -05:00

33 lines
1.3 KiB
Common Lisp

(defpackage #:clog-user
(:use #:cl #:clog)
(:export start-tutorial))
(in-package :clog-user)
;;; In this tutorial we will see how to easily use a JavaScript
;;; component. In the static-files directory there is a simple
;;; JavaScript component (clog/static-files/tutorial/jslists) to create
;;; collapsible trees that we will use for this tutorial.
(defun on-new-window (body)
;; First we need to load jslists' JavaScript file and css
(load-css (html-document body) "/tutorial/jslists/jsLists.css")
(load-script (html-document body) "/tutorial/jslists/jsLists.js")
;; Second we need to build an example list. jsLists uses an ordered
;; or unordered list for its data.
(let* ((list-top (create-unordered-list body))
(item (create-list-item list-top :content "Top of tree"))
(list-b (create-unordered-list item))
(item (create-list-item list-b :content "Item 1"))
(item (create-list-item list-b :content "Item 2"))
(item (create-list-item list-b :content "Item 3"))
(item (create-list-item list-b :content "Item 4")))
(declare (ignore item))
(js-execute body (format nil "JSLists.applyToList('~A', 'ALL');"
(html-id list-top))))
(run body))
(defun start-tutorial ()
"Start tutorial."
(initialize #'on-new-window)
(open-browser))