Clearer UI syntax

[dudejj]

UI code as shown in demo example is more or less confusing, notably for beginner.
Same demo can be created like this, which syntax may be much more attractive and easier to grasp:

struct App {
mut:
	window     &ui.Window = unsafe { nil }
	first_name string
	last_name  string
}

fn main() {
	mut app := &App{}

	// components
	txtbox1 := ui.textbox(
		max_len: 20
		width: 200
		placeholder: 'First name'
		text: &app.first_name
	)

	txtbox2 := ui.textbox(
		max_len: 50
		width: 200
		placeholder: 'Last name'
		text: &app.last_name
	)

	// containers
	col := ui.column(
		width: 200
		spacing: 13
		children: [txtbox1, txtbox2]
	)

	row := ui.row(
		margin: ui.Margin{10, 10, 10, 10}
		children: [col]
	)

	// window
	app.window = ui.window(
		width: 600
		height: 400
		title: 'V UI Demo'
		children: [row]
	)

	ui.run(app.window)
}

Maybe clearer yet could be adding widgets and containers like this (which don't work at the moment):

col.children << [txtbox1, txtbox2]
row.children << [col]
app.window.children << [row]

[Wajinn]

A style where people might deem more comfortable for writing code on a single line and saving some space, can be seen with MUI. Of course it's going to come down to preferences. But it does show that the VUI can be built on top of and further tailored to particular tastes with other libraries.

Regardless, do think this is an interesting idea, to increase clarity.

[xandro0777]

Before reaching for the stars, does text input work as expected on all "supported" platforms in the meantime? Last time I tried Android was a problem.

[Wajinn]

...does text input work as expected on all "supported" platforms in the meantime?
Last time I tried Android was a problem.

The comments do not appear related to this issue. Perhaps open a new issue or one at VAB, with an example and specific details.

[Wajinn]

Rethinking this, from a user perspective, VUI's syntax is mostly fine (though not sure about spacings versus spacing). It's likely more a matter of documentation, examples, and the way it's often written that can cause issues or confusion.

Instead of always typing out components and widgets vertically, it might be better to show those horizontally and created first, to also save vertical space. Then place the widgets into the columns and rows, which can be typed out vertically (and helps to visualize). Thus, it all might be a matter of style versus actual syntax.

// psuedo
widget() // horizontal
widget() // horizontal
column(
	children: [
		widget
		widget
	]
)
window(children: [column])
run(window)

[medvednikov]

Yeah, that's how I do it.

Sometimes you can just call ui.tetxbox(...), but often you need to store the object, to access it later.