Tutorial EzLang Keyboard Selection

Keyboard selection, unlike mouse selection, requires the configuration of a property. You need to configure the 'selection_order' property of each widget that should be selectable through keyboard. This selection order is global over the active screen or popup. The 'down arrow' button on the keyboard cycles down through the selection order (1 > 2 > 3, etc.). The 'up arrow' button on the keyboard cycles up (3 > 2 > 1, etc.). If the highest or lowest widget is reached, the selection cycles back around.

For example, if you have a menu layout and you want to select buttons from top-to-bottom, you would use:

- Layout:
    mode: box
    orientation: vertical
    - Button:
        text: Option 1
        auto_scale_height: true
        selection_order: 1
    - Button:
        text: Option 2
        auto_scale_height: true
        selection_order: 5
    - Button:
        text: Option 3
        auto_scale_height: true
        selection_order: 10

Note that we did not use consecutive numbers. Instead we increased the order by 5 each time, so we can leave some space for possible future widgets.

If we have multiple layouts, we do not reset the selection order. The order is global. So if we have two layouts:

- Layout:
    mode: box
    - Layout:
        mode: box
        orientation: vertical
        - Button:
            text: Left Option 1
            auto_scale_height: true
            selection_order: 1
        - Button:
            text: Left Option 2
            auto_scale_height: true
            selection_order: 5
        - Button:
            text: Left Option 3
            auto_scale_height: true
            selection_order: 10
    - Layout:
        mode: box
        orientation: vertical
        - Button:
            text: Right Option 1
            auto_scale_height: true
            selection_order: 15
        - Button:
            text: Right Option 2
            auto_scale_height: true
            selection_order: 20
        - Button:
            text: Right Option 3
            auto_scale_height: true
            selection_order: 25

This concludes our overview of EzLang. All the features have been covered. You can use the Reference section to find all possible properties of each widget and layout. You can also look at the Examples section for inspiration on how to put these features to use.

Next we'll continue with the Scheduler. Where EzLang is how you manage your initial UI, the Scheduler is how you manage your UI at runtime. Let's take a look.

Continue

The general tutorial continues with: Scheduler.