mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 02:30:42 -08:00
Running a website in CLOG
This commit is contained in:
David Botton
parent
1b49917b4c
commit
241d5cc480
4 changed files with 136 additions and 2 deletions
|
|
@ -66,8 +66,10 @@ is nil no default boot-file will be set for /."
|
||||||
(defun set-on-new-window (on-new-window-handler
|
(defun set-on-new-window (on-new-window-handler
|
||||||
&key (path "/") (boot-file "/boot.html"))
|
&key (path "/") (boot-file "/boot.html"))
|
||||||
"Set or change the on-new-window handler or set a new one for PATH
|
"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
|
using BOOT_FILE. Paths should always begin with a '/'. If PATH is set to
|
||||||
the path can not be determined."
|
\"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)
|
(cc:set-clog-path path boot-file)
|
||||||
(if boot-file
|
(if boot-file
|
||||||
(setf (gethash path *url-to-on-new-window*) on-new-window-handler)
|
(setf (gethash path *url-to-on-new-window*) on-new-window-handler)
|
||||||
|
|
|
||||||
6
static-files/tutorial/regular-file.html
Normal file
6
static-files/tutorial/regular-file.html
Normal 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
125
tutorial/12-tutorial.lisp
Normal 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))
|
||||||
|
|
@ -44,3 +44,4 @@ Tutorial Summary
|
||||||
- 09-tutorial.lisp - Tabs, pannels and forms
|
- 09-tutorial.lisp - Tabs, pannels and forms
|
||||||
- 10-tutorial.lisp - Canvas
|
- 10-tutorial.lisp - Canvas
|
||||||
- 11-tutorial.lisp - Attaching to existing HTML
|
- 11-tutorial.lisp - Attaching to existing HTML
|
||||||
|
- 12-tutorial.lisp - Running a website in CLOG (routing)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue