Attaching HTML files to CLOG

clog-connection.lisp

@@ -46,7 +46,8 @@ script."
   (put-line    function)
   (new-line    function)
   (alert-box   function)
-  (generate-id function))
+  (generate-id function)
+  (debug-mode  function))
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -369,3 +370,10 @@ HTML <br />."
   "Create an alert box on CONNECTION-ID with MESSAGE"
   (execute connection-id (format nil "alert('~A');" (escape-string message))))
 
+;;;;;;;;;;;;;;;;
+;; debug-mode ;;
+;;;;;;;;;;;;;;;;
+
+(defun debug-mode (connection-id)
+  "Turn on javascript debug mode in the boot.js file"
+  (execute connection-id "clog_debug = true"))

clog-element.lisp

@@ -37,7 +37,8 @@ the javascript clog[] but is not in the DOM. (private)"
   (let ((web-id (cc:generate-id)))
     (cc:execute
      connection-id
-     (format nil "clog['~A']=$(\"~A\"); clog['~A'].first().prop('id','~A')"
+     (format nil
+	     "clog['~A']=$(\"~A\").get(0); $(clog['~A']).first().prop('id','~A')"
 	     web-id html web-id web-id))
     (make-clog-element connection-id web-id :clog-type clog-type)))
 
@@ -48,7 +49,8 @@ the javascript clog[] but is not in the DOM. (private)"
 (defun attach (connection-id html-id)
   "Create a new clog-obj and attach an existing element with HTML-ID on
 CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
-  (cc:execute connection-id (format nil "clog['~A']=$('#~A')" html-id html-id))
+  (cc:execute connection-id
+	      (format nil "clog['~A']=$('#~A').get(0)" html-id html-id))
   (make-clog-element connection-id html-id))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -64,7 +66,8 @@ CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
 as child of CLOG-OBJ and if :AUTO-PLACE (default t) place-inside-bottom-of
 CLOG-OBJ"))
 
-(defmethod create-child ((obj clog-obj) html &key (auto-place t) (clog-type 'clog-element))
+(defmethod create-child ((obj clog-obj) html &key (auto-place t)
+					       (clog-type 'clog-element))
   (let ((child (create-with-html (connection-id obj) html :clog-type clog-type)))
     (if auto-place
 	(place-inside-bottom-of obj child)
@@ -75,13 +78,13 @@ CLOG-OBJ"))
 ;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric attach-as-child (clog-obj html-id &key clog-type)
-  (:documentation "Create a new CLOG-Element or sub-type of CLOG-TYPE and attach
+  (:documentation "Create a new CLOG-Element or sub-type of CLOG-TYPE and
-an existing element with HTML-ID. The HTML-ID must be unique."))
+attach an existing element with HTML-ID. The HTML-ID must be unique."))
 
 (defmethod attach-as-child ((obj clog-obj) html-id
 			    &key (clog-type 'clog-element))
   (cc:execute (connection-id obj)
-	      (format nil "clog['~A']=$('#~A')" html-id html-id))
+	      (format nil "clog['~A']=$('#~A').get(0)" html-id html-id))
   (make-clog-element (connection-id obj) html-id :clog-type clog-type))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -102,7 +105,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
   (:documentation "Set css style."))
 
 (defmethod set-style ((obj clog-element) style-name value)
-  (jquery-execute obj (format nil "css('~A','~A')" style-name (escape-string value))))
+  (jquery-execute obj (format nil "css('~A','~A')"
+			      style-name (escape-string value))))
 (defsetf style set-style)
 
 ;;;;;;;;;;;;;;;
@@ -125,7 +129,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
   (:documentation "Set html tag attribute."))
 
 (defmethod set-attribute ((obj clog-element) attribute-name value)
-  (jquery-execute obj (format nil "attr('~A','~A')" attribute-name (escape-string value))))
+  (jquery-execute obj (format nil "attr('~A','~A')"
+			      attribute-name (escape-string value))))
 (defsetf attribute set-attribute)
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -823,11 +828,12 @@ resizeable sets if element can be resized by user."))
 ;; positioning ;;
 ;;;;;;;;;;;;;;;;;
 
-(deftype positioning-type () '(member :static :relative :absolute :sticky :fixed))
+(deftype positioning-type ()
+  '(member :static :relative :absolute :sticky :fixed))
 
 (defgeneric positioning (clog-element)
-  (:documentation "Get/Setf positioning. Determins how the properties left, right,
+  (:documentation "Get/Setf positioning. Determins how the properties left,
-top and bottom are interpreted.
+right, top and bottom are interpreted.
 
    Static   - According to document flow, position properties have no
               affect.
@@ -1122,7 +1128,8 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-height (clog-element)
-  (:documentation "Get outer-height. Includes padding and border but not margin."))
+  (:documentation "Get outer-height. Includes padding and border but not
+margin."))
 
 (defmethod outer-height ((obj clog-element))
   (jquery-query obj "outerHeight()"))
@@ -1142,7 +1149,8 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-height-to-margin (clog-element)
-  (:documentation "Get outer-height-to-margin. Includes padding and border and margin."))
+  (:documentation "Get outer-height-to-margin. Includes padding and border and
+margin."))
 
 (defmethod outer-height-to-margin ((obj clog-element))
   (jquery-query obj "outerHeight(true)"))
@@ -1152,7 +1160,8 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-width-to-margin (clog-element)
-  (:documentation "Get outer-width-to-margin. Includes padding and border and margin."))
+  (:documentation "Get outer-width-to-margin. Includes padding and border and
+margin."))
 
 (defmethod outer-width-to-margin ((obj clog-element))
   (jquery-query obj "outerWidth(true)"))
@@ -1333,7 +1342,8 @@ underneath its border box, padding box, or content box."))
 ;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric background-size (clog-element)
-  (:documentation "Get/Setf background-size. auto | w h | % = cover of parent | contain"))
+  (:documentation "Get/Setf background-size.
+auto | w h | % = cover of parent | contain"))
 
 (defmethod background-size ((obj clog-element))
   (style obj "background-size"))
@@ -1350,7 +1360,8 @@ underneath its border box, padding box, or content box."))
 ;;;;;;;;;;;;
 
 (deftype border-style-type ()
-  '(member :none :hidden :dotted :dashed :solid :double :groove :ridge :inset :outset))
+  '(member :none :hidden :dotted :dashed :solid
+    :double :groove :ridge :inset :outset))
 
 (defgeneric border (clog-element)
   (:documentation "Get border. <line-width> <line-style> <line-color>"))
@@ -1367,7 +1378,8 @@ underneath its border box, padding box, or content box."))
 line-width - size or medium|thin|thick|length|initial|inherit"))
 
 (defmethod set-border ((obj clog-element) line-width line-style line-color)
-  (setf (style obj "border") (format nil "~A ~A ~A" line-width line-style line-color)))
+  (setf (style obj "border") (format nil "~A ~A ~A"
+				     line-width line-style line-color)))
 
 ;;;;;;;;;;;;;;;;;;;
 ;; border-radius ;;
@@ -1426,7 +1438,8 @@ line-width - size or medium|thin|thick|length|initial|inherit"))
 line-width -  size or medium|thin|thick|length|initial|inherit"))
 
 (defmethod set-outline ((obj clog-element) line-color line-style line-width)
-  (setf (style obj "outline") (format nil "~A ~A ~A" line-color line-style line-width)))
+  (setf (style obj "outline") (format nil "~A ~A ~A"
+				      line-color line-style line-width)))
 
 ;;;;;;;;;;;;
 ;; margin ;;
@@ -1462,7 +1475,8 @@ line-width -  size or medium|thin|thick|length|initial|inherit"))
   (:documentation "Set padding. Each can be - <length>|initial|inherit"))
 
 (defmethod set-padding ((obj clog-element) top right bottom left)
-  (setf (style obj "padding") (format nil "~A ~A ~A ~A" top right bottom left)))
+  (setf (style obj "padding") (format nil "~A ~A ~A ~A"
+				      top right bottom left)))
 (defsetf padding set-padding)
 
 ;;;;;;;;;;;;

clog-form.lisp

@@ -326,6 +326,32 @@ have this set true. Autofocus on element when form loaded. "))
   (setf (property obj "value") value))
 (defsetf value set-value)
 
+;;;;;;;;;;;;;;;;;
+;; radio-value ;;
+;;;;;;;;;;;;;;;;;
+
+(defgeneric radio-value (clog-obj name)
+  (:documentation "Returns the value of the selected radio button in a
+group called NAME."))
+
+(defmethod radio-value ((obj clog-obj) name)
+  (cc:query (connection-id obj)
+	    (format nil "$('input:radio[name=~A]:checked').val()"
+		    name)))
+
+
+
+;;;;;;;;;;;;;;;;
+;; name-value ;;
+;;;;;;;;;;;;;;;;
+
+(defgeneric name-value (clog-obj name)
+  (:documentation "Returns the value of input item called NAME."))
+
+(defmethod name-value ((obj clog-obj) name)
+  (cc:query (connection-id obj)
+	    (format nil "$('input[name=~A]').val()" name)))
+
 ;;;;;;;;;;;;;
 ;; pattern ;;
 ;;;;;;;;;;;;;

clog.lisp

@@ -134,7 +134,7 @@ application."
   "CLOG-Element - Properties"
   (access-key          generic-function)
   (advisory-title      generic-function)
-  (class-name          generic-function)
+  (css-class-name      generic-function)
   (editablep           generic-function)
   (draggablep          generic-function)
   (visiblep            generic-function)
@@ -322,6 +322,8 @@ application."
   (name                generic-function)
   (default-value       generic-function)
   (value               generic-function)
+  (radio-value         generic-function)
+  (name-value          generic-function)
   (pattern             generic-function)
   (minimum             generic-function)
   (maximum             generic-function)

static-files/tutorial/tut-11.html

@@ -0,0 +1,76 @@
+<!doctype HTML>
+<HTML>
+   <HEAD>
+      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+      <meta http-equiv="Pragma" content="no-cache" />
+      <meta http-equiv="Expires" content="0" />
+      <meta charset="utf-8">
+      <meta namei="viewport" content="width=device-width, initial-scale=1">
+
+      <!-- The CLOG boot file are jQuery are loaded at bottom of this HTML File. -->
+
+      <!-- Latest compiled and minified Bootstrap 3 CSS -->
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+   </HEAD>
+<BODY>
+
+<form id='form1' class="form-horizontal">
+<fieldset>
+
+<!-- Form Name -->
+<legend>Form Name</legend>
+
+<!-- Multiple Radios (inline) -->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="radios">Inline Radios</label>
+  <div class="col-md-4"> 
+    <label class="radio-inline" for="radios-0">
+      <input type="radio" name="radios" id="radios-0" value="1" checked="checked">
+      1
+    </label> 
+    <label class="radio-inline" for="radios-1">
+      <input type="radio" name="radios" id="radios-1" value="2">
+      2
+    </label> 
+    <label class="radio-inline" for="radios-2">
+      <input type="radio" name="radios" id="radios-2" value="3">
+      3
+    </label> 
+    <label class="radio-inline" for="radios-3">
+      <input type="radio" name="radios" id="radios-3" value="4">
+      4
+    </label>
+  </div>
+</div>
+
+<!-- Text input-->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="textinput">Text Input</label>  
+  <div class="col-md-4">
+  <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
+  <span class="help-block">help</span>  
+  </div>
+</div>
+
+<!-- Button (Double) -->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="button1id">Double Button</label>
+  <div class="col-md-8">
+    <button id="button1id" name="button1id" class="btn btn-success">Good Button</button>
+    <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
+  </div>
+</div>
+
+</fieldset>
+</form>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+      <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
+
+    <!-- CLOG Boot file -->
+      <script src="/js/boot.js" type="text/javascript"></script>
+
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+  </body>
+</html>

tutorial/11-tutorial.lisp

@@ -0,0 +1,72 @@
+;; Creating code GUIs from scratch is great, but in the real world often design
+;; is left to artists and code is left to engineers. CLOG is an amazign solution
+;; for that model of app development. Any existing web page can be come a CLOG
+;; app by simply adding the following two lines to an existing HTML file:
+;;
+;;      <script src="/js/jquery.min.js" type="text/javascript"></script>
+;;      <script src="/js/boot.js" type="text/javascript"></script>
+;;
+;; The first line adds jquery which CLOG uses to enhance browser compatability.
+;; The second line add the "boot" file.
+;;
+;; For this tutorial we  generated the clog/static-files/tutorial/tut-11.html
+;; by using the form generator at https://bootsnipp.com/forms?version=3
+;; then used the the template from https://getbootstrap.com/docs/3.3/
+;; and added CLOG's boot.js script line. It was neccesary to add an id to the
+;; form (id='form1') as the generator did not add one.
+;;
+;;  - We tell clog to use the boot file "/tutorial/tut-11.html"
+;;  - We set a blank on-submit to overide the behavior in the bootstrap
+;;          buttons to submit the from HTML style.
+;;  - We are going to attach to the "Good Button" an on-click handler
+;;          to handle getting the values
+;;  - We attach to each control in the on-click handler that we want
+;;          value for and query them
+;;  - We attach an on-click handler that resets the form to the
+;;          "Scary Button"
+
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (clog-connection:debug-mode (clog::connection-id body))
+    
+  (let* ((form         (attach-as-child body "form1" :clog-type 'clog-form))
+	 (good-button  (attach-as-child body "button1id"))
+	 (scary-button (attach-as-child body "button2id")))
+
+    (defun on-click-good (obj)
+      (let ((alert-div (create-div body)))
+
+	(place-before form alert-div)
+	(setf (hiddenp form) t)
+
+	; Bootstrap specific markup
+	(setf (css-class-name alert-div) "alert alert-success")
+	(setf (attribute alert-div "role") "alert")
+
+	(setf (inner-html alert-div)
+	      (format nil "<pre>radios value : ~A</pre><br>
+                           <pre>textinput value : ~A</pre><br>"
+		      (radio-value form "radios")
+		      (name-value form "textinput")))))
+
+    (defun on-click-scary (obj)
+      (reset form))
+
+    ;; We need to overide the boostrap default to submit the form html style
+    (set-on-submit form (lambda (obj)()))
+
+    (set-on-click good-button #'on-click-good)
+    (set-on-click scary-button #'on-click-scary)
+  
+    (run body)))
+
+(defun start-tutorial ()
+  "Start turtorial."
+
+  (initialize #'on-new-window :boot-file "/tutorial/tut-11.html")
+  (open-browser))

tutorial/README.md

@@ -43,3 +43,4 @@ Tutorial Summary
 - 08-tutorial.lisp - Mice Love Containers
 - 09-tutorial.lisp - Tabs, pannels and forms
 - 10-tutorial.lisp - Canvas
+- 11-tutorial.lisp - Attaching to existing HTML