mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 02:30:42 -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

8
clog-system.lisp
View file

@ -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)))

3
clog.lisp
View file

@ -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"

31
tutorial/09-tutorial.lisp
View file

@ -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"))
@ -50,7 +48,6 @@
(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"))
@ -61,24 +58,20 @@
(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
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(setf (place-holder fe1) "type here..")
(setf (requiredp fe1) t)
(setf (size fe1) 60)
(make-data-list fe1 '("Cool Title"
"Not So Cool 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))
@ -86,25 +79,20 @@
(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%")
(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 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)))
@ -172,6 +152,5 @@
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

6
tutorial/10-tutorial.lisp
View file

@ -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)
(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))

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"))

59
tutorial/12-tutorial.lisp
View file

@ -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<br><br>
<h1>Pick a link</h1>
@ -36,20 +35,15 @@
<li><a href='/tutorial/tut-11.html'>/tutorial/tut-11.html</a> - an html file using boot.js
<li><a href='/tutorial/regular-file.html'>'/tutorial/regular-file.html</a> - a regular html file
</ul>")
(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 "<pre>radios value : ~A</pre><br>
<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-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))

1
tutorial/13-tutorial.lisp
View file

@ -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~%~

2
tutorial/13-tutorial/hello-clog/hello-clog.lisp
View file

@ -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))

6
tutorial/14-tutorial.lisp
View file

@ -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
"<H1>Local Storage vs Session Storage</H1>
<p width=500>
@ -46,11 +42,9 @@ Changes made to a local key will fire an event and print below:<br>"
(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))

5
tutorial/15-tutorial.lisp
View file

@ -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))

30
tutorial/16-tutorial.lisp
View file

@ -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,36 +13,34 @@
;; 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 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"))
@ -50,9 +48,7 @@
(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)))))
(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))

18
tutorial/17-tutorial.lisp
View file

@ -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,9 +50,7 @@
(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")))
@ -68,7 +62,6 @@
: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")

14
tutorial/18-tutorial.lisp
View file

@ -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))

11
tutorial/19-tutorial.lisp
View file

@ -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")
;; 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))