StackView for structure browsing

[aloisius]

Hello,

We are thinking about developing a mobile app using Qt. While browsing through the documentation, I found that StackView can be used for simple navigations in a App.

If I understand it correctly, I'm pushing for every "click on a link which leads to a new page" a new View into the StackView. If the user's clicking on the back-button, I'll remove the last added view from the StackView.

My question is now, if it makes sense to use the StackView in the described way for very deep and complex navigation through a website structure e.g. a board like this forum?

Wouldn't that crash as soon as the user navigates through lets say 1k "pages" because the StackView would hold every View?

Is there some other element or some best practice which I should use/apply for deep and complex navigations?

I would be happy about every hint. :-)

Thank you very much.

aloisius

[p3c0]

@aloisius

My question is now, if it makes sense to use the StackView in the described way for very deep and complex navigation through a website structure e.g. a board like this forum?

According to me StackView can be used here. To go to a particular page you can pop of to that Item. You can also make use of find to find a particular page.

Wouldn't that crash as soon as the user navigates through lets say 1k "pages" because the StackView would hold every View?

It shouldn't technically unless the app itself exhausts all the memory. You can make StackView delete Items when they are popped by setting destroyOnPop to true when Items are pushed into it.

[aloisius]

@p3c0

Thank you for the fast answer!
Let's say I'm going to write a forum mobile app.. Do you think the following approach would work?

• I'm creating two views which represent a "page": viewA and viewB
• By default, viewA will be filled with fallback settings and then pushed into the StackView
• If the user clicks on some button, I'll fill viewB with the relevant information, and replace viewA with viewB in the StackView
• If the user clicks another button, I'll fill viewA with the relevant information, and replace viewB with viewA..
• ...
• I store the history on the device or on the server via webservice

I saw an example, in which the developer just added a view for every click to the StackView.. And removed them when the user pushed the "back" button.. That doesn't seem very efficient to me, looking on complex content structures..

Thanks again for your help.

[p3c0]

@aloisius Yes your approach will work. Just need to do push and pop Items keeping them already initialized. History data can be stored on the device but there's no pure QML way to so. You will need C++ API's to get access to file system. Ofcourse unless you use sqlite database which has inbuilt support in QML. For webservice you can use XMLHttpRequest as usual you do in JS.

I saw an example, in which the developer just added a view for every click to the StackView.. And removed them when the user pushed the "back" button.. That doesn't seem very efficient to me, looking on complex content structures..

Replacement needs 2 steps: deleting and adding while the above approach requires only one.

[aloisius]

@p3c0

That helps me a lot - Thanks again.

Just one last question: Do you know if there is some best practice for the "page"-handling through complex structures / applications?

[p3c0]

@aloisius If you have multiple pages its better to use StackView and if you have a couple or so you can always use Loader to load these Items one at a time.

[vishnu]

@aloisius
If you don't want to use StackView. You can make you own GuiStack. Push and pop the screens from the stack.
Example: Let's say you have an array stack which holds the screens.
property variant stack: []
If you want to pop :

function pop() {
        console.log(":TODO:Mo  ~~~~ pop   ", stack.length)

        var tmp = stack

        if (tmp.length > 0) {
            var topScreen = last()
                executePop()
        }
    }

    function executePop() {
        var tmp = stack

        if (tmp.length > 0) {
            var topScreen = tmp.pop()

            topScreen.enabled = false
            topScreen.visible = false
            topScreen.clearForm()

            applicationLoader.source = ""

            stack = tmp

            if (tmp.length > 0) {
                var lastScreen = last()
                navigationBar.canMoveUp = lastScreen.canMoveUp
                navigationBar.model = lastScreen.menuModel
                navigationBar.caption = lastScreen.navigationBarCaption

                actionBar.uploadActionVisible = lastScreen.dataIsValid
            }
        }

        console.log(":TODO:Mo  ~~~~ poped ", stack.length)
    }
function last() {
        return stack[stack.length - 1]
    }

If you want to push:

    function push(newScreen) {
        console.log(":TODO:Mo  ~~~~ push  ", stack.length)
        var tmp = stack
        newScreen.enabled = true
        newScreen.visible = true

        tmp.push(newScreen)

        navigationBar.canMoveUp = newScreen.canMoveUp
        navigationBar.model = newScreen.menuModel
        navigationBar.caption = newScreen.navigationBarCaption
        actionBar.uploadActionVisible = newScreen.dataIsValid
        stack = tmp
        console.log(":TODO:Mo  ~~~~ pushed", stack.length)
    }

[aloisius]

Thanks again for the input!

I think I got now a rough understanding of the structure / logic.

I'll try to load the contents dynamically and show them using eigther Stackview / Loader or some own implementation.

That really helped me a lot! :-)