Tutorial 20

tutorial/19-tutorial.lisp

@@ -5,9 +5,9 @@
 (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.
+;; 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
@@ -25,9 +25,8 @@
 	 (item       (create-list-item list-b :content "Item 4")))
 
     (js-execute body (format nil "JSLists.applyToList('~A', 'ALL');"
-			     (html-id list-top)))
-  
-  (run body)))
+			     (html-id list-top))))
+  (run body))
 
 (defun start-tutorial ()
   "Start turtorial."

tutorial/20-tutorial.lisp

@@ -0,0 +1,77 @@
+
+;; In this tutorial we will see how to wrap last tutorial's JavaScript
+;; component in to something that feels more like a plugin to CLOG.
+
+;; First we will create a package for our component
+(defpackage #:clog-toggler
+  (:use #:cl #:clog)
+  (:export clog-toggler
+	   init-toggler
+	   create-toggler
+	   activate))
+
+(in-package :clog-toggler)
+
+;; Next we will create a function to initialize the environment
+;; for the component.
+(defun init-toggler (body &key (path-to-js "/tutorial/jslists/"))
+  "Initialize BODY to use clog-toggler components"
+  
+  (load-css (html-document body)
+	    (concatenate 'string path-to-js "jsLists.css"))
+  (load-script (html-document body)
+	       (concatenate 'string path-to-js "jsLists.js")))
+
+;; Next we will use the clog-unordered-list as the base for our new
+;; class clog-toggler
+(defclass clog-toggler (clog-unordered-list) ()
+  (:documentation "Toggler object - a collapsable UI component"))
+
+(defgeneric create-toggler (clog-obj &key content class auto-place)
+  (:documentation "Create a toggler with CONTENT as the top of tree."))
+
+(defmethod create-toggler ((obj clog-obj) &key (content "")
+					    (class nil)
+					    (auto-place t))
+  (let ((new-obj (create-unordered-list obj :class class
+					    :auto-place auto-place)))
+
+    ;; Using change-class we can reuse the parent clog-obj's create
+    ;; method and it's initialization.
+    (change-class new-obj 'clog-toggler)
+
+    new-obj))
+
+(defgeneric activate (clog-toggler)
+  (:documentation "Activate the clog-toggler."))
+
+(defmethod activate ((obj clog-toggler))
+  (js-execute obj (format nil "JSLists.applyToList('~A', 'ALL');"
+			  (html-id obj))))
+
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (clog-toggler:init-toggler body)
+  
+  ;; Now we build or CLOG-Toggler
+  (let* ((toggler    (clog-toggler:create-toggler body))
+	 (item       (create-list-item toggler :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")))
+
+    (clog-toggler:activate toggler))
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window)
+  (open-browser))

tutorial/README.md

@@ -51,4 +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
+- 19-tutorial.lisp - Using JavaScript components