Tutorial 19

tutorial/19-tutorial.lisp

@@ -0,0 +1,36 @@
+(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 java
+;; 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 it's 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")))
+
+    (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))

tutorial/README.md

@@ -51,3 +51,4 @@ Tutorial Summary
 - 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript
 - 17-tutorial.lisp - W3.CSS layout example and Form submit methods
 - 18-tutorial.lisp - Drag and Drop
+- 19-tutorial.lisp - Using JavaScript componets