vlang / ui

A cross-platform UI library written in V
MIT License
2.31k stars 154 forks source link

Clearer UI syntax #573

Open dudejj opened 2 months ago

dudejj commented 2 months ago

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]