[Kool]

Hi All,

I’m trying to use VPlay App components in my VPlay Game. I’ve used various components without an issue but have an issue with the NavigationBar.

Here’s a minimal example:

import Felgo 3.0
import QtQuick 2.0

GameWindow {
    id: gameWindow
    activeScene: scene
    screenWidth: 960
    screenHeight: 640

    Scene {
        id: scene

        width: 480
        height: 320

        NavigationBar {
            id: tabBar
            anchors {top: scene.gameWindowAnchorItem.top; left: scene.gameWindowAnchorItem.left; right: scene.gameWindowAnchorItem.right}
            backButtonVisible: true
            titleItem: AppText {
                text: "Training"
                color: Theme.backgroundColor
            }
        }
    }
}

When clicking the back button, I get the following error:

qrc:///qml/VPlayApps/navigation/NavigationBarContent.qml:32: TypeError: Cannot call method 'pop' of null

I’ve also tried setting a backButtonItem and detecting the clicked signal there, but get the same error.

Any thoughts on how to proceed/an alternative?

Many thanks!

[Kool]

My guess is that it’s trying to access a property that doesn’t exist in VPlay Games or parent items.

I made a stab at a solution by using an IconButtonBarItem as the leftBarItem:

import Felgo 3.0
import QtQuick 2.0

GameWindow {
    id: gameWindow
    activeScene: scene
    screenWidth: 960
    screenHeight: 640

    Scene {
        id: scene

        width: 480
        height: 320

        NavigationBar {
            id: tabBar
            titleItem: AppText {
                text: "Training"
                color: Theme.backgroundColor
            }
            leftBarItem: IconButtonBarItem {
                icon: IconType.arrowleft
                onClicked: console.debug("Clicked")
            }
        }
    }
}

Is there any way to get the default icon? It looks a nicer than the IconType.arrowleft.

Many thanks!

[Kool]

Another question is how can we get the cross-platform handling of the arrow icon when switching from iOS to Android?
I’m using Vplay App components in my game to get a cross-platform design.

[GüntherFelgo Team]

Hi Kool!

In Felgo Apps, NavigationBar is usually a part of NavigationStack. The default implementation of the NavigationBar back-button then tries to go-back one page by popping the current page from the NavigationStack.

As the NavigationStack is not available in your use case, the pop-error is printed. We only recently started to make GameWindow and App more compatible, so there are still some improvements left do – thanks for reporting this NavigationBar issue!

Regardless, you can react to the back-button being clicked with the backButtonItemPressed property (is set to true while the button is being pressed):

NavigationBar {
            id: tabBar
            // ...

            onBackButtonItemPressedChanged: {
              if(tabBar.backButtonItemPressed) {
                console.log("BACK BUTTON WAS PRESSED")
              }
            }
        }

 

To use the cross-platform handling of the arrow-icon, the default back-button leftBarItem is required. To avoid the pop-issue of NavigationBar and also use the native transitions when switching back and forth between pages, you can use the NavigationStack instead of a standalone NavigationBar:

// NavigationStack (with internal NavigationBar)
    NavigationStack {
      id: navStack
      anchors {top: scene.gameWindowAnchorItem.top; left: scene.gameWindowAnchorItem.left; right: scene.gameWindowAnchorItem.right}

      // Main Page with Button to Push Additional Page
      Page {
        titleItem: AppText {
          text: "Training"
          color: Theme.backgroundColor
        }

        AppButton {
          text: "Push DetailPage"
          anchors.centerIn: parent
          onClicked: navStack.push(detailPage)
        }

      }
    }

    // Detail Page, will be pushed to stack on button press
    Component {
      id: detailPage
      Page {
        title: "DetailPage"
      }
    }

Hope this helps!

Cheers,
Günther

 

[Kool]

Hi Gunther,

Thanks for the feedback. I’m a bit wary of moving over to a NavigationStack as my current game is composed of a GameWindow with states that switch the activeScene. It’d be quite an effort to switch over and test everything. I think I’ll stick with your first suggestion with the stand alone NavigationBar and live with the error message.

It’d be really great to get an demo project that demonstrates mixing of VPlay Games and VPlay Apps. I’m trying hard to use only what’s necessary rather than diving deep into the tools provided by VPlay Apps as there’s a lot of issues along the road. If there was a demo project that showed what’s compatible and what’s not, the workarounds, etc, I’d be more comfortable with making full use of VPlay Apps in my game.
Many thanks!