Minor updates to comments.

This commit is contained in:
David Botton 2021-11-02 21:48:31 -04:00
parent aca581216d
commit a31218ba3d
13 changed files with 32 additions and 20 deletions

View file

@ -10,10 +10,10 @@
(setf (title (html-document body)) "Tutorial 2") (setf (title (html-document body)) "Tutorial 2")
;; The CLOG-body object gives you access to a number of other CLOG-Objects ;; The CLOG-body object gives you access to a number of other CLOG-Objects
;; ;;
;; (html-document body) is the CLOG-Document object ;; (html-document body) is the CLOG-Document object ~ These are aproximately
;; (window body) is the CLOG-Window object ;; (window body) is the CLOG-Window object ~ the equivelant html
;; (location body) is the CLOG-Location object ;; (location body) is the CLOG-Location object ~ objects of same name.
;; (navigator body) is the CLOG-Navigator object ;; (navigator body) is the CLOG-Navigator object ~ See the manual or src.
(let ((hello-element (let ((hello-element
;; CREATE-SECTION is a lispier way of creating any of the HTML 5 ;; CREATE-SECTION is a lispier way of creating any of the HTML 5
@ -25,9 +25,9 @@
;; Take a look at clog-element-common.lisp or the clog-manual ;; Take a look at clog-element-common.lisp or the clog-manual
(create-section body :h1 :content "Hello World! (click me!)"))) (create-section body :h1 :content "Hello World! (click me!)")))
(let ((x 0)) ; A closure - each call to on-new-window will (let ((x 0)) ; A closure - each call to on-new-window by
(set-on-click hello-element ; create a different version of this closer. (set-on-click hello-element ; a new browser window or refresh will
(lambda (obj) (lambda (obj) ; create a different version of this closure.
(declare (ignore obj)) (declare (ignore obj))
(incf x) (incf x)
(dotimes (n x) (dotimes (n x)

View file

@ -26,7 +26,7 @@
;;; and that events do not wait for previous event handlers to complete. One simple ;;; and that events do not wait for previous event handlers to complete. One simple
;;; way to avoid issues is to use the key :one-time t on the set-on-click or other ;;; way to avoid issues is to use the key :one-time t on the set-on-click or other
;;; event, this will turn off the event immediately when the user clicks and can then ;;; event, this will turn off the event immediately when the user clicks and can then
;;; set the even again when done handling the event if want to again accept the event. ;;; set the event again when done handling the event if want to again accept the event.
(defun start-tutorial () (defun start-tutorial ()
"Start turtorial." "Start turtorial."
(initialize #'on-new-window) (initialize #'on-new-window)

View file

@ -8,7 +8,7 @@
;; Using connection-data-item it is possible to pass data that ;; Using connection-data-item it is possible to pass data that
;; is specific to an instance of a CLOG app. The connection ;; is specific to an instance of a CLOG app. The connection
;; data items are accessible from every clog-object on the ;; data items are accessible from every clog-object on the
;; same connection. ;; same connection and are thread safe.
(setf (color (connection-data-item obj "changer")) "green")) (setf (color (connection-data-item obj "changer")) "green"))
(defun on-new-window (body) (defun on-new-window (body)

View file

@ -49,7 +49,7 @@
(sleep .2) (sleep .2)
(setf (text mover) "(-o-)")) (setf (text mover) "(-o-)"))
(setf (inner-html mover) "<H1>GAME OVER</H1>")) (setf (inner-html mover) "<H1>GAME OVER</H1>"))
:name "Dragon event loop") :name "Darth event loop")
;; Check of browser still connected while running game loop ;; Check of browser still connected while running game loop
(loop (loop
(unless (validp body) (unless (validp body)

View file

@ -4,6 +4,7 @@
(in-package :clog-user) (in-package :clog-user)
;;; A very brief example of using the canvas control.
(defun on-new-window (body) (defun on-new-window (body)
(setf (title (html-document body)) "Tutorial 10") (setf (title (html-document body)) "Tutorial 10")
(let* ((canvas (create-canvas body :width 600 :height 400)) (let* ((canvas (create-canvas body :width 600 :height 400))

View file

@ -7,7 +7,7 @@
;;; <script src="/js/boot.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 first line adds jquery which CLOG uses to enhance browser compatability.
;;; The second line adds the "boot" file. ;;; The second line adds the CLOG "boot" file.
;;; ;;;
;;; For this tutorial we generated the clog/static-files/tutorial/tut-11.html ;;; 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 ;;; by using the form generator at https://bootsnipp.com/forms?version=3
@ -15,6 +15,8 @@
;;; and added CLOG's boot.js script line. It was neccesary to add an id to the ;;; 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. ;;; form (id='form1') as the generator did not add one.
;;; ;;;
;;; In the code below:
;;;
;;; - We set a blank on-submit to overide the behavior in the bootstrap ;;; - We set a blank on-submit to overide the behavior in the bootstrap
;;; buttons to submit the form HTML style. ;;; buttons to submit the form HTML style.
;;; - We are going to attach to the "Good Button" an on-click handler ;;; - We are going to attach to the "Good Button" an on-click handler
@ -24,8 +26,8 @@
;;; - We attach an on-click handler that resets the form to the ;;; - We attach an on-click handler that resets the form to the
;;; "Scary Button" ;;; "Scary Button"
;;; ;;;
;;; - We go in the browser to the file ;;; We go in the browser to the file
;;; "http://127.0.0.1:8080/tutorial/tut-11.html" ;;; "http://127.0.0.1:8080/tutorial/tut-11.html"
(defpackage #:clog-user (defpackage #:clog-user
(:use #:cl #:clog) (:use #:cl #:clog)

View file

@ -9,10 +9,10 @@
;;; add the boot.js file to it and then it becomes a dynamic interactive ;;; 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 ;;; clog app. An entire site could be laid out using .html files and where
;;; desired a fully dynamic page can be created by copying the boot.html file ;;; desired a fully dynamic page can be created by copying the boot.html file
;;; or some styled html template etc. (Look in the demos -coming soon- for ;;; or some styled html template etc. (Look in the next few demos for
;;; examples using templates like bootstrap with CLOG, etc). ;;; examples using templates like bootstrap with CLOG, etc).
;;; ;;;
;;; Here we demonstrate CLOG's routing to dynamic pages. Static pages are ;;; Here we demonstrate how CLOG routs to dynamic pages. Static pages are
;;; placed in the directory set on initialization. ;;; placed in the directory set on initialization.
;;; ;;;
;;; See START-TUTORIAL below. ;;; See START-TUTORIAL below.
@ -34,6 +34,7 @@
<ul> <ul>
<li><a href='/page1'>/page1</a> - a CLOG app <li><a href='/page1'>/page1</a> - a CLOG app
<li><a href='/page1.html'>/page1.html</a> - a CLOG app mascarading as a .html <li><a href='/page1.html'>/page1.html</a> - a CLOG app mascarading as a .html
<li><a href='/somepath/hi/'>/somepath/hi/</a> - a CLOG app mascarading as a .html
<li><a href='/page2'>/page2</a> - a CLOG app using an alternative boot file <li><a href='/page2'>/page2</a> - a CLOG app using an alternative boot file
<li><a href='/page3'>/page3</a> - tutorial 11 as part of this tutorial <li><a href='/page3'>/page3</a> - tutorial 11 as part of this tutorial
<li><a href='/tutorial/tut-11.html'>/tutorial/tut-11.html</a> - an html file using boot.js <li><a href='/tutorial/tut-11.html'>/tutorial/tut-11.html</a> - an html file using boot.js
@ -93,6 +94,9 @@
;; There is no .html file - it is just a route to CLOG handler ;; There is no .html file - it is just a route to CLOG handler
;; but the user thinks it is like any other html file. ;; but the user thinks it is like any other html file.
(set-on-new-window #'on-page1 :path "/page1.html") (set-on-new-window #'on-page1 :path "/page1.html")
;; Navigating to http://127.0.0.1:8080/somepath/page1/ executes on-page1
;; the path set can be any valid html path and has no meaning.
(set-on-new-window #'on-page1 :path "/somepath/hi/")
;; Here we add another page, page2. It uses a boot file that turns ;; Here we add another page, page2. It uses a boot file that turns
;; on debugging to the browser console of communications with the ;; on debugging to the browser console of communications with the
;; server. ;; server.

View file

@ -4,6 +4,8 @@
(in-package :clog-user) (in-package :clog-user)
;;; HTML 5 local storage are the best way to stort client side data
;;; and in general are a far better than cookies.
(defun on-new-window (body) (defun on-new-window (body)
(setf (title (html-document body)) "Tutorial 14") (setf (title (html-document body)) "Tutorial 14")
(set-on-click (create-button body :content "Set Local Key") (set-on-click (create-button body :content "Set Local Key")

View file

@ -4,6 +4,7 @@
(in-package :clog-user) (in-package :clog-user)
;;; Brief demonstration of multimedia
(defun on-new-window (body) (defun on-new-window (body)
(let* ((vid (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4")) (let* ((vid (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4"))
(tmp (create-br body)) (tmp (create-br body))

View file

@ -6,7 +6,8 @@
;;; In this tutorial we will use a CSS only alternative to bootstrap - ;;; In this tutorial we will use a CSS only alternative to bootstrap -
;;; https://www.w3schools.com/w3css/default.asp ;;; https://www.w3schools.com/w3css/default.asp
;;;
;;; It is also a demonstration of how various ways to use HTML Forms
(defun on-index (body) (defun on-index (body)
;; Load css files ;; 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/w3css/4/w3.css")

View file

@ -4,6 +4,7 @@
(in-package :clog-user) (in-package :clog-user)
;; Demonstrate drag and drop
(defun on-new-window (body) (defun on-new-window (body)
(let* ((target1 (create-div body)) (let* ((target1 (create-div body))
(target2 (create-div body)) (target2 (create-div body))

View file

@ -4,9 +4,7 @@
(in-package :clog-user) (in-package :clog-user)
;; For web oriented apps consider using the :client-movement option. ;;; Demostrate a virtual desktop using CLOG GUI
;; See clog-gui-initialize documentation.
(defun on-file-count (obj) (defun on-file-count (obj)
(let ((win (create-gui-window obj :title "Count"))) (let ((win (create-gui-window obj :title "Count")))
(dotimes (n 100) (dotimes (n 100)
@ -123,6 +121,8 @@
(defun on-new-window (body) (defun on-new-window (body)
(setf (title (html-document body)) "Tutorial 22") (setf (title (html-document body)) "Tutorial 22")
;; For web oriented apps consider using the :client-movement option.
;; See clog-gui-initialize documentation.
(clog-gui-initialize body) (clog-gui-initialize body)
(add-class body "w3-cyan") (add-class body "w3-cyan")
(let* ((menu (create-gui-menu-bar body)) (let* ((menu (create-gui-menu-bar body))

View file

@ -1,5 +1,5 @@
;; In this tutorial we use clog-web to create a dynamic modern mobile ;; In this tutorial we use clog-web to create a dynamic modern mobile
;; compatible web page using various clog-web containers. (In progress) ;; compatible web page using various clog-web containers.
(defpackage #:clog-user (defpackage #:clog-user
(:use #:cl #:clog #:clog-web) (:use #:cl #:clog #:clog-web)