Tutorial EzLang Button

Clickable button; displays a small animation when clicked. Bind an 'on_press' callback to a button to make it functional. Callbacks are explained in details the scheduler chapter, but an example will be shown here. Buttons always have borders, so the effective height and width (i.e. surface for button text) are always 2 pixels smaller.

Here are a few cropped examples with screenshots (see 'examples' for the full functional EzLang/code):

Auto scaling button

// This is a button with auto scale enabled. This way it will not take up any more space than needed.
// Keep in mind that since auto scale width is enabled, the button will always be height 1. Check the next button
// for multi line button text.
- Button:
    text: Scaled button
    auto_scale: true, true
    fg_color: yellow

button_1

Multi line button

// This button has multi-line text.
- Button:
    text: Multi Line
    size_hint_x: none
    width: 9
    auto_scale_height: true
    fg_color: yellow

button_2

Enabled and disabled button

// This is a layout with a normal button and a disabled button. We'll give the enabled button a color so it's easier
// for the user to see what is enabled and what is disabled.
- Layout:
    auto_scale: true, true
    - Button:
        text: Enabled button
        auto_scale: true, true
        fg_color: yellow
    - Button:
        text: Disabled button
        auto_scale: true, true
        fg_color: yellow
        disabled: true

button_3

Button with callback

// Buttons are of course only useful if bound to a callback. We'll bind this button to a callback that changes the
// text of the label next to it (see button_example.rs).
- Layout:
    auto_scale: true, true
    - Button:
        id: change_label_button
        text: Change label
        auto_scale: true, true
        fg_color: yellow
        selection_order: 1
    - Label:
        id: my_label
        text: Original text
        auto_scale: true, true
        valign: middle

let change_label_callback = |context: Context| {
    let state = context.state_tree.get_mut("my_label").as_label_mut();
    state.set_text("Button was clicked!".to_string());
    state.update(context.scheduler);
    false
};