A few questions came up, about if I did it the right way and also what I can do to prepare everything for a Web-Designer to use my framework.
My realtime processing software has a key-value-architecture for all settings, which I want to make accessible through the web app. I have a home-brew webserver to serve the HTML/CSS/JS (this works and is out of discussion). I also have a websocket server which implements the following method.
Now comes the JS side. I have a singleton which handles the websocket connection (e.g. automatic reconnection, error handling...). First question is about the singleton implelementation. Is this good (it's kind of easy and lazy compared to some really difficult stuff I found on the web)? I use a pattern suggested by Jan Petzold:
There is a second singleton called DataContext which acts as a cache and a rudimentary data adapter to implement some kind of data binding. It registers at the connection and is notified whenever new data is coming through the socket.
Now the next layer: I use the Jquery UI widget factory to created my own (reusable) widgets. E.g. there is a textbox defined in HTML. It has a custom attribute 'data-key' which holds the key to access. When it is widgetdified like this $('#someinput').nsTextbox(), it registers itself at the DataContext as an observer for that key. Afterwards it gets notified whenever a new value for that key comes through the socket and updates its content.
The final idea now is to have the Web Designer build up the HMI, use a lot of nice styling and whatever and simply append some custom attributes to specific elements to make them widgets and connect them to keys in our processing software. (there is also a mechanism which automagically wigetdifies elements depending on a 'data-widget' attribute)
What can I do to make the designers life easier? Provide CSS classes for all widgets?
and "Connect", "SetValue" and "GetValue" are (I think) method names, which conventionally start with lowercase (uppercase being reserved for Constructor type functions).
As far as interfacing with the UI person, not sure if every widget needs a class name. In designing CSS there are 1000 ways to slice the pie (e.g. in a list each item could have the same class, or they could just be selected using the list's class, etc.) so you might talk to the CSS person to see if there are any conventions in place. If there aren't too many widgets you could give them a unique class or id.
BTW if you find it a little confusing going from class based languages to JS (as I do) this Douglas Crockford video is pretty good.