Creating reusable components

[somebee]

One valuable pattern in Imba is to create reusable and extendable tags for components and controls. Here we'll show you how to create a basic tag whose rendertree is composed of separate segments.

tag panel

    def header
        <@header> title or "Panel"

    def body
        <@body> "My content"

    def render
        <self>
            header
            body

# Now we can inherit from panel, and only override the body.
tag settings < panel

    def body # override body
        <@body>
            <div> "Stuff in settings"
            <div> "More settings"

Tip! When splitting the rendering into several methods outside of <self> all top-level tags must have an explicit name using the @-syntax like <div@myname>. Otherwise the div and its children will be recreated on every render. When tags have a name they will be created once (on the first call) and cached inline. This is one of the things that make Imba really fast.

Wrapping content

As you might know, tags are compiled to chains of setters. <div.hello> "world" will compile to something along the lines of div().flag('hello').setContent(['world']).end(). As you can see, the inner content of a tag is using a setter. We can override setContent to simply store a reference to the content, and then include the content somewhere inside the render-tree of the tag.

Overriding setContent is not something we'd recommend unless you really understand how rendering in Imba works. To learn more about rendering, see guide.

tag panel
    def setContent value
        @content = value
        self

    def render
        <self>
            <div.header> title
            <div.body> @content
            <div.footer> "My footer"

# spawn a panel with some buttons
<panel title="Settings">
    <button> "Save"
    <button> "Load"

All panels we spawn will now always wrap their content inside a div.body.