Turorial 16

README.md

@@ -141,6 +141,7 @@ Tutorial Summary
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client-side storage
 - 15-tutorial.lisp - Multi-media
+- 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript
 
 Demo Summary
 

clog-document.lisp

@@ -155,8 +155,20 @@ clog-document object. (Private)"))
 
 (defmethod load-css ((obj clog-document) css-url)
   (jquery-execute (head-element obj)
-		  (format nil "append('<link rel=\"stylesheet\"
+		  (format nil "append('<link rel=\"stylesheet\" href=\"~A\" type=\"text/css\">')"
-           href=\"~A\" type=\"text/css\">')" (escape-string css-url))))
+			  (escape-string css-url))))
+
+;;;;;;;;;;;;;;;;;
+;; load-script ;;
+;;;;;;;;;;;;;;;;;
+
+(defgeneric load-script (clog-document script-url)
+  (:documentation "Load script from SCRIPT-URL."))
+
+(defmethod load-script ((obj clog-document) script-url)
+  (jquery-execute (head-element obj)
+		  (format nil "append('<script src=\"~A\">')"
+			  (escape-string script-url))))
 
 ;;;;;;;;;
 ;; put ;;

clog.lisp

@@ -643,6 +643,7 @@ embedded in a native template application.)"
   (document-element generic-function)
   (ready-state      generic-function)
   (load-css         generic-function)
+  (load-script      generic-function)
   (put              generic-function)
   (put-line         generic-function)
   (put-br           generic-function)

tutorial/16-tutorial.lisp

@@ -0,0 +1,51 @@
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we
+;; are going to create a bootstrap 4.0 page just using CLOG. For the most part CLOG is about
+;; apps but it is possible to do static pages with it. You should also check out a CSS only
+;; alternative to bootsrap - https://www.w3schools.com/w3css/default.asp
+
+(defun on-new-window (body)
+  (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
+  (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js")
+  (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js")
+
+  (setf (title (html-document body)) "Hello Boostrap")
+  
+  (let* ((jumbo (create-div body))
+	 (tmp   (create-section jumbo :h1 :content "My First Bootstrap Page"))
+	 (tmp   (create-p jumbo :content "Resize this responsive page to see the effect!"))
+
+	 (container (create-div body))
+	 (row       (create-div container))
+
+	 (col1 (create-div row))
+	 (tmp  (create-section col1 :h3 :content "Column 1"))
+	 (tmp  (create-p col1 :content "Lorem ipsum dolor.."))
+	 
+	 (col2 (create-div row))
+	 (tmp  (create-section col2 :h3 :content "Column 2"))
+	 (tmp  (create-p col2 :content "Lorem ipsum dolor.."))
+
+	 (col3 (create-div row))
+	 (tmp  (create-section col3 :h3 :content "Column 3"))
+	 (tmp  (create-p col3 :content "Lorem ipsum dolor..")))
+    
+    (setf (css-class-name jumbo) "jumbotron text-center")
+    (setf (css-class-name container) "container")
+    (setf (css-class-name row) "row")
+    (setf (css-class-name col1) "col-sm-4")
+    (setf (css-class-name col2) "col-sm-4")
+    (setf (css-class-name col3) "col-sm-4"))
+  
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window)
+  (open-browser))

tutorial/README.md

@@ -48,3 +48,4 @@ Tutorial Summary
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client side storage
 - 15-tutorial.lisp - Multi-media
+- 16-tutorial.lisp - Bootstrap 4, Loading css files and javascript