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



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



  • 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();
        }
    }
    

    }
    @



  • 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]


Log in to reply
 

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