How to call/load another QML file from QML ?

[cadlg]

Hello.

This must be very simple, but I'm just starting to test Qt Quick and have not seen any example of it.

Say I have a main.qml file which shows a listview, and I have another QML file which is a form with some buttons and text inputs.

What code should I use in main.qml so my other qml file (the other form) gets loaded when a list item is clicked ?

            MouseArea {
                anchors.fill: parent
                onClicked: {/* what code should I put here to call the other qml file ? */}            }

Does this make sense ?

Thank you very much.

[symbianyucca]

basically you would include a script file, then you could use the import statement, like is done in here: http://doc.qt.nokia.com/4.7-snapshot...avascript.html

and if you would have QML file, it would actually then have a element inside it, and you would use the filename of the QML file as a element name to include it in your own QML file.

[cadlg]

Thanks for your answer, Symbianyucca. I appreciate your time and your interest.

But, either you didn't understand my question, or I didn't understand your answer

I'm not trying to include some element from another qml file into the current screen. I'm trying to completely switch screens when some mouse area is clicked.

Searching on the web I found a recommendation to do it using a Loader element, something like this:

Item {
    id: mainItem

    Loader {
        id: mainLoader
    }
    MouseArea{
        anchors.fill: parent
        onClicked: mainLoader.source = "main2.qml"
    }
}

Using this method the screen described in main2.qml is displayed, but objects defined in that file don't respond to mouse clicks.

Calling another form is done easily in Qt C++. I'm just looking for the equivalent in QML.

Thank you.

[njzk2]

they don't respond to mouseclick because the mousearea you declare takes all the screen.
may be something like this :

Item {
    id: mainItem
    MouseArea {
       anchors.fill: parent
       onClicked: mainItem.opacity = 0; secondItem.opacity = 1
    }
}
// assuming your qml file is named main2.qml
main2 {
    id: secondItem
    opacity: 0
}

Of course, all that is better is you use states http://doc.qt.nokia.com/latest/qml-state-elements.html http://doc.qt.nokia.com/latest/qdeclarativestates.html

[cadlg]

Thanks njzk2, that works, but it makes the main2.qml file to be loaded from the beginning, and if the app is comprised of many different screens I guess that could lead to a performance degradation.

I managed to make it work loading additional files dinamically in the following way:

In the main file I have this:

... 
... 
Loader { 
id: mainLoader 
anchors.fill: parent 
} 
Rectangle { 
id: firstItem 
anchors.fill: parent 
... 
... 
Connections { 
target: mainLoader.item 
onShowScreen: mainLoader.source = file; 
} 
...
        MouseArea{
            anchors.fill: parent
            onClicked: {mainLoader.source = "main2.qml"; firstItem.opacity = 0;}
        }
}

And in the other files that are going to be called, I have this:

signal showScreen(string file) 

... 
... 
MouseArea { 
... 
... 
onClicked: myRectangle.showScreen("otherFile.qml") 
}

This way only the main file and one additional file is loaded in memory at any time, and it works well visually, but it gets complicated when the application needs to call many different screens and needs to be able to navigate to other previously opened ones.

On the other hand, using the opacity property to hide previous screens and to be able to get the new screens to react to user interaction seems more like a workaround to me, and make these questions arise:

Is this the correct way to switch screens in QML ?
Should QML be used for this kind of apps that need to be able to navigate between many different screens, or should I be using a QWidget based UI instead ?

[_perza]

Here is a link that shows how to do it with visible property:
http://www.developer.nokia.com/Commu...-qml-in-QT-4.7

As a newbie it makes me wonder though, that if you use loader multiple times, does it every time instantiate a new object, thus consuming more and more memory?