diff --git a/scribblings/cs19.scrbl b/scribblings/cs19.scrbl index 1790df3..3c48054 100644 --- a/scribblings/cs19.scrbl +++ b/scribblings/cs19.scrbl @@ -498,10 +498,35 @@ Get an list of the event's keys. @section{Dynamic DOM generation with xexps} @declare-exporting/this-package[web-world] We often need to dynamically inject new dom nodes into an existing -view. We can create new DOMs from an @tech{xexp}, which is a -s-expression representation for a DOM node. +view. As an example where the UI is entirely in code: +@codeblock|{ +#lang planet dyoo/whalesong +(require (planet dyoo/whalesong/web-world)) -Here are examples of expressions that evaluate to xexps: +;; tick: world view -> world +(define (tick world view) + (add1 world)) + +;; draw: world view -> view +(define (draw world view) + (view-append-child view + (xexp->dom `(p "hello, can you see this? " + ,(number->string world))))) + +(big-bang 0 (initial-view (xexp->dom '(html (head) (body (@ (id "body")))))) + (on-tick tick 1) + (to-draw draw)) +}| + +Normally, we'll want to do as much of the statics as possible with +@filepath{.html} resources, but when nothing else will do, we can +generate DOM nodes programmatically. + + + +We can create new DOMs from an @tech{xexp}, which is a s-expression +representation for a DOM node. Here are examples of expressions that +evaluate to xexps: @racketblock["hello world"] @@ -554,6 +579,7 @@ Return a string that can be used as a DOM node id. + @section{Including external resources} @defmodule/this-package[resource] diff --git a/web-world/examples/tick-tock-2/tick-tock-2.rkt b/web-world/examples/tick-tock-2/tick-tock-2.rkt new file mode 100644 index 0000000..af4875f --- /dev/null +++ b/web-world/examples/tick-tock-2/tick-tock-2.rkt @@ -0,0 +1,16 @@ +#lang planet dyoo/whalesong +(require (planet dyoo/whalesong/web-world)) + +;; tick: world view -> world +(define (tick world view) + (add1 world)) + +;; draw: world view -> view +(define (draw world view) + (view-append-child view + (xexp->dom `(p "hello, can you see this? " + ,(number->string world))))) + +(big-bang 0 (initial-view (xexp->dom '(html (head) (body (@ (id "body")))))) + (on-tick tick 1) + (to-draw draw))