Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved how to pass data from one qml file to another

    General and Desktop
    qml textinput textfield
    3
    4
    10434
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Qjay
      Qjay last edited by

      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 .

      1 Reply Last reply Reply Quote 0
      • ?
        A Former User last edited by

        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()
                }
            }
        }
        
        1 Reply Last reply Reply Quote 1
        • Qjay
          Qjay last edited by 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 .

          1 Reply Last reply Reply Quote 0
          • S
            shav last edited by

            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!

            Mac OS and iOS Developer

            1 Reply Last reply Reply Quote 1
            • First post
              Last post