how to pass data from one qml file to another



  • here are my 2 qml files . i want to pass data from main.qml to mywebview.qml

    what i want to pass ?

    when i click on load page , i want an input box that will take a page name and send it to mywebview.qml

    main.qml

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    import QtQuick.Dialogs 1.2
    //import QtWebEngine 1.1
    import QtWebKit 3.0
    
    
    Window {
        id:root
        visible: true
        width : Screen.width /4
        height: Screen.height/4
        color : "black"
    
        MessageDialog {
            id: msg
            visible: false
            title: "Page Saved"
            text: "Requested  page has been saved"
            onAccepted: {
                console.log("OK!!")
            }
    
        }
    
    
    Column{
    
        id : menu
        anchors.centerIn: parent
        spacing : 8
    
    
        Button{
            id : view
    
            width: root.width
            height: root.height /4
            text: "LOAD PAGE"
    
    
            onClicked: {
                //create loadwindow
                var component= Qt.createComponent("Mywebview.qml")
                var loadwin = component.createObject(root)
                loadwin.show()
            }
        }
    
        Button{
            id : save
            width: root.width
            height: root.height /4
            text: "SAVE PAGE"
            onClicked: {
                    msg.visible = true
                    dbm.add()
                    
            }
        }
        Button{
            id : del
            width: root.width
            height: root.height /4
            text: "DELETE PAGE"
            onClicked: {
                msg.title = "Deleted"
                msg.text = "Page has been deleted"
                msg.icon = StandardIcon.Warning
                msg.visible = true
                dbm.del()
            }
        }
        Button{
            id : exit
            width: root.width
            height: root.height /4
            text: "EXIT"
            onClicked: {
                Qt.quit();
            }
        }
    
    
        }
    
    }
    
    

    mywebview.qml

    import QtQuick 2.5
    import QtQuick.Window 2.2
    //import QtWebEngine 1.1
    import QtWebKit 3.0
    import QtQuick.Dialogs 1.2
    import QtQuick.Controls 1.4
    
    Window {
        id:webview
        visible: true
        width: 600
        height: 400
    
    
    
        function parsing() {
            var http = new XMLHttpRequest();
            var json , parse , text , rev_id;
    
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200)
                { json = http.responseText;
    
                    parse = JSON.parse(json);
                    rev_id = parse.parse.revid;
                    console.log(rev_id);
    
                    text = parse.parse.text["*"];
                    //console.log(text);
                     // <-- STRIP ME (o.O)
                    while(text.match(/&#39;\/index.php/)){
                    text = text.replace(/&#39;\/index.php/, "http://en.wikitolearn.org/index.php");
                    text = text.replace(/&amp;/,"&");
                    text = text.replace(/MathShowImage&amp;/, "MathShowImage&")
                    text = text.replace(/mode=mathml&#39;/, "mode=mathml\"");
                    text = text.replace(/<meta class="mwe-math-fallback-image-inline" aria-hidden="true" style="background-image: url\(/ ,"<img style=\"background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.838ex;height: 2.843ex; \" src=\"");
                    text = text.replace(/<meta class="mwe-math-fallback-image-display" aria-hidden="true" style="background-image: url\(/ ,"<img style=\"background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.838ex;height: 2.843ex; \" src=\"");
                    text = text.replace(/&amp;mode=mathml\"/ , "&mode=mathml>\"");
    
                    }
                    console.log(text); // after strip :p .
    
                    webEngineView.loadHtml(text);
                    return(text);
                }
            };
            http.open('GET','http://en.wikitolearn.org/api.php?action=parse&page=Linear%20Algebra/Sets&format=json');
            http.send();
        }
    
    
        WebView{
            id: webEngineView
            anchors.fill: parent
        }
    
    
        Component.onCompleted: parsing()
    
    }
    
    

    currently you will see that i have placed a static url in mywebview.qml .



  • Hi! You can add a custom property to the MyWebView component and set its value from main.qml, e.g. like this:

    MyWebView.qml

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    
    Window {
        id: webview
        visible: true
        width: 400
        height: 300
    
        property string someParameter: "defaultParameter"
    
        Text {
            anchors.centerIn: parent
            text: webview.someParameter
        }
    }
    

    main.qml

    import QtQuick 2.3
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    
    Window {
        id: root
        visible: true
        width : 400
        height: 300
    
        Button{
            id : view
            text: "Click me"
            onClicked: {
                var component= Qt.createComponent("MyWebView.qml")
                var loadwin = component.createObject(root)
                loadwin.someParameter = "Hello!"
                loadwin.show()
            }
        }
    }
    


  • Hey @wieland i tried what you suggested but it was not working . I was getting error ( when i passed that property to my JS function , i got undefined )

    I want the user to input ( i don't want to hardcode it ) . That's why i was asking about textinput or something .



  • Hi,

    You need to send property like this:

    var loadwin = component.createObject(root, {someParameter: "Hello!"})
    

    If you want to send property at any time (not only when your object will create) you need use alias property:

    property alias someParameter: textElement.text
    
    Text {
        id: textElement
        anchors.centerIn: parent
        text: "defaultParameter"
    }
    

    or signals. But I think alias property will be best way in your case.

    Hope this helps!


Log in to reply
 

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