DUI language - abstratt/kirra-ui GitHub Wiki

Notes for a future Declarative User-Interface language

Basic elements

Element

Everything on a UI is an element.

Container

An element that can contain other elements.

Context

Data objects in the system available for use by an element.

Data binding

Data from the context can be shown or modified by elements. Some elements can show data. Others can modify data.

Data-showing elements

Elements that show data from system objects. Some elements can show atoms of data. Others can show complex objects. Others can show lists of objects.

Data-changing elements

Elements that can modify data in system objects.

Action-invoking elements

Elements that can invoke actions on system objects.

Event-reacting elements

Elements that can react to events generated by system objects.

Syntax ideas

HUTN-like

container main {
    children {
        header
        productList
        productCartSummary
    }
}

list productList {
    context: Product*
    layout: Grid
    children {
        product
    }    
}

container product {
    context: Product
    children {
        image(context.productImage)
        text(context.productName)
        text(context.productUnit)
        text(context.price)
        button(
            action: context.addToCart,
            enabled: #(hovered),
            label: #(
               case context.inCart "In cart: {context.quantityInCart}" 
               else "Add"
            )
        )
    }
}

container productCartSummary {
    children {
        cartItemList
        cartSummary
    }
}

list cartItemList {
    children {
        cartItem(context.cart.items)
    }
}

container cartItem {
    image(context.productImage)
    text(context.productName)
    button(label: "up", action: context.up)
    text(context.quantity)
    button(label: "down", action: context.down)
}

Markup-style

<container name="cartItem">
    <image data="context.productImage"/>
    <text data="context.productName"/>
    <button action="context.up">Up</button>
    <text data="context.quantity"/>
    <button action="context.down">Down</button>
</container>