mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 10:40:45 -08:00
Code Issues Projects Releases Wiki Activity

style

Browse source
This commit is contained in:
David Botton 2021-02-01 13:43:47 -05:00
parent a46f5dbf6f
commit 73bc5bf10f
14 changed files with 111 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

71
tutorial/11-tutorial.lisp
View file

@ -1,32 +1,31 @@
;; Creating code GUIs from scratch is great, but in the real world often design
;; is left to artists and code is left to engineers. CLOG is an amazign solution
;; for that model of app development. Any existing web page can be come a CLOG
;; app by simply adding the following two lines to an existing HTML file:
;;
;; <script src="/js/jquery.min.js" type="text/javascript"></script>
;; <script src="/js/boot.js" type="text/javascript"></script>
;;
;; The first line adds jquery which CLOG uses to enhance browser compatability.
;; The second line add the "boot" file.
;;
;; For this tutorial we generated the clog/static-files/tutorial/tut-11.html
;; by using the form generator at https://bootsnipp.com/forms?version=3
;; then used the the template from https://getbootstrap.com/docs/3.3/
;; and added CLOG's boot.js script line. It was neccesary to add an id to the
;; form (id='form1') as the generator did not add one.
;;
;; - We set a blank on-submit to overide the behavior in the bootstrap
;; buttons to submit the from HTML style.
;; - We are going to attach to the "Good Button" an on-click handler
;; to handle getting the values
;; - We attach to each control in the on-click handler that we want
;; value for and query them
;; - We attach an on-click handler that resets the form to the
;; "Scary Button"
;;
;; - We go in the browser to the file
;; "http://127.0.0.1:8080/tutorial/tut-11.html"
;;; Creating code GUIs from scratch is great, but in the real world often design
;;; is left to artists and code is left to engineers. CLOG is an amazign solution
;;; for that model of app development. Any existing web page can be come a CLOG
;;; app by simply adding the following two lines to an existing HTML file:
;;;
;;; <script src="/js/jquery.min.js" type="text/javascript"></script>
;;; <script src="/js/boot.js" type="text/javascript"></script>
;;;
;;; The first line adds jquery which CLOG uses to enhance browser compatability.
;;; The second line add the "boot" file.
;;;
;;; For this tutorial we generated the clog/static-files/tutorial/tut-11.html
;;; by using the form generator at https://bootsnipp.com/forms?version=3
;;; then used the the template from https://getbootstrap.com/docs/3.3/
;;; and added CLOG's boot.js script line. It was neccesary to add an id to the
;;; form (id='form1') as the generator did not add one.
;;;
;;; - We set a blank on-submit to overide the behavior in the bootstrap
;;; buttons to submit the from HTML style.
;;; - We are going to attach to the "Good Button" an on-click handler
;;; to handle getting the values
;;; - We attach to each control in the on-click handler that we want
;;; value for and query them
;;; - We attach an on-click handler that resets the form to the
;;; "Scary Button"
;;;
;;; - We go in the browser to the file
;;; "http://127.0.0.1:8080/tutorial/tut-11.html"
(defpackage #:clog-user
(:use #:cl #:clog)
@ -35,22 +34,19 @@
(in-package :clog-user)
(defun on-new-window (body)
(clog-connection:debug-mode (clog::connection-id body))
;; This will turn on debug output in the browser console.
(debug-mode body)
;; Setup form
(let* ((form (attach-as-child body "form1" :clog-type 'clog-form))
(good-button (attach-as-child body "button1id"))
(scary-button (attach-as-child body "button2id")))
(flet ((on-click-good (obj)
(let ((alert-div (create-div body)))
(place-before form alert-div)
(setf (hiddenp form) t)
;; 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
@ -62,20 +58,15 @@
<pre>textinput value : ~A</pre><br>"
(radio-value form "radios")
(name-value form "textinput")))))
(on-click-scary (obj)
(reset form)))
;; We need to overide the boostrap default to submit the form html style
(set-on-submit form (lambda (obj)()))
(set-on-click good-button #'on-click-good)
(set-on-click scary-button #'on-click-scary))
(run body)))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser :url "http://127.0.0.1:8080/tutorial/tut-11.html"))