Native Windows Derive: Layouts

The next step in the native windows derive journey are the layouts. NWG has two layouts: GridLayout and FlexboxLayout. Because both of those layouts have slight differences, the derive layouts has small differences.

Layout

Just like controls and resources, the derive macro translate the builder API of the layouts into a list of

nwg_layout(builder_field: builder_value,*)

Unlike controls, NWD wont guess the parent of the layout. This might be changed in the future in a minor release. This is the same of both layout types.

Layout Item

After defining the layout attributes, it's time to mark the children of the layout. This is done using

nwg_layout_item(layout: layout_name, item_field: item_value,*)

In this case item_field: item_value are the attributes of a LayoutItem. For example GridLayoutItem. The layout parameter cannot be guessed by NWD.

Grid Layout Item

Gridlayout is a default layout in NWG. The macro uses the grid layout item fields directly. 
pub struct Calculator {
    #[nwg_layout(parent: window, spacing: 2, min_size: [150, 140])]
    grid: nwg::GridLayout,

    #[nwg_control(text: "", align: nwg::HTextAlign::Right, readonly: true)]
    #[nwg_layout_item(layout: grid, col: 0, row: 0, col_span: 5)]
    input: nwg::TextInput,
}

Flexbox Layout Item

Flexbox is hidden behind the feature "flexbox" because it uses stretch as a dependency. Flexbox layout values are alot more verbose than gridlayout.

A flexbox macro usually use a child_* syntax to define the layout item parameters. The derive macro removes the "child" prefix.

use nwg::stretch::{
    geometry::{Size, Rect},
    style::{Dimension as D, FlexDirection, AlignSelf}
};

const FIFTY_PC: D = D::Percent(0.5);
const PT_10: D = D::Points(10.0);
const PADDING: Rect<D> = Rect { start: PT_10, end: PT_10, top: PT_10, bottom: PT_10 };


pub struct FlexBoxApp {
    #[nwg_control(size: (500, 300), position: (300, 300), title: "Flexbox example")]
    #[nwg_events( OnWindowClose: [nwg::stop_thread_dispatch()] )]
    window: nwg::Window,

    #[nwg_layout(parent: window, flex_direction: FlexDirection::Row)]
    layout: nwg::FlexboxLayout,

    #[nwg_control(text: "Btn 1")]
    #[nwg_layout_item(layout: layout,
        margin: MARGIN,
        max_size: Size { width: D::Points(200.0), height: D::Undefined },
        size: Size { width: FIFTY_PC, height: D::Auto }
    )]
    button1: nwg::Button,

    // ...
}


Examples