Added tutorial 27 - Panel Box Layouts

README.md

@@ -218,6 +218,7 @@ Tutorial Summary
 - [24-tutorial.lisp](tutorial/24-tutorial.lisp) - CLOG WEB containers
 - [25-tutorial.lisp](tutorial/25-tutorial.lisp) - A "local" web app using CLOG WEB
 - [26-tutorial.lisp](tutorial/26-tutorial.lisp) - A web page and form with CLOG WEB
+- [27-tutorial.lisp](tutorial/27-tutorial.lisp) - Panel Box Layouts
 
 Demo Summary
 
@@ -225,7 +226,7 @@ Demo Summary
 - [02-demo.lisp](demos/02-demo.lisp) - Chat - Private instant messenger
 - [03-demo.lisp](demos/03-demo.lisp) - IDE - A very simple common lisp IDE
   (see source if editor dosen't load)
-- [04-demo.lisp](demos/04-demo.lisp) - CMS Website - A very simple database driver website
+- [04-demo.lisp](demos/04-demo.lisp) - CMS Website - A very simple database driven website
 
 Tool Summary
 

source/clog-element.lisp

@@ -1385,17 +1385,23 @@ parent in the DOM."))
 ;; set-geometry ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric set-geometry (clog-element &key x y width height units)
+(defgeneric set-geometry (clog-element &key left top right bottom width height units)
-  (:documentation "Change the geometry :X :Y :WIDTH :HEIGHT each optional
+  (:documentation "Change the geometry :LEFT :TOP :RIGHT :BOTTOM :WIDTH :HEIGHT each optional
 in UNITS (default :px)"))
 
-(defmethod set-geometry ((obj clog-element) &key x y width height (units :px))
+(defmethod set-geometry ((obj clog-element) &key left top right bottom width height (units :px))
-  (jquery-execute obj (format nil "css({~A~A~A~A})"
+  (jquery-execute obj (format nil "css({~A~A~A~A~A~A})"
-			      (if x
+			      (if left
-				  (format nil "'left':'~A~A'," x units)
+				  (format nil "'left':'~A~A'," left units)
 				  "")
-			      (if y
+			      (if top
-				  (format nil "'top':'~A~A'," y units)
+				  (format nil "'top':'~A~A'," top units)
+				  "")
+			      (if right
+				  (format nil "'right':'~A~A'," right units)
+				  "")
+			      (if bottom
+				  (format nil "'bottom':'~A~A'," bottom units)
 				  "")
 			      (if width
 				  (format nil "'width':'~A~A'," width units)
@@ -2112,7 +2118,8 @@ A list of standard cursor types can be found at:
   '(member :baseline :sub :super :text-top :text-bottom :middle :top :bottom))
 
 (defgeneric vertical-align (clog-element)
-  (:documentation "Get/Setf vertical-align."))
+  (:documentation "Get/Setf vertical-align in table cells or if display
+is set to :table-cell or for labels on form elements."))
 
 (defmethod vertical-align ((obj clog-element))
   (style obj "vertical-align"))

source/clog-panel.lisp

@@ -67,7 +67,7 @@ nil. Resizable only works if overflow is set to :SCROLL"))
 					  (class nil)
 					  (html-id nil)
 					  (auto-place t))
-  (create-child obj (format nil "<span~A style='~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A'>~A</span>"
+  (create-child obj (format nil "<div~A style='~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A'>~A</div>"
 			    (if class
 				(format nil " class='~A'" (escape-string class))
 				"")
@@ -199,20 +199,22 @@ nil. Resizable only works if overflow is set to :SCROLL"))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defun create-panel-box-layout (clog-obj &key (top-height 50) (left-width 50)
-					   (bottom-height 50) (right-width 50))
+					   (bottom-height 50) (right-width 50)
+					   (units "px"))
+  "Create a five panel app layout that fills entire contents of CLOG-OBJ."
   (let ((panel-box (make-instance 'clog-panel-box-layout)))
     (setf (top-panel panel-box)
-	  (create-panel clog-obj :left 0 :top 0 :right 0 :height top-height))
+	  (create-panel clog-obj :left 0 :top 0 :right 0 :height top-height :units units))
-    (setf (bottom-panel panel-box)
-	  (create-panel clog-obj :left 0 :bottom 0 :right 0 :height bottom-height))
     (setf (left-panel panel-box)
 	  (create-panel clog-obj :left 0 :top 0 :bottom 0 :width left-width
-				 :margin-top top-height :margin-bottom bottom-height))
+				 :margin-top top-height :margin-bottom bottom-height :units units))
     (setf (right-panel panel-box)
 	  (create-panel clog-obj :right 0 :top 0 :bottom 0 :width right-width
-				 :margin-top top-height :margin-bottom bottom-height))
+				 :margin-top top-height :margin-bottom bottom-height :units units))
     (setf (center-panel panel-box)
 	  (create-panel clog-obj :left 0 :top 0 :right 0 :bottom 0
 				 :margin-left left-width :margin-top top-height
-				 :margin-right right-width :margin-bottom bottom-height))
+				 :margin-right right-width :margin-bottom bottom-height :units units))
+    (setf (bottom-panel panel-box)
+	  (create-panel clog-obj :left 0 :bottom 0 :right 0 :height bottom-height :units units))
     panel-box))

tutorial/27-tutorial.lisp

@@ -0,0 +1,43 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (let* ((console (create-panel-box-layout body :left-width 200 :right-width 0))
+	 (head    (create-div (top-panel console) :content "Image Viewer"))
+	 (lbox    (create-select (left-panel console)))
+	 (viewer  (create-img (center-panel console)))
+	 (footer  (create-div (bottom-panel console)
+			      :content "(c) 2021 David Botton - BSD 3 Lic.")))
+    (declare (ignore footer))
+    ;; Setup Top
+    (setf (background-color (top-panel console)) :teal)
+    (setf (display (top-panel console)) :flex)
+    (setf (justify-content (top-panel console)) :center)
+    (setf (align-items (top-panel console)) :center)
+    (setf (color head) :white)
+    ;; Setup viewer
+    (setf (width viewer) "100%")
+    ;; Setup File List
+    (setf (background-color (left-panel console)) :grey)
+    (setf (positioning lbox) :absolute)
+    (setf (size lbox) 2) ;; A size above 1 needed to get listbox
+    (set-geometry lbox :left 0 :top 0 :bottom 0 :width 200)
+    (add-select-options lbox '("kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg"
+			       "windmills.jpg"
+			       "yellow-clogs.jpg"
+			       "clogicon.png"))
+    (set-on-change lbox (lambda (obj)
+			  (declare (ignore obj))
+			  (setf (url-src viewer) (format nil "/img/~A"
+							 (value lbox)))))
+    ;; Setup Bottom
+    (setf (display (bottom-panel console)) :flex)
+    (setf (align-items (bottom-panel console)) :center)
+    (run body)))
+
+(defun start-tutorial ()
+  (initialize 'on-new-window)
+  (open-browser))

tutorial/README.md

@@ -59,3 +59,4 @@ Tutorial Summary
 - 24-tutorial.lisp - CLOG WEB containers
 - 25-tutorial.lisp - A "local" web app using CLOG WEB
 - 26-tutorial.lisp - A web page and form with CLOG WEB
+- 27-tutorial.lisp - Panel Box Layouts