2

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"
    }
}
itsaboutcode
  • 24,525
  • 45
  • 110
  • 156

1 Answers1

3

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.

Richard
  • 8,920
  • 2
  • 18
  • 24
  • Thanks. Its working. But if file is located in some other directory? What should be done in that case? – itsaboutcode Jan 23 '13 at 14:44
  • That is also easy. I put my user interface QML files in the directory assets/UI. So I just include the line import "UI" in the main.qml file, I've edited this into the answer. – Richard Jan 23 '13 at 16:03
  • Thank you very much! And you have to name the pages with a capital letter at the beginning Home.qml will work home.qml not! – user2086904 Jul 15 '13 at 15:22