Two pages in one Tabs - toolbar issue

[Roman Shchekin]

In RSS Reader (Shorts) we use Tab component with two pages inside - for list and grid mode.
When both pages uses same toolbar, all is ok, but when they have different - sometimes I can't reveal toolbar, sometimes I can't see one of the, sometimes I can see wrong toolbar (from another page).

Here is an example (try to play with "tools" property):

import QtQuick 2.0
import Ubuntu.Components 0.1
import "ui"

/*!
    \brief MainView with Tabs element.
           First Tab has a single Label and
           second Tab has a single ToolbarAction.
*/

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

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.mrqtros.ToolbarBug"

    width: units.gu(50)
    height: units.gu(75)

    Tabs {
        id: tabstabs

        Tab {
            id: someTab
            title: i18n.tr("..World!")

            property bool mode: true

            page: someTab.mode ? secondPage : firstPage

            Page {
                id: firstPage

                visible: !someTab.mode

                Label {
                    anchors.centerIn: parent
                    text: "Page 1"
                }

                tools: firstTools
                ToolbarItems {
                    id: firstTools
                    ToolbarButton {
                        iconSource: Qt.resolvedUrl("graphics/toolbarIcon.png")
                        text: i18n.tr("Tap 1!")

                        onTriggered: {
                            someTab.mode = !someTab.mode
                        }
                    }
                }
            }

            Page {
                id: secondPage

                visible: someTab.mode

                Label {
                    anchors.centerIn: parent
                    text: "Page 2"
                }

                tools: secondTools
                ToolbarItems {
                    id: secondTools
                    ToolbarButton {
                        iconSource: Qt.resolvedUrl("graphics/toolbarIcon.png")
                        text: i18n.tr("Tap 2!")

                        onTriggered: {
                            someTab.mode = !someTab.mode
                        }
                    }
                }
            }

            ToolbarItems {
                id: commonTools
                ToolbarButton {
                    iconSource: Qt.resolvedUrl("graphics/toolbarIcon.png")
                    text: i18n.tr("Common")

                    onTriggered: {
                        someTab.mode = !someTab.mode
                    }
                }
            }
        }
    }
}

[Roman Shchekin (mrqtros)]

I tried another solution with dynamic page creation, but "tools" property can't be set without blinking of ToolBarItems in the middle of the page, try this code

import QtQuick 2.0
import Ubuntu.Components 0.1
import "ui"

/*!
    \brief MainView with Tabs element.
           First Tab has a single Label and
           second Tab has a single ToolbarAction.
*/

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

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.mrqtros.ToolbarBug"

    width: units.gu(50)
    height: units.gu(75)

    Tabs {
        id: tabstabs

        Tab {
            id: someTab
            title: i18n.tr("..World!")

            property bool mode: false

            page: mainLoader.item

            Loader {
                id: mainLoader

                sourceComponent: someTab.mode ? secPageComp : fstPageComp
            }

            Component {
                id: fstPageComp

                Page {
                    id: firstPage

                    visible: !someTab.mode
                    anchors.fill: parent

                    Label {
                        anchors.centerIn: parent
                        text: "Page 1"
                    }

                    tools: firstTools
                }
            }

            ToolbarItems {
                id: firstTools

                ToolbarButton {
                    iconSource: Qt.resolvedUrl("graphics/toolbarIcon.png")
                    text: i18n.tr("Tap 1!")

                    onTriggered: {
                        someTab.mode = !someTab.mode
                    }
                }
            }

            Component {
                id: secPageComp

                Page {
                    id: secondPage

                    visible: someTab.mode
                    anchors.fill: parent

                    Label {
                        anchors.centerIn: parent
                        text: "Page 2"
                    }

                    tools: secondTools

                    ToolbarItems {
                        id: secondTools

                        ToolbarButton {
                            id: brtTool

                            iconSource: Qt.resolvedUrl("graphics/toolbarIcon.png")
                            text: i18n.tr("Tap 2!")

                            onTriggered: {
                                someTab.mode = !someTab.mode
                            }
                        }
                    }
                }
            }
        }
    }
}

[Roman Shchekin (mrqtros)]

I want to note that Toolbar isn't robust at all. Someone should try to use it in unusual cases to test it's behavior.

[Roman Shchekin (mrqtros)]

Any news?

[Tim Peeters (tpeeters)]

Having multiple pages inside a Tab is not well-supported at the moment, that is also a part of the problem.

You can try to have only one Page, where its contents can change, as well as the tools property of the Page.

Because the functionality of the toolbar is being moved to the header, I mark this as Wishlist for now. The same problem can appear in the header of course, but we are planning to deal with that better and add animations when the tools in the header change (for example when pushing a new page on a PageStack, there will be an animation of the page and of the header to show what is happening).

So for now I propose you try the workaround I described of setting the tools of the Page because we are working on other bugs and features that have higher priority (such as the new header), but feel free to ask me for assistance on IRC (t1mp is my ircnick) if you get stuck.

[Roman Shchekin (mrqtros)]

We are already using one Page and few Items inside ;)
So I hope new toolbar will work fine :)

[Tim Peeters (tpeeters)]

Two Pages would be possible also, but only one of the Pages must be active.

so you can have each page like this:
Tabs {
id: tabs

Tab {
id: someTab
property bool mode: false

page: mode ? page1 : page2

Page {
  id: page1
  visible: active
  active: tabs.selectedTab == someTab && someTab.active
}}}