So I’m at the point now where I’m going to learn how to develop my own javascript UI for my plug-ins. Unfortunately, I know nothing of javascript or HTML for that matter.
Let’s assume this is strictly for UI7.
I believe I understand the basic premise behind vera’s UI implementation from the Javascript API wiki. Basically, you call a javscript function from the device JSON. Ultimately that function needs to call the setCpanelContent API function which contains the HTML that will be rendered by Vera’s UI engine.
So at the end of the day, the job of the js file is to build suitable HTML strings.
I’ll deal with js scripting language semantics and syntax as always, though building test code, looking at samples, etc.
My question is more about HTML itself…what do you guys do to “learn” / model the HTML you need to build? For example, say I want to create a 5x5 table filled with drop-down boxes with various list elements. I would not know where to begin coming up with the HTML. Do you just find web-pages out there and inspect them, use some HTML GUI Tool to build a “mock-up” of your UI and then model the HTML from that?
You’ve got a lot of reading ahead of you. I’d start by learning static HTML and seeing how the source document corresponds to the Document Object Model (DOM), the tree structure that browsers form in memory. A tool like Firebug is absolutely indispensable for this.
Then have a go at JavaScript. JavaScript is a minefield, I’m afraid: there are seriously no good tutorials on core JavaScript. It seems to only be possible to learn good JavaScript style by actually coding. Every JavaScript environment has its own framework erected on top of it; for Vera it’s jQuery, so go see the jQuery pages online (which are actually pretty good). Much of JavaScript is about modifying the DOM when certain events happen, like a click from a user, or an asynchronous result became available from the Net. JavaScript rests heavily on asynchronous callbacks and lambda functions; you will be struggling until you get your head around that.
Then you might think about using the Vera API. Apart from that one wiki page you are probably on your own here. Sample code from other plugins are likely to be based on the old UI5 API.