[solved] Add/remove tabs dynamically

[qmlLearner]

Hi again!

I am trying on something similar to "this post":http://qt-project.org/forums/viewthread/30016/.
I also want to add/remove tabs in qml by pressing buttons and am somehow stuck. My code so far:

main.qml:
@
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow{
id:win
toolBar: ToolBar{
RowLayout{
ToolButton{
text: "addTab"
onClicked: tb.loadTab()
}
ToolButton{
text: "removeTab"
onClicked:tb.removeTab()
}
}
}
TabView{
id:tb
anchors.fill:parent
function loadTab(){
var t=tb.addTab("x",myComponent)
}
function removeTab(){
tb.removeTab(1)
}
}
}
@

myComponent.qml:
@
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

GridLayout {
id: id_gridLayout
anchors.fill: parent
Layout.rowSpan: 2
columns: 3
Button { text: "prev" }
Button { text: "next" }
Slider { Layout.fillWidth: true }
Text { text: "asdf" }
Button { text: "prev" }
Button { text: "next" }
Text {
text: "asdf"
Layout.columnSpan: 2
}
Slider { Layout.fillWidth: true }
}
@

It compiles and I don't get any warnings, unless I hit the buttons:

• addTab: "ReferenceError: myComponent is not defined"
• removeTab: "RangeError: Maximum call stack size exceeded."

Do you have some hints/code snippets for me? Any help is greatly appreciated!

[p3c0]

Hi,

bq. addTab: “ReferenceError: myComponent is not defined”

The second argument of "addTab":https://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-tabview.html#addTab-method takes a component, so first you need to create a "component":https://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-component.html
for e.g
@
Component {
id: comp
MyComponent{
}
}
@

and then pass the component id to your addTab function.

bq. removeTab: “RangeError: Maximum call stack size exceeded.”

Change your removeTab name to something else as it is going into recursion and hence the error. For eg.
Change
@
function removeTab(){
tb.removeTab(1)
}
@

to
@
function deleteTab(){
tb.removeTab(0)
}
@

And yes remove the tab at correct index.

[qmlLearner]

Perfect, thank you very much for the great answer!

In case, someone is interested in the code:
main.qml:
@

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow{
id: win
width: 300
height: 300

Component{
    id: id_comp
    MyTab{
        id: id_myTab
    }
}

toolBar: ToolBar{
    id: id_toolBar
    RowLayout{
        ToolButton{
            text: "addTab"
            onClicked: {
                var title = id_textField.text;
                // console.log("textfield: " + title)
                tb.myAddTab(title, id_comp)
            }
        }
        ToolButton{
            text: "removeTab"
            onClicked: {
                // console.log("tb.currentIndex is: " + tb.currentIndex);
                tb.myRemoveCurrentTab();
            }
        }
    }
}

TextField{
    id: id_textField
    text: "tab title...";
    anchors.top: parent.top
    anchors.topMargin: 5
}

TabView{
    id: tb
    anchors.top: id_textField.bottom
    anchors.topMargin: 5
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.left: parent.left

    Tab{
        id: id_tab1
        title: "MyTab"
        MyTab{
            id: id_myTab
        }
    }

    function myAddTab(title, componentID){
        var t = tb.addTab(title, componentID)
    }

    function myRemoveCurrentTab(){
        tb.removeTab(tb.currentIndex)
    }
}

}
@

MyTab.qml:
@
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

GridLayout {
id: id_gridLayout
//anchors.fill: parent
//spacing: 2

//Layout.rowSpan: 2

columns: 3
Button { text: "prev"
    focus: false

}
Button { text: "next" }
Slider { Layout.fillWidth: true }
Text { text: "asdf" }
Button { text: "prev" }
Button { text: "next" }
Text { text: "asdf" }
Slider {
Layout.fillWidth: true
Layout.columnSpan: 2
}

}
@