diff --git a/clog-element.lisp b/clog-element.lisp index 573749a..6da95f4 100644 --- a/clog-element.lisp +++ b/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")) diff --git a/clog-form.lisp b/clog-form.lisp index 527bbff..8a6139e 100644 --- a/clog-form.lisp +++ b/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 -clog-form in the DOM")) +It is importamt that clog-form-elements are a child or descendant of a +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 "" + obj (format nil "" (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 "
~A
" + (if legend + (format nil "~A" 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 "" + (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 "" + (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 "~A" + (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 "" + content + (if disabled + " disabled" + "")) + :clog-type 'clog-optgroup :auto-place t)) diff --git a/clog.lisp b/clog.lisp index 5624136..283e023 100644 --- a/clog.lisp +++ b/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) diff --git a/tutorial/09-tutorial.lisp b/tutorial/09-tutorial.lisp index b58cabf..2dff6d9 100644 --- a/tutorial/09-tutorial.lisp +++ b/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 :label tmp)) + (fe1 (create-form-element f1 :text + :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" :label tmp)) + (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)) - (tmp (create-label f2 :content "Please type here:")) - (ta1 (create-text-area f2 :columns 60 :rows 8 :label tmp)) - (tmp (create-br f2)) + (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"))) @@ -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 "
Your form has been submitted:
~A" - (value ta1))))) + (format nil "
Your form has been submitted: +
~A
1 - ~A
2 - ~A
3 - ~A" + (value ta1) + (value sl1) + (value sl2) + (selectedp o2))))) ;; Panel 3 contents ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;