diff --git a/scribblings/cs19.scrbl b/scribblings/cs19.scrbl index 79d7912..b1e2252 100644 --- a/scribblings/cs19.scrbl +++ b/scribblings/cs19.scrbl @@ -202,10 +202,59 @@ by @racket[on-tick], though because we're on the web, we can bind to many other kinds of web events (by using @racket[view-bind]).} ] -The rest of this document describes the API. +@subsection{More web-world examples} +Here are a collection of web-world demos: +@itemize[ +@item{@link["http://hashcollision.org/whalesong/examples/attr-animation/attr-animation.html"]{attr-animation.html} [@link["http://hashcollision.org/whalesong/examples/attr-animation/attr-animation.rkt"]{src}] Uses @racket[update-view-attr] and @racket[on-tick] to perform a simple color animation.} + +@item{@link["http://hashcollision.org/whalesong/examples/dwarves/dwarves.html"]{dwarves.html} +[@link["http://hashcollision.org/whalesong/examples/dwarves/dwarves.rkt"]{src}] +Uses @racket[view-show] and @racket[view-hide] to manipulate a view. Click on a dwarf to make them hide. + } + +@item{@link["http://hashcollision.org/whalesong/examples/dwarves-with-remove/dwarves-with-remove.html"]{dwarves-with-remove.html} +[@link["http://hashcollision.org/whalesong/examples/dwarves-with-remove/dwarves-with-remove.rkt"]{src}] +Uses @racket[view-focus?] and @racket[view-remove] to see if a dwarf should be removed from the view. +} + +@item{@link["http://hashcollision.org/whalesong/examples/field/field.html"]{field.html} +[@link["http://hashcollision.org/whalesong/examples/field/field.rkt"]{src}] +Uses @racket[view-bind] to read a text field, and @racket[update-view-text] to change +the text content of an element. +} + +@item{@link["http://hashcollision.org/whalesong/examples/phases/phases.html"]{phases.html} +[@link["http://hashcollision.org/whalesong/examples/phases/phases.rkt"]{src}] +Switches out one view entirely in place of another. Different views can correspond to phases in a program. +} + + +@item{@link["http://hashcollision.org/whalesong/examples/tick-tock/tick-tock.html"]{tick-tock.html} +[@link["http://hashcollision.org/whalesong/examples/tick-tock/tick-tock.rkt"]{src}] +Uses @racket[on-tick] to show a timer counting up. +} + +@item{@link["http://hashcollision.org/whalesong/examples/redirected/redirected.html"]{redirected.html} +[@link["http://hashcollision.org/whalesong/examples/redirected/redirected.rkt"]{src}] +Uses @racket[on-tick] to show a timer counting up, and also uses @racket[open-output-element] to +pipe side-effecting @racket[printf]s to a hidden @tt{div}. +} + +@item{@link["http://hashcollision.org/whalesong/examples/todo/todo.html"]{todo.html} +[@link["http://hashcollision.org/whalesong/examples/todo/todo.rkt"]{src}] +A simple TODO list manager. +} + +@item{@link["http://hashcollision.org/whalesong/examples/where-am-i/where-am-i.html"]{where-am-i.html} +[@link["http://hashcollision.org/whalesong/examples/where-am-i/where-am-i.rkt"]{src}] +Uses @racket[on-location-change] and @racket[on-mock-location-change] to demonstrate location services. +} +] + + diff --git a/scribblings/manual.scrbl b/scribblings/manual.scrbl index 949576e..d5950b2 100644 --- a/scribblings/manual.scrbl +++ b/scribblings/manual.scrbl @@ -621,6 +621,56 @@ by @racket[on-tick], though because we're on the web, we can bind to many other kinds of web events (by using @racket[view-bind]).} ] +@subsection{More web-world examples} +Here are a collection of web-world demos: +@itemize[ +@item{@link["http://hashcollision.org/whalesong/examples/attr-animation/attr-animation.html"]{attr-animation.html} [@link["http://hashcollision.org/whalesong/examples/attr-animation/attr-animation.rkt"]{src}] Uses @racket[update-view-attr] and @racket[on-tick] to perform a simple color animation.} + +@item{@link["http://hashcollision.org/whalesong/examples/dwarves/dwarves.html"]{dwarves.html} +[@link["http://hashcollision.org/whalesong/examples/dwarves/dwarves.rkt"]{src}] +Uses @racket[view-show] and @racket[view-hide] to manipulate a view. Click on a dwarf to make them hide. + } + +@item{@link["http://hashcollision.org/whalesong/examples/dwarves-with-remove/dwarves-with-remove.html"]{dwarves-with-remove.html} +[@link["http://hashcollision.org/whalesong/examples/dwarves-with-remove/dwarves-with-remove.rkt"]{src}] +Uses @racket[view-focus?] and @racket[view-remove] to see if a dwarf should be removed from the view. +} + +@item{@link["http://hashcollision.org/whalesong/examples/field/field.html"]{field.html} +[@link["http://hashcollision.org/whalesong/examples/field/field.rkt"]{src}] +Uses @racket[view-bind] to read a text field, and @racket[update-view-text] to change +the text content of an element. +} + +@item{@link["http://hashcollision.org/whalesong/examples/phases/phases.html"]{phases.html} +[@link["http://hashcollision.org/whalesong/examples/phases/phases.rkt"]{src}] +Switches out one view entirely in place of another. Different views can correspond to phases in a program. +} + + +@item{@link["http://hashcollision.org/whalesong/examples/tick-tock/tick-tock.html"]{tick-tock.html} +[@link["http://hashcollision.org/whalesong/examples/tick-tock/tick-tock.rkt"]{src}] +Uses @racket[on-tick] to show a timer counting up. +} + +@item{@link["http://hashcollision.org/whalesong/examples/redirected/redirected.html"]{redirected.html} +[@link["http://hashcollision.org/whalesong/examples/redirected/redirected.rkt"]{src}] +Uses @racket[on-tick] to show a timer counting up, and also uses @racket[open-output-element] to +pipe side-effecting @racket[printf]s to a hidden @tt{div}. +} + +@item{@link["http://hashcollision.org/whalesong/examples/todo/todo.html"]{todo.html} +[@link["http://hashcollision.org/whalesong/examples/todo/todo.rkt"]{src}] +A simple TODO list manager. +} + +@item{@link["http://hashcollision.org/whalesong/examples/where-am-i/where-am-i.html"]{where-am-i.html} +[@link["http://hashcollision.org/whalesong/examples/where-am-i/where-am-i.rkt"]{src}] +Uses @racket[on-location-change] and @racket[on-mock-location-change] to demonstrate location services. +} +] + + @subsection{@racket[big-bang] and its options} @declare-exporting/this-package[web-world] @@ -834,6 +884,11 @@ Update the form value of the node at the focus.} @defproc[(view-append-child [d dom]) view]{ Add the dom node @racket[d] as the last child of the focused node.} +@defproc[(view-remove [v view]) view]{ +Remove the dom node at the focus from the view @racket[v]. Focus tries to move +to the right, if there's a next sibling. If that fails, focus then +moves to the left, if there's a previous sibling. If that fails too, +then focus moves to the parent.} @subsection{Events}