Dynamic QML Page loader

[shaan7]

You might find StackView useful. You should be able push to Loaders onto the stack and then have the Loaders load your "page" UI. Once you're done with a page, you can set the Loader's active property to false and it will destroy the UI as you want.

[CristianoNarcisiVidex]

Thanks a lot @shaan7 . As you can understand, i am not so ecperienced with QML. I have just read something about StackView, and it seems to do what i was asking for. I am some doubt, that could be sounds very stupid for you.
How can i create nested pages using it? I have download the touch application and only the first page can load the others and only from the main page the user can go back. It is not exactly what i am meaning.
Do you understand?

Let me add a snippet of code:

Item {
    id: element1
    Loader
    {
        id: loader
        anchors.fill: parent

    }

    Text {
        id: element
        text: qsTr("First Element")

    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {

            loader.setSource("SecondItem.qml")
            loader.active = false

        }
    }

}

I iwould like that loader.setSource("SecondItem.qml") will create the new page for first ,and then will destroy itself!

[shaan7]

Hi,

I think there is a good example for you in the New Project dialog in Qt Creator-

This will give you an example app which has a StackView with two pages and you can navigate by using the menu or pressing Back-

Let me know if the example is still not enough for you and you have any questions.

[ekkescorner]

@CristianoNarcisiVidex perhaps my blog gives you some hints: https://appbus.wordpress.com/2016/05/27/stacked-pages-app/ (it's something outdated, but you should get the idea HowTo deal with StackView)

[CristianoNarcisiVidex]

Thanks @ekkescorner !!! Your blog seems to be very interesting for my purposes. Anyway, i will try to answer either to @shaan7 . I would like to have something that doesn't need to know how the pattern is made. Let me try to explain better ( sorry but my english isn't so rich!).
Each "page" must contain a Loader object for loading another source. In this way, going back and forward becomes only a call to Loader.setsource("next_page.qml"). The only problem is that i am not still able to close the "current" page as it loads a new one. Doing this, i will have only one QML file loaded at time, reducing the resources used by my interface. I have done this long time ago using QWidget, and i would like to do the same using QML .

Any hint will be really appreciate!!!

Thanks a lot

[shaan7]

Ah, so you don't want StackView-based navigation per se. In that case, lets say you first call Loader.setSource("Page1.qml"), the Loader will load it and display it. Now, when you want to load Page2, I understand that you want to unload Page1 to conserve resources. To do that, you can simply call Loader.setSource("Page2.qml") and it will do exactly that - it will unload Page1 and load Page2.

[GrecKo]

Why not just use StackView and call replace when you want to change the page ?

[CristianoNarcisiVidex]

Ok @shaan7 !!! You are suggesting me to use one single Loader, and then each QML file that will be loaded must call it for changing the content of the page, right?
In this way i can't separate the the pages from the Loader, and i would like to separate each page from any other component as much as possible.

[shaan7]

@CristianoNarcisiVidex said in Dynamic QML Page loader:

In this way i can't separate the the pages from the Loader

Um, I'm not sure I understand what kind of separation you want here. No matter how you implement things, if you need some code in Page1 to navigate to Page2, then that code will have to call somefunc("Page2.qml"). When you're using a global Loader, its just that somefunc sets the Loader's active property accordingly.

As an example, lets say I call my somefunc as navigate:

main.qml:

Window {
    width: 800
    height: 600

    function navigate(page) {
        loader.source =  page + ".qml";
    }

    Loader {
        id: loader
        anchors.fill: parent
        source: "Page1.qml"
    }
}

Page1.qml

Item {
    id: page1

    Button {
        text: "Next"
        onClicked: navigate("Page2")
    }
}

Page2.qml
... as required ...

In a different approach, I can use a StackView instead of Loader where the navigate will call replace as @GrecKo described.

[CristianoNarcisiVidex]

Thanks a lot @shaan7! We are about to reach a good solution. I am trying to do the same, but i would like to use Window instead of Item in QML pages. Changing this , the application gets closed after calling the setSource methods.
Is it the same to you?

Thanks!

[shaan7]

@CristianoNarcisiVidex said in Dynamic QML Page loader:

but i would like to use Window instead of Item in QML pages

Why would you do that? It will mean that every time user navigates to new page, a new Window will be shown, it might not be a good experience.

About why the application gets closed, can you share a code snippet? Or even a link to a git repo works.

[CristianoNarcisiVidex]

here is the main.qml, where i have the loader

Window {
    width: 640
    height: 480

    function navigate(page)
    {
        loader.setSource(page);
    }
    Loader
    {
        id: loader
        anchors.fill: parent
        source: "FirstItem.qml"
    }
}

This is FirstItem.qml

Window{
    visible: true
    width: 800
    height: 900
    color: "green"

    Text {
        id: element
        x: 206
        y: 234
        text: qsTr("First Element")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.bold: true
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 43
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {

            navigate("SecondItem.qml")

        }
    }

}

And this the second

Window{
    visible: true
    width: 640
    height: 480
    color: "white"


    Text {
        id: element
        x: 206
        y: 234
        text: qsTr("Second Element")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.bold: true
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 43
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {

            navigate("FirstItem.qml")


        }
    }

}

[shaan7]

Ah ok, the app exits because the moment your first Window closes (before loading the second), your app has no visible Windows. By default, Qt apps will exit when that happens. You can disable this behavior by adding app.setQuitOnLastWindowClosed(false); in main.cpp

[CristianoNarcisiVidex]

@shaan7 said in Dynamic QML Page loader:

Wonderful!!! You deserve more than one like!!! Thank's a lot @shaan7 !!!