Zen Logo

Demos of Zen technology prototypes

Demo #1: DOM editor Demo #2: Introduction to Zen sequential web app programming Demo #3: Visual program editor Demo #4: Financial blog Demo #5: Tab container Demo #6: Gambit Scheme Other experimental code About the Zen web app framework and these demos

Demo #2: Introduction to Zen sequential web app programming

Refer to Biwascheme.org to learn more about Biwascheme.
Test Area
Div #1
Div #2
To try the application, open the Developer Tools of your web browser, then type the following command into the BiwaScheme console above, terminated by a RETURN:

(load "scheme/simple_seq_webapp.scm")

The program will terminate after receiving five events from any combination of: a click on Dev #1, a click on Div #2, a click on Button #1 followed by a key press, a click on Button #2 followed by a key press, or a 10-second timeout. Try giving the program those inputs in any order. Being an alpha prototype, the demo still has bugs and does not yet work in Explorer or mobile browsers. Here is the main part of the app:
(with-handlers ((click-handler "#div1")
		(click-handler "#div2")
		(keydown-handler "#button1")
		(keydown-handler "#button2")
		(timeout-handler test-timeout 10000))
  (display (get-input))
  (display (get-input))
  (display (get-input))
  (display (get-input))
  (display (get-input)))
(display "Test finished.")
The full app is here.
Test Area
To try the calculator application, type the following command into the BiwaScheme console above, terminated by a RETURN.

(load "scheme/calculator.scm")

Be ready to wait a ridiculous amount of time for the application to load, up to 15 seconds or more, because this demo is not optimized. (Being an alpha prototype, the demo still has bugs and does not yet work in Explorer or mobile browsers.) The slow part is the loading of the caluculator button web component. The second time the application is loaded, it should load fast.

Then click the calculator's purple keys in the test area and watch the results in the Biwascheme console. The calculator does addition, subtraction, multiplication, and division, printing the results in the Biwascheme console.

Here is the main part of the app:

(with-handlers ((click-handler ".button"))
  (let* ((btn (js-ref (second (get-input)) "target"))
	 (text (js-ref btn "innerText")))
    (case text
      (("+" "-" "*" "/")
       (when (not (= value2 0))
	 (set! value1 value2))
       (set! value2 0)
       (set! op (string->symbol text)))
      (("=")
       (when op
	 (set! value1 ((eval op) value1 value2))
	 (set! value2 0)))
      (else
       (set! value2 (+ (* value2 10) (string->number text)))))
    (if op
	(format #t "~a ~a ~a~%" value1 (symbol->string op) value2)
	(format #t "~a~%" value2))))
The full app is at calculator.scm The calculator program is practically self explanatory.

Read the page "Sequentially Programmed Web App Demo" for more background on sequentially programmed applications.

Next

Copyright © 2020, 2021, Thomas Elam, Mashweb.Club. All rights reserved.