Ebiten XML UI Demo

type Calculator struct {
	ui.Node
	Display    string
}

func NewCalculator() *Calculator {
	c := &Calculator{}
	c.Build(c)
	return c
}

func (c *Calculator) OnClick(btn *ui.Node) {
	if btn.Content() == "=" {
		c.calculate()
	} else {
		c.append(btn.Content())
	}
}

func (c *Calculator) append(s string) {
	c.Display += s
}

func (c *Calculator) backspace() {
	if len(c.Display) > 0 {
		c.Display = c.Display[:len(c.Display)-1]
	}
}

func (c *Calculator) calculate() {
	c.Display = ""
}

func (c *Calculator) Disp() *ui.Style {
	return &ui.Style{
		Extends:  "text",
		FontName: "RobotoMono",
		FontSize: 48,
		Padding:  &ui.Spacing{Top: 12, Bottom: 12, Left: 12, Right: 12},
		Color:    &color.RGBA{R: 255, G: 255, B: 255, A: 255},
		Attrs:    map[string]string{"minWidth": "8em"},
	}
}

func (c *Calculator) Button() *ui.Style {
	return &ui.Style{
		Extends:   "button",
		FontName:  "RobotoMono",
		FontSize:  48,
		Margin:    &ui.Spacing{Top: 4, Bottom: 4, Left: 4, Right: 4},
		Padding:   &ui.Spacing{Top: 12, Bottom: 12, Left: 12, Right: 12},
		NineSlice: ui.NewNineSlice("assets/ui/button.png", 32, [3]int{6, 20, 6}, [3]int{6, 20, 6}),
		Color:     &color.RGBA{R: 255, G: 255, B: 255, A: 255},
	}
}

func (c *Calculator) Grid() *ui.Style {
	return &ui.Style{
		Extends: "grid",
		Margin:  &ui.Spacing{Top: 24, Bottom: 24, Left: 24, Right: 24},
		Attrs: map[string]string{
			"cols": "repeat(4, 1fr)",
			"rows": "auto",
		},
	}
}

func (c *Calculator) UI() string {
	return `<col margin="24px" justify="center">
		<row>
			<Disp minWidth="8em">{Display}</Disp>
		</row>
		<row width="100%" justify="stretch">
			<Button>7</Button>
			<Button>8</Button>
			<Button>9</Button>
			<Button>×</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>4</Button>
			<Button>5</Button>
			<Button>6</Button>
			<Button>−</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>1</Button>
			<Button>2</Button>
			<Button>3</Button>
			<Button>+</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>0</Button>
			<Button>.</Button>
			<Button>÷</Button>
			<Button>=</Button>
		</row>
	</col>`
}

TL;DR

This is very much a WIP, I'm soliciting feedback on whether this would be good to release as a proper library or just keep inside my own game for now.

Planned support for:

• XML-based UI library
• Flex and Grid based layout
• Customizable widgets and styled components
• Reactive text templates
• Absolutely positioned windows
• Scrollable areas
• Button, dropdown, checkbox, input, and radio button inputs

Background

The EbitenUI library looks great but it's still "in development" and I found it very difficult to use. I'm working on a rogue-like that requires some complicated UI bits with scrolling areas and lots of text to layout. Here's an example of how to lay out a checkbox in EbitenUI:

func newCheckbox(label string, changedHandler widget.CheckboxChangedHandlerFunc, res *uiResources) *widget.LabeledCheckbox {
	return widget.NewLabeledCheckbox(
		widget.LabeledCheckboxOpts.Spacing(res.checkbox.spacing),
		widget.LabeledCheckboxOpts.CheckboxOpts(
			widget.CheckboxOpts.ButtonOpts(widget.ButtonOpts.Image(res.checkbox.image)),
			widget.CheckboxOpts.Image(res.checkbox.graphic),
			widget.CheckboxOpts.ChangedHandler(func(args *widget.CheckboxChangedEventArgs) {
				if changedHandler != nil {
					changedHandler(args)
				}
			})),
		widget.LabeledCheckboxOpts.LabelOpts(widget.LabelOpts.Text(label, res.label.face, res.label.text)))
}

It's just really verbose and hard to read. A long time ago I remember using XML based UI toolkits, like http://swixml.org/ and https://glade.gnome.org/. And in my day job I work with HTML/CSS/React. So I wanted to combine the best of both of these approaches - a reactive XML based UI.

This looks awesome! Can't wait to use your library to develop UI.