Flying V Application Development

Module 3 – Compose a user interface you can describe

Page 1 of 3 · About 15 minutes per lesson, including practice.

Build a tree of widgets

The released UI model supplies Text, Button, and Column. A column contains child widgets. A text widget holds a value; a button holds a label. This is a data description of an interface. Read the structure from the outside inward: one column, then two children in the listed order.

import agila

fn main() {
    view := agila.Column{
        children: [
            agila.Text{value: 'Today: understand one function'},
            agila.Button{label: 'Begin practice'},
        ]
    }
    agila.preview(view)
}

The current preview function prints [Agila SDK sandbox UI] Column(2 children). It calls the top-level widget's describe() method. It does not recursively print every child or open a rendered window. Before running, predict how the output changes if you add a third child.

Reference: Agila SDK: sdk/agila/ui.fv and examples/ui_demo/main.fv.

Example code on Agila Forge ↗