The Widget builder will give relatively meaningful errors when you get it wrong which is nice. TAML is pretty straight forward. It’s hierarchical. Indentation indicates the hierarchy.
When looking at the reference for a given widget it starts with the widget type (e.g. component: oh-button). Under that you’ll have a config which will be any of the config parameters indicated in the reference page for that component.
There are additional advanced options that one can set which come from some of the upstream frameworks like f7 or CSS. But that’s really advanced stuff I can’t help with.
No but if you will be doing very fine tuned customizations learning a bit about F7 could help. F7 is the JavaScript UI framework upon which MainUI is built. The oh-components are simplified f7 widgets that do not require as much knowledge of F7 to use properly. But they are also more limited if they don’t work exactly like you want it to.
Yes. defaults is where the properties for the container widget are defined. slots are where you will add widgets to that container. You can have widgets embedded in widgets as deep down as necessary.
Note I’m far from an expert on custom widgets so I might misstate something here.
CSS can be used for some things but others can be achieved through expressions and the standad properties on the widgets. It depends on what you want to customize.
In addition to just searching, The Getting Started Tutorial states
A growing number of very impressive custom widgets have been posted to Add-ons → UI on the forum (opens new window).
If you paste a link to a forum post inline with other text you’ll just get the title of the post. E.g. [SOLVED] UI Widget: Intesis aircon controller; No commands send to items.
NOTE: the conversion of the URL to title doesn’t always work as expected.
You can also embed the link like Hans-Jörg described. But I’m lazy and just paste in the URL and let the forum handle the rest.
If you post the link by itself on its own line it embeds the first few lines. E.g.
Pages - Item Widgets | openHAB talks a lot about Item metadata. The metadata that I mentioned above in particular is the State Description metadata. Navigate to the Item, click on “Add Metadata” and choose “State Description” from the list. Then populate the “Options” with your value=name pairs. Those pairs will be used as the command/label in the oh-list widget (and others I think).
Take note of the Default X Widget Item metadata. Here is where you would assign one of your custom widgets to be used by default for a given Item.
I don’t have buttons but an example three state expression to choose the color for an icon based on a battery Item’s state:
=(Number.parseInt(items[props.item].state) > 75) ? "green" : (Number.parseInt(items[props.item].state) > 25) ? "yellow" : "red"
More examples can be found at Example Custom List Widgets (which is one of the pages you’ll find when clicking on the link in the Getting Started Tutorial). I really did try to give all the resources I could in the tutorial, so much so that the developer for MainUI indicated there was too much.