how to pass data from one qml file to another

Qjay

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

Qjay

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 .

shav

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!

Update: Forum Guidelines & Code of Conduct

Unsolved how to pass data from one qml file to another