From 241d5cc4805908f7d1b42a5d71061da02c416113 Mon Sep 17 00:00:00 2001 From: David Botton Date: Tue, 19 Jan 2021 21:27:02 -0500 Subject: [PATCH] Running a website in CLOG --- clog-system.lisp | 6 +- static-files/tutorial/regular-file.html | 6 ++ tutorial/12-tutorial.lisp | 125 ++++++++++++++++++++++++ tutorial/README.md | 1 + 4 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 static-files/tutorial/regular-file.html create mode 100644 tutorial/12-tutorial.lisp diff --git a/clog-system.lisp b/clog-system.lisp index dab102b..6ca4239 100644 --- a/clog-system.lisp +++ b/clog-system.lisp @@ -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) diff --git a/static-files/tutorial/regular-file.html b/static-files/tutorial/regular-file.html new file mode 100644 index 0000000..751c5b9 --- /dev/null +++ b/static-files/tutorial/regular-file.html @@ -0,0 +1,6 @@ + + +

I am just a regular file. I am in the static-root + of the tutorial and demo apps.

+ + diff --git a/tutorial/12-tutorial.lisp b/tutorial/12-tutorial.lisp new file mode 100644 index 0000000..e14c5f7 --- /dev/null +++ b/tutorial/12-tutorial.lisp @@ -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 + "

Pick a link

+ ") + + (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 "
radios value : ~A

+ 
textinput value : ~A

" + (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)) diff --git a/tutorial/README.md b/tutorial/README.md index 4342fb3..4e41ac1 100644 --- a/tutorial/README.md +++ b/tutorial/README.md @@ -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)