mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 10:40:45 -08:00
update documentation, remove tabs
This commit is contained in:
David Botton
parent
2c9ce0864f
commit
25a9462f1f
84 changed files with 2163 additions and 2278 deletions
|
|
@ -10,62 +10,62 @@
|
|||
;; reduces rountrip traffic and speeds setup.
|
||||
(with-connection-cache (body)
|
||||
(let* (last-tab
|
||||
;; 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
|
||||
;; this not an issue as the element is created already
|
||||
;; in the browser window.
|
||||
;;
|
||||
;; See tutorial 33 for a far more elegant approach
|
||||
;; that uses with-clog-create for this type of code
|
||||
;; based layout.
|
||||
;;
|
||||
;; Create tabs and panels
|
||||
(t1 (create-button body :content "Tab1"))
|
||||
(t2 (create-button body :content "Tab2"))
|
||||
(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")))
|
||||
;; 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
|
||||
;; this not an issue as the element is created already
|
||||
;; in the browser window.
|
||||
;;
|
||||
;; See tutorial 33 for a far more elegant approach
|
||||
;; that uses with-clog-create for this type of code
|
||||
;; based layout.
|
||||
;;
|
||||
;; Create tabs and panels
|
||||
(t1 (create-button body :content "Tab1"))
|
||||
(t2 (create-button body :content "Tab2"))
|
||||
(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
|
||||
|
|
@ -74,21 +74,21 @@
|
|||
(setf (requiredp fe1) t)
|
||||
(setf (size fe1) 60)
|
||||
(make-data-list fe1 '("Cool Title"
|
||||
"Not So Cool Title"
|
||||
"Why Not, Another Title"))
|
||||
"Not So Cool Title"
|
||||
"Why Not, Another Title"))
|
||||
(make-data-list fe2 '("#ffffff"
|
||||
"#ff0000"
|
||||
"#00ff00"
|
||||
"#0000ff"
|
||||
"#ff00ff"))
|
||||
"#ff0000"
|
||||
"#00ff00"
|
||||
"#0000ff"
|
||||
"#ff00ff"))
|
||||
(set-on-submit f1
|
||||
(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>")))
|
||||
(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%")
|
||||
|
|
@ -108,30 +108,30 @@
|
|||
(setf (vertical-align sl3) :top)
|
||||
(setf (size sl1) 3)
|
||||
(add-select-options sl1 '("one"
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
(add-select-options sl2 '("one"
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
(set-on-change sl3 (lambda (obj)
|
||||
(declare (ignore obj))
|
||||
(when (selectedp o5)
|
||||
(alert (window body) "Selected 5"))))
|
||||
(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>
|
||||
(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)))))
|
||||
(value ta1)
|
||||
(value sl1)
|
||||
(value sl2)
|
||||
(selectedp o2)))))
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Panel 3 contents
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -140,26 +140,26 @@
|
|||
;; Tab functionality
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
(flet ((select-tab (obj)
|
||||
(setf (hiddenp p1) t)
|
||||
(setf (hiddenp p2) t)
|
||||
(setf (hiddenp p3) t)
|
||||
(setf (background-color t1) :lightgrey)
|
||||
(setf (background-color t2) :lightgrey)
|
||||
(setf (background-color t3) :lightgrey)
|
||||
(setf (background-color last-tab) :lightblue)
|
||||
(setf (hiddenp obj) nil)
|
||||
(focus obj)))
|
||||
(setf last-tab t1)
|
||||
(select-tab p1)
|
||||
(set-on-click t1 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p1)))
|
||||
(set-on-click t2 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p2)))
|
||||
(set-on-click t3 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p3)))))))
|
||||
(setf (hiddenp p1) t)
|
||||
(setf (hiddenp p2) t)
|
||||
(setf (hiddenp p3) t)
|
||||
(setf (background-color t1) :lightgrey)
|
||||
(setf (background-color t2) :lightgrey)
|
||||
(setf (background-color t3) :lightgrey)
|
||||
(setf (background-color last-tab) :lightblue)
|
||||
(setf (hiddenp obj) nil)
|
||||
(focus obj)))
|
||||
(setf last-tab t1)
|
||||
(select-tab p1)
|
||||
(set-on-click t1 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p1)))
|
||||
(set-on-click t2 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p2)))
|
||||
(set-on-click t3 (lambda (obj)
|
||||
(setf last-tab obj)
|
||||
(select-tab p3)))))))
|
||||
|
||||
(defun start-tutorial ()
|
||||
"Start turtorial."
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue