[claw-cvs] r160 - in trunk: doc/chapters main/claw-html/src
Author: achiumenti Date: Thu Dec 18 12:27:47 2008 New Revision: 160 Log: bugfixes, documentation update Modified: trunk/doc/chapters/claw-html.texinfo trunk/main/claw-html/src/tags.lisp Modified: trunk/doc/chapters/claw-html.texinfo ============================================================================== --- trunk/doc/chapters/claw-html.texinfo (original) +++ trunk/doc/chapters/claw-html.texinfo Thu Dec 18 12:27:47 2008 @@ -290,7 +290,7 @@ The last thing to note is the absence of the link to the css file. This was made because each componoent can inject into the page its own css or js files or definitions. To add a css or a js file at class definition level you have to implement @code{HTCOMPONENT-SCRIPT-FILES} and @code{HTCOMPONENT-STYLESHEET-FILES} while to add javascript or -css directives into the page you have to use @code{HTCOMPONENT-CLASS-INITSCRIPTS}, @code{HTCOMPONENT-INSTANCE-INITSCRIPT} and @code{HTCOMPONENT-INITSTYLES} +css directives into the page you have to use @code{HTCOMPONENT-GLOBAL-INITSCRIPTS}, @code{HTCOMPONENT-INITSCRIPTS} and @code{HTCOMPONENT-INITSTYLES} In our case it's simply sufficient to override the @code{HTCOMPONENT-STYLESHEET-FILES} method as described @@ -344,9 +344,97 @@ When you want to inject javascript commands (and functions too) the story is a slightly different. Firstly commands are injected into a <script> tag that is positioned as the last <body> tag. -Then there are two different methods: @code{HTCOMPONENT-CLASS-INITSCRIPTS} and @code{HTCOMPONENT-INSTANCE-INITSCRIPT}. +Then there are two different methods: @code{HTCOMPONENT-GLOBAL-INITSCRIPTS} and @code{HTCOMPONENT-INITSCRIPTS}. -@code{HTCOMPONENT-CLASS-INITSCRIPTS} is used to render scripts that are not tied to a particular instance, but come with the component, +@code{HTCOMPONENT-GLOBAL-INITSCRIPTS} is used to render scripts that are not tied to a particular instance, but come with the component, it's usually used to render javascript functions and global variabes. -@code{HTCOMPONENT-INSTANCE-INITSCRIPT} render scripts that are executed on <body> onload event, so no function definitions sould be put inside. +@code{HTCOMPONENT-INITSCRIPTS} renders scripts that are executed on <body> onload event, so no function definitions sould be put inside. + +For example, suppose that you want to create a component that displays current client time and refresshes it every second; +you'll create a global js variable that will sore the component DOM node. You won't initialize it into the global section because you +must be sure that the DOM tree is ready, so you'll inject it the with initialization method @code{HTCOMPONENT-INITSCRIPTS}. + +An example will be better explain the concept, so modify the components.lisp file adding the following code: + +@sp 2 +@smalllisp +(defclass show-time (wcomponent) + ((css-class :initarg :class + :reader show-time-css-class)) + (:default-initargs :class "showTime") + (:metaclass metacomponent)) + +(defmethod htcomponent-initstyles ((obj show-time)) + (format nil ".~a @{color: black;font-weight: bold;@}" (show-time-css-class obj))) + +(defmethod wcomponent-template ((obj show-time)) + (span> :static-id (htcomponent-client-id obj) + :class (show-time-css-class obj) + (wcomponent-informal-parameters obj))) + +(defmethod htcomponent-global-initscripts ((obj show-time)) + "var showTime = function (node) @{ +node.innerHTML = new Date(); +setTimeout(function () @{showTime(node);@}, 1000); +@};") + +(defmethod htcomponent-initscripts ((obj show-time)) + (format nil "showTime(document.getElementById('~a'));" (htcomponent-client-id obj))) +@end smalllisp +@sp 2 + +Then change the @code{WCOMPONENT-TEMPLATE} of the @code{INDEX-PAGE} int the index.lisp file: + +@sp 2 +@smalllisp +(defmethod page-content ((o index-page)) + (site-template> :id "theBody" + :title "Home test page sample 2" + :class "sampleBody" + (div> :class "topHeader" "top header") + (div> :class "mainContent" + (h1> "Hello world")) + (div> :style "color: black;" + "Today: " + (show-time> :class "showTime")))) +@end smalllisp +@sp 2 + +As you can see, once inserted into your component no more javascrpt is needed, the injection system will do all needed for you! + +Here it is how the page will look like: + +@sp 1 +@image{images/idxpage-showtime,150mm,,,png} +@sp 2 + +@code{claw-html} will let you to safely insert the ame component multiple times because it will coorectly handle injections and id +generations. + +For example try to put two times the @code{SHOW-TIME>} tag function inside the page content like the following: + +@sp 2 +@smalllisp +(defmethod page-content ((o index-page)) + (site-template> :id "theBody" + :title "Home test page sample 2" + :class "sampleBody" + (div> :class "topHeader" "top header") + (div> :class "mainContent" + (h1> "Hello world")) + (div> :style "color: black;" + "Today: " + (show-time> :class "showTime")) + (div> :style "color: black;" + "Today: " + (show-time> :class "showTime")))) +@end smalllisp +@sp 2 + +As you can see from the following source code css and javascript @code{SHOW-TIME} injection are correctly handled and not +duplicated as for the id generations that will not create conflicts. + +@sp 1 +@image{images/idxpage-showtime-src,150mm,,,png} +@sp 2 Modified: trunk/main/claw-html/src/tags.lisp ============================================================================== --- trunk/main/claw-html/src/tags.lisp (original) +++ trunk/main/claw-html/src/tags.lisp Thu Dec 18 12:27:47 2008 @@ -493,7 +493,7 @@ :accessor htcomponent-stylesheet-files :documentation "Page injectable css files") (global-initscripts :initarg :global-initscripts :accessor htcomponent-global-initscripts :documentation "Page injectable javascript class derectives") - (initscripts :initarg :initscript + (initscripts :initarg :initscripts :accessor htcomponent-initscripts :documentation "Page injectable javascript instance derectives. It may be a string or a list of strings") (initstyles :initarg :initstyles :accessor htcomponent-initstyles :documentation "Component injectable css derectives. It may be a string or a list of strings")) @@ -763,7 +763,7 @@ (push current-css tag-list)))) (unless (string= "" init-styles) (let ((current-css (style> :type "text/css"))) - (setf (htcomponent-body current-css) (list init-styles)) + (setf (htcomponent-body current-css) (list "\ " init-styles)) (push current-css tag-list))) tag-list)) @@ -1134,7 +1134,7 @@ (let ((js (script> :type "text/javascript")) (js-control-string (if on-load " -var bodyInitFunction = function\(e){~a~%};~% +var bodyInitFunction = function\(e){~%~a~%};~% if (/MSIE (\\d+\\.\\d+);/.test(navigator.userAgent)) {~% window.attachEvent\('onload', bodyInitFunction);~% } else {~% @@ -1261,17 +1261,9 @@ (when (null previous-print-status) (setf (page-can-print page) (htcomponent-can-print wcomponent))) (when (page-can-print page) - (let ((script-files (htcomponent-script-files wcomponent))) - (dolist (script (if (listp script-files) - script-files - (list script-files))) - (pushnew script (page-script-files page) :test #'equal))) - (let ((css-files (htcomponent-stylesheet-files wcomponent))) - (dolist (css (if (listp css-files) - css-files - (list css-files))) - (pushnew css (page-stylesheet-files page) :test #'equal))) - (dolist (js (htcomponent-global-initscripts wcomponent)) + (dolist (css (listify (htcomponent-stylesheet-files wcomponent))) + (pushnew css (page-stylesheet-files page) :test #'equal)) + (dolist (js (listify (htcomponent-global-initscripts wcomponent))) (pushnew js (page-global-initscripts page) :test #'equal)) (dolist (js (listify (htcomponent-initscripts wcomponent))) (pushnew js (page-initscripts page) :test #'equal))
participants (1)
-
Andrea Chiumenti