mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 10:40:45 -08:00
REPL CLOG use docs
This commit is contained in:
David Botton
parent
8ac1508f76
commit
0d95c57aa6
3 changed files with 266 additions and 38 deletions
123
clog-docs.lisp
123
clog-docs.lisp
|
|
@ -76,14 +76,133 @@ have Quicklisp configured):
|
|||
2. Start emacs/slime or your common lisp \"repl\" in _that_ directory.
|
||||
3. In the REPL, run:
|
||||
|
||||
```
|
||||
CL-USER> (ql:quickload :clog)
|
||||
CL-USER> (load \"~/common-lisp/clog/tutorial/01-tutorial.lisp\")
|
||||
CL-USER> (clog-user:start-tutorial)
|
||||
```
|
||||
|
||||
Work your way through the tutorials. You will see how quick and easy it is
|
||||
to be a CLOGer.
|
||||
to be a CLOGer. The next section also covers the basic programming concepts
|
||||
needed for mastering CLOG.")
|
||||
|
||||
(defsection @clog-programming-basics (:title "CLOG Programming Basics")
|
||||
"
|
||||
* Prerequisites
|
||||
- You don't have to be an expert in Common Lisp but should know the basics
|
||||
- You _don't_ need to know JavaScript
|
||||
- You don't need to know HTML but it helps unless someone else is doing the
|
||||
design work.
|
||||
- You have installed CLOG and (ql:quickload :clog) is working for you.
|
||||
|
||||
|
||||
|
||||
* Simple REPL techniques Tutorial
|
||||
|
||||
We first need to load CLOG
|
||||
|
||||
```lisp
|
||||
CL-USER> (ql:quickload :clog)
|
||||
To load \"clog\":
|
||||
Load 1 ASDF system:
|
||||
clog
|
||||
; Loading \"clog\"
|
||||
................................................
|
||||
(:CLOG)
|
||||
```
|
||||
|
||||
Next, we need to use the INITIALIZE function to tell CLOG to start up the web
|
||||
server, what to do when someone connects and where the static HTML files
|
||||
are located.
|
||||
|
||||
```lisp
|
||||
CL-USER> (clog:initialize (lambda (body)()) :static-root #P\"~/common-lisp/clog/static-files/\")
|
||||
Hunchentoot server is started.
|
||||
Listening on 0.0.0.0:8080.
|
||||
HTTP listening on : 0.0.0.0:8080
|
||||
HTML Root : /Users/dbotton/common-lisp/clog/static-files/
|
||||
Boot file for path / : /boot.html
|
||||
NIL
|
||||
```
|
||||
|
||||
At this point our CLOG app doese very little. To see our CLOG app so far go to
|
||||
http://127.0.0.1:8008 or in most common-list configurations you can use:
|
||||
|
||||
```lisp
|
||||
CL-USER> (clog:open-browser)
|
||||
```
|
||||
|
||||
Something more than an empty lambda function is needed to do more. The
|
||||
tutorials are a good place to start with make CLOG apps in code, so
|
||||
here we are going to demonstrate the concepts using some REPL tricks
|
||||
to help developing CLOG apps in general.
|
||||
|
||||
We need to give ourselves easier access to CLOG and or an app we are
|
||||
working one. Let's create a package that uses CLOG and of course
|
||||
common lisp \"cl\" we will call it \"clog-user\".
|
||||
|
||||
```lisp
|
||||
CL-USER> (defpackage #:clog-user
|
||||
(:use #:cl #:clog))
|
||||
(in-package :clog-user)
|
||||
#<\"CLOG-USER\" package>
|
||||
CLOG-USER>
|
||||
```
|
||||
|
||||
Since we already initialized CLOG let's use SET-ON-NEW-WINDOW to change our
|
||||
on-new-window handler (handler is just a made up name for a function that
|
||||
will handle an event).
|
||||
|
||||
```lisp
|
||||
CLOG-USER> (set-on-new-window (lambda (body) (create-div body :content \"Hello World!\")))
|
||||
```
|
||||
|
||||
Now go ahead and resresh our browser and you should see the famous first words
|
||||
of every app.
|
||||
|
||||
This of though is still not very REPL like, CLOG is a 'live' connection to a
|
||||
browser. So lets redo our on-new-window handler to give us access to the
|
||||
browser in the REPL.
|
||||
|
||||
```lisp
|
||||
CLOG-USER> (defparameter *body* nil)
|
||||
*BODY*
|
||||
CLOG-USER> (set-on-new-window (lambda (body) (setf *body* body)))
|
||||
```
|
||||
|
||||
Reset your browser again (or navigate to http://127.0.0.1:8080 and let's have
|
||||
some fun.
|
||||
|
||||
(From here on, we will leave out the promps and responses in our quotes of
|
||||
code.)
|
||||
|
||||
```lisp
|
||||
(create-div *body* :content \"Hello World\")
|
||||
```
|
||||
|
||||
If you have the browser on the screen you will see the results immediately. Try
|
||||
this line and you can watch it happen:
|
||||
|
||||
```lisp
|
||||
(dotimes (n 10) (create-div *body* :content (format nil \"Line ~A - Hello World\" n)) (sleep .3))
|
||||
```
|
||||
|
||||
We can also set and respond to events and set properties etc:
|
||||
|
||||
```lisp
|
||||
(let ((tmp (create-button *body* :content \"Click Me\")))
|
||||
(set-on-click tmp (lambda (obj)(setf (hiddenp tmp) t))))
|
||||
```
|
||||
|
||||
Important take aways to using CLOG from the REPL:
|
||||
|
||||
1. You will need to pass to a global from the running system whatever you want to tinker
|
||||
with in the live system from the REPL.
|
||||
2. Any time you recompile the on-new-window handler or want to use a different one
|
||||
you will need to use SET-ON-NEW-WINDOW.
|
||||
3. Similarily with all events, any time an event handler is recompiled or want to
|
||||
change the even hander, set-on-* function will need to be called.")
|
||||
|
||||
")
|
||||
|
||||
(defsection @clog-event-data (:title "CLOG Event Data")
|
||||
"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ connectivity to the browser or other websocket client (often a browser
|
|||
embedded in a native template application.)"
|
||||
|
||||
(@clog-getting-started section)
|
||||
(@clog-programming-basics section)
|
||||
(@clog-event-data section)
|
||||
|
||||
(@clog-system section)
|
||||
|
|
|
|||
|
|
@ -35,20 +35,21 @@
|
|||
|
||||
<ul>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29" title="CLOG Getting Started">1 CLOG Getting Started</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">2 CLOG Event Data</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">3 CLOG System</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">4 CLOG Utilities</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">5 CLOG Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">6 CLOG Elements</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">7 Common CLOG Elements</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">8 CLOG Form Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">9 CLOG Canvas Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">10 CLOG Body Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">11 CLOG Window Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">12 CLOG Document Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">13 CLOG Location Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">14 CLOG Navigator Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">15 CLOG Framework internals and extensions</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29" title="CLOG Programming Basics">2 CLOG Programming Basics</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">3 CLOG Event Data</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">4 CLOG System</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">5 CLOG Utilities</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">6 CLOG Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">7 CLOG Elements</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">8 Common CLOG Elements</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">9 CLOG Form Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">10 CLOG Canvas Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">11 CLOG Body Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">12 CLOG Window Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">13 CLOG Document Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">14 CLOG Location Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">15 CLOG Navigator Objects</a></li>
|
||||
<li><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">16 CLOG Framework internals and extensions</a></li>
|
||||
</ul>
|
||||
|
||||
<h6>[in package CLOG]</h6>
|
||||
|
|
@ -62,7 +63,7 @@ embedded in a native template application.)</p>
|
|||
|
||||
<p><a id='x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29'></a></p>
|
||||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">→</a> <a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29" title="CLOG Getting Started">↺</a></span></span></p>
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29" title="CLOG Programming Basics">→</a> <a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29" title="CLOG Getting Started">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29">1 CLOG Getting Started</a></h2>
|
||||
|
||||
|
|
@ -131,18 +132,125 @@ have Quicklisp configured):</p>
|
|||
<li><p>In the REPL, run:</p></li>
|
||||
</ol>
|
||||
|
||||
<p><code>CL-USER</code>> (ql:quickload :clog)
|
||||
<code>CL-USER</code>> (load "~/common-lisp/clog/tutorial/01-tutorial.lisp")
|
||||
<code>CL-USER</code>> (clog-user:start-tutorial)</p>
|
||||
<pre><code><span class="code">CL-USER> <span class="paren1">(<span class="code">ql:quickload <span class="keyword">:clog</span></span>)</span>
|
||||
CL-USER> <span class="paren1">(<span class="code">load <span class="string">"~/common-lisp/clog/tutorial/01-tutorial.lisp"</span></span>)</span>
|
||||
CL-USER> <span class="paren1">(<span class="code">clog-user:start-tutorial</span>)</span></span></code></pre>
|
||||
|
||||
<p>Work your way through the tutorials. You will see how quick and easy it is
|
||||
to be a CLOGer.</p>
|
||||
to be a CLOGer. The next section also covers the basic programming concepts
|
||||
needed for mastering <code>CLOG</code>.</p>
|
||||
|
||||
<p><a id='x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29'></a></p>
|
||||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29" title="CLOG Getting Started">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">→</a> <a href="#x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29" title="CLOG Programming Basics">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29">2 CLOG Programming Basics</a></h2>
|
||||
|
||||
<ul>
|
||||
<li><p>Prerequisites- You don't have to be an expert in Common Lisp but should know the basics</p>
|
||||
|
||||
<ul>
|
||||
<li><p>You <em>don't</em> need to know JavaScript</p></li>
|
||||
<li><p>You don't need to know <code>HTML</code> but it helps unless someone else is doing the
|
||||
design work.</p></li>
|
||||
<li><p>You have installed <code>CLOG</code> and (ql:quickload :clog) is working for you.</p></li>
|
||||
</ul></li>
|
||||
<li><p>Simple REPL techniques Tutorial</p></li>
|
||||
</ul>
|
||||
|
||||
<p>We first need to load <code>CLOG</code></p>
|
||||
|
||||
<pre><code><span class="code">CL-USER> <span class="paren1">(<span class="code">ql:quickload <span class="keyword">:clog</span></span>)</span>
|
||||
To load "clog":
|
||||
Load 1 ASDF system:
|
||||
clog
|
||||
<span class="comment">; Loading "clog"
|
||||
</span>................................................
|
||||
<span class="paren1">(<span class="code"><span class="keyword">:CLOG</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>Next, we need to use the <a href="#x-28CLOG-3AINITIALIZE-20FUNCTION-29" title="(CLOG:INITIALIZE FUNCTION)"><code>INITIALIZE</code></a> function to tell <code>CLOG</code> to start up the web
|
||||
server, what to do when someone connects and where the static <code>HTML</code> files
|
||||
are located.</p>
|
||||
|
||||
<pre><code><span class="code">CL-USER> <span class="paren1">(<span class="code">clog:initialize <span class="paren2">(<span class="code"><i><span class="symbol">lambda</span></i> <span class="paren3">(<span class="code">body</span>)</span><span class="paren3">(<span class="code"></span>)</span></span>)</span> <span class="keyword">:static-root</span> #P<span class="string">"~/common-lisp/clog/static-files/"</span></span>)</span>
|
||||
Hunchentoot server is started.
|
||||
Listening on 0.0.0.0:8080.
|
||||
HTTP listening on : 0.0.0.0:8080
|
||||
HTML Root : /Users/dbotton/common-lisp/clog/static-files/
|
||||
Boot file for path / : /boot.html
|
||||
NIL</span></code></pre>
|
||||
|
||||
<p>At this point our <code>CLOG</code> app doese very little. To see our <code>CLOG</code> app so far go to
|
||||
http://127.0.0.1:8008 or in most common-list configurations you can use:</p>
|
||||
|
||||
<pre><code><span class="code">CL-USER> <span class="paren1">(<span class="code">clog:open-browser</span>)</span></span></code></pre>
|
||||
|
||||
<p>Something more than an empty lambda function is needed to do more. The
|
||||
tutorials are a good place to start with make <code>CLOG</code> apps in code, so
|
||||
here we are going to demonstrate the concepts using some REPL tricks
|
||||
to help developing <code>CLOG</code> apps in general.</p>
|
||||
|
||||
<p>We need to give ourselves easier access to <code>CLOG</code> and or an app we are
|
||||
working one. Let's create a package that uses <code>CLOG</code> and of course
|
||||
common lisp "cl" we will call it "clog-user".</p>
|
||||
|
||||
<pre><code><span class="code">CL-USER> <span class="paren1">(<span class="code"><i><span class="symbol">defpackage</span></i> <span class="keyword">#:clog-user</span>
|
||||
<span class="paren2">(<span class="code"><span class="keyword">:use</span> <span class="keyword">#:cl</span> <span class="keyword">#:clog</span></span>)</span></span>)</span>
|
||||
<span class="paren1">(<span class="code">in-package <span class="keyword">:clog-user</span></span>)</span>
|
||||
#<"CLOG-USER" package>
|
||||
CLOG-USER> </span></code></pre>
|
||||
|
||||
<p>Since we already initialized <code>CLOG</code> let's use <a href="#x-28CLOG-3ASET-ON-NEW-WINDOW-20FUNCTION-29" title="(CLOG:SET-ON-NEW-WINDOW FUNCTION)"><code>SET-ON-NEW-WINDOW</code></a> to change our
|
||||
on-new-window handler (handler is just a made up name for a function that
|
||||
will handle an event).</p>
|
||||
|
||||
<pre><code><span class="code">CLOG-USER> <span class="paren1">(<span class="code">set-on-new-window <span class="paren2">(<span class="code"><i><span class="symbol">lambda</span></i> <span class="paren3">(<span class="code">body</span>)</span> <span class="paren3">(<span class="code">create-div body <span class="keyword">:content</span> <span class="string">"Hello World!"</span></span>)</span></span>)</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>Now go ahead and resresh our browser and you should see the famous first words
|
||||
of every app.</p>
|
||||
|
||||
<p>This of though is still not very REPL like, <code>CLOG</code> is a 'live' connection to a
|
||||
browser. So lets redo our on-new-window handler to give us access to the
|
||||
browser in the REPL.</p>
|
||||
|
||||
<pre><code><span class="code">CLOG-USER> <span class="paren1">(<span class="code"><i><span class="symbol">defparameter</span></i> <span class="special">*body*</span> nil</span>)</span>
|
||||
*BODY*
|
||||
CLOG-USER> <span class="paren1">(<span class="code">set-on-new-window <span class="paren2">(<span class="code"><i><span class="symbol">lambda</span></i> <span class="paren3">(<span class="code">body</span>)</span> <span class="paren3">(<span class="code">setf <span class="special">*body*</span> body</span>)</span></span>)</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>Reset your browser again (or navigate to http://127.0.0.1:8080 and let's have
|
||||
some fun.</p>
|
||||
|
||||
<p>(From here on, we will leave out the promps and responses in our quotes of
|
||||
code.)</p>
|
||||
|
||||
<pre><code><span class="code"><span class="paren1">(<span class="code">create-div <span class="special">*body*</span> <span class="keyword">:content</span> <span class="string">"Hello World"</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>If you have the browser on the screen you will see the results immediately. Try
|
||||
this line and you can watch it happen:</p>
|
||||
|
||||
<pre><code><span class="code"><span class="paren1">(<span class="code">dotimes <span class="paren2">(<span class="code">n 10</span>)</span> <span class="paren2">(<span class="code">create-div <span class="special">*body*</span> <span class="keyword">:content</span> <span class="paren3">(<span class="code">format nil <span class="string">"Line ~A - Hello World"</span> n</span>)</span></span>)</span> <span class="paren2">(<span class="code">sleep .3</span>)</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>We can also set and respond to events and set properties etc:</p>
|
||||
|
||||
<pre><code><span class="code"><span class="paren1">(<span class="code"><i><span class="symbol">let</span></i> <span class="paren2">(<span class="code"><span class="paren3">(<span class="code">tmp <span class="paren4">(<span class="code">create-button <span class="special">*body*</span> <span class="keyword">:content</span> <span class="string">"Click Me"</span></span>)</span></span>)</span></span>)</span>
|
||||
<span class="paren2">(<span class="code">set-on-click tmp <span class="paren3">(<span class="code"><i><span class="symbol">lambda</span></i> <span class="paren4">(<span class="code">obj</span>)</span><span class="paren4">(<span class="code">setf <span class="paren5">(<span class="code">hiddenp tmp</span>)</span> t</span>)</span></span>)</span></span>)</span></span>)</span></span></code></pre>
|
||||
|
||||
<p>Important take aways to using <code>CLOG</code> from the REPL:</p>
|
||||
|
||||
<ol>
|
||||
<li><p>You will need to pass to a global from the running system whatever you want to tinker
|
||||
with in the live system from the REPL.</p></li>
|
||||
<li><p>Any time you recompile the on-new-window handler or want to use a different one
|
||||
you will need to use <a href="#x-28CLOG-3ASET-ON-NEW-WINDOW-20FUNCTION-29" title="(CLOG:SET-ON-NEW-WINDOW FUNCTION)"><code>SET-ON-NEW-WINDOW</code></a>.</p></li>
|
||||
<li><p>Similarily with all events, any time an event handler is recompiled or want to
|
||||
change the even hander, set-on-* function will need to be called.</p></li>
|
||||
</ol>
|
||||
|
||||
<p><a id='x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29'></a></p>
|
||||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-GETTING-STARTED-20MGL-PAX-3ASECTION-29" title="CLOG Getting Started">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">→</a> <a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">↺</a></span></span></p>
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-PROGRAMMING-BASICS-20MGL-PAX-3ASECTION-29" title="CLOG Programming Basics">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">→</a> <a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29">2 CLOG Event Data</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29">3 CLOG Event Data</a></h2>
|
||||
|
||||
<p>Some events in <code>CLOG</code> return in addition to the target event, event data.
|
||||
The data is passed in the second argument to the event handler as a
|
||||
|
|
@ -195,7 +303,7 @@ properties (to use for :property) are based on the event type.</p>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-EVENT-DATA-20MGL-PAX-3ASECTION-29" title="CLOG Event Data">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">→</a> <a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29">3 CLOG System</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29">4 CLOG System</a></h2>
|
||||
|
||||
<p><code>CLOG</code> Startup and Shutdown</p>
|
||||
|
||||
|
|
@ -236,7 +344,7 @@ function. If <code>BOOT-FILE</code> is nil path is removed.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29">4 CLOG Utilities</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29">5 CLOG Utilities</a></h2>
|
||||
|
||||
<p><code>CLOG</code> utilities</p>
|
||||
|
||||
|
|
@ -292,7 +400,7 @@ function. If <code>BOOT-FILE</code> is nil path is removed.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">→</a> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29">5 CLOG Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29">6 CLOG Objects</a></h2>
|
||||
|
||||
<p>CLOG-Obj - Base class for <code>CLOG</code> Objects</p>
|
||||
|
||||
|
|
@ -717,7 +825,7 @@ is nil unbind the event.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">→</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29">6 CLOG Elements</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29">7 CLOG Elements</a></h2>
|
||||
|
||||
<p>CLOG-Element - Class for <code>CLOG</code> Elements</p>
|
||||
|
||||
|
|
@ -1738,7 +1846,7 @@ to no actual <code>HTML</code> elemen.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29">7 Common CLOG Elements</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29">8 Common CLOG Elements</a></h2>
|
||||
|
||||
<p><a href="#x-28CLOG-3ACLOG-A-20CLASS-29" title="(CLOG:CLOG-A CLASS)"><code>CLOG-A</code></a> - Class for <code>CLOG</code> Anchors</p>
|
||||
|
||||
|
|
@ -2051,7 +2159,7 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29">8 CLOG Form Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29">9 CLOG Form Objects</a></h2>
|
||||
|
||||
<p>CLOG-Form - Class for organizing Form Elements in to a From</p>
|
||||
|
||||
|
|
@ -2596,7 +2704,7 @@ optionally fill in with contents of data-list.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29">9 CLOG Canvas Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29">10 CLOG Canvas Objects</a></h2>
|
||||
|
||||
<p>CLOG-Canvas - Class for <code>CLOG</code> canvas objects</p>
|
||||
|
||||
|
|
@ -2944,7 +3052,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/font</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">10 CLOG Body Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">11 CLOG Body Objects</a></h2>
|
||||
|
||||
<p>CLOG-Body - <code>CLOG</code> Body Objects</p>
|
||||
|
||||
|
|
@ -3004,7 +3112,7 @@ or global objects.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">11 CLOG Window Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">12 CLOG Window Objects</a></h2>
|
||||
|
||||
<p>CLOG-Window - <code>CLOG</code> Window Objects</p>
|
||||
|
||||
|
|
@ -3355,7 +3463,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">12 CLOG Document Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">13 CLOG Document Objects</a></h2>
|
||||
|
||||
<p>CLOG-Document - <code>CLOG</code> Document Objects</p>
|
||||
|
||||
|
|
@ -3489,7 +3597,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">→</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">13 CLOG Location Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">14 CLOG Location Objects</a></h2>
|
||||
|
||||
<p>CLOG-Location - <code>CLOG</code> Location Objects</p>
|
||||
|
||||
|
|
@ -3605,7 +3713,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">→</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">14 CLOG Navigator Objects</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">15 CLOG Navigator Objects</a></h2>
|
||||
|
||||
<p>CLOG-Navigator - <code>CLOG</code> Navigator Objects</p>
|
||||
|
||||
|
|
@ -3655,7 +3763,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
|
|||
|
||||
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">←</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">↑</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">↺</a></span></span></p>
|
||||
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29">15 CLOG Framework internals and extensions</a></h2>
|
||||
<h2><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29">16 CLOG Framework internals and extensions</a></h2>
|
||||
|
||||
<h2>Responding to new java script DOM events</h2>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue