Using CLOG with HTML, templating engines, HTML markup libraries and web frameworks

[rabbibotton]

HTML:

1 To send raw html -

create-child

The returned clog-obj will refer to the outer html element. If you want to access any child elements you create you will need to also use for each method 2 or 3

2 To look up an element by its html id and use it (nothing changes on browser side, this just creates a clog object that points to the element on the HTML page, the as-child is referring to that the object is a child of the same connection as the clog-obj passed as the first parameter)

attach-as-child

3 Use a jquery to find the element on the page in other ways

create-jquery

It is possible to use create-jquery to refer to many elements at once and manipulate them as a unit.

• Now you can assign CLOG events set-on-* or apply methods or use properties as usual.

Java Script:

js-execute and js-query allow you to execute any JavaScript on the browser desired.
jquery-execute and jquery-query allow you to execute jquery functions on a clog object.
jquery - returns the direct jquery string to be used in general js-* strings

Template Engines and HTML Markup Libs:

If you use a templating engine or markup library you would send the html output to the browser (make sure to assign ids) using # 1 and then use # 2 or # 3

Ways to use CLOG with existing html pages and web frameworks

See - Tutorial 11

Serve the HTML from the same server to satisfy the same-server policy as your clog app.
You can either through a web server, the framework’s webserver or even from your CLOG apps static files.
Make sure the the file contains the boot.js file and you use set-on-new-window with the url route to the file, then in your set-on-new-window you can do any CLOG magic you want as above.

[joozik]

Would it be hard to add an option to generate html content (with spinneret for example) instead of providing html file? I mean I would want to have an option to provide something like :boot-file in tutorial 12 (set-on-new-window 'on-page2 :path "/page2" :boot-file "/debug.html") but instead of having an actual static html file in the static directory - to provide kind of "boot-file" generated with spinneret or cl-who or whatever tool there is on the server. With some hints I could try to prepare a pull request for that, but my common-lisp-foo is not superb yet :) I think it would provide certain way of powerful server side rendering that could be useful in some part of some applications. That connected with attaching clog to have awesome dynamic capabilities as well, would make everything even more awesome :) There is also a possibility that I do not understand enough and there are already other ways of providing this kind of capabilities - then I would appreciate some pointer to that.

[rabbibotton]

When you initialize you can use boot-function but in most cases you don't want to play with boot files, you just want to out put your cl-who html in the on-new-window event.

If you really want to generate your own boot files (don't forget to include the boot,js file the boot-function would be way to do it. See tutorial 12

[aykaramba]

This is awesome, thank you.

[joozik]

I know that in documentation there is mentioned that CLOG does not support to have lack builder dsl which I think is something that I'm aiming to get in some other form. I've seen someone making an app with ningle that integrates CLOG into some pages - that was something that I would want to do without need for spinning 2 clack apps (one for something like ningle and separate one for CLOG) like it was done in that example. My intention is to have possibility to create a project where some pages generated with cl-who/spinneret and possibly attach CLOG to just some dynamic parts of them and to have some other pages built with CLOG entirely but I'm not sure what would be the best way to achieve that. With what You proposed - boot-function - I think in theory it should be possible however as I was playing with clog-builder today and I was unable to get this boot.html template filled with anything.

This is the simple code I've tested

`
(defun on-new-window (body)
(let* ((layout (create-panel-box-layout body)))
(center-children (center-panel layout))
(create-div (center-panel layout) :content "Hello")))

(defun on-page (body)
(create-div body :content "You are in on-page")
(log-console (window body) "A message in the browser's log"))

(defun add-search-optimizations (path content)
(funcall (cl-template:compile-template content)
(list :meta ""
:body "Tutorial 12 for CLOG")))

(defun start-app ()
(initialize 'on-new-window
:static-root (merge-pathnames "./www/"
(asdf:system-source-directory :test))
:boot-function 'add-search-optimizations
:boot-file "boot.html")
(set-on-new-window 'on-page :path "/page")
(open-browser))
`
and it does not fill <%= (@ body) %> nor <%= (@ meta) %> with anything.
Is there some obvious mistake here? I have www directory with all necessary files. All the files like jquery boot.js and boot.html are loading correctly, all changes that are done through create-div etc are visible and working but for some reason those template vars that I'm trying to fill in the way similar to tutorial 12 are untouched and remain the same on both paths ("/" and "/page").

Ideally I would want to get rid of static boot.html file and have it in one of the markdown form directly in the code and as for static resources to have just boot.js and jquery.min.js and some css. Having this minimal boot.html file that I would be able to fill with what I need every time it is served would be ok as well.

[joozik]

regarding non-working boot-function - It is not working when run from clog-builder. It is working fine when run as project from command line so testing options from initialize like :boot-function etc. by running project from clog builder does not work at this moment if someone would encounter similar issue.

[rabbibotton]

Good catch. Will see how to incorporate it.

[rabbibotton]

@joozik I will get to the soon but will help me if can send this as a ticket since next two weeks timing is difficult for me