diff --git a/README.md b/README.md index 1b21bc5..a6b6bc1 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ 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 Demo Summary diff --git a/tutorial/19-tutorial.lisp b/tutorial/19-tutorial.lisp index 2a497f5..cb7a9ef 100644 --- a/tutorial/19-tutorial.lisp +++ b/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." diff --git a/tutorial/20-tutorial.lisp b/tutorial/20-tutorial.lisp new file mode 100644 index 0000000..1e2b7c9 --- /dev/null +++ b/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)) diff --git a/tutorial/README.md b/tutorial/README.md index 326e602..9430ef8 100644 --- a/tutorial/README.md +++ b/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