Update README.md and tutorial 01

README.md

@@ -13,34 +13,61 @@ View the HTML Documentation:
 
 https://rabbibotton.github.io/clog/clog-manual.html
 
-To load this package and use the tests:
 
-1. cd to the CLOG dir (the dir should be one used by QuickLisp lime ~/common-lisp)
-2. Start emacs/slime or your common lisp repl in that directory.
-3. In the REPL run (ql:quickload :clog)
-4. Then (load "~/common-lisp/clog/test/test-clog.lisp) (clog-test:test)
+To load this package and work through tutorials::
+
+1. cd to the CLOG dir (the dir should be one used by QuickLisp ex. ~/common-lisp/)
+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 "/Users/dbotton/common-lisp/clog/tutorial/01-tutorial.lisp")
+CL-USER> (clog-user:start-tutorial)
+
 
 Sample CLOG app with code base so far:
 
-```
-(defpackage #:clog-user
-  (:use #:cl #:clog)
-  (:export hello))
+```lisp
+(defpackage #:clog-user               ; Setup a package for our work to exist in
+  (:use #:cl #:clog)                  ; Use the Common Lisp language and CLOG
+  (:export start-tutorial))           ; Export as public the start-tutorial function
 
-(in-package :clog-user)
+(in-package :clog-user)               ; Tell the "reader" we are in the clog-user package
 
-(defun hello ()
-  "Simple Hello world using CLOG."
+
+;; Define our CLOG application
+(defun on-new-window (window)         ; Define the function called on-new-window
+  "On-new-window handler."            ; Optional docstring to describe function
+
+  (let ((hello-element                ; hello-element is a local variable that
+	                              ; will be bound to our new CLOG-Element
+	  
+	  ;; This application simply creates a CLOG-Element as a child to window.
+	  ;; A CLOG-Element represents a block of HTML (we will see later ways to
+	  ;; directly create buttons and all sorts of HTML elements in more lisp
+	  ;; like ways with no knowledge of HTML or javascript. 
+	  (create-child window "<h1>Hello World! (click me!)</h1>")))
+
+    (set-on-click hello-element      ; Now we set a function to handle clicks
+		  (lambda ()         ; In this case we use an anonymous function
+		    (setf (color hello-element) "green")))))
+;; To see all the events one can set and the many properties and styles that
+;; exist, take a look through the CLOG manual or the file clog-element.lisp
+
+
+(defun start-tutorial ()   ; Define the function called start-tutorial
+  "Start turtorial."       ; Optional docstring to describe function
 
   ;; Initialize the CLOG system
-  (clog:initialize
-   (lambda (win)
-     (clog:set-on-click
-      (clog:create-child win "<h1>Hello World!</H1>")
-      (lambda ()
-	(clog:create-child win "<p>You Clicked me!</p>")))))
+  (initialize #'on-new-window)
+  ;; Set the function on-new-window to execute
+  ;; everytime a browser connection to our app.
+  ;; #' tells common lisp to pass the function
+  ;; to intialize and not to execute it.
 
-  (clog:open-browser))
+
+  ;; Open a browser to http://12.0.0.1:8080 - the default for CLOG apps
+  (open-browser))
 ```
 
 
@@ -49,8 +76,7 @@ Status:
 - Connection methods
   - Websockets - DONE
   - AJAX/HTML - to do (In 2021 are there browsers not supporting Websockets?)
-  - Long Poll - to do (Needed for websites for webcrawlers and firewalls) 
-  - Direct API access to native browser components - to do (not needed but games, soft real-time apps, etc would be quicker) 
+  - Direct API access to native browser components - to do (not needed but games, soft real-time apps, etc would be perfomance.) 
 
 - HTML bindings and Browser
   - Base system for bindings - DONE

tutorial/01-tutorial.lisp

@@ -6,10 +6,23 @@
 
 
 ;; Define our CLOG application
+(defun on-new-window (window)         ; Define the function called on-new-window
+  "On-new-window handler."            ; Optional docstring to describe function
 
-(defun on-new-window (win)                   ; define a function to be called 
-  (create-child win "<h1>Hello World!<h1>"))
-  
+  (let ((hello-element                ; hello-element is a local variable that
+	                              ; will be bound to our new CLOG-Element
+	  
+	  ;; This application simply creates a CLOG-Element as a child to window.
+	  ;; A CLOG-Element represents a block of HTML (we will see later ways to
+	  ;; directly create buttons and all sorts of HTML elements in more lisp
+	  ;; like ways with no knowledge of HTML or javascript. 
+	  (create-child window "<h1>Hello World! (click me!)</h1>")))
+
+    (set-on-click hello-element      ; Now we set a function to handle clicks
+		  (lambda ()         ; In this case we use an anonymous function
+		    (setf (color hello-element) "green")))))
+;; To see all the events one can set and the many properties and styles that
+;; exist, take a look through the CLOG manual or the file clog-element.lisp
 
 
 (defun start-tutorial ()   ; Define the function called start-tutorial