Home / ubuntu / Questions / 292603
Accepted
Daniel Holm
Asked: 2013-05-09 07:44:43 +0800 CST

Re-use toolbar code for each tab

  • 772

I'm creating a music app using QML and it uses around five tabs, each using a toolbar. The toolbar should look the same, so instead of having the exact same code for each tab, I wanted to re-use the code of only one toolbar for each of the tabs.

I tried using an external .qml file with only the Toolbar code, but it did not work.

How do I re use the same code for the toolbar, instead of copy paste the same code multiple times in the code file?

application-development

1 Answers

  1. Best Answer

    Did you try to define a toolbar in the mainview and simply use that id everytime?

    Like this:

    import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"
    applicationName: "toolbartest"
    id: root

   // S4 resolution 1920x1080
    width: units.gu(54)
    height: units.gu(96)

    ToolbarActions{
        id: centralBar
        Action {
            text: "print"
            onTriggered: print("action triggered")
        }
        Action {
            text: "next"
            onTriggered: {
                if (tabs.selectedTabIndex < 2){ 
                    tabs.selectedTabIndex += 1
                } else {
                    tabs.selectedTabIndex = 0
                }
            }
        }
    }

    Tabs {
        id: tabs
        Tab {
            title: i18n.tr("Tab1")
            page: Page {
                Label {
                    id: label1
                    anchors.centerIn: parent
                    text: "A centered label"
                }
                tools: centralBar
            }
        }
        Tab {
            title: i18n.tr("Tab2")
            page: Page {
                Label {
                    id: label2
                    anchors.centerIn: parent
                    text: "A centered label2"
                }
                tools: centralBar
            }
        }    

        Tab {
            title: i18n.tr("Tab3")
            page: Page {
                Label {
                    id: label3
                    anchors.centerIn: parent
                    text: "A centered label3"
                }
                tools: centralBar
            }       
        }
    }
}
    • 3