Elements of the system
View - responsible for showing data in some format (it could be HTML view, canvas or anything else)
Component - element, that could be presented in view. It contains properties (width, height, layout, color, etc.) and methods (show, hide, select, etc.). DropDown, TextBox or button could be a component. Predefined components are stored in the DB on the server. They could be extended with custom components
DOM - graph of components
Server - will store all data such as Components, saved projects (with DOMs)
Collaborate proxy - provide communication between DOM and Server
Relations
View has reference to its DOM. And View knows how to draw DOM (each component and relation) and how to handle its events (when components' methods are called)
DOM communicates with the Server via Collaborate proxy
Scenarios
1. User creates project, some other users are viewing this project at the real time. User drag components to view.
View will send this changes to the DOM. DOM will send it to the Collaborate proxy, Proxy will send it to the Server.
When data successfully stored on the Server, Server sends command to the Collaborate proxy with changes, and Collaborate proxy will publish event with changes for all subscribers (Views of users that viewing this project).
Modes of the DOM
1. Edit
2. View
3. Record
User will be able to record what should be done on some action. For example he changes drop down value and then record actions - open some panel and change color of drop down text. So, in the prototype on drop down change panel will be opened and color of drop down text will be changed.
And in the end the most beautiful diagram that could be imagined