Question

I have defined a TabbedPane as below but one each tab, I would like to show content”questions.qml” (It’s a Navigation Pane”) and “stats.qml” file instead of embedding the code in single file. So I was wondering how I can achieve that?

TabbedPane {
    showTabsOnActionBar: true
    Tab {
        id: questions
        title: "Questions"
        description: "This tab will have questions in current hub"
    }
    Tab {
        id: stats
        title: "Stats"
    }
}

Answer 1

What I have done in that case is declare each tab in the QML file the sets up the TabbedPane, as you have:

import "UI" // The file DataManagement.qml is located in the directory UI
            // which is a sub-directory of the location of this QML file.
...
Tab {
    title: qsTr("Data Management")
    imageSource: "asset:///images/icons/database.png"
    id: dataManagement
    DataManagement {
        id: dataManagementPage
    }
}
...

Then in a separate QML file, DataManagement.qml in this case, I declare the content of the tab:

import bb.cascades 1.0

Page {
    // content of page to render in the tab.
    content: Container {
         ...
    }
}

As long as the QML files are in the same directory, or the referenced file (DataManagement.qml) is in a directory included in the first QML file it works.