A PageStack on each Tab

cckwes

Hi, i'm coding an application that requires a few tabs and each tab has it's own pageStack (something like the tab behaviour of the Nokia Store on Harmattan). Any example on how to do this? Thanks

BilbonSacquet

For the tabs I propose to use QTabWidget and for the tab content we could use QStackedWidget():

@
QTabWidget* tab = new QTabWidget();

QStackedWidget* first_stack = new QStackedWidget();
tab->addPage(first_stack, "first tab");
@

cckwes

How if I want to do it qml way with TabGroup and PageStack components? Any suggestion?

conny

Good question. I'm currently trying to do the same, without much luck unfortunately. The problem is that the pages I push on the stack overwrite the original toolbar (the one with the tabs defined).

Maybe it's possible by using a separate toolbar and not to use the page-toolbar mechanism. I'll give that a try. Other suggestions are welcome as well :)

cckwes

I think i've found the answer for my question:

@import QtQuick 1.1
import com.nokia.meego 1.0

PageStackWindow {
id: mainWindow
initialPage: mainPage

Page {

id: mainPage
tools: mainTools
}

TabGroup {

id: tabGroup
currentTab: tab1

Page {
id: tab1
}

PageStack {
id: tab2
Component.onCompleted: tab2.push(page2);

 Page {

id: page2
}
}

PageStack {
id: tab3
Component.onCompleted: tab3.push(page3);

 Page {

id: page3
}
}
}

ToolBarLayout {

id: mainTools

ToolIcon {
iconId: (tabGroup.currentTab.depth > 1) ? "toolbar-back" : "toolbar-back-dimmed";
onClicked: tabGroup.currentTab.pop();
}

ButtonRow {
style: TabButtonStyle { }
TabButton {
iconSource: "../images/icon-m-toolbar-home.png"
tab: tab1
}
TabButton {
iconSource: "../images/icon-m-toolbar-list.png"
tab: tab2
onClicked: {
tab2.clear();
tab2.push(page2);
}
}
TabButton {
iconSource: "../images/icon-m-toolbar-edit.png"
tab: tab3
onClicked: {
tab3.clear();
tab3.push(page3);
}
}
}
}
}@

Hope it helps =)

conny

Thanks a lot for this example! This was almost exactly what I needed. I adapted it to Symbian and slightly changed the behavior.

My solution is below. Thanks for the great work :)

@
import QtQuick 1.1
import com.nokia.symbian 1.1

PageStackWindow {
id: mainWindow
initialPage: mainPage
showStatusBar: true
showToolBar: true

Page {
    id: mainPage
    tools: ToolBarLayout {

        ToolButton {
            property bool closeButton: tabGroup.currentTab.depth <= 1
            iconSource: closeButton ? "img/symbian/close.svg" : "toolbar-back"
            onClicked: {
                if (closeButton) {
                    Qt.quit()
                } else {
                    tabGroup.currentTab.pop()
                }
            }
        }

        ButtonRow {
            TabButton {
                iconSource: "toolbar-home"
                tab: tab1
                onClicked: {
                    if (tabGroup.currentTab == tab1) {
                        tab1.clear();
                        tab1.push(page1);
                    }
                }
            }
            TabButton {
                iconSource: "toolbar-dialer"
                tab: tab2
                onClicked: {
                    if (tabGroup.currentTab == tab2) {
                        tab2.clear();
                        tab2.push(page2);
                    }
                }
            }
            TabButton {
                iconSource: "toolbar-home"
                tab: tab3
                onClicked: {
                    if (tabGroup.currentTab == tab3) {
                        tab3.clear();
                        tab3.push(page3);
                    }
                }
            }
        }
    }

    TabGroup {
        id: tabGroup
        currentTab: tab1
        anchors.fill: mainPage

        PageStack {
            id: tab1
            Component.onCompleted: tab1.push(page1)

            Page {
                id: page1
                Rectangle {
                    color: "yellow"
                    anchors.fill: parent

                    Component {
                        id: page12
                        Page {
                            Rectangle {
                                color: "orange"
                                anchors.fill: parent
                            }
                        }
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: tab1.push(page12)
                    }
                }
            }
        }

        PageStack {
            id: tab2
            Component.onCompleted: tab2.push(page2)

            Page {
                id: page2
                Rectangle {
                    color: "red"
                    anchors.fill: parent
                }
            }
        }

        PageStack {
            id: tab3
            Component.onCompleted: tab3.push(page3)

            Page {
                id: page3
                Rectangle {
                    color: "blue"
                    anchors.fill: parent
                }
            }
        }
    }
}

}
@

engrehabhegazy

thanks alot it really heled me :)

andre

"This video":/videos/watch/anatomy-of-real-world-apps-dissecting-cross-platform-apps-written-using-qt from last Qt DevDays gives an IMHO really insightful example on how you can create an application with a structure like what you want. It combines QML and C++ to get it done, but I think it is really elegant.