OBJECT Tab

Structure

Tab: { ... } Methods structure

Tab {
    Method render {
        contentObject: YurbaComponentLanguage
    },
    Method open,
    Method close,
    Method onEvent {
        name: String,
        event: String,
        callback: Function
    }

}

Description

Allows you to manipulate the internal application window, which is located on the right and uses Yurba Component Language for structure and styles for maximum adaptability.

Example usage

This code identifies the Tab object and opens it when the button is clicked:

const btn = app.createButton("tab")
btn.setTooltip("Open Tab")

btn.on("click", () => {
    const tab = app.Tab
    tab.open()
})

However, this example is rather superficial. It is worth noting that currently there is only one Tab for everyone, and if another extension wants to open a Tab together with another one, the result may be unpredictable, so it is extremely important not to call Tab immediately without any event.
Okay, but how do we put content in the Tab correctly and then open it? It is best to do this immediately after pressing the button:

const myTabContent = '
<TabHeader>
    <TabTitle>My tab title</TabTitle>
    <TabDescription>My tab description</TabDescription>
</TabHeader>
'
app.define("tabContent", myTabContent) // Globalizing content

const btn = app.createButton("tab")
btn.setTooltip("Open Tab")

btn.on("click", () => {
    const tab = app.Tab
    tab.render(app.global.tabContent) // We call our content from app.define()
    tab.open()
})

Here we used app.define() to globalize and simultaneously unify our content, and now it can be accessed everywhere via the app.global object. But how do we track, for example, a button press, and how do we add these buttons in the first place? Let's expand our example:

const myTabContent = '
<TabHeader>
    <TabTitle>My tab title</TabTitle>
    <TabDescription>My tab description</TabDescription>
</TabHeader>
<Row pos="bottom-left">
    <Button event="closeBtn">Close Tab</Button>
    <Button event="visitBtn">Visit Docs</Button>
</Row>
'
app.define("tabContent", myTabContent) // Globalizing content

const btn = app.createButton("tab")
btn.setTooltip("Open Tab")

btn.on("click", () => {
    const tab = app.Tab
    tab.render(app.global.tabContent) // We call our content from app.define()
    tab.open()

    // Event handlers
    tab.onEvent("closeBtn", "click", () => {
        $this.close()
    })
    tab.onEvent("visitBtn", "click", () => {
        app.openUrl("https://docs.yurba.one")
    })
})

What did we do to make the buttons work? It's simple: we created two button samples and gave them event attributes, in which we recorded their unique names. Then, in the code, in the onEvent method, we first specified the name, then the event name (click), and the callback function:

1. $this.close() - calls the close method in the current context (app.Tab)
2. Requests to open the link

Yurba Documentation

OBJECT Tab