updates to use specifc element types

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 "<h1>Hello World! (click me!)</h1>")))
 
     (set-on-click hello-element      ; Now we set a function to handle clicks

tutorial/02-tutorial.lisp

@@ -17,7 +17,16 @@
   ;; (navigator body) is the CLOG-Navigator object
   
   (let ((hello-element
-	  (create-child body "<h1>Hello World! (click me!)</h1>")))
+	  
+	  ;; 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.

tutorial/03-tutorial.lisp

@@ -10,7 +10,7 @@
   (setf (title (html-document body)) "Tutorial 3")
   
   (let ((hello-element
-	  (create-child body "<h1>Hello World! (click me!)</h1>")))
+	  (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 "<p>Clicked ~A times.</p>" x))
+			(create-p body
+				  :content (format nil "Clicked ~A times." x))
 			(sleep x)))))
     (run body)))
 

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 "<h1>Hello World! (click me!)</h1>")
+  (set-on-click (create-section body :h1 :content "Hello World! (click me!)")
 		#'my-on-click)
 
-  (set-on-click (create-child body "<h3>Click me too!</h3>")
+  (set-on-click (create-section body :h3 :content "Click me too!")
 		#'my-on-click)
 
   (run body))

tutorial/05-tutorial.lisp

@@ -16,11 +16,11 @@
   
   (setf (title (html-document body)) "Tutorial 5")
 
-  (set-on-click (create-child body "<h1>Hello World! (click me!)</h1>")
+  (set-on-click (create-section body :h1 :content "Hello World! (click me!)")
 		#'my-on-click)
 
   (setf (connection-data-item body "changer")
-	(create-child body "<h1>I change</h1>"))
+	(create-section body :h1 :content "I change"))
 
   (run body))
 

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 "<h1>(click me to start!)</h1>")
+  (set-on-click (create-section body :h1 :content "(click me to start!)")
 		#'my-on-click)
   (run body))
 

tutorial/07-tutorial.lisp

@@ -15,7 +15,8 @@
 	(setf (title (html-document body)) "Tutorial 7")
 
 	(setf (hiddenp (prog1
-			   (create-child body "<h2>KILL Darth's Tie Fighter - Click on it!</h2>")
+			   (create-section body :h2
+					   :content "KILL Darth's Tie Fighter - Click on it!")
 			 (sleep 2))) t)		 
 
 	(let* ((mover (create-div body :content "(-o-)"))