Zen Logo Demo #1 Other experimental code

web-call.cc demo #1

Alpha prototype of the Zen live DOM editor

What is a DOM?
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. The DOM is basically just a tree of text objects and element objects like DIVs (divisions of the page), paragraphs, headers, articles, sections, blockquotes, links, lists, interactive components (like buttons and forms), and many more. The DOM defines the structure of the page by defining which of the page's elements are inside, i.e. nested within, which other page elements.
What is a live DOM editor?
A live DOM editor is a program or application in a web page that changes the relative positions, and possibly attributes and properties, of DOM elements on the fly, that is, without requiring the page to be refreshed or updated from the web server. A useful live DOM editor should also probably be able to add and delete DOM elements. A useful DOM editor will likely be able to persist these changes by saving them locally or on the web server.
What is the alpha prototype of the Zen live DOM editor?
This page, containing the alpha prototype of the Zen live DOM editor, is a demonstration of a very clear and simple way to program a complex GUI (graphical user interface). Being an alpha prototype, it still has bugs and does not yet work in Explorer or mobile browsers. In case you do not find the operation of this DOM editor to be obvious, there are instructions at the bottom of the page.
Native HTML Elements
Block 1
Inline 1
Inline 2
Inline 3
Inline 3a
Block 2
Inline 2a
Inline 2b
Block 3
Vaadin List Box Custom Elements Option one Option two Option three
Vaadin Ordered Layout Custom Elements, Horizontal
Item 1
Item 2
Item 3
Vaadin Ordered Layout Custom Elements, Vertical
Item A
Item B
Item C
Dojo Button Custom Elements
Basic Button Icon Button Popup Toggle
Disabled Basic Button Disabled Icon Button Disabled Popup Disabled Toggle

How to use this prototype DOM editor

This DOM editor prompts you in large green text. It will instruct you to choose a tool. Currently, "Copy-insert", "Copy-before", "Move-insert", and "Move-before" are the only tools that work. Clicking on any other tool will produce the message "Unimplemented operation." Currently there is a bug that prevents elements contained in a custom element from being copied.

The program will eventually implement 4 rules for insertions and moves:
  1. Branches of the DOM will be designable as draggable and other branches of the DOM will be designable as not draggable. However, currently just one branch can be designated as draggable at startup. That branch currently comprises the elements in the large gray block.
  2. Branches of the DOM will be designable as valid drop targets and other branches of the DOM will be designable as not valid drop targets.
  3. The HTML Content Model places restrictions upon what elements are allowed to be nested inside which other elements. The program will implement rules to enforce these restrcitions. (Refer to the relevant sections of whatwg.org and w3.org. A good but simple explanation can be found on ClearlyDecoded.com.)
  4. An element cannot be moved into itself, nor into a descendent of itself. For example, if a "Move-insert" operation is attempted and an element around for awhile then dropped at its original position, the operation is invalid. Likewise, if a "Move-before" operation is attempted and an element is dropped on its own child element or its child's child element, the operation is invalid. Invalid operations will produce no change to the DOM structure.

So far, only the 4th rule is implemented. The 1st rule is partially implemented. The demo will be improved as time permits.

The BiwaScheme code can be downloaded at in-browser-gui.scm, browser-util.scm, and mini-framework.scm. There is other experimental code here. This website can be cloned. See the project on GitHub.

If you like this project or want to see more about it, please visit Mashweb.Club.