Forums

OverviewFelgo 2 Support (Qt 5) › Lazy-loading Navigation how to access page

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17783

    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

    #17803

    Günther
    Felgo 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

    #17832

    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

    #17841

    Günther
    Felgo 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

    #17888

    Marek

    excellent it works,

    thank you

    Marek

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support