Deployment of examples; example descriptions.
This commit is contained in:
parent
b6ccbe81cc
commit
8e0906d918
21
js/Makefile
21
js/Makefile
|
@ -21,3 +21,24 @@ clean:
|
||||||
|
|
||||||
veryclean: clean
|
veryclean: clean
|
||||||
rm -rf node_modules/
|
rm -rf node_modules/
|
||||||
|
|
||||||
|
SYNDICATE_WEB=$(CURDIR)/../../syndicate-web
|
||||||
|
deploy: all deploy-copy
|
||||||
|
deploy-copy:
|
||||||
|
(git diff --quiet && git diff --cached --quiet) || (echo "Commit changes first."; false)
|
||||||
|
|
||||||
|
[ -d $(SYNDICATE_WEB) ]
|
||||||
|
[ -f $(SYNDICATE_WEB)/CNAME ]
|
||||||
|
[ -f $(SYNDICATE_WEB)/_config.yml ]
|
||||||
|
[ -f $(SYNDICATE_WEB)/index.md ]
|
||||||
|
|
||||||
|
[ ! -d $(SYNDICATE_WEB)/examples ] || (cd $(SYNDICATE_WEB); git rm -rf examples)
|
||||||
|
[ ! -d $(SYNDICATE_WEB)/dist ] || (cd $(SYNDICATE_WEB); git rm -rf dist)
|
||||||
|
|
||||||
|
git clone .. TEMP_CHECKOUT
|
||||||
|
cp -a TEMP_CHECKOUT/js/examples $(SYNDICATE_WEB)/examples
|
||||||
|
cp -a TEMP_CHECKOUT/js/dist $(SYNDICATE_WEB)/dist
|
||||||
|
rm -rf TEMP_CHECKOUT
|
||||||
|
|
||||||
|
(cd $(SYNDICATE_WEB); git add examples)
|
||||||
|
(cd $(SYNDICATE_WEB); git add dist)
|
||||||
|
|
|
@ -0,0 +1,63 @@
|
||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
# Syndicate/js Examples
|
||||||
|
|
||||||
|
## Clickable Button
|
||||||
|
|
||||||
|
This is a simple clickable button; each time the button is clicked,
|
||||||
|
the number on the face of the button is incremented.
|
||||||
|
|
||||||
|
The actor maintaining the counter also maintains the button's label
|
||||||
|
and listens to click events. It uses the Syndicate/js DOM driver to
|
||||||
|
publish the button's label text based on its internal state, and the
|
||||||
|
Syndicate/js jQuery driver to subscribe to button click events.
|
||||||
|
|
||||||
|
- [DEMO](button/)
|
||||||
|
- [Source code](button/index.js) using the Syndicate/js DSL
|
||||||
|
|
||||||
|
## jQuery Example
|
||||||
|
|
||||||
|
This example is similar to the button example, but uses plain
|
||||||
|
JavaScript instead of the Syndicate/js DSL, calling out to Syndicate
|
||||||
|
as a library. It uses the Syndicate/js jQuery driver to receive click
|
||||||
|
events from the button, but does not use the Syndicate/js DOM driver;
|
||||||
|
instead, it updates the DOM directly.
|
||||||
|
|
||||||
|
- [DEMO](jquery/)
|
||||||
|
- [Source code](jquery/index.js) in plain JavaScript
|
||||||
|
|
||||||
|
## Text Entry Widget
|
||||||
|
|
||||||
|
This is a simple text entry GUI control, following a design of
|
||||||
|
[Hesam Samimi](http://www.hesam.us/cs/cooplangs/textfield.pdf).
|
||||||
|
|
||||||
|
Samimi's design proceeds in two stages. In the first, it calls for two
|
||||||
|
components: one representing the *model* of a text field, including
|
||||||
|
its contents and cursor position, and one acting as the *view*,
|
||||||
|
responsible for drawing the widget and interpreting keystrokes. In the
|
||||||
|
second stage, a *search* component is added, responsible for searching
|
||||||
|
the current content of the model for a pattern and collaborating with
|
||||||
|
the view to highlight the results.
|
||||||
|
|
||||||
|
This Syndicate solution naturally has an actor for each of the three
|
||||||
|
components. The model actor maintains the current contents and cursor
|
||||||
|
position as assertions in the shared dataspace. The view actor
|
||||||
|
observes these assertions and, when they change, updates the display.
|
||||||
|
It also subscribes to keystroke events and translates them into
|
||||||
|
messages understandable to the model actor. The addition of the search
|
||||||
|
actor necessitates no changes to the model actor. The search actor
|
||||||
|
observes the assertion of the current content of the field in the same
|
||||||
|
way the view actor does. If it finds a matching substring, it asserts
|
||||||
|
this fact. The view actor must observe these assertions and highlight
|
||||||
|
any corresponding portion of text.
|
||||||
|
|
||||||
|
There are two implementations, one using Syndicate events and actions
|
||||||
|
directly, and one using the high-level Syndicate DSL.
|
||||||
|
|
||||||
|
- High-level DSL implementation
|
||||||
|
- [DEMO](textfield-dsl/)
|
||||||
|
- [Source code](textfield-dsl/index.js) using the Syndicate/js DSL
|
||||||
|
- Low-level implementation
|
||||||
|
- [DEMO](textfield/)
|
||||||
|
- [Source code](textfield/index.js) in plain JavaScript
|
Loading…
Reference in New Issue