StackView for structure browsing



  • 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


  • Moderators

    @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.



  • @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.


  • Moderators

    @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.



  • @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?


  • Moderators

    @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.



  • @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)
        }
    


  • 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! :-)



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.