mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 02:30:42 -08:00
Text Areas
This commit is contained in:
David Botton
parent
dce481e3e5
commit
6f4bd84904
4 changed files with 186 additions and 23 deletions
120
clog-form.lisp
120
clog-form.lisp
|
|
@ -44,7 +44,7 @@ action."))
|
|||
;; form-element-count ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric form-element-count (clog-formt)
|
||||
(defgeneric form-element-count (clog-form)
|
||||
(:documentation "Get form element count."))
|
||||
|
||||
(defmethod form-element-count ((obj clog-form))
|
||||
|
|
@ -141,16 +141,16 @@ elements."))
|
|||
:file :hidden :image :month :number :password :radio :range
|
||||
:reset :search :submit :tel :text :time :url :week))
|
||||
|
||||
(defgeneric create-form-element (clog-form element-type &key name value label)
|
||||
(:documentation "Create a new clog-form-element as child of CLOG-FORM.
|
||||
clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
|
||||
(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"))
|
||||
|
||||
(defmethod create-form-element ((obj clog-form) element-type
|
||||
(defmethod create-form-element ((obj clog-obj) element-type
|
||||
&key (name nil) (value "") (label nil))
|
||||
(let ((element (create-child
|
||||
obj (format nil "<input type='~A' form='~A' value='~A' ~A/>"
|
||||
obj (format nil "<input type='~A' value='~A' ~A/>"
|
||||
(escape-string element-type)
|
||||
(html-id obj)
|
||||
value
|
||||
(if name
|
||||
(format nil "name='~A'" name)
|
||||
|
|
@ -448,10 +448,10 @@ have this set true. Autofocus on element when form loaded. "))
|
|||
;;;;;;;;;;;;;;;;;;
|
||||
|
||||
|
||||
(defgeneric create-label (clog-form &key content label-for)
|
||||
(:documentation "Create a new clog-label as child of CLOG-FORM."))
|
||||
(defgeneric create-label (clog-obj &key content label-for)
|
||||
(:documentation "Create a new clog-label as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-label ((obj clog-form) &key (content "") (label-for nil))
|
||||
(defmethod create-label ((obj clog-obj) &key (content "") (label-for nil))
|
||||
(create-child obj (format nil "<label for='~A'>~A</label>"
|
||||
(if label-for
|
||||
(html-id label-for)
|
||||
|
|
@ -481,7 +481,7 @@ have this set true. Autofocus on element when form loaded. "))
|
|||
;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric create-data-list (clog-obj)
|
||||
(:documentation "Create a new clog-data-list as child of CLOG-FORM."))
|
||||
(:documentation "Create a new clog-data-list as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-data-list ((obj clog-obj))
|
||||
(create-child obj "<datalist />" :clog-type 'clog-data-list :auto-place t))
|
||||
|
|
@ -497,3 +497,101 @@ have this set true. Autofocus on element when form loaded. "))
|
|||
(create-child obj (format nil "<option value='~A'>" (escape-string value))
|
||||
:clog-type 'clog-element :auto-place t))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-text-area
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defclass clog-text-area (clog-form-element)()
|
||||
(:documentation "CLOG Form Element Text-Area Object"));
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; create-text-area ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric create-text-area (clog-obj &key columns rows name value label)
|
||||
(:documentation "Create a new clog-text-area as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-text-area ((obj clog-obj)
|
||||
&key (columns 20)
|
||||
(rows 2)
|
||||
(name "")
|
||||
(value "")
|
||||
(label nil))
|
||||
(let ((element
|
||||
(create-child obj
|
||||
(format nil "<textarea name='~A' cols='~A' rows='~A'>~A</textarea>"
|
||||
name columns rows (escape-string value))
|
||||
:clog-type 'clog-text-area :auto-place t)))
|
||||
|
||||
(when label
|
||||
(label-for label element))
|
||||
element))
|
||||
|
||||
;;;;;;;;;;;;;;;
|
||||
;; word-wrap ;;
|
||||
;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric word-wrap (clog-text-area)
|
||||
(:documentation "Get/Setf form element word-wrap."))
|
||||
|
||||
(defmethod word-wrap ((obj clog-text-area))
|
||||
(property obj "wrap"))
|
||||
|
||||
(defgeneric set-word-wrap (clog-text-area value)
|
||||
(:documentation "Set word-wrap WORD-WRAP for CLOG-TEXT-AREA"))
|
||||
|
||||
(defmethod set-word-wrap ((obj clog-text-area) value)
|
||||
(setf (property obj "wrap") value))
|
||||
(defsetf word-wrap set-word-wrap)
|
||||
|
||||
;;;;;;;;;;;;;;;
|
||||
;; word-wrap ;;
|
||||
;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric word-wrap (clog-text-area)
|
||||
(:documentation "Get/Setf form element word-wrap."))
|
||||
|
||||
(defmethod word-wrap ((obj clog-text-area))
|
||||
(property obj "wrap"))
|
||||
|
||||
(defgeneric set-word-wrap (clog-text-area value)
|
||||
(:documentation "Set word-wrap WORD-WRAP for CLOG-TEXT-AREA"))
|
||||
|
||||
(defmethod set-word-wrap ((obj clog-text-area) value)
|
||||
(setf (property obj "wrap") value))
|
||||
(defsetf word-wrap set-word-wrap)
|
||||
|
||||
;;;;;;;;;;;;;
|
||||
;; columns ;;
|
||||
;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric columns (clog-text-area)
|
||||
(:documentation "Get/Setf form element columns."))
|
||||
|
||||
(defmethod columns ((obj clog-text-area))
|
||||
(property obj "cols"))
|
||||
|
||||
(defgeneric set-columns (clog-text-area value)
|
||||
(:documentation "Set columns COLUMNS for CLOG-TEXT-AREA"))
|
||||
|
||||
(defmethod set-columns ((obj clog-text-area) value)
|
||||
(setf (property obj "cols") value))
|
||||
(defsetf columns set-columns)
|
||||
|
||||
;;;;;;;;;;
|
||||
;; rows ;;
|
||||
;;;;;;;;;;
|
||||
|
||||
(defgeneric rows (clog-text-area)
|
||||
(:documentation "Get/Setf form element rows."))
|
||||
|
||||
(defmethod rows ((obj clog-text-area))
|
||||
(property obj "rows"))
|
||||
|
||||
(defgeneric set-rows (clog-text-area value)
|
||||
(:documentation "Set rows ROWS for CLOG-TEXT-AREA"))
|
||||
|
||||
(defmethod set-rows ((obj clog-text-area) value)
|
||||
(setf (property obj "rows") value))
|
||||
(defsetf rows set-rows)
|
||||
|
||||
|
|
|
|||
|
|
@ -331,7 +331,14 @@ application."
|
|||
"CLOG-Data-List - Class for CLOG Option Data Lists"
|
||||
(clog-data-list class)
|
||||
(create-data-list generic-function)
|
||||
(add-option generic-function))
|
||||
(add-option generic-function)
|
||||
|
||||
"CLOG-Text-Area - Class for CLOG Text Areas"
|
||||
(clog-text-area class)
|
||||
(create-text-area generic-function)
|
||||
(word-wrap generic-function)
|
||||
(columns generic-function)
|
||||
(rows generic-function))
|
||||
|
||||
(defsection @clog-body (:title "CLOG Body Objects")
|
||||
"CLOG-Body - CLOG Body Objects"
|
||||
|
|
|
|||
|
|
@ -1880,7 +1880,7 @@ action.</p></li>
|
|||
<p><a id='x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29" >FORM-ELEMENT-COUNT</a></span></span> <span class="locative-args">CLOG-FORMT</span></span></p>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29" >FORM-ELEMENT-COUNT</a></span></span> <span class="locative-args">CLOG-FORM</span></span></p>
|
||||
|
||||
<p>Get form element count.</p></li>
|
||||
</ul>
|
||||
|
|
@ -1942,10 +1942,11 @@ elements.</p></li>
|
|||
<p><a id='x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29" >CREATE-FORM-ELEMENT</a></span></span> <span class="locative-args">CLOG-FORM ELEMENT-TYPE &KEY NAME VALUE LABEL</span></span></p>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29" >CREATE-FORM-ELEMENT</a></span></span> <span class="locative-args">CLOG-OBJ ELEMENT-TYPE &KEY NAME VALUE LABEL</span></span></p>
|
||||
|
||||
<p>Create a new clog-form-element as child of <code>CLOG-FORM</code>.
|
||||
clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the DOM</p></li>
|
||||
<p>Create a new clog-form-element as child of <code>CLOG-OBJ</code>.
|
||||
It is importamt tjat clog-form-elements are a child or descendant of a
|
||||
clog-form in the DOM</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3AAUTOCOMPLETE-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
|
@ -2102,9 +2103,9 @@ This works since Input type will fall back to a text input.</p></li>
|
|||
<p><a id='x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29" >CREATE-LABEL</a></span></span> <span class="locative-args">CLOG-FORM &KEY CONTENT LABEL-FOR</span></span></p>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29" >CREATE-LABEL</a></span></span> <span class="locative-args">CLOG-OBJ &KEY CONTENT LABEL-FOR</span></span></p>
|
||||
|
||||
<p>Create a new clog-label as child of <code>CLOG-FORM</code>.</p></li>
|
||||
<p>Create a new clog-label as child of <code>CLOG-OBJ</code>.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3ALABEL-FOR-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
|
@ -2130,7 +2131,7 @@ This works since Input type will fall back to a text input.</p></li>
|
|||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-DATA-LIST-20GENERIC-FUNCTION-29" >CREATE-DATA-LIST</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p>
|
||||
|
||||
<p>Create a new clog-data-list as child of <a href="#x-28CLOG-3ACLOG-FORM-20CLASS-29" title="(CLOG:CLOG-FORM CLASS)"><code>CLOG-FORM</code></a>.</p></li>
|
||||
<p>Create a new clog-data-list as child of <code>CLOG-OBJ</code>.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3AADD-OPTION-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
|
@ -2141,6 +2142,48 @@ This works since Input type will fall back to a text input.</p></li>
|
|||
<p>Add option <code>VALUE</code> to data-list.</p></li>
|
||||
</ul>
|
||||
|
||||
<p>CLOG-Text-Area - Class for <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\"clog\" ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Text Areas</p>
|
||||
|
||||
<p><a id='x-28CLOG-3ACLOG-TEXT-AREA-20CLASS-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLOG-TEXT-AREA-20CLASS-29" >CLOG-TEXT-AREA</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-FORM-ELEMENT-20CLASS-29" title="(CLOG:CLOG-FORM-ELEMENT CLASS)">CLOG-FORM-ELEMENT</a></span></span></p>
|
||||
|
||||
<p><a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\"clog\" ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Form Element Text-Area Object</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3ACREATE-TEXT-AREA-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-TEXT-AREA-20GENERIC-FUNCTION-29" >CREATE-TEXT-AREA</a></span></span> <span class="locative-args">CLOG-OBJ &KEY COLUMNS ROWS NAME VALUE LABEL</span></span></p>
|
||||
|
||||
<p>Create a new clog-text-area as child of <code>CLOG-OBJ</code>.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3AWORD-WRAP-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AWORD-WRAP-20GENERIC-FUNCTION-29" >WORD-WRAP</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
|
||||
|
||||
<p>Get/Setf form element word-wrap.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3ACOLUMNS-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACOLUMNS-20GENERIC-FUNCTION-29" >COLUMNS</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
|
||||
|
||||
<p>Get/Setf form element columns.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3AROWS-20GENERIC-FUNCTION-29'></a></p>
|
||||
|
||||
<ul>
|
||||
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AROWS-20GENERIC-FUNCTION-29" >ROWS</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
|
||||
|
||||
<p>Get/Setf form element rows.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a id='x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29'></a></p>
|
||||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">↺</a></span></span></p>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(defun on-new-window (body)
|
||||
(let* (last-tab
|
||||
dl
|
||||
;; Note: Since the there is no need to use the tmp objects
|
||||
;; we reuse the same symbol name (tmp) even though the
|
||||
;; compiler can mark those for garbage collection early
|
||||
|
|
@ -18,10 +19,10 @@
|
|||
(t3 (create-button body :content "Tab3"))
|
||||
(tmp (create-br body))
|
||||
(p1 (create-div body))
|
||||
(p2 (create-div body :content "Panel2 - Type here"))
|
||||
(p2 (create-div body))
|
||||
(p3 (create-div body :content "Panel3 - Type here"))
|
||||
|
||||
;; Create from for panel 1
|
||||
;; 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))
|
||||
|
|
@ -32,7 +33,14 @@
|
|||
(tmp (create-br f1))
|
||||
(tmp (create-form-element f1 :submit :value "OK"))
|
||||
(tmp (create-form-element f1 :reset :value "Start Again"))
|
||||
(dl))
|
||||
|
||||
;; 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))
|
||||
(tmp (create-form-element f2 :submit :value "OK"))
|
||||
(tmp (create-form-element f2 :reset :value "Start Again")))
|
||||
|
||||
;; Panel 1 contents
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -77,7 +85,14 @@
|
|||
;; Panel 2 contents
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(setf (editablep p2) t)
|
||||
(setf (vertical-align ta1) :top)
|
||||
|
||||
(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"
|
||||
(value ta1)))))
|
||||
|
||||
;; Panel 3 contents
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue