diff --git a/tutorial/01-tutorial.lisp b/tutorial/01-tutorial.lisp index 142b388..c23eb20 100644 --- a/tutorial/01-tutorial.lisp +++ b/tutorial/01-tutorial.lisp @@ -17,7 +17,8 @@ ;; 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. + ;; like ways with no knowledge of HTML or javascript. CREATE-CHILD + ;; allows any html element to be created and returned as a CLOG-Element. (create-child body "

Hello World! (click me!)

"))) (set-on-click hello-element ; Now we set a function to handle clicks diff --git a/tutorial/02-tutorial.lisp b/tutorial/02-tutorial.lisp index 7654a2d..b95b5fc 100644 --- a/tutorial/02-tutorial.lisp +++ b/tutorial/02-tutorial.lisp @@ -17,7 +17,16 @@ ;; (navigator body) is the CLOG-Navigator object (let ((hello-element - (create-child body "

Hello World! (click me!)

"))) + + ;; CREATE-SECTION is a lispier way of create any of the HTML 5 + ;; section elements: + ;; + ;; :address :article :aside :header :main :nav :hgroup + ;; :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6 + ;; + ;; Take a look at clog-element-common.lisp or the clog-manual + + (create-section body :h1 :content "Hello World! (click me!)"))) (let ((x 0)) ; A closure - each call to on-new-window will (set-on-click hello-element ; create a different version of this closer. diff --git a/tutorial/03-tutorial.lisp b/tutorial/03-tutorial.lisp index 3452960..11e442d 100644 --- a/tutorial/03-tutorial.lisp +++ b/tutorial/03-tutorial.lisp @@ -10,7 +10,7 @@ (setf (title (html-document body)) "Tutorial 3") (let ((hello-element - (create-child body "

Hello World! (click me!)

"))) + (create-section body :h1 :content "Hello World! (click me!)"))) (let ((x 0)) (set-on-click hello-element @@ -18,8 +18,8 @@ (declare (ignore obj)) (incf x) (dotimes (n x) - (create-child body - (format nil "

Clicked ~A times.

" x)) + (create-p body + :content (format nil "Clicked ~A times." x)) (sleep x))))) (run body))) diff --git a/tutorial/04-tutorial.lisp b/tutorial/04-tutorial.lisp index fe39ec3..f12086a 100644 --- a/tutorial/04-tutorial.lisp +++ b/tutorial/04-tutorial.lisp @@ -4,18 +4,19 @@ (in-package :clog-user) -(defun my-on-click (obj) ; obj in any event is the target of the event - (setf (color obj) "green")) ; this makes it possible to reuse events +(defun my-on-click (obj) ; obj in any event is the target of the event + (setf (color obj) (rgb 0 255 0))) ; this makes it possible to reuse events + ; RGB is a helper function for colors (defun on-new-window (body) "On-new-window handler." (setf (title (html-document body)) "Tutorial 4") - (set-on-click (create-child body "

Hello World! (click me!)

") + (set-on-click (create-section body :h1 :content "Hello World! (click me!)") #'my-on-click) - (set-on-click (create-child body "

Click me too!

") + (set-on-click (create-section body :h3 :content "Click me too!") #'my-on-click) (run body)) diff --git a/tutorial/05-tutorial.lisp b/tutorial/05-tutorial.lisp index 569fa15..9c8a46c 100644 --- a/tutorial/05-tutorial.lisp +++ b/tutorial/05-tutorial.lisp @@ -16,11 +16,11 @@ (setf (title (html-document body)) "Tutorial 5") - (set-on-click (create-child body "

Hello World! (click me!)

") + (set-on-click (create-section body :h1 :content "Hello World! (click me!)") #'my-on-click) (setf (connection-data-item body "changer") - (create-child body "

I change

")) + (create-section body :h1 :content "I change")) (run body)) diff --git a/tutorial/06-tutorial.lisp b/tutorial/06-tutorial.lisp index 7c4508e..1c3277b 100644 --- a/tutorial/06-tutorial.lisp +++ b/tutorial/06-tutorial.lisp @@ -15,9 +15,9 @@ (loop (if (and (validp obj) (connection-data-item obj "isRunning")) (progn - (setf (color obj) "green") + (setf (color obj) :green) (sleep 0.3) - (setf (color obj) "red") + (setf (color obj) :red) (sleep 0.3)) (return)))) (setf (connection-data-item obj "isRunning") nil) @@ -30,7 +30,7 @@ (setf (title (html-document body)) "Tutorial 6") - (set-on-click (create-child body "

(click me to start!)

") + (set-on-click (create-section body :h1 :content "(click me to start!)") #'my-on-click) (run body)) diff --git a/tutorial/07-tutorial.lisp b/tutorial/07-tutorial.lisp index 1803b86..e78ba76 100644 --- a/tutorial/07-tutorial.lisp +++ b/tutorial/07-tutorial.lisp @@ -15,7 +15,8 @@ (setf (title (html-document body)) "Tutorial 7") (setf (hiddenp (prog1 - (create-child body "

KILL Darth's Tie Fighter - Click on it!

") + (create-section body :h2 + :content "KILL Darth's Tie Fighter - Click on it!") (sleep 2))) t) (let* ((mover (create-div body :content "(-o-)"))