[Solved] Launch a child QML window from a parent QML window

Ghost

I am using Qt 5.1 and the Qt Quick Controls provided with it inorder to implement the user interface.
I want to launch a (child) window when user clicks on a button. The part where I am confused is how I do it.

Here is my code:
@
import QtQuick 2.1
import QtWebKit 3.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow {
title: "Facebook Authorizer"
width: 300
height: 300

ColumnLayout {
    id: mainLayout
    anchors.fill: parent

    Button {
        id: authorizationLauncher
        text: "Authorize Facebook Account"
        Layout.fillWidth: true

        onClicked: {
            var component = Qt.createComponent("authorization-browser.qml");
            var browserWindow = component.createObject(this);
        }
    }
}

}
@

As shown above, I tried to use Qt.createComponent to load a qml file, and launch a window by creating its instance. It didn't work. I tried to follow this "link.":http://qt-project.org/doc/qt-4.8/qdeclarativedynamicobjects.html
The article pointed by the link also states that "Objects can also be created and managed from C++, and this is the preferred method for hybrid QML/C++ applications.". My application, indeed, will contain a hybrid code. So, I thought this could be a better way. I did some reading on how to implement this, however, sadly failed to understand the implementation.
Could anyone try and explain the process using this example - When user presses a button in the main QML window, another QML windows should launch.
Some abstract explanation and links to articles that demonstrate this using Qt5+ would be welcome, too.

stevenceuppens

Hi Bhoot,

you can try this,

AuthorizationBrowser.qml
@
import QtQuick 2.0
import QtQuick.Window 2.1 // needed for the Window component

Window {

width: 300
height: 200

Rectangle {

    anchors.fill: parent

    color: "lightGrey"

    Text {

        anchors.centerIn: parent

        text: "My New Window"
    }
}

}
@

main.qml
@
import QtQuick 2.0

Rectangle {
id: root

width: 360
height: 360

property variant win;  // you can hold this as a reference..

Text {
    text: "Click here to open new window!"
    anchors.centerIn: parent
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        var component = Qt.createComponent("AuthorizationBrowser.qml");
        win = component.createObject(root);
        win.show();
    }
}

}
@

Ghost

Thanks, it worked! I was inane enough to use "this" instead of the id of ApplicationWindow.

I am curious though, as to how this could be implemented in QML + C++. Please guide me if you know that.

Also, I want a value (access token, to be specific) back from the child window. How do you suggest I do that? My thought was to add a property to the child window: access_token, which I might access in the parent window before closing the child window.

Do you have a better suggestion?

[quote author="stevenceuppens" date="1375278713"]Hi Bhoot,

you can try this,

AuthorizationBrowser.qml
@
import QtQuick 2.0
import QtQuick.Window 2.1 // needed for the Window component

Window {

width: 300
height: 200

Rectangle {

    anchors.fill: parent

    color: "lightGrey"

    Text {

        anchors.centerIn: parent

        text: "My New Window"
    }
}

}
@

main.qml
@
import QtQuick 2.0

Rectangle {
id: root

width: 360
height: 360

property variant win;  // you can hold this as a reference..

Text {
    text: "Click here to open new window!"
    anchors.centerIn: parent
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        var component = Qt.createComponent("AuthorizationBrowser.qml");
        win = component.createObject(root);
        win.show();
    }
}

}
@[/quote]