This library is a hybrid between an immediate-mode GUI and a retained-mode GUI. The developer must manually pass events to the GUI and call render on graphics elements. However the library does keep track of internal state to try and only rerender where necessary.
The structure and display of elements are seperated. That is you can set the renderer for each element to be whatever you want. This lets the same UI structure be able to have completely different appearences.
appRoot = new Box(0, 0, (_)=>lWidth, (_)=>lHeight)
..setId("root")
..renderer(renderers.noop)
..addChildren([
new TextArea(0, 22, (_)=>lWidth - 16, (_)=>lHeight - 23 - 22 - 16, "Hello There!")
..style.font = "monospace"
..style.fontSize = 14
..addClass("text-area")
..style.padding(all: 5),
new MenuBar(0, 0, (_)=>lWidth, 22)
..setId("menu-bar")
..renderer(renderers.header)
..addChildren([
new Button(0, 1, 32, 19, content: "File")
..addClass("menu-button")
..renderer(renderers.button),
new Button(32, 1, 34, 19, content: "Edit")
..addClass("menu-button")
..renderer(renderers.button),
new Button(32+34, 1, 52, 19, content: "Format")
..addClass("menu-button")
..renderer(renderers.button),
]),
new ScrollBar((_)=>lWidth - 16, 22, 16, (_)=>lHeight - 23 - 22 - 16)
..setId("vertical-scrollbar")
..style.padding(
top: 17,
bottom: 17
)
..renderer(renderers.scrollBar),
]);- Look at examples in Microslop projects that use the UI ToolKit
- Read the source code
- Ask VExcess if you can't figure something out
- If I get enough people asking how to use it, I'll write an official documentation