Tutorial EzLang Templates

We'll now take a look at templates, because we'll often use them in upcoming tutorial examples. Don't worry about the unfamiliar properties we'll use, they will be explained in sections to come, for now just get an impression of what EzLang looks like, and how to create templates.

When you start writing your own .ez files, you may find yourself writing the same types of widgets over and over again. To make your .ez files more readable and more ergonomic, you can use templates in these situations. Let's say for example that your interface has many auto-scaling labels of a certain color:

- Layout:
    mode: box
    orientation: vertical
    - Label:
        text: Label 1
        fg_color: yellow
        bg_color: blue
        auto_scale: true, true
    - Label:
        text: Label 2
        fg_color: yellow
        bg_color: blue
        auto_scale: true, true

As you can see, the label definitions are nearly identical; only the text property is different. Writing all these identical properties over and over can get quite verbose with two labels, let alone more. Instead we can define a template. A template is defined in the following format:

- <TemplateName@BaseWidget>:

The name of the template can be anything you like. The BaseWidget is the widget the template inherits from. This can be a basic widget type (Label, Layout, Checkbox, etc.) or another template. It's possible for templates to inherit from other templates, but in the end it must always inherit from a basic widget. Here is the template for our label:

- <MyCustomLabel@Label>:
    fg_color: yellow
    bg_color: blue
    auto_scale: true, true

- Layout:
    mode: box
    orientation: vertical
    - MyCustomLabel:
        text: Label 1
    - MyCustomLabel:
        text: Label 2

This looks much cleaner! We no longer have to define common properties over and over again. They will instead be inherited from the template. It is possible to overwrite properties of a template; properties defined when using a template always overwrite the properties of the template definition:

- <MyCustomLabel@Label>:
    fg_color: yellow
    bg_color: blue
    auto_scale: true, true

- Layout:
    mode: box
    orientation: vertical
    - MyCustomLabel:
        text: Label 1
    - MyCustomLabel:
        text: Label 2
        fg_color: red

The text of the second label will be red, because the fg_color defined when using a template overwrites the fg_color of the template definition.

Templates are not just useful for reusing widgets. They can also be used for single-use widgets, usually to make your .ez file easier to read. This is especially true for layouts. There can be only one root layout, but you can define as many layout templates as you like on the root level. Consider an example creating multiple screens:

- Layout:
    mode: screen
    - Layout:
        id: screen_1
        mode: box
        - Label:
            text: Hello screen one!
    - Layout:
        id: screen_2
        mode: box
        - Label:
            text: Hello screen two!

This is still readable, but if we keep adding more screens (and more widgets to the screens) it will become hard to read. Here is an alternative using templates:

- <ScreenOne@Layout>:
    mode: box
    - Label:
        text: Hello screen one!

- <ScreenTwo@Layout>:
    mode: box
    - Label:
        text: Hello screen two!

- Layout:
    mode: screen
    - ScreenOne:
        id: screen_1
    - ScreenTwo:
        id: screen_2

By using layout templates we can segment the definitions into meaningful blocks and keep the indentation levels under control. You can nest templates in templates, so even if you have a very complex UI, your config files can remain flat and readable. To show this, we'll create a screen layout template, which uses a menu layout template, which uses a button template:

- <CustomButton@Button>:
    fg_color: yellow
    bg_color: blue
    auto_scale: true, true

- <Menu@Layout>:
    mode: box
    orientation: vertical
    - CustomButton:
        text: Option 1
    - CustomButton:
        text: Option 2

- <ScreenOne@Layout>:
    mode: box
    - Menu:

- Layout:
    mode: screen
    - ScreenOne:
        id: screen_1

Continue

The general tutorial continues with: Ezlang Layout modes.