Planned maintenance has been done but it did not solve the problem. So work will continue on this and a new time for trying updates will be announced asap.

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!