diff --git a/clog-system.lisp b/clog-system.lisp index 3ca4d4c..e217f80 100644 --- a/clog-system.lisp +++ b/clog-system.lisp @@ -93,3 +93,11 @@ function. If BOOT-FILE is nil path is removed." (clrhash *url-to-on-new-window*) (setf *clog-running* nil) (cc:shutdown-clog)) + +;;;;;;;;;;;;;;;; +;; debug-mode ;; +;;;;;;;;;;;;;;;; + +(defun debug-mode (obj) + "Turn on browser console debugging for OBJ's connection." + (cc:debug-mode (connection-id obj))) diff --git a/clog.lisp b/clog.lisp index 708dbb8..ce5706c 100644 --- a/clog.lisp +++ b/clog.lisp @@ -51,7 +51,8 @@ embedded in a native template application.)" "CLOG Startup and Shutdown" (initialize function) (set-on-new-window function) - (shutdown function)) + (shutdown function) + (debug-mode function)) (defsection @clog-utilities (:title "CLOG Utilities") "CLOG utilities" diff --git a/tutorial/09-tutorial.lisp b/tutorial/09-tutorial.lisp index f912be4..de7e246 100644 --- a/tutorial/09-tutorial.lisp +++ b/tutorial/09-tutorial.lisp @@ -11,7 +11,7 @@ ;; compiler can mark those for garbage collection early ;; this not an issue as the element is created already ;; in the browser window. - + ;; ;; Create tabs and panels (t1 (create-button body :content "Tab1")) (t2 (create-button body :content "Tab2")) @@ -20,7 +20,6 @@ (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 @@ -31,7 +30,6 @@ (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")) @@ -49,8 +47,7 @@ (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:"))) - + (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")) @@ -61,50 +58,41 @@ (o5 (create-option og1 :content "five")) (tmp (create-form-element f2 :submit :value "OK")) (tmp (create-form-element f2 :reset :value "Start Again"))) - - ;; Panel 1 contents ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - + ;; Panel 1 contents + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (setf (place-holder fe1) "type here..") (setf (requiredp fe1) t) - (setf (size fe1) 60) - + (setf (size fe1) 60) (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")) - + "#ff00ff")) (set-on-submit f1 (lambda (obj) (setf (title (html-document body)) (value fe1)) (setf (background-color p1) (value fe2)) (setf (hiddenp f1) t) (create-span p1 :content - "
Your form has been submitted"))) - + "
Your form has been submitted"))) (setf (width p1) "100%") (setf (width p2) "100%") - (setf (width p3) "100%") - + (setf (width p3) "100%") (setf (height p1) 400) (setf (height p2) 400) (setf (height p3) 400) - (set-border p1 :thin :solid :black) (set-border p2 :thin :solid :black) (set-border p3 :thin :solid :black) - + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Panel 2 contents ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - (setf (vertical-align ta1) :top) (disable-resize ta1) - (setf (vertical-align sl1) :top) (setf (vertical-align sl2) :top) (setf (vertical-align sl3) :top) @@ -114,13 +102,11 @@ "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")))) @@ -134,31 +120,25 @@ (value sl1) (value sl2) (selectedp o2))))) - + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Panel 3 contents ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - (setf (editablep p3) t) - + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; 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 t3) :lightgrey) (setf (background-color last-tab) :lightblue) (setf (hiddenp obj) nil) (focus obj))) - (setf last-tab t1) - (select-tab p1) - + (select-tab p1) (set-on-click t1 (lambda (obj) (setf last-tab obj) (select-tab p1))) @@ -172,6 +152,5 @@ (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser)) diff --git a/tutorial/10-tutorial.lisp b/tutorial/10-tutorial.lisp index c11d418..a22f0dc 100644 --- a/tutorial/10-tutorial.lisp +++ b/tutorial/10-tutorial.lisp @@ -7,26 +7,20 @@ (defun on-new-window (body) (let* ((canvas (create-canvas body :width 600 :height 400)) (cx (create-context2d canvas))) - - (set-border canvas :thin :solid :black) - + (set-border canvas :thin :solid :black) (fill-style cx :green) (fill-rect cx 10 10 150 100) - (fill-style cx :blue) (font-style cx "bold 24px serif") (fill-text cx "Hello World" 10 150) - (fill-style cx :red) (begin-path cx) (ellipse cx 200 200 50 7 0.78 0 6.29) (path-stroke cx) (path-fill cx) - (run body))) (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser)) diff --git a/tutorial/11-tutorial.lisp b/tutorial/11-tutorial.lisp index 8fa01f3..94c4e9d 100644 --- a/tutorial/11-tutorial.lisp +++ b/tutorial/11-tutorial.lisp @@ -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: -;; -;; -;; -;; -;; 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: +;;; +;;; +;;; +;;; +;;; 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 @@ 
textinput value : ~A

" (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")) diff --git a/tutorial/12-tutorial.lisp b/tutorial/12-tutorial.lisp index a2b9cf8..05b83dc 100644 --- a/tutorial/12-tutorial.lisp +++ b/tutorial/12-tutorial.lisp @@ -1,21 +1,21 @@ -;; CLOG is an excellent choice for websites as well as GUI's for applications. -;; The first 10 tutorials focused on a single "page" application. For GUIs -;; that works well and combining you CLOG app embedded in an native app that -;; provides a web control on desktop or mobile works well. CLOG apps of course -;; are web apps right out of the box. However CLOG is also more then capable -;; of handling things in a more traditional website manor. -;; -;; In the last tutorial it was demonstrated that one can take any HTML file -;; add the boot.js file to it and then it becomes a dynamic interactive -;; clog app. An entire site could be laid out using .html files and where -;; desired a full dynamic page can be created by copying the boot.html file -;; or some styled html template etc. (Look in the demos -coming soon- for -;; examples using templates like bootstrap with CLOG, etc). -;; -;; Here we demonstrate CLOG's routing to dynamic pages. Static pages are -;; placed in the directory set on initialization. -;; -;; See START-TUTORIAL below. +;;; CLOG is an excellent choice for websites as well as GUI's for applications. +;;; The first 10 tutorials focused on a single "page" application. For GUIs +;;; that works well and combining you CLOG app embedded in an native app that +;;; provides a web control on desktop or mobile works well. CLOG apps of course +;;; are web apps right out of the box. However CLOG is also more then capable +;;; of handling things in a more traditional website manor. +;;; +;;; In the last tutorial it was demonstrated that one can take any HTML file +;;; add the boot.js file to it and then it becomes a dynamic interactive +;;; clog app. An entire site could be laid out using .html files and where +;;; desired a full dynamic page can be created by copying the boot.html file +;;; or some styled html template etc. (Look in the demos -coming soon- for +;;; examples using templates like bootstrap with CLOG, etc). +;;; +;;; Here we demonstrate CLOG's routing to dynamic pages. Static pages are +;;; placed in the directory set on initialization. +;;; +;;; See START-TUTORIAL below. (defpackage #:clog-user (:use #:cl #:clog) @@ -24,7 +24,6 @@ (in-package :clog-user) (defun on-main (body) - (create-div body :content "We are in on-main

Pick a link

@@ -36,20 +35,15 @@
  • /tutorial/tut-11.html - an html file using boot.js
  • '/tutorial/regular-file.html - a regular html file ") - (run body)) (defun on-page1 (body) - (create-div body :content "You are in on-page1") - (run body)) (defun on-page2 (body) - (create-div body :content "You are in on-page2") (log-console (window body) "A message in the browser's log") - (run body)) (defun on-default (body) @@ -61,68 +55,51 @@ (run body)))) (defun on-tutorial11 (body) - (clog-connection:debug-mode (clog::connection-id body)) - (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") - (setf (inner-html alert-div) (format nil "
    radios value : ~A

    textinput value : ~A

    " (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-main) - ;; Navigating to http://127.0.0.1:8080/page1 executes on-page1 (set-on-new-window #'on-page1 :path "/page1") - ;; Navigating to http://127.0.0.1:8080/page1.html executes on-page1 ;; There is no .html file - it is just a route to CLOG handler ;; but the user thinks it is like any other html file. (set-on-new-window #'on-page1 :path "/page1.html") - ;; Here we add another page, page2. But uses a boot file that turns ;; on debugging to the browser console of communications with the ;; server. (set-on-new-window #'on-page2 :path "/page2" :boot-file "/debug.html") - ;; Here we add another page, page3. But this time we use the html file ;; from tutorial 11 and make it the boot-file and excute the same code ;; in (on-tutorial11) as in tutorial 11. (set-on-new-window #'on-tutorial11 :path "/page3" :boot-file "/tutorial/tut-11.html") - ;; Setting a "default" path says that any use of an included boot.js ;; file will route to this function, in this case #'on-default ;; that will determine if this is coming from the path used in tutorial ;; 11 - "http://127.0.0.1:8080/tutorial/tut-11.html" and if does ;; use on-tutorial11 and if not say "No Dice!" (set-on-new-window #'on-default :path "default") - (open-browser)) diff --git a/tutorial/13-tutorial.lisp b/tutorial/13-tutorial.lisp index 795eb5b..e3eb68e 100644 --- a/tutorial/13-tutorial.lisp +++ b/tutorial/13-tutorial.lisp @@ -6,7 +6,6 @@ (defun start-tutorial () "Start turtorial." - (format t "Tutorial 13 is a how to on building your own clog appliction.~%~ Copy the directory - ~A~%~ to your ~~/common-lisp directory or other asdf / quicklisp~%~ diff --git a/tutorial/13-tutorial/hello-clog/hello-clog.lisp b/tutorial/13-tutorial/hello-clog/hello-clog.lisp index a7bc145..9f936c1 100644 --- a/tutorial/13-tutorial/hello-clog/hello-clog.lisp +++ b/tutorial/13-tutorial/hello-clog/hello-clog.lisp @@ -6,10 +6,8 @@ (defun on-new-window (body) (create-div body :content "Hello World!") - (run body)) (defun start-app () - (initialize #'on-new-window :static-root #P"www/") (open-browser)) diff --git a/tutorial/14-tutorial.lisp b/tutorial/14-tutorial.lisp index 2396835..45a8c0d 100644 --- a/tutorial/14-tutorial.lisp +++ b/tutorial/14-tutorial.lisp @@ -10,13 +10,11 @@ (setf (storage-element (window body) :local "my-local-key") (get-universal-time)) (reload (location body)))) - (set-on-click (create-button body :content "Set Session Key") (lambda (obj) (setf (storage-element (window body) :session "my-session-key") (get-universal-time)) (reload (location body)))) - (set-on-storage (window body) (lambda (obj data) (create-div body :content @@ -24,8 +22,6 @@ (getf data ':key) (getf data ':old-value) (getf data ':value))))) - - (create-div body :content (format nil "

    Local Storage vs Session Storage

    @@ -46,11 +42,9 @@ Changes made to a local key will fire an event and print below:
    " (storage-element (window body) :local "my-local-key") "my-session-key" (storage-element (window body) :session "my-session-key"))) - (run body)) (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser)) diff --git a/tutorial/15-tutorial.lisp b/tutorial/15-tutorial.lisp index b41e451..67d0cc8 100644 --- a/tutorial/15-tutorial.lisp +++ b/tutorial/15-tutorial.lisp @@ -5,7 +5,6 @@ (in-package :clog-user) (defun on-new-window (body) - (let* ((vid (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4")) (tmp (create-br body)) (vpl (create-button body :content ">")) @@ -18,19 +17,15 @@ (ast (create-button body :content "||")) (alc (create-form-element body :input)) (tmp (create-hr body))) - (set-on-click vpl (lambda (obj)(play-media vid))) (set-on-click apl (lambda (obj)(play-media aud))) (set-on-click vst (lambda (obj)(pause-media vid))) (set-on-click ast (lambda (obj)(pause-media aud))) - (set-on-time-update vid (lambda (obj)(setf (value vlc) (media-position vid)))) (set-on-time-update aud (lambda (obj)(setf (value alc) (media-position aud)))) - (run body))) (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser)) diff --git a/tutorial/16-tutorial.lisp b/tutorial/16-tutorial.lisp index 8fe8bec..2e0f2c9 100644 --- a/tutorial/16-tutorial.lisp +++ b/tutorial/16-tutorial.lisp @@ -4,8 +4,8 @@ (in-package :clog-user) -;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we -;; are going to create a bootstrap 4.0 page just using CLOG. +;;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we +;;; are going to create a bootstrap 4.0 page just using CLOG. (defun on-index (body) (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css") @@ -13,46 +13,42 @@ ;; the generic boot.html (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js") (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js") - + ;; Root page setup (setf (title (html-document body)) "Hello Boostrap") - (let* ((nav (create-section body :nav :class "nav")) + ;; Nav Bar (l1 (create-a nav :content "link1" :class "nav-link")) (l2 (create-a nav :content "link2" :class "nav-link")) (l3 (create-a nav :content "link3" :class "nav-link")) (l4 (create-a nav :content "link3" :class "nav-link" :link "/page2")) - + ;; Jumbotron message (jumbo (create-div body :class "jumbotron text-center")) (jname (create-section jumbo :h1 :content "My First Bootstrap Page")) (tmp (create-p jumbo :content "Resize this responsive page to see the effect!")) - + ;; Container for three colomns pf text (container (create-div body :class "container")) (row (create-div container :class "row")) - + ;; Column 1 (col1 (create-div row :class "col-sm-4")) (tmp (create-section col1 :h3 :content "Column 1")) (tmp (create-p col1 :content "Lorem ipsum dolor..")) - + ;; Column 2 (col2 (create-div row :class "col-sm-4")) (tmp (create-section col2 :h3 :content "Column 2")) (tmp (create-p col2 :content "Lorem ipsum dolor..")) - + ;; Column 3 (col3 (create-div row :class "col-sm-4")) (tmp (create-section col3 :h3 :content "Column 3")) (tmp (create-p col3 :content "Lorem ipsum dolor.."))) - - (set-on-click l1 (lambda (obj)(alert (window body) "Clicked link1"))) - + (set-on-click l1 (lambda (obj)(alert (window body) "Clicked link1"))) (set-on-click l2 (lambda (obj) (let* ((alert (create-div body :class "alert alert-warning alert-dismissible fade show")) (tmp (create-phrase alert :strong :content "Wow! You clicked link 2")) (btn (create-button alert :class "close" :content "×"))) (setf (attribute alert "role") "alert") (setf (attribute btn "data-dismiss") "alert") - (place-after nav alert)))) - - (set-on-click l3 (lambda (obj)(setf (color jname) (rgb 128 128 0))))) - + (place-after nav alert)))) + (set-on-click l3 (lambda (obj)(setf (color jname) (rgb 128 128 0))))) (run body)) (defun on-page2 (body) @@ -60,23 +56,21 @@ (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css") (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js") (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js") - + ;; Setup page2 (setf (title (html-document body)) "Hello Boostrap - page2") - (let* ((nav (create-section body :nav :class "nav")) + ;; Nav Bar (l1 (create-a nav :content "link1" :class "nav-link")) (l2 (create-a nav :content "link2" :class "nav-link")) (l3 (create-a nav :content "link3" :class "nav-link")) (l4 (create-a nav :content "page1" :class "nav-link" :link "/")) - + ;; Jumbotron (jumbo (create-div body :class "jumbotron text-center")) (jname (create-section jumbo :h1 :content "You found Page2")))) - (run body)) (defun start-tutorial () "Start turtorial." - (initialize #'on-index) (set-on-new-window #'on-page2 :path "/page2") (open-browser)) diff --git a/tutorial/17-tutorial.lisp b/tutorial/17-tutorial.lisp index cebb471..138cf84 100644 --- a/tutorial/17-tutorial.lisp +++ b/tutorial/17-tutorial.lisp @@ -4,20 +4,20 @@ (in-package :clog-user) -;; In this tutorial we will use a CSS only alternative to bootsrap - -;; https://www.w3schools.com/w3css/default.asp +;;; In this tutorial we will use a CSS only alternative to bootsrap - +;;; https://www.w3schools.com/w3css/default.asp (defun on-index (body) + ;; Load css files (load-css (html-document body) "https://www.w3schools.com/w3css/4/w3.css") (load-css (html-document body) "https://www.w3schools.com/lib/w3-theme-teal.css") + ;; Setup page (setf (title (html-document body)) "Hello W3.CSS") - (let* ((header (create-section body :header :class "w3-container w3-card w3-theme")) (tmp (create-section header :h1 :content "Explore Forms")) - + ;; Main area of page (data-area (create-div body :class "w3-container")) (tmp (create-hr data-area)) - ;; This is a traditional "post" form that will submit data ;; to a server. (fcontainer (create-div data-area :class "w3-container")) @@ -28,9 +28,7 @@ (create-label form1 :content "Enter name:"))) (fsubmit (create-form-element form1 :submit)) (tmp (create-br fcontainer)) - (tmp (create-hr data-area)) - ;; This is a traditional "get" form that will submit data ;; to a server. (fcontainer (create-div data-area :class "w3-container")) @@ -41,9 +39,7 @@ (create-label form2 :content "Enter name:"))) (fsubmit (create-form-element form2 :submit)) (tmp (create-br fcontainer)) - (tmp (create-hr data-area)) - ;; This is a CLOG style form, instead of submitting data ;; to another page it is dealt with in place. (fcontainer (create-div data-area :class "w3-container")) @@ -54,21 +50,18 @@ (create-label form3 :content "Enter name:"))) (fsubmit3 (create-form-element form3 :submit)) (tmp (create-br fcontainer)) - (tmp (create-hr data-area)) - (footer (create-section body :footer :class "w3-container w3-theme")) (tmp (create-section footer :p :content "(c) All's well that ends well"))) (set-on-click fsubmit3 - (lambda (obj) - (setf (hiddenp data-area) t) - (place-before footer - (create-div body - :content (format nil "yourname3 = using NAME-VALUE ~A or VALUE ~A" - (name-value form3 "yourname3") - (value finput3))))))) - + (lambda (obj) + (setf (hiddenp data-area) t) + (place-before footer + (create-div body + :content (format nil "yourname3 = using NAME-VALUE ~A or VALUE ~A" + (name-value form3 "yourname3") + (value finput3))))))) (run body)) (defun on-page2 (body) @@ -87,7 +80,6 @@ (defun start-tutorial () "Start turtorial." - (initialize #'on-index) (set-on-new-window #'on-page2 :path "/page2") (set-on-new-window #'on-page3 :path "/page3") diff --git a/tutorial/18-tutorial.lisp b/tutorial/18-tutorial.lisp index f6d9135..0ae7811 100644 --- a/tutorial/18-tutorial.lisp +++ b/tutorial/18-tutorial.lisp @@ -10,53 +10,49 @@ (object (create-div target1)) (msg (create-div body :content "Drag green box to other yellow box"))) - + ;; Instructions (setf (positioning msg) :fixed) (setf (top msg) "125px") - + ;; Box 1 (setf (positioning target1) :fixed) (setf (top target1) "10px") (setf (left target1) "10px") (setf (width target1) "100px") (setf (height target1) "100px") (setf (background-color target1) :yellow) - + ;; Box 2 (setf (positioning target2) :fixed) (setf (top target2) "10px") (setf (left target2) "140px") (setf (width target2) "100px") (setf (height target2) "100px") (setf (background-color target2) :yellow) - + ;; Box to Drag (setf (positioning object) :absolute) (setf (top object) "10px") (setf (left object) "10px") (setf (width object) "50px") (setf (height object) "50px") (setf (background-color object) :green) - ;; To allow for drag and drop requires: ;; ;; 1 object is draggable (setf (draggablep object) t) ;; 2 the on-drag-start event is set (set-on-drag-start object (lambda (obj)()) :drag-data "some data") - ;; 4 the target on-drag-over event is sett (set-on-drag-over target1 (lambda (obj)())) ;; 5 the target on-drop event is set (set-on-drop target1 (lambda (obj data) (place-inside-bottom-of target1 object))) - + ;; Set up other box 1 also as targer for returning drag box (set-on-drag-over target2 (lambda (obj)())) (set-on-drop target2 (lambda (obj data) (print (getf data :drag-data)) (place-inside-bottom-of target2 object))) - (run body))) (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser)) diff --git a/tutorial/19-tutorial.lisp b/tutorial/19-tutorial.lisp index cb7a9ef..02984be 100644 --- a/tutorial/19-tutorial.lisp +++ b/tutorial/19-tutorial.lisp @@ -4,16 +4,15 @@ (in-package :clog-user) -;; In this tutorial we will see how to easily use a JavaScript -;; component. In the static-files directory there is a simple -;; JavaScript component (clog/static-files/tutorial/jslists) to create -;; collapsable trees that we will use for this tutorial. +;;; In this tutorial we will see how to easily use a JavaScript +;;; component. In the static-files directory there is a simple +;;; JavaScript component (clog/static-files/tutorial/jslists) to create +;;; collapsable trees that we will use for this tutorial. (defun on-new-window (body) ;; First we need to load jslists' JavaScript file and css (load-css (html-document body) "/tutorial/jslists/jsLists.css") - (load-script (html-document body) "/tutorial/jslists/jsLists.js") - + (load-script (html-document body) "/tutorial/jslists/jsLists.js") ;; Second we need to build an example list. jsLists uses an ordered ;; or unordered list for it's data. (let* ((list-top (create-unordered-list body)) @@ -23,13 +22,11 @@ (item (create-list-item list-b :content "Item 2")) (item (create-list-item list-b :content "Item 3")) (item (create-list-item list-b :content "Item 4"))) - (js-execute body (format nil "JSLists.applyToList('~A', 'ALL');" (html-id list-top)))) (run body)) (defun start-tutorial () "Start turtorial." - (initialize #'on-new-window) (open-browser))