This commit is contained in:
David Botton 2021-02-01 13:43:47 -05:00
parent a46f5dbf6f
commit 73bc5bf10f
14 changed files with 111 additions and 196 deletions

View file

@ -4,16 +4,15 @@
(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
;; collapsable trees that we will use for this tutorial.
;;; 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
;;; collapsable 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")
(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 it's data.
(let* ((list-top (create-unordered-list body))
@ -23,13 +22,11 @@
(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")))
(js-execute body (format nil "JSLists.applyToList('~A', 'ALL');"
(html-id list-top))))
(run body))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))