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

Running a website in CLOG

Browse source
This commit is contained in:
David Botton 2021-01-19 21:27:02 -05:00
parent 1b49917b4c
commit 241d5cc480
4 changed files with 136 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
clog-system.lisp
View file

@ -66,8 +66,10 @@ is nil no default boot-file will be set for /."
(defun set-on-new-window (on-new-window-handler
&key (path "/") (boot-file "/boot.html"))
"Set or change the on-new-window handler or set a new one for PATH
using BOOT_FILE. If PATH is set to default will use boot-file when
the path can not be determined."
using BOOT_FILE. Paths should always begin with a '/'. If PATH is set to
\"default\" will use boot-file when the route can not be determined, ie
a static html file including boot.js that has not been added with this
function. If BOOT-FILE is nil path is removed."
(cc:set-clog-path path boot-file)
(if boot-file
(setf (gethash path *url-to-on-new-window*) on-new-window-handler)

6
static-files/tutorial/regular-file.html Normal file
View file

@ -0,0 +1,6 @@
<html>
<body>
<p>I am just a regular file. I am in the static-root
of the tutorial and demo apps.</p>
</body>
</html>

125
tutorial/12-tutorial.lisp Normal file
View file

@ -0,0 +1,125 @@
;; 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
(defpackage #:clog-user
(:use #:cl #:clog)
(:export start-tutorial))
(in-package :clog-user)
(defun on-main (body)
(create-div body :content
"<h1>Pick a link</h1>
<ul>
<li><a href='/page1'>/page1</a>
<li><a href='/page1.html'>/page1.html</a>
<li><a href='/page2'>/page2</a>
<li><a href='/page3'>/page3</a>
<li><a href='/tutorial/tut-11.html'>/tutorial/tut-11.html</a>
<li><a href='/tutorial/regular-file.html'>'/tutorial/regular-file.html</a>
</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)
(cond ((equalp (path-name (location body))
"/tutorial/tut-11.html")
(on-tutorial11 body))
(t
(create-div body :content "No dice!")
(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")))
(defun 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")))))
(defun 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 deterime 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/README.md
View file

@ -44,3 +44,4 @@ Tutorial Summary
- 09-tutorial.lisp - Tabs, pannels and forms
- 10-tutorial.lisp - Canvas
- 11-tutorial.lisp - Attaching to existing HTML
- 12-tutorial.lisp - Running a website in CLOG (routing)