The buttons emit an

AddTab

event. The listener defined inside the TabPane listens for this event and adds tabs on the fly.

The two views don't need to know about each other.

I also made the Tab views Fragments so you can add more instance of the same tab. That might not make sense for you, so feel free to change them into Views. In that case you should check if the tab is already present before adding it. You'd have to check the root node against the content node of all tabs.

If you don't, a new tab will be added, and it will rip out the root node from the other tab.

This is much better from what i was trying 😛

Thanks

A check for duplicated views could be something like:

@User uploaded a file: Untitled

This will make sure that a view already represented in the tabs list will not be added again.

You're welcome 🙂

@edvin I am using gridpane and have arranged the tabbedview in it. So when i use fire(AddTab(SampleTabView1::class) it doesn't work. I also added a print on that button click function and also added a static tab to the TabbedView so that I would know if TabbedView is visible or not. When I am using hbox or vbox , It works. In gridpane I am adding views like this

class MainView : View() {

    override val root = gridpane()
    val tv: TabbedView by di("tabView")
    val sv: ShortcutView by di("shortcutView")

    init {
        with(root) {           
      
            add(tv.root, 0, 0)
            add(sv.root, 1, 0)
            isGridLinesVisible=true
            columnConstraints.addAll(
                    newColConstraints(05.0), newColConstraints(15.0), newColConstraints(70.0))
            rowConstraints.addAll(newRowConstraints(100.0))
        }
    }
}

I don't see any code reacting to dynamic view additions here?

But you're saying that the tv and sv root nodes doesn't appear?

No, They Do appear but when i click on one of the item. Tab is not being added.

class MainView : View() {

    override val root = gridpane()
    val tv: TabbedView by di("tabView")
    val sv: ShortcutView by di("shortcutView")

    init {
        with(root) {           
      
            add(tv.root, 0, 0)
            add(sv.root, 1, 0)
            isGridLinesVisible=true
            columnConstraints.addAll(
                    newColConstraints(05.0), newColConstraints(15.0), newColConstraints(70.0))
            rowConstraints.addAll(newRowConstraints(100.0))
        }
    }
}


class ShortcutView : View() {
    override val root = hbox()

    init {
        with(root) {
            listmenu(theme = "black") {
                item(text = "Add Tab"){
                    onDoubleClick {
                        fire(AddTab(SampleTabView1::class))
                    }
                }
            }
        }
    }
}

class AddTab<T : UIComponent>(val type: KClass<T>) : FXEvent()


class TabbedView : View() {

    override val root = hbox {
        tabpane {
            subscribe<AddTab<*>> {
                val uicmp = find(it.type)
                if (tabs.map { it.content }.none { it == uicmp.root })
                    add(uicmp)
            }
        }
    }

}

class SampleTabView1 : Fragment("Sample Tab 1") {
    override val root = vbox {
        label("Content in Sample Tab 1")
    }
}

fun newColConstraints(percentage: Double): ColumnConstraints {
    val colCons = ColumnConstraints()
    colCons.percentWidth = percentage
    colCons.hgrow = Priority.ALWAYS
    return colCons
}

fun newRowConstraints(percentage: Double): RowConstraints {
    val rowCons = RowConstraints()
    rowCons.percentHeight = percentage
    rowCons.vgrow = Priority.ALWAYS
    return rowCons
}

@aayush Why are you using the

di

delegate? Third party dependency injection can't be used with TornadoFX components.

val tv: TabbedView by inject() val sv: ShortcutView by inject()

So How can I add items to gridpane by using add(TabbedView::class) with column and row location?

You must use the

inject

delegate, see above.

di

is only for third party dependency injection integration, and can't be used for views and controllers, only for other third party components.

We have builder support for creating grid pane constraints if you insist on using grid pane 🙂 Unfortunately I don't have any experience with it, GridPane just rubs me the wrong way.

Did you really mean to use

onDoubleClick

for your button?

I think your constraints are off as well, the ui looks very weird.

@User uploaded a file:

By changing to

inject

it seems to work at least 🙂

But five percent of the width for the tabs seems small 🙂

Actually the constraints are meant for 4 views in grid pane I didn't mean to send you some unnecessary view code That's why I sent the relevant ones

Aha 🙂 OK. You should have a working solution now at least. The issue was just that you used di instead of inject.

ok Will change it . Thanks 🙂

Great 🙂

Thanks It's working when changing to inject() instead of di()