Add declarative example

[XuNeo]

Add declarative example:

Object {
    flex = {
        flex_direction = "row",
        flex_wrap = "wrap",
        justify_content = "center",
        align_items = "center",
        align_content = "center",
    },
    w = 400,
    h = 100,
    align = lvgl.ALIGN.CENTER,

    -- Button with label, inside a container
    Object {
        w = 150,
        h = lvgl.PCT(80),
        bg_color = "#aa0",

        Button {
            Label {
                text = string.format("BUTTON %d", 1),
                align = lvgl.ALIGN.CENTER
            }
        }:center()
    }:clear_flag(lvgl.FLAG.SCROLLABLE),

    -- Label inside a container
    Object({
        w = 150,
        h = lvgl.PCT(80),
        Label {
            text = string.format("label %d", 2)
        }:center()
    }):clear_flag(lvgl.FLAG.SCROLLABLE)
}

[kisvegabor]

Really impressive! Just one thing which bothers me: how does the user know that flex_direction is inside a flex? It makes sense, but as it doesn't mimic LVGL's C API basically everything needs to be documented.

Or am I missing something?

[XuNeo]

flex_direction is inside a flex?

It doesn't need to be.
It's one of the several optimizations made in luavgl to group the parameters related together, like the align we mentioned before. Use the LVGL's C API style will also work.

It certainly does need documentation https://github.com/XuNeo/luavgl/blob/master/src/lvgl.lua

[kisvegabor]

I see, very nice!