Adding a tabbed pane to a navigation pane - BlackBerry 10

Question

For my Blackberry 10 application, what I would like to do is to connect a tabbed pane to a navigation pane. However how can I do this when the user chooses an item from a list? I have created a list view where the source of items is based on an XML file but I want to know what needs to change within the onTriggered event for my ListView because I think it has something to do with that and at the moment it only pushes pages.

QML

import bb.cascades 1.2

    Page {
        id: waterlooandcity
        Container {
            ListView {
                dataModel: XmlDataModel {source: "asset:///models/WC.xml"}
                    listItemComponents: [
                        ListItemComponent {
                        type: "item"
                        content: Container {
                            StandardListItem {
                                title: ListItemData.title
                                description: ListItemData.zone
                            }
                        }
                    }
                ]
                onTriggered: {
                    var chosenItem = dataModel.data(indexPath);
                    Qt.pageTitle = chosenItem.title;

                    chosenPage.source = chosenItem.file;
                    nav.push(chosenPage.createObject());
                }
            }
        }
    }

XML

<root>
    <item title="Bank"  zone="Fare zone 1"  file="Bank_(WC).qml"/>
    <item title="Waterloo"  zone="Fare zone 1"  file="WAT_(WC).qml"/>
</root>

hyarion hyarion · Accepted Answer · 2014-02-13T08:30:04

A TabbedPane cannot be placed inside a NavigationPane or a Page. It is normally assumed to be the root of an app.

What you could do is open a sheet that contains a TabbedPane.

Something such as:

attachedObjects: [
    Sheet {
        id: tabSheet
        property variant source
        TabbedPane {
            //insert tabs here
        }
    }        
]

Then you can open the sheet and pass parameters into it like so:

onTriggered: {
    var chosenItem = dataModel.data(indexPath);
    Qt.pageTitle = chosenItem.title;

    tabSheet.source = chosenItem.file;
    tabSheet.open();
}

I havn't tested this but it should work.

Adding a tabbed pane to a navigation pane - BlackBerry 10

1 Answers