Last form elements

clog-element.lisp

@@ -214,7 +214,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
 
 (defgeneric advisory-title (clog-element)
   (:documentation "Get/Setf advisory title of Element, usually
-used for body and image maps."))
+used for body and image maps but creates in forms and many
+elements a tool tip."))
 
 (defmethod advisory-title ((obj clog-element))
   (property obj "title"))

clog-form.lisp

@@ -143,17 +143,19 @@ elements."))
   
 (defgeneric create-form-element (clog-obj element-type &key name value label)
   (:documentation "Create a new clog-form-element as child of CLOG-OBJ.
-It is importamt tjat clog-form-elements are a child or descendant of a
+It is importamt that clog-form-elements are a child or descendant of a
-clog-form  in the DOM"))
+clog-form in the DOM. The radio ELEMENT-TYPE groups by NAME."))
 
 (defmethod create-form-element ((obj clog-obj) element-type
-				&key (name nil) (value "") (label nil))
+				&key (name nil) (value nil) (label nil))
   (let ((element (create-child
-		  obj (format nil "<input type='~A' value='~A' ~A/>"
+		  obj (format nil "<input type='~A'~A~A/>"
 			      (escape-string element-type)
-			      value
+			      (if value
+				  (format nil " value='~A'" value)
+				  "")
 			      (if name
-				  (format nil "name='~A'" name)
+				  (format nil " name='~A'" name)
 				  ""))
 		  :clog-type 'clog-form-element :auto-place t)))
     (when label
@@ -415,6 +417,40 @@ have this set true. Autofocus on element when form loaded. "))
   (setf (property obj "size") value))
 (defsetf size set-size)
 
+;;;;;;;;;;;;;;;;;;;;
+;; minimum-length ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric minimum-length (clog-form-element)
+  (:documentation "Get/Setf form element minimum-length."))
+
+(defmethod minimum-length ((obj clog-form-element))
+  (property obj "minlength"))
+
+(defgeneric set-minimum-length (clog-form-element value)
+  (:documentation "Set minimum-length VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-minimum-length ((obj clog-form-element) value)
+  (setf (property obj "minlength") value))
+(defsetf minimum-length set-minimum-length)
+
+;;;;;;;;;;;;;;;;;;;;
+;; maximum-length ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric maximum-length (clog-form-element)
+  (:documentation "Get/Setf form element maximum-length."))
+
+(defmethod maximum-length ((obj clog-form-element))
+  (property obj "maxlength"))
+
+(defgeneric set-maximum-length (clog-form-element value)
+  (:documentation "Set maximum-length VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-maximum-length ((obj clog-form-element) value)
+  (setf (property obj "maxlength") value))
+(defsetf maximum-length set-maximum-length)
+
 ;;;;;;;;;;;;
 ;; select ;;
 ;;;;;;;;;;;;
@@ -569,6 +605,29 @@ virtual keyboards."))
 (defmethod label-for ((obj clog-label) element)
   (setf (attribute obj "for") element))
 
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-fieldset
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-fieldset (clog-element)()
+  (:documentation "CLOG Form Element Fieldset Object"));
+
+;;;;;;;;;;;;;;;;;;;;;
+;; create-fieldset ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+
+(defgeneric create-fieldset (clog-obj &key legend)
+  (:documentation "Create a new clog-fieldset as child of CLOG-OBJ."))
+
+(defmethod create-fieldset ((obj clog-obj) &key (legend nil))
+  (create-child obj (format nil "<fieldset>~A</fieldset>"
+			    (if legend
+				(format nil "<legend>~A</legend>" legend)
+				""))
+		:clog-type 'clog-fieldset :auto-place t))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Implementation - clog-data-list
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -719,3 +778,129 @@ optionally fill in with contents of data-list."))
 
 (defmethod disable-resize ((obj clog-text-area))
   (setf (resizable obj) :none))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-select
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-select (clog-form-element)()
+  (:documentation "CLOG Form Element Select Options Object"));
+
+;;;;;;;;;;;;;;;;;;;
+;; create-select ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric create-select (clog-obj &key name multiple label)
+  (:documentation "Create a new clog-select as child of CLOG-OBJ."))
+
+(defmethod create-select ((obj clog-obj) &key (name nil) (multiple nil) (label nil))
+  (let ((element (create-child
+		  obj (format nil "<select~A~A/>"
+			      (if multiple
+				  " multiple"
+				  "")
+			      (if name
+				  (format nil " name='~A'" name)
+				  ""))
+		 :clog-type 'clog-select :auto-place t)))
+    (when label
+      (label-for label element))
+    element))
+
+;;;;;;;;;;;;;;;;;;;;;;;
+;; add-select-option ;;
+;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric add-select-option (clog-select value content)
+  (:documentation "Add option VALUE to select."))
+
+(defmethod add-select-option ((obj clog-select) value content)
+  (create-child obj (format nil "<option value='~A'>~A</option>"
+			    (escape-string value)
+			    (escape-string content))
+		:clog-type 'clog-element :auto-place t))
+  
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; add-select-options ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric add-select-options (clog-select select)
+  (:documentation "Add group of options to select."))
+
+(defmethod add-select-options ((obj clog-select) select)
+  (dolist (value select)
+    (add-select-option obj value value)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-option
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-option (clog-form-element)()
+  (:documentation "CLOG Form Element Option for CLOG Select Object"));
+
+;;;;;;;;;;;;;;;;;;;
+;; create-option ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric create-option (clog-obj &key content value selected disabled)
+  (:documentation "Create a new clog-option as child of CLOG-OBJ."))
+
+(defmethod create-option ((obj clog-obj) &key
+					   (content "")
+					   (value nil)
+					   (selected nil)
+					   (disabled nil))			  			  
+  (create-child obj (format nil "<option~A~A~A>~A</option>"
+			    (if selected
+				" selected"
+				"")
+			    (if disabled
+				" disabled"
+				"")
+			    (if value
+				(format nil " value='~A'" name)
+				"")
+			    content)
+		:clog-type 'clog-option :auto-place t))
+
+;;;;;;;;;;;;;;;
+;; selectedp ;;
+;;;;;;;;;;;;;;;
+
+(defgeneric selectedp (clog-form-element)
+  (:documentation "Get/Setf form element selectedp."))
+
+(defmethod selectedp ((obj clog-form-element))
+  (js-true-p (property obj "selected")))
+
+(defgeneric set-selectedp (clog-form-element value)
+  (:documentation "Set selectedp VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-selectedp ((obj clog-form-element) value)
+  (setf (property obj "selected") (p-true-js value)))
+(defsetf selectedp set-selectedp)
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-optgroup
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-optgroup (clog-form-element)()
+  (:documentation "CLOG Form Element Optgroup for CLOG Select Object"));
+
+;;;;;;;;;;;;;;;;;;;;;
+;; create-optgroup ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric create-optgroup (clog-obj &key content disabled)
+  (:documentation "Create a new clog-optgroup as child of CLOG-OBJ."))
+
+(defmethod create-optgroup ((obj clog-obj) &key
+					   (content "")
+					   (disabled nil))			  			  
+  (create-child obj (format nil "<optgroup label='~A'~A/>"
+			    content
+			    (if disabled
+				" disabled"
+				""))
+		:clog-type 'clog-optgroup :auto-place t))

clog.lisp

@@ -330,12 +330,29 @@ application."
   (input-mode          generic-function)
   (set-data-list       generic-function)
   (make-data-list      generic-function)
-
+  (minimum-length      generic-function)
+  (maximum-length      generic-function)
+  
   "CLOG-Label - Class for CLOG Labels"
   (clog-label   class)
   (create-label generic-function)
   (label-for    generic-function)
 
+  "CLOG-Fieldset - Class for CLOG Fieldsets"
+  (clog-fieldset   class)
+  (create-fieldset generic-function)
+
+  "CLOG-Select - Class for CLOG Selects"
+  (clog-select        class)
+  (create-select      generic-function)
+  (clog-option        class)
+  (create-option      generic-function)
+  (clog-optgroup      class)
+  (create-optgroup    generic-function)
+  (selectedp          generic-function)
+  (add-select-option  generic-function)
+  (add-select-options generic-function)
+		   
   "CLOG-Data-List - Class for CLOG Option Data Lists"
   (clog-data-list   class)
   (create-data-list generic-function)

tutorial/09-tutorial.lisp

@@ -23,20 +23,42 @@
 
 	 ;; Create form for panel 1
 	 (f1  (create-form p1))
-	 (tmp (create-label f1 :content "Fill in blank:"))
+	 (fe1 (create-form-element f1 :text
-	 (fe1 (create-form-element f1 :text :label tmp))
+				   :label (create-label f1 :content "Fill in blank:")))
 	 (tmp (create-br f1))
-	 (tmp (create-label f1 :content "Pick a color:"))
+	 (fe2 (create-form-element f1 :color :value "#ffffff"
-	 (fe2 (create-form-element f1 :color :value "#ffffff" :label tmp))
+					     :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))
-	 (tmp (create-label f2 :content "Please type here:"))
+	 (fs2 (create-fieldset f2 :legend "Stuff"))
-	 (ta1 (create-text-area f2 :columns 60 :rows 8 :label tmp))
+	 (tmp (create-label fs2 :content "Please type here:"))
-	 (tmp (create-br f2))
+	 (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")))
 
@@ -49,14 +71,14 @@
 
     (make-data-list fe1 '("Cool Title"
 			  "Not So Cool Title"
-			  "Why Not Another Title"))
+			  "Why Not, Another Title"))
     
     (make-data-list fe2 '("#ffffff"
 			  "#ff0000"
 			  "#00ff00"
 			  "#0000ff"
 			  "#ff00ff"))
-
+    
     (set-on-submit f1
 		   (lambda (obj)
 		     (setf (title (html-document body)) (value fe1))
@@ -81,13 +103,36 @@
 
     (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)
+			 (when (selectedp o5)
+			   (alert (window body) "Selected 5"))))
     (set-on-submit f2
 		   (lambda (obj)
 		     (setf (hiddenp f2) t)
 		     (create-span p2
-		       (format nil "<br><b>Your form has been submitted:</b><br>~A"
+		       (format nil "<br><b>Your form has been submitted:</b>
-			       (value ta1)))))
+                                       <br>~A<hr>1 - ~A<br>2 - ~A<br>3 - ~A"
+			       (value ta1)
+			       (value sl1)
+			       (value sl2)
+			       (selectedp o2)))))
 
     ;; Panel 3 contents
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;