Updates to tutorial 9

LEARN.md

@@ -76,7 +76,7 @@ CLOG "The Framework" (Code Tutorials)
 - [04-tutorial.lisp](tutorial/04-tutorial.lisp) - The event target, reusing event handlers
 - [05-tutorial.lisp](tutorial/05-tutorial.lisp) - Using connection-data-item
 - [06-tutorial.lisp](tutorial/06-tutorial.lisp) - Tasking and events
-- [07-tutorial.lisp](tutorial/07-tutorial.lisp) - My first CLOG video game (and handling disconnects)
+- [07-tutorial.lisp](tutorial/07-tutorial.lisp) - My first CLOG video game
 - [08-tutorial.lisp](tutorial/08-tutorial.lisp) - Mice Love Containers
 - [09-tutorial.lisp](tutorial/09-tutorial.lisp) - Tabs, panels, and forms
 - [10-tutorial.lisp](tutorial/10-tutorial.lisp) - Canvas

tutorial/09-tutorial.lisp

@@ -4,162 +4,172 @@
 
 (in-package :clog-tut-9)
 
+;; In this tutorial we demonstrate using forms and form controls
+;; this is not traditonal HTML use, as we never leave the original
+;; page. It is an interactive live application.
+
 (defun on-new-window (body)
   (setf (title (html-document body)) "Tutorial 09")
-  ;; When doing extensive setup of a page using connection cache
+  ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-  ;; reduces rountrip traffic and speeds setup.
+  ;; Create tabs and panels - a simple file card interface
-  (with-connection-cache (body)
+  ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-    (let* (last-tab
+  (let* ((tab1   (create-button body :content "Tab1"))
-           ;; Note: Since the there is no need to use the tmp objects
+         (tab2   (create-button body :content "Tab2"))
-           ;;       we reuse the same symbol name (tmp) even though the
+         (tab3   (create-button body :content "Tab3"))
-           ;;       compiler can mark those for garbage collection early
+         (tmp    (create-br body))
-           ;;       this not an issue as the element is created already
+         (panel1 (create-div body))
-           ;;       in the browser window.
+         (panel2 (create-div body))
-           ;;
+         ; styling can be done here also
-           ;;       See tutorial 33 for a far more elegant approach
+         (panel3 (create-div body :content "Panel3 - Type here"
-           ;;       that uses with-clog-create for this type of code
+                             :style "width:100%;height:400px;border:thin solid black"))
-           ;;       based layout.
+         (tab-to-panel (list
-           ;;
+                         (list tab1 panel1)
-           ;; Create tabs and panels
+                         (list tab2 panel2)
-           (t1  (create-button body :content "Tab1"))
+                         (list tab3 panel3)))) ; an a-list of tabs to panels
-           (t2  (create-button body :content "Tab2"))
+    (declare (ignore tmp)) ; ignore warnings tmp never used
-           (t3  (create-button body :content "Tab3"))
-           (tmp (create-br body))
-           (p1  (create-div body))
-           (p2  (create-div body))
-           (p3  (create-div body :content "Panel3 - Type here"))
-           ;; Create form for panel 1
-           (f1  (create-form p1))
-           (fe1 (create-form-element f1 :text
-                                     :label (create-label f1 :content "Fill in blank:")))
-           (tmp (create-br f1))
-           (fe2 (create-form-element f1 :color :value "#ffffff"
-                                               :label (create-label f1 :content "Pick a color:")))
-           (tmp (create-br f1))
-           (tmp (create-form-element f1 :submit :value "OK"))
-           (tmp (create-form-element f1 :reset :value "Start Again"))
-           ;; Create for for panel 2
-           (f2  (create-form p2))
-           (fs2 (create-fieldset f2 :legend "Stuff"))
-           (tmp (create-label fs2 :content "Please type here:"))
-           (ta1 (create-text-area fs2 :columns 60 :rows 8 :label tmp))
-           (tmp (create-br fs2))
-           (rd1 (create-form-element fs2 :radio :name "rd"))
-           (tmp (create-label fs2 :content "To Be" :label-for rd1))
-           (rd2 (create-form-element fs2 :radio :name "rd"))
-           (tmp (create-label fs2 :content "No to Be" :label-for rd2))
-           (tmp (create-br fs2))
-           (ck1 (create-form-element fs2 :checkbox :name "ck"))
-           (tmp (create-label fs2 :content "Here" :label-for ck1))
-           (ck2 (create-form-element fs2 :checkbox :name "ck"))
-           (tmp (create-label fs2 :content "There" :label-for ck2))
-           (tmp (create-br fs2))
-           (sl1 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
-           (sl2 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
-           (sl3 (create-select fs2 :multiple t
-                                   :label (create-label fs2 :content "Pick some:")))
-           (o1  (create-option sl3 :content "one"))
-           (o2  (create-option sl3 :content "two"))
-           (o3  (create-option sl3 :content "three"))
-           (og1 (create-optgroup sl3 :content "These are a group"))
-           (o4  (create-option og1 :content "four"))
-           (o5  (create-option og1 :content "five"))
-           (tmp (create-form-element f2 :submit :value "OK"))
-           (tmp (create-form-element f2 :reset :value "Start Again")))
-      (declare (ignore tmp))
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-    ;; Panel 1 contents
+    ;; Style the panels - you can program your styles
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-      (setf (place-holder fe1) "type here..")
+    ; can set any value with width and height, as a number (ie pixels).
-      (setf (requiredp fe1) t)
+    ; or any valid number + unit as a string. They both return as a numbers
-      (setf (size fe1) 60)
+    ; the number of pixels.
-      (make-data-list fe1 '("Cool Title"
+    (setf (width panel1) "100%")
-                            "Not So Cool Title"
+    (setf (height panel1) (unit :px 400)) ; work with numbers and set unit
-                            "Why Not, Another Title"))
+    ; you can set many values at one with set-geometry, it's default unit
-      (make-data-list fe2 '("#ffffff"
+    ; is a pixel
-                            "#ff0000"
+    (set-geometry panel2 :width "100%" :height 400)
-                            "#00ff00"
+    ; CLOG contains programtic ways to handle most styles
-                            "#0000ff"
+    (set-border panel1 :thin :solid :black)
-                            "#ff00ff"))
+    ; You can also set styles with a list
-      (set-on-submit f1
+    (set-styles panel2 '(("border" "thin solid black")))
-                     (lambda (obj)
-                       (declare (ignore obj))
-                       (setf (title (html-document body)) (value fe1))
-                       (setf (background-color p1) (value fe2))
-                       (setf (hiddenp f1) t)
-                       (create-span p1 :content
-                                    "<br><b>Your form has been submitted</b>")))
-      (setf (width p1) "100%")
-      (setf (width p2) "100%")
-      (setf (width p3) "100%")
-      (setf (height p1) 400)
-      (setf (height p2) 400)
-      (setf (height p3) 400)
-      (set-border p1 :thin :solid :black)
-      (set-border p2 :thin :solid :black)
-      (set-border p3 :thin :solid :black)
-    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-    ;; Panel 2 contents
-    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-      (setf (vertical-align ta1) :top)
-      (disable-resize ta1)
-      (setf (vertical-align sl1) :top)
-      (setf (vertical-align sl2) :top)
-      (setf (vertical-align sl3) :top)
-      (setf (size sl1) 3)
-      (add-select-options sl1 '("one"
-                                "two"
-                                "three"
-                                "four"
-                                "five"))
-      (add-select-options sl2 '("one"
-                                "two"
-                                "three"
-                                "four"
-                                "five"))
-      (set-on-change sl3 (lambda (obj)
-                           (declare (ignore obj))
-                           (when (selectedp o5)
-                             (alert (window body) "Selected 5"))))
-      (set-on-submit f2
-                     (lambda (obj)
-                       (declare (ignore obj))
-                       (setf (hiddenp f2) t)
-                       (create-span p2 :content
-                                    (format nil "<br><b>Your form has been submitted:</b>
-                                       <br>~A<hr>1 - ~A<br>2 - ~A<br>3 - ~A"
-                                            (value ta1)
-                                            (value sl1)
-                                            (value sl2)
-                                            (selectedp o2)))))
-    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-    ;; Panel 3 contents
-    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-      (setf (editablep p3) t)
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
     ;; Tab functionality
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-      (flet ((select-tab (obj)
+    (flet ((select-tab (new-tab) ; can be used as an event handler
-               (setf (hiddenp p1) t)
+             (mapcar (lambda (l)
-               (setf (hiddenp p2) t)
+                       (setf (background-color (first l)) :lightgrey)
-               (setf (hiddenp p3) t)
+                       (setf (hiddenp (second l)) t))
-               (setf (background-color t1) :lightgrey)
+                     tab-to-panel)
-               (setf (background-color t2) :lightgrey)
+             (setf (hiddenp (second (assoc new-tab tab-to-panel))) nil) ; not hidden
-               (setf (background-color t3) :lightgrey)
+             (setf (background-color new-tab) :lightblue)
-               (setf (background-color last-tab) :lightblue)
+             (focus new-tab)))
-               (setf (hiddenp obj) nil)
+      (set-on-click tab1 #'select-tab) ; You can not use 'select-tab the symbol
-               (focus obj)))
+      (set-on-click tab2 #'select-tab) ; value as the symbol is not global. You
-        (setf last-tab t1)
+      (set-on-click tab3 #'select-tab) ; must set the actual function value #'
-        (select-tab p1)
+      (select-tab tab1))
-        (set-on-click t1 (lambda (obj)
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-                           (setf last-tab obj)
+    ;; Panel 1 contents
-                           (select-tab p1)))
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-        (set-on-click t2 (lambda (obj)
+    (let* ((form (create-form panel1))
-                           (setf last-tab obj)
+           (element1 (create-form-element form :text ; input text box
-                           (select-tab p2)))
+                                          :label (create-label form ; give it label
-        (set-on-click t3 (lambda (obj)
+                                                               :content "Fill in blank:")))
-                           (setf last-tab obj)
+           (tmp       (create-br form))
-                           (select-tab p3)))))))
+           (element2  (create-form-element form :color ; color picker
+                                           :value "#ffffff"
+                                           :label (create-label form :content "Pick a color:"))))
+      (declare (ignore tmp))
+      (create-br form)
+      (create-form-element form :submit :value "OK")
+      (create-form-element form :reset :value "Start Again")
+      (setf (place-holder element1) "type here..")
+      (setf (requiredp element1) t)
+      (setf (size element1) 60)
+      (make-data-list element1 '("Cool Title"
+                                 "Not So Cool Title"
+                                 "Why Not, Another Title")) ; completion list
+      (make-data-list element2 '("#ffffff"
+                                 "#ff0000"
+                                 "#00ff00"
+                                 "#0000ff"
+                                 "#ff00ff")) ; default color palette
+      (set-on-submit form
+                     (lambda (obj)
+                       (declare (ignore obj))
+                       (setf (title (html-document body))
+                             (value element1)) ; change page title
+                       (setf (background-color panel1)
+                             (value element2)) ; change panel background
+                       (setf (hiddenp form) t) ; hide form and all its elements
+                       ; To destroy the contents of tbe panel1 and so also the
+                       ; form, you could also do (setf (text panel1) "")
+                       (create-span panel1 :content
+                                    "<br><b>Your form has been submitted</b>"))))
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    ;; Panel 2 contents
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    (let* ((form      (create-form panel2))
+           (fset      (create-fieldset form :legend "Stuff"))
+           (lbl       (create-label fset :content "Please type here:"))
+           (text-area (create-text-area fset :columns 60 :rows 8 :label lbl))
+           (tmp1      (create-br fset))
+           (radio1    (create-form-element fset :radio :name "rd"))
+           (tmp2      (create-label fset :content "To Be" :label-for radio1))
+           (radio2    (create-form-element fset :radio :name "rd"))
+           (tmp3      (create-label fset :content "No to Be" :label-for radio2))
+           (tmp4      (create-br fset))
+           (check1    (create-form-element fset :checkbox :name "ck"))
+           (tmp5      (create-label fset :content "Here" :label-for check1))
+           (check2    (create-form-element fset :checkbox :name "ck"))
+           (tmp6      (create-label fset :content "There" :label-for check2))
+           (tmp7      (create-br fset))
+           (select1   (create-select fset :label (create-label fset :content "Pick one:")))
+           (select2   (create-select fset :label (create-label fset :content "Pick one:")))
+           (select3   (create-select fset :multiple t
+                                     :label (create-label fset :content "Pick some:"))))
+      (declare (ignore tmp1 tmp2 tmp3 tmp4 tmp5 tmp6 tmp7))
+      ;; virticle aling controls with their labels
+      (setf (vertical-align text-area) :top)
+      (setf (vertical-align select1) :top)
+      (setf (vertical-align select2) :top)
+      (setf (vertical-align select3) :top)
+      ;; add options to select1 as a list
+      (setf (size select1) 3) ; turn select1 into a listbox size > 1
+      (add-select-options select1 '("one"
+                                    "two"
+                                    "three"
+                                    "four"
+                                    "five"))
+      ;; add options to select1 as a list
+      ;; size defaults to 1 - so a dropdown list
+      (add-select-options select2 '("one"
+                                    "two"
+                                    "three"
+                                    "four"
+                                    "five"))
+  
+      ;; add options to select3 programticly
+      (create-option select3 :content "one")
+      (create-option select3 :content "two")
+      (create-option select3 :content "three")
+      (let* ((group (create-optgroup select3 :content "These are a group"))
+             (op4   (create-option group :content "four"))
+             (op5   (create-option group :content "five")))
+        (declare (ignore op4))
+        (set-on-change select3 (lambda (obj) ; change event on a control
+                                 (declare (ignore obj))
+                                 (when (selectedp op5)
+                                   (alert (window body) "Selected 5")))))
+      ;; settings for text-area
+      (disable-resize text-area)
+      ;; add form buttons
+      (create-form-element form :submit :value "OK")
+      (create-form-element form :reset :value "Start Again")
+      (set-on-submit form
+                     (lambda (obj)
+                       (declare (ignore obj))
+                       (setf (hiddenp form) t)
+                       (create-span panel2 :content
+                                    (format nil "<br><b>Your form has been submitted:</b>
+                                       <br>~A<hr>1 - ~A<br>2 - ~A<br>3 - ~A"
+                                            (value text-area)
+                                            (value select1)
+                                            (value select2)
+                                            (value select3))))))
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    ;; Panel 3 contents
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+    (setf (editablep panel3) t))) ; turn panel 3 into an editable area
 
 (defun start-tutorial ()
   "Start turtorial."

tutorial/17-tutorial.lisp

@@ -7,7 +7,7 @@
 ;;; In this tutorial we will use a CSS only alternative to bootstrap -
 ;;;   https://www.w3schools.com/w3css/default.asp
 ;;;
-;;; It is also a demonstration of how various ways to use HTML Forms
+;;; It is also a demonstration of various ways to use HTML Forms
 (defun on-index (body)
   ;; Load css files
   (load-css (html-document body) "https://www.w3schools.com/w3css/4/w3.css")
@@ -29,7 +29,7 @@
                                           (create-label form1 :content "Enter name:")))
          (fsubmit    (create-form-element form1 :submit))
          (tmp        (create-br fcontainer))
-         (tmp (create-hr data-area))
+         (tmp        (create-hr data-area))
          ;; This is a traditional "get" form that will submit data
          ;; to a server.
          (fcontainer (create-div data-area :class "w3-container"))
@@ -40,7 +40,7 @@
                                           (create-label form2 :content "Enter name:")))
          (fsubmit    (create-form-element form2 :submit))
          (tmp        (create-br fcontainer))
-         (tmp (create-hr data-area))
+         (tmp        (create-hr data-area))
          ;; This is a file upload form that will submit data and files
          ;; to a server.
          (fcontainer (create-div data-area :class "w3-container"))
@@ -52,7 +52,7 @@
          (finput     (create-form-element form4 :file :name "filename"))
          (fsubmit    (create-form-element form4 :submit))
          (tmp        (create-br fcontainer))
-         (tmp (create-hr data-area))
+         (tmp        (create-hr data-area))
          ;; This is a CLOG style form, instead of submitting data
          ;; to another page it is dealt with in place.
          (fcontainer (create-div data-area :class "w3-container"))
@@ -63,9 +63,9 @@
                                           (create-label form3 :content "Enter name:")))
          (fsubmit3   (create-form-element form3 :submit))
          (tmp        (create-br fcontainer))
-         (tmp (create-hr data-area))
+         (tmp        (create-hr data-area))
-         (footer (create-section body :footer :class "w3-container w3-theme"))
+         (footer     (create-section body :footer :class "w3-container w3-theme"))
-         (tmp    (create-section footer :p :content "(c) All's well that ends well")))
+         (tmp        (create-section footer :p :content "(c) All's well that ends well")))
     (declare (ignore tmp) (ignore finput) (ignore fsubmit))
 
     (set-on-click fsubmit3

tutorial/README.md

@@ -32,7 +32,7 @@ Tutorial Summary
 - 04-tutorial.lisp - The event target, reusing event handlers
 - 05-tutorial.lisp - Using connection-data-item
 - 06-tutorial.lisp - Tasking and events
-- 07-tutorial.lisp - My first CLOG video game (and handling disconnects)
+- 07-tutorial.lisp - My first CLOG video game
 - 08-tutorial.lisp - Mice Love Containers
 - 09-tutorial.lisp - Tabs, pannels and forms
 - 10-tutorial.lisp - Canvas