88 lines
3.0 KiB
Common Lisp
88 lines
3.0 KiB
Common Lisp
|
|
(ql:quickload :clog)
|
|
|
|
(clog-install-dir)
|
|
;; #P"/home/efim/quicklisp/local-projects/clog/"
|
|
|
|
(clog:run-tutorial 1)
|
|
|
|
(in-package clog-user)
|
|
|
|
(defun my-setup (body)
|
|
(let ((header (create-child body "<h1>lalalla</h1>"))
|
|
(colors '(:black :blue :green)))
|
|
(setf (color header) :pink)
|
|
(set-on-click header
|
|
(lambda (obj)
|
|
(declare (ignore obj))
|
|
;; if set value in debugger, this is how to delete it
|
|
;; since it's just created in image
|
|
;; (boundp 'colors)
|
|
;; (makunbound 'colors)
|
|
(nth (random (length colors)) colors)
|
|
(setf (color header) (nth (random (length colors)) colors)))))
|
|
(create-child body "<p>lalalla</p>")) ; now, that doesn't work.
|
|
|
|
(initialize #'my-setup)
|
|
(open-browser)
|
|
|
|
;; now again, what about color keywords
|
|
;; well, maybe there's some kind of filtering for correct color values
|
|
|
|
;; and ispecting source is easier with sly-inspect-definition
|
|
|
|
;; let's look at second tutorial?
|
|
|
|
;; more lispier creation of elements
|
|
(clog:run-tutorial 2)
|
|
|
|
|
|
;; :address :article :aside :header :main :nav :hgroup
|
|
;; :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6
|
|
(defun my-setup-with-more-elements (body)
|
|
(let ((my-h1 (create-section body :h1 :content "content of h1")))
|
|
(create-section body :address :content "what-s content of address?")
|
|
(create-section body :article :content "what-s content of article?")
|
|
(create-section body :aside :content "what-s content of aside?")
|
|
(format t "running setup on ~S with ~S" body my-h1)))
|
|
|
|
;; article is "independent content" which should be reasonable to distribute on its own
|
|
;; aside - to put content out of main column?
|
|
;; main - The content inside the <main> element should be unique to the
|
|
;; document. It should not contain any content that is repeated across documents
|
|
;; such as sidebars, navigation links, copyright information, site logos, and
|
|
;; search forms.
|
|
|
|
;; what would be comfortable way to compose that?
|
|
;; apart from using let?
|
|
;; maybe that's in tutorial 3?
|
|
|
|
(initialize #'my-setup-with-more-elements)
|
|
(open-browser)
|
|
|
|
(clog:run-tutorial 3)
|
|
|
|
;; tutorial 3 is about wrapping code into (with-sync-event (obj) ... )
|
|
;; that would guard start of function on some event until after previous completes. cool
|
|
|
|
(clog:run-tutorial 4)
|
|
;; reusing handler, and function generic, without much of type specification, looks unusual
|
|
|
|
(clog:run-tutorial 5)
|
|
|
|
;; so, connection-data-item on obj - target, or *body* seems to not care, having strigly named attributes
|
|
;; shareable by components?
|
|
|
|
;; how'd I use that?
|
|
;; I guess to maybe pass component to act upon, without doing elaborate nested LET expressions
|
|
;; just during creation of some component, save it as such variable,
|
|
;; then in handler it could be targeted by being taken by name
|
|
;;
|
|
;; but, yeah, also passing values between handlers or something
|
|
|
|
(clog:run-tutorial 6)
|
|
;; every click / handler starts in new thread.
|
|
;; so if I want reentrant code, use `connection-data-item`
|
|
|
|
(clog:run-tutorial 7)
|