Using HTML cells in SWISH notebooks
This notebook shows how HTML cells in a notebook can be used to create arbitrary web applications
inside a notebook. The HTML is placed in a div
element and is subject to
Bootstrap styling.
The cell can contain script
elements. The script elements are executed after
the whole notebook is loaded and after editing the HTML cell and clicking outside the cell.
First, the text of all script element without a lang
attribute or lang="text/javascript"
is collected. This is wrapped into an anonymous function with the argument
notebook
. The notebook
argument is an object with the following
properties:
- Finding objects
-
- .cell([name])
- Returns a jQuery object pointing to the named
or current HTML cell.
- .notebook()
- Returns a jQuery object of the entire notebook
- .$(selector)
- Returns a jQuery object holding all DOM elements
matching selector in the current HTML cell.
- Running queries
-
- .bindQuery([query,] f)
- Bind the play button of the query named query to run the
function f. If query is omitted, bind to the first query below this cell.
The function is called with a single argument that provides a method
run(bindings)
, where bindings is an object where the keys are the names
of Prolog variables and the values are the values for these variables.
- .run(query, parameters)
- Run the named query cell. Parameters is an object
binding Prolog variables in the query to specified values.
- .swish(options)
- Wrapper around
new Pengine()
that fetches the sources
using the same algorithm as a query cell and provides the defaults below:
- Set
application
to swish
.
- Set
chunk
to 5
. This should be set to 1
for code
that acts on both onprompt
and onsuccess.
- .submit(form, options)
- Submit a (Bootstrap) form to a predicate. This provides a
wrapper around
.swish
that collects the content of the indicated form
(a
jQuery selector), calls options.predicate
with a single argument that is a dict that
contains the fields of the form. On success, options.onsuccess
is called. If an
error occurs, this is displayed.
- Miscelleneous
-
- .hideQuery(q[, on])
- Hide the query editor and buttons for the query named q if
on is
true
(default).
- .loadCSS(url)
- Load a CSS style sheet from
url
if this was not
already loaded.
Double click anywhere in this cell to see the source. Then click anywhere
inside the notebook, but outside this cell to see the result.
Example
In the example below we provide an English grammer, some example sentences
and simple Bootstrap form to interact with the query. The examples are loaded
dynamically from the example sentences defined in the Prolog program at the
end of the page.
parse(Sentence, Tree).
### The programs
Below are three program fragments. All three are declared as _background_ programs, so they are available to all queries posted from this notebook. They specify
- The grammar itself
- Examples that are loaded into the above interface.
- Calling the grammar and translating it to a graphical tree
You can change the grammar as well as the example sentences and see the immediate effect.
% A simple English DCG grammar
% ============================
s(s(NP,VP)) --> np(NP, Num), vp(VP, Num).
np(NP, Num) --> pn(NP, Num).
np(np(Det,N), Num) --> det(Det, Num), n(N, Num).
np(np(Det,N,PP), Num) --> det(Det, Num), n(N, Num), pp(PP).
vp(vp(V,NP), Num) --> v(V, Num), np(NP, _).
vp(vp(V,NP,PP), Num) --> v(V, Num), np(NP, _), pp(PP).
pp(pp(P,NP)) --> p(P), np(NP, _).
det(det(a), sg) --> [a].
det(det(the), _) --> [the].
pn(pn(john), sg) --> [john].
n(n(man), sg) --> [man].
n(n(men), pl) --> [men].
n(n(telescope), sg) --> [telescope].
v(v(sees), sg) --> [sees].
v(v(see), pl) --> [see].
v(v(saw), _) --> [saw].
p(p(with)) --> [with].
example("john sees a man").
example("a man sees john").
example("john sees a man with a telescope").
:- use_rendering(svgtree, [list(false)]).
parse(Sentence, Tree) :-
nonvar(Sentence), !,
split_string(Sentence, " ", " ", Strings),
maplist(atom_string, Words, Strings),
phrase(s(Tree), Words).
parse(Sentence, Tree) :-
phrase(s(Tree), Words),
atomics_to_string(Words, " ", Sentence).