[Marek]

Hi,

I know my problem is due to Lazy-loading mechanizm, but I just can’t figure out how to work around this problem.

I have two pages in main Navigation and second page has also AppTabBar with several pages. What i need is to set mainNavigation.currentIndex=1 and appTabBar.currentIndex=0

However because of Lazy-loading “settingsPage is not defined” when I try to access it from main.qml

According to this page Working with TabView’s Loader sandbox effect there are some ways dirty or not but none of them works for me, can you give me some advice?

Main.qml

signal goToAddProgram()

Navigation {
        id:mainNavigation
        anchors.fill: parent
        visible: true
        navigationMode: navigationModeDefault
        property alias configNaviItem: configNaviItem
        NavigationItem {
            id:homeNaviItem
            title: "Programs"
            icon: IconType.home
            NavigationStack {
                id: progNaviStack
                Prog1Page {
                    id: prog1Page
                }
            }
        }
        NavigationItem {
            id:configNaviItem
            title: "Config"
            icon: IconType.home
            NavigationStack {
                id: configNaviStack
                SettingsPage {
                    id:settingsPage
                }
            }
        }
}
onGoToAddProgram: {
        mainNavigation.currentIndex=1
        //what I need is to show first page from SettingsPage
        //settingsPage.appTabBar.currentIndex=0
}

SettingPage.qml

    Flickable {
        id: tabFlickable
        anchors.top:parent.top
        anchors.topMargin: dp(Theme.navigationBar.height*1.5)
        width: parent.width
        height: dp(Theme.tabBar.height)
        contentWidth: appTabBar.width
        contentHeight: height
        AppTabBar {
            id: appTabBar
            width: 900
            translucency: 1

            AppTabButton {
                text: "Program"
            }
            AppTabButton {
                text: "Section"
            }
            AppTabButton {
                text: "Device"
            }
            AppTabButton {
                text: "Alarm"
            }
            AppTabButton {
                text: "Settings"
            }
        }
    }
    // content area
    Loader {
        id: content
        anchors.top: tabFlickable.bottom
        anchors.bottom: parent.bottom
        width: parent.width
        source: "Tab"+appTabBar.currentIndex+"Page.qml" // load different page based on selected tab
    }

Best Regards

Marek

[GüntherFelgo Team]

Hi Marek!

Yes, the NavigationItem (based on TabControl / Tab) loads the content lazy when it is first opened. I think you can e.g. can use the NavigationItem onLoaded signal (inherited from Loader). It will fire after setting currentIndex to 1, as soon as the NavigationItem content is created/loaded.

Best,
Günther

[Marek]

Hi

I will need some more assistance.

From what I read NavigationItem is derived from Tab which inherit Loader, although onLoaded is never fired in my case, also onStatusChange. Moreover NavigationItem has properties like navigationStack : NavigationStack and page : Page so I thought I will be able to access navigationStack within NavigationItem, but when I try to access them I get:

Cannot read property ‘title’ of null

In case of SettingsPage where Loader is explicitly specified I got onLoaded signal

//from Main this does not work

​NavigationItem {
    id:configNaviItem
    title: "Konfiguracja"
    property string i_source:Qt.resolvedUrl("qrc:/images/drawer_config_icon.png")
    iconComponent: iconComponent
 //   icon: IconType.home

    signal disableNavigation(var disable)
    signal setTabBar()
    NavigationStack {
        id: configNaviStack
        property alias settingsPage: settingsPage
        signal setTabBar()

        SettingsPage {
            id:settingsPage

        }
        onSetTabBar: {
            console.log("onSetTabBar 3")
        }
    }
    onSetTabBar: {
        console.log("onSetTabBar 2:"+configNaviItem.page.title)
        console.log("onSetTabBar 2:"+configNaviItem.navigationStack.currentPage)
    }
    onLoaded: {
        console.log("configNaviItem loaded")
    }
    onStatusChanged: {
        console.log("configNaviItem status:"+configNaviItem.status)
    }
    onSelected: {
        console.log("configNaviItem selected")
    }
}

this part works (from SettingsPage)

Loader {
    id: content
    anchors.top: tabFlickable.bottom
    anchors.bottom: parent.bottom
    width: parent.width
    source: "Tab"+appTabBar.currentIndex+"Page.qml" // load different page based on selected tab
    onLoaded: {
        console.log("tabBar content loaded");
    }
}

Best Regards

Marek

[GüntherFelgo Team]

Hi Marek!

The page property of NavigationItem is also set lazy after the page was loaded and created by the NavigationItem. The page is not initialized yet when the onLoaded signal of the nav item fires, but you can also listen to onPageChanged and do e.g. something like this:

import Felgo 3.0
import QtQuick 2.9

App {
  Navigation {
    id: navigation

    NavigationItem {
      title: "Nav #1"
      icon: IconType.home

      NavigationStack {
        Page { title: "First Page" }
      }
    }

    NavigationItem {
      id: settingsNavItem
      title: "Config"
      icon: IconType.home

      property int openTabAfterLoading: -1

      NavigationStack {
        Page {
          title: "Settings Page"

          function openTab(index) {
            console.log("ACTIVATE SETTINGS TAB: "+index)
          }
        }
      }

      onPageChanged: {
        settingsNavItem.page.openTab(openTabAfterLoading)
      }
    }
  }

  AppButton {
    text: "Activate Settings"
    onClicked: {
      // activate settings tab lazy or directly if page already exists
      if(!settingsNavItem.page)
        settingsNavItem.openTabAfterLoading = 0
      else
        settingsNavItem.page.openTab(0)

      navigation.currentIndex = 1 // nav index 1
    }
  }
}

Hope this helps!

Best,
Günther

[Marek]

excellent it works,

thank you

Marek