Start of clog-web

README.md

@@ -196,6 +196,7 @@ Tutorial Summary
 - 21-tutorial.lisp - New CLOG plugin in Common-Lisp
 - 22-tutorial.lisp - CLOG GUI Menus and Desktop Look and Feel
 - 23-tutorial.lisp - Using semaphores to wait for input
+- 24-tutorial.lisp - CLOG WEB containers (in progress)
 
 Demo Summary
 
@@ -208,6 +209,10 @@ Tool Summary
 
 - clog-db-admin  - SQLite3 admin tool
 
+Template Summary 
+
+clog-gui-template.lisp - Basic CLOG-GUI app
+
 High Order Extensions to CLOG (so far)
 
 - clog-gui - Desktop over the web
@@ -217,6 +222,14 @@ High Order Extensions to CLOG (so far)
   - File Load / Save dialogs
   - Alert, Input and Confirmation dialogs
   - Form dialogs
+  
+- clog-web - Webpage creation
+  - Auto column layouts
+  - 12 Point Grid System layouts
+  - Content containers
+  - Panels
+  - More coming _daily_
+  
 - clog-data
   - clog-db-admin - Basic database administration 
   - In progress - Database integrations

clog.asd

@@ -9,7 +9,7 @@
   :serial t
   :pathname "source/"
   :depends-on (#:clack #:websocket-driver #:alexandria #:hunchentoot #:cl-ppcre
-	       #:bordeaux-threads #:trivial-open-browser #:cl-dbi #:parse-float
+	       #:bordeaux-threads #:trivial-open-browser #:parse-float
 	       #:sqlite #:lack-middleware-static #:mgl-pax #:quri)
   :components ((:file "clog-connection")
 	       (:file "clog")
@@ -28,6 +28,7 @@
 	       (:file "clog-body")
 	       (:file "clog-system")
 	       (:file "clog-gui")
+	       (:file "clog-web")
 	       (:file "clog-helpers")))
 
 (asdf:defsystem #:clog/tools

source/clog-gui.lisp

@@ -7,8 +7,8 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 ;;; Like clog-web, clog-gui uses w3.css as the underlying framework. w3.css is
-;;; a public domain css only framework for layouts, is cast and efficient and
-;;; does not require additional components by the css file. In addition
+;;; a public domain css only framework for layouts, is fast and efficient and
+;;; does not require additional components outside of the css file. In addition
 ;;; clog-gui uses jQueryUI and its default css file to provide client side
 ;;; movement when needed, if clien side movement is not used it is possible
 ;;; to pass nil to the initilization function for both.

source/clog-web.lisp

@@ -0,0 +1,324 @@
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;; CLOG - The Common Lisp Omnificent GUI                                 ;;;;
+;;;; (c) 2020-2021 David Botton                                            ;;;;
+;;;; License BSD 3 Clause                                                  ;;;;
+;;;;                                                                       ;;;;
+;;;; clog-web.lisp                                                         ;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;;; Like clog-gui, clog-web uses w3.css as the underlying framework. w3.css is
+;;; a public domain css only framework for layouts, is fast and efficient and
+;;; does not require additional components outside of the css file. The goal
+;;; of clog-web is to help make it easier to create "webpage" style apps
+;;; (page layout instead of a more direct layout around the browser window
+;;; as in clog-gui the mimics a desktop environment) or actual webpages
+;;; (traditional hyper-linking, submition of forms and minimal need for an
+;;; active clog connection).
+
+(mgl-pax:define-package :clog-web
+  (:documentation "CLOG-WEB a web page style abstraction for CLOG")
+  (:use #:cl #:parse-float #:clog #:mgl-pax))
+
+(cl:in-package :clog-web)
+
+(defsection @clog-web (:title "CLOG Web Objects")
+  "CLOG-WEB - Web page abstraction for CLOG"
+  (clog-web-initialize              function)
+  (set-maximum-page-width-in-pixels function)
+
+  "CLOG-WEB - General Containers"
+  (clog-web-panel     class)
+  (create-web-panel   generic-function)
+  (clog-web-content   class)
+  (create-web-content generic-function)
+
+  "CLOG-WEB - Auto Layout System"
+  (clog-web-auto-row      class)
+  (create-web-auto-row    generic-function)
+  (clog-web-auto-column   class)
+  (create-web-auto-column generic-function)
+			
+  "CLOG-WEB - 12 Column Grid Layout System"
+  (clog-web-row         class)
+  (create-web-row       generic-function)
+  (clog-web-container   class)
+  (create-web-container generic-function)
+
+  (full-row-on-mobile     generic-function)
+  (hide-on-small-screens  generic-function)
+  (hide-on-medium-screens generic-function)
+  (hide-on-large-screens  generic-function))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-web - CLOG Web page abstraction
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web ()
+  ((body
+    :accessor body
+    :documentation "Top level access to browser window")))
+
+;;;;;;;;;;;;;;;;;;;;;
+;; create-clog-web ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defun create-clog-web (clog-body)
+  "Create a clog-web object and places it in CLOG-BODY's connection-data as
+\"clog-web\". (Private)"
+  (let ((clog-web (make-instance 'clog-web)))
+    (setf (connection-data-item clog-body "clog-web") clog-web)
+    (setf (body clog-web) clog-body)
+    clog-web))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;
+;; clog-web-initialize ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defun clog-web-initialize (clog-body &key (w3-css-url "/css/w3.css"))
+  "Initializes clog-web and installs a clog-web object on connection."
+  (create-clog-web clog-body)
+  (when w3-css-url
+    (load-css (html-document clog-body) w3-css-url)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; set-maximum-page-width-in-pixels ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defun set-maximum-page-width-in-pixels (clog-body width)
+  "The default width is 980 pixels."
+  (add-class clog-body "w3-content")
+  (setf (maximum-width clog-body) (unit "px" width)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; full-row-on-mobile ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric full-row-on-mobiile (clog-element)
+  (:documentation "Change element to display:block, take up the full row, when
+screen size smaller then 601 pixels DP"))
+
+(defmethod full-row-on-mobile ((obj clog-element))
+  (add-class obj "w3-mobile"))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; hide-on-small-screens ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric hide-on-small-screens (clog-element)
+  (:documentation "Hide element on screens smaller then 601 pixels DP"))
+
+(defmethod hide-on-small-screens ((obj clog-element))
+  (add-class obj "w3-hide-small"))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; hide-on-medium-screens ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric hide-on-medium-screens (clog-element)
+  (:documentation "Hide element on screens smaller then 993 pixels DP"))
+
+(defmethod hide-on-medium-screens ((obj clog-element))
+  (add-class obj "w3-hide-medium"))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; hide-on-large-screens ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric hide-on-large-screens (clog-element)
+  (:documentation "Hide element on screens smaller then 993 pixels DP"))
+
+(defmethod hide-on-large-screens ((obj clog-element))
+  (add-class obj "w3-hide-large"))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - General Containers
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;
+;; Container          -  Sample Uses
+;; -----------------     --------------------------------------------
+;; Content            -  Fixed size centered Content
+;; Panel              -  Notes, Quote boxes, Notifications
+;; Display-Container  -  Image text overlays
+;; Code               -  Code blocks
+;; Side-Bar           -  Sidebar to main content, optional collapsable
+;; Main               -  Mark main contact when using a side-bar
+
+;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-panel ;;
+;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-panel (clog-div)()
+  (:documentation "Panel for web content"))
+
+(defgeneric create-web-panel (clog-obj &key content hidden class html-id)
+  (:documentation "Create a clog-web-panel. General container with 16px left
+and right padding and 16x top and bottom margin. If hidden is t then then the
+visiblep propetery will be set to nil on creation."))
+
+(defmethod create-web-panel ((obj clog-obj) &key (content "")
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-panel")
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-panel)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-content ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-content (clog-div)()
+  (:documentation "Content for web content"))
+
+(defgeneric create-web-content (clog-obj &key content maximum-width
+					   hidden class html-id)
+  (:documentation "Create a clog-web-content. General container with 16px left
+and right padding. If hidden is t then then the visiblep propetery will be set
+to nil on creation."))
+
+(defmethod create-web-content ((obj clog-obj) &key (content "")
+						(maximum-width nil)
+		 				(hidden nil)
+						(class nil)
+						(html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-content")
+    (when maximum-width      
+      (setf (maximum-width div) (unit "px" maximum-width)))
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-content)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - Auto Layout
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;
+;; Container          -  Sample Uses
+;; -----------------     ----------------------------------------------------
+;; Auto-Row           -  Container of Auto-Columns
+;; Auto-Column        -  Columns size adjusts width to fix contents of all
+;;                       columns to fill 100% and all heights equal
+
+;;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-auto-row ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-auto-row (clog-div)()
+  (:documentation "Content for web content"))
+
+(defgeneric create-web-auto-row (clog-obj &key hidden class html-id)
+  (:documentation "Create a clog-web-auto-row. Container for auto-columns
+If hidden is t then then the visiblep propetery will be set to nil on
+creation."))
+
+(defmethod create-web-auto-row ((obj clog-obj) &key (hidden nil)
+						 (class nil)
+						 (html-id nil))
+  (let ((div (create-div obj :hidden t :class class :html-id html-id)))
+    (add-class div "w3-cell-row")
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-auto-row)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-auto-column ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(deftype vertical-align-type () '(member :top :middle :bottom))
+
+(defclass clog-web-auto-column (clog-div)()
+  (:documentation "Content for web content"))
+
+(defgeneric create-web-auto-column (clog-obj &key content vertical-align
+					   hidden class html-id)
+  (:documentation "Create a clog-web-auto-column. Container for auto-columns
+If hidden is t then then the visiblep propetery will be set to nil on
+creation."))
+
+(defmethod create-web-auto-column ((obj clog-obj) &key (content "")
+						  (vertical-align nil)
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-cell")
+    (when vertical-align
+      (add-class div (format nil "w3-cell-~A"
+			     (string-downcase vertical-align))))
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-auto-column)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - Responsive 12 part grid
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;
+;; Container          -  Sample Uses
+;; -----------------     ----------------------------------------------------
+;; Row                -  Container of grid columns (Containers)
+;; Container          -  Headers, Footers, General, 12 part Grid Columns
+
+;;;;;;;;;;;;;;;;;;;;
+;; create-web-row ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-row (clog-div)()
+  (:documentation "Row to contain columns of web content in 12 column grid"))
+
+(defgeneric create-web-row (clog-obj &key padding hidden class html-id)
+  (:documentation "Create a clog-web-row. If padding is true 8px left and
+right padding is addded. If hidden is t then then the visiblep propetery will
+be set to nil on creation."))
+
+(defmethod create-web-row ((obj clog-obj) &key (padding nil)
+		 			    (hidden nil)
+					    (class nil)
+					    (html-id nil))
+  (let ((div (create-div obj :hidden t :class class :html-id html-id)))
+    (if padding
+	(add-class div "w3-row-padding")
+	(add-class div "w3-row"))
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-row)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-container ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(deftype container-size-type () '(member :half :third :twothird :quarter
+				  :threequarter :rest :col))
+
+(defclass clog-web-container (clog-div)()
+  (:documentation "Container cells for web content in 12 column grid"))
+
+(defgeneric create-web-container (clog-obj &key content
+					     column-size
+					     hidden class html-id)
+  (:documentation "Create a clog-web-container. COLUMN-SIZE can be of type
+container-size-type when to set size displayed on medium and large screens
+or can use a string of \"s1-12 m1-12 l1-12\" s m or l followed by how many
+columns this container uses on small, medium or large screens. Small screens
+are always displayed full row. Total columns must add to 12 or one needs to
+be of type :w3-rest to fill space. If hidden is t then then the visiblep
+propetery will be set to nil on creation."))
+
+(defmethod create-web-container ((obj clog-obj) &key (content "")
+						  (column-size nil)
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-container")
+    (when column-size
+      (add-class div (format nil "w3-~A" (string-downcase column-size))))
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-container)))
+

source/clog.lisp

@@ -39,6 +39,7 @@ embedded in a native template application.)"
   (@clog-canvas          section)
   (@clog-multimedia      section)
   (@clog-gui             section)
+  (@clog-web             section)
   (@clog-body            section)
   (@clog-window          section)
   (@clog-document        section)

templates/README.md

@@ -0,0 +1,8 @@
+These are templates to jump start various types of apps. To use any template
+copy to a new directory and rename the template file and create an asd file.
+Then copy in to the new directory the static-file directory adjusting its
+contents for your project. I will be adding tools to automate this in the
+near future. This is inteded for someone that has got through at least
+tutorial 13 :)
+
+clog-gui-template.lisp - Basic CLOG-GUI app

tutorial/24-tutorial.lisp

@@ -0,0 +1,40 @@
+;; In this tutorial we use clog-web to create a dynamic modern mobile
+;; compatible web page. (In progress)
+
+(defpackage #:clog-user
+  (:use #:cl #:clog #:clog-web)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (clog-web-initialize body)
+  (setf (title (html-document body)) "Tutorial 24")
+  (create-web-panel body :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
+  (create-section (create-web-content body :class "w3-teal")
+		  :p :content "This is come content. I am centered and set to a maximum-width.")  
+  ;; These containers not in a row and no setting for how main grid columns so are stacked
+  (create-web-container body :content "Container 1" :class "w3-border")
+  (create-web-container body :content "Container 2" :class "w3-border")
+  (create-web-container body :content "Container 3" :class "w3-border")
+  ;; These are in a row and each is a third for the 12 grid columns
+  (let ((row (create-web-row body)))
+    (create-web-container row :content "Container 1" :column-size :third :class "w3-border")
+    (create-web-container row :content "Container 2" :column-size :third :class "w3-border")
+    (create-web-container row :content "Container 3" :column-size :third :class "w3-border"))
+  ;; As before with padding added between columns and some color
+  (let ((row (create-web-row body :padding t)))
+    (create-web-container row :content "Container 1" :column-size :third :class "w3-border w3-red")
+    (create-web-container row :content "Container 2" :column-size :third :class "w3-border w3-orange")
+    (create-web-container row :content "Container 3" :column-size :third :class "w3-border w3-blue"))
+  (let ((row (create-web-auto-row body)))
+    (create-web-auto-column row :content "Container 1<br>Container 1<br>Container 1"
+				:vertical-align :middle :class "w3-border")
+    (create-web-auto-column row :content "Container 2" :vertical-align :top :class "w3-border")
+    (create-web-auto-column row :content "Container 3" :vertical-align :bottom :class "w3-border"))
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+  (initialize #'on-new-window)
+  (open-browser))

tutorial/README.md

@@ -56,3 +56,4 @@ Tutorial Summary
 - 21-tutorial.lisp - New CLOG plugin in Common-Lisp
 - 22-tutorial.lisp - CLOG GUI Menus and Desktop Look and Feel
 - 23-tutorial.lisp - Using semaphores to wait for input
+- 24-tutorial.lisp - CLOG WEB containers (in progress)