Tutorial 9

clog-base.lisp

@@ -283,7 +283,7 @@ result. (Private)"))
 (defgeneric blur (clog-obj)
   (:documentation "Remove focus from CLOG-OBJ"))
 
-(defmethod focus ((obj clog-obj))
+(defmethod blur ((obj clog-obj))
   (jquery-execute obj "blur()"))
 
 ;;;;;;;;;;;;

clog-element.lisp

@@ -255,7 +255,7 @@ content editable, even non-form types in most browsers."))
 
 (defmethod set-editablep ((obj clog-element) value)
   (setf (property obj "contentEditable") (p-true-js value)))
-(defsetf editablep set-editable)
+(defsetf editablep set-editablep)
 
 ;;;;;;;;;;;;;;;;
 ;; draggablep ;;
@@ -294,7 +294,9 @@ setting display (None)."))
   (:documentation "Set hiddenp VALUE for CLOG-ELEMENT"))
 
 (defmethod set-hiddenp ((obj clog-element) value)
-  (setf (property obj "hidden") (p-true-js value)))
+  (if value
+      (setf (property obj "hidden") t)
+      (jquery-execute obj "removeAttr('hidden')")))
 (defsetf hiddenp set-hiddenp)
 
 ;;;;;;;;;;;;;;

tutorial/09-tutorial.lisp

@@ -0,0 +1,53 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (let* ((t1 (create-button body :content "Tab1"))
+	 (t2 (create-button body :content "Tab2"))
+	 (t3 (create-button body :content "Tab3"))
+	 (p1 (create-div body :content "Panel1 - Type here"))
+	 (p2 (create-div body :content "Panel2 - Type here"))
+	 (p3 (create-div body :content "Panel3 - Type here")))
+
+    (place-after t3 (create-br body))
+
+    (setf (width p1) 600)
+    (setf (width p2) 600)
+    (setf (width p3) 600)
+    
+    (setf (height p1) 300)
+    (setf (height p2) 300)
+    (setf (height p3) 300)
+
+    (set-border p1 :thin :solid :black)
+    (set-border p2 :thin :solid :black)
+    (set-border p3 :thin :solid :black)
+
+    (setf (editablep p1) t)
+    (setf (editablep p2) t)
+    (setf (editablep p3) t)
+
+    (flet ((select-tab (obj)
+	     (setf (hiddenp p1) t)
+	     (setf (hiddenp p2) t)
+	     (setf (hiddenp p3) t)
+	     (setf (hiddenp obj) nil)
+	     (focus obj)))
+
+      (select-tab p1)
+      
+      (set-on-click t1 (lambda (obj)
+			 (select-tab p1)))
+      (set-on-click t2 (lambda (obj)
+			 (select-tab p2)))
+      (set-on-click t3 (lambda (obj)
+			 (select-tab p3))))))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window)
+  (open-browser))

tutorial/README.md

@@ -41,3 +41,4 @@ Tutorial Summary
 - 06-tutorial.lisp - Tasking and events
 - 07-tutorial.lisp - My first CLOG video game (and handling disconnects)
 - 08-tutorial.lisp - Mice Love Containers
+- 09-tutorial.lisp - Tabs and hidden pannels