mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-07 11:10:18 -08:00
Minor updates to comments.
This commit is contained in:
parent
aca581216d
commit
a31218ba3d
13 changed files with 32 additions and 20 deletions
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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")
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
|
|
||||||
|
|
@ -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")
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue