Tutorial 17

README.md

@@ -142,6 +142,7 @@ Tutorial Summary
 - 14-tutorial.lisp - Local (persistent) and Session client-side storage
 - 15-tutorial.lisp - Multi-media
 - 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript
+- 17-tutorial.lisp - W3.CSS layout example and Form submit methods
 
 Demo Summary
 

clog-form.lisp

@@ -21,7 +21,9 @@
 ;; create-form ;;
 ;;;;;;;;;;;;;;;;;
 
-(defgeneric create-form (clog-obj &key action method target auto-place)
+(deftype from-method-type () '(members :get :post :none))
+
+(defgeneric create-form (clog-obj &key action method target class auto-place)
   (:documentation "Create a new CLOG-Form as child of CLOG-OBJ that organizes
 a collection of form elements in to a single form if :AUTO-PLACE (default t)
 place-inside-bottom-of CLOG-OBJ. In CLOG a form's on-submit handler should be
@@ -32,12 +34,20 @@ set an on-submit handler or call (submit CLOG-FORM) to perform the form
 action."))
 
 (defmethod create-form ((obj clog-obj)
-			&key (action "")
+			&key (action "#")
-			  (method "get")
+			  (method :none)
 			  (target "_self")
+			  (class nil)
 			  (auto-place t))
-  (create-child obj (format nil "<form action='~A' method='~A' target='~A'/>"
+  (create-child obj (format nil "<form action='~A' ~A target='~A'/>"
-			    action method target)
+			    action
+			    (if (eq method :none)
+				"onSubmit='return false;'"
+				(format nil "method='~A'" method))
+			    target
+			    (if class
+				(format nil " class='~A'" (escape-string class))
+				""))
 		:clog-type 'clog-form :auto-place auto-place))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;
@@ -346,7 +356,8 @@ group called NAME."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric name-value (clog-obj name)
-  (:documentation "Returns the value of input item called NAME."))
+  (:documentation "Returns the value of input item called NAME and must
+be unique name on entire document."))
 
 (defmethod name-value ((obj clog-obj) name)
   (cc:query (connection-id obj)
@@ -629,7 +640,7 @@ virtual keyboards."))
   (:documentation "Set label is for ELEMENT."))
 
 (defmethod label-for ((obj clog-label) element)
-  (setf (attribute obj "for") element))
+  (setf (attribute obj "for") (html-id element)))
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

clog.lisp

@@ -379,6 +379,7 @@ embedded in a native template application.)"
 
 (defsection @clog-form (:title "CLOG Form Objects")
   "CLOG-Form - Class for organizing Form Elements in to a From"
+  (form-method-type   type)
   (clog-form          class)
   (create-form        generic-function)
   

tutorial/11-tutorial.lisp

@@ -50,7 +50,13 @@
 	       ;; Bootstrap specific markup
 	       (setf (css-class-name alert-div) "alert alert-success")
 	       (setf (attribute alert-div "role") "alert")
-	       
+
+	       ;; We collect the data from the hidden form elements
+	       ;; using radio-value and name-value (for other types if
+	       ;; input other than radio buttons) or we could bind each
+	       ;; control (using ATTACH-AS-CHILD)and seek their value
+	       ;; directly. See tutorial 17 and to deal with forms in
+	       ;; the old html page model of "put" and "get"
 	       (setf (inner-html alert-div)
 		     (format nil "<pre>radios value : ~A</pre><br>
                            <pre>textinput value : ~A</pre><br>"

tutorial/16-tutorial.lisp

@@ -6,9 +6,6 @@
 
 ;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we
 ;; are going to create a bootstrap 4.0 page just using CLOG.
-;;
-;; You should also check out a CSS only alternative to bootsrap -
-;;   https://www.w3schools.com/w3css/default.asp
 
 (defun on-index (body)
   (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")

tutorial/17-tutorial.lisp

@@ -0,0 +1,90 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+;; In this tutorial we will use a CSS only alternative to bootsrap -
+;;   https://www.w3schools.com/w3css/default.asp
+;;
+;; In this case we will use the mobile themes
+
+(defun on-index (body)
+  (load-css (html-document body) "https://www.w3schools.com/w3css/4/w3pro.css")
+  (load-css (html-document body) "https://www.w3schools.com/lib/w3-theme-teal.css")
+  (setf (title (html-document body)) "Hello W3.CSS")
+  
+  (let* ((header (create-section body :header :class "w3-container w3-card w3-theme"))
+	 (tmp    (create-section header :h1 :content "Explore Forms"))
+
+	 (tmp (create-hr body))
+	 
+	 ;; This is a traditional "post" form that will submit data
+	 ;; to a server.
+	 (fcontainer (create-div body  :class "w3-container"))
+	 (tmp        (create-section fcontainer :h2 :content "Post Form"))
+	 (tmp        (create-br fcontainer))
+	 (form1      (create-form fcontainer :method :post :action "/page2"))
+	 (finput     (create-form-element form1 :input :name "yourname" :label
+					  (create-label form1 :content "Enter name:")))
+	 (fsubmit    (create-form-element form1 :submit))
+	 (tmp        (create-br fcontainer))
+
+	 (tmp (create-hr body))
+
+	 ;; This is a traditional "put" form that will submit data
+	 ;; to a server.
+	 (fcontainer (create-div body  :class "w3-container"))
+	 (tmp        (create-section fcontainer :h2 :content "Get Form"))
+	 (tmp        (create-br fcontainer))
+	 (form2      (create-form fcontainer :method :get :action "/page3"))
+	 (finput     (create-form-element form2 :input :name "yourname" :label
+					  (create-label form2 :content "Enter name:")))
+	 (fsubmit    (create-form-element form2 :submit))
+	 (tmp        (create-br fcontainer))
+
+	 (tmp (create-hr body))
+
+	 ;; This is a CLOG style form, instead of submitting data
+	 ;; to another page it is dealt with in place.
+	 (fcontainer (create-div body  :class "w3-container"))
+	 (tmp        (create-section fcontainer :h2 :content "CLOG Style Form"))
+	 (tmp        (create-br fcontainer))
+	 (form3      (create-form fcontainer))
+	 (finput3    (create-form-element form3 :input :name "yourname3" :label
+					  (create-label form3 :content "Enter name:")))
+	 (fsubmit3   (create-form-element form3 :submit))
+	 (tmp        (create-br fcontainer))
+
+	 (tmp (create-hr body))
+	 
+	 (footer (create-section body :footer :class "w3-container w3-theme"))
+	 (tmp    (create-section footer :p :content "(c) All's well that ends well")))
+
+    (set-on-click fsubmit3
+		  (lambda (obj)
+		    (place-before footer
+				  (create-div body :content (format nil "yourname3 = ~A or ~A"
+								    (name-value form3 "yourname3")
+								    (value finput3)))))))
+  
+  (run body))
+
+(defun on-page2 (body)
+  (create-db body :content "POST currently unsupported to a CLOG server app.")
+  (run body))
+
+(defun on-page3 (body)
+  (let ((params (quri:uri-query-params (quri:uri (url (location body))))))
+    (create-div body :content params)
+    (create-div body :content (format nil "yourname = ~A"
+				      (cdr (assoc "yourname" params :test #'equalp)))))
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-index)
+  (set-on-new-window #'on-page2 :path "/page2")
+  (set-on-new-window #'on-page3 :path "/page3")
+  (open-browser))

tutorial/README.md

@@ -49,3 +49,4 @@ Tutorial Summary
 - 14-tutorial.lisp - Local (persistent) and Session client side storage
 - 15-tutorial.lisp - Multi-media
 - 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript
+- 17-tutorial.lisp - W3.CSS layout example and Form submit methods