Qt Forum

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

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Unsolved setting QML Drawer properties in another QML file

    QML and Qt Quick
    qml property bindin property alias qt quick properties
    3
    8
    3690
    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

      I have a main.qml file that has a drawer in it .

      // some imports
      //Some code
      Drawer {
              id: drawer
              width: Math.min(window.width, window.height) / 3 * 2
              height: window.height
              onOpened:
                  webview.visible = false
      
              onClosed:
                  webview.visible = true
      
              ColumnLayout {
                  anchors.fill: parent
                  Rectangle {
                      id: search_field
                      width: drawer.width
                      height: 50
       // some code
      

      2nd qml file

      import QtQuick 2.6
      import QtQuick.Layouts 1.1
      import QtQuick.Controls 1.3
      import QtQuick.Window 2.2
      import QtQuick.Dialogs 1.2
      import QtQuick.Layouts 1.1
      import QtQuick.Controls 2.0
      import en.wtl.org 1.0
      import en.wtl.model 1.0
      import QtWebView 1.1
      
      Pane{
      
          id: view
          property string local_url : ""
          property string pid : ""
      
      
          ListView {
              width: 200; height: 250
      
              model: myModel
              delegate: Component{
                  RowLayout{
                      Button {
                          id: name
                          text: title
                          visible: true
                          Layout.fillWidth: true
                          onClicked: {
      
                              local_url = path+"/WTL_appdata/"+id+"/"+id+".html"
                              console.log(local_url);
                              pid = id;
                              //webview.url = local_url
                              webview.visible  = true
                          }
      
                          }
                      }
      
                  }
              }
      
      
      
      
      WebView{
          id: webview
          url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
          visible: false
          anchors.fill: parent
      
          }
      
      }
      
      
      

      what i want to do is set the "webview.visible = true only when drawer onclosed property is true and set it to invisible when drawer onopened property is true .

      so question is how can i access this

      onOpened:
                  webview.visible = false
      
              onClosed:
                  webview.visible = true
      

      in my 2nd qml file .

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

        Hi! Access to items works only from top ("parent") to the bottom ("child") in the file inclusion hierarchy. What you can do is add some kind of proxy signal. The following code demonstates that and also shows how to use a property in the same way:

        MyRect.qml

        import QtQuick 2.0
        
        Rectangle {
            width: 200
            height: 200
        
            signal signal_myrect()
            property bool property_myrect: false
        
            onSignal_myrect: console.log("opened")
            color: property_myrect ? "green" : "red"
        }
        

        main.qml

        import QtQuick 2.7
        import QtQuick.Controls 2.0
        import QtQuick.Layouts 1.3
        
        ApplicationWindow {
            visible: true
            width: 640
            height: 480
        
            property bool property_main: false
            signal signal_main()
        
            MyRect {
                property_myrect: property_main
                Component.onCompleted: onSignal_main.connect(signal_myrect)
            }
        
            Row {
                anchors.bottom: parent.bottom
                spacing: 10
                Button {
                    text: "Change property"
                    onClicked: property_main = !property_main
                }
                Button {
                    text: "Emit signal"
                    onClicked: signal_main()
                }
            }
        }
        
        Qjay 1 Reply Last reply Reply Quote 2
        • Qjay
          Qjay @Guest last edited by Qjay

          @Wieland does the firstname of the file needs to be capital ?

          if possible can you do this with my example code above ? that woul be really helpful !!

          if you are curious full code of those 2 files are here
          main.qml : https://github.com/hackertron/WikiDesktopClient/blob/master/main.qml
          offline_pages.qml : https://github.com/hackertron/WikiDesktopClient/blob/master/pages/offline_pages.qml

          1 Reply Last reply Reply Quote 0
          • dheerendra
            dheerendra Qt Champions 2022 last edited by

            1. First letter of the component name should be capital letter
            2. You can use the property alias for the same.

            main.qml

            ApplicationWindow {
                id: window
                visible: true
                width: 300;height: 400
                  OffLine_Pages{
                       id : we
                   }
            
                Drawer {
                    id: drawer
                    width: 0.66 * window.width
                    height: window.height
                    onOpened: {
                        console.log("Open the browser")
                        we.vis=false
                    }
                    onClosed: {
                        console.log("Close the browser")
                        we.vis=true
                    }
                }
            }
            ====  OffLine_Page.qml====
            Pane{
            
               id: view
               property string local_url : ""
               property string pid : ""
               property alias vis: webview.visible
            
               WebView{
                   id: webview
                   url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
                   visible: false
                   anchors.fill: parent
               }
            
            }
            

            Dheerendra
            @Community Service
            Certified Qt Specialist
            http://www.pthinks.com

            Qjay 1 Reply Last reply Reply Quote 3
            • Qjay
              Qjay @dheerendra last edited by

              @dheerendra Hello thanks for the answer but i am getting this error

              qrc:/main.qml:18 Offline_Pages is not a type
              

              I renamed my file to Offline_Pages and changed qml.qrc too still not working . Where am i wrong ?

              1 Reply Last reply Reply Quote 0
              • dheerendra
                dheerendra Qt Champions 2022 last edited by

                It should work. Just clean your build. Ensure the file name matches.

                Dheerendra
                @Community Service
                Certified Qt Specialist
                http://www.pthinks.com

                1 Reply Last reply Reply Quote 0
                • Qjay
                  Qjay last edited by Qjay

                  yup it worked !! but still it is not able to solve my purpose .

                  When i am in OffLine_Pages and opens the drawer the webview don't hide . so still same issue

                  1 Reply Last reply Reply Quote 0
                  • dheerendra
                    dheerendra Qt Champions 2022 last edited by

                    ok. Let us look at like this. Instead of web view, put the Rectangle{}
                    Try to show & hide the rectangle instead of web-view. Till me whether it works or not.
                    Try something like this
                    OffLine_Pages.qml

                    Pane{
                    
                        id: view
                        property string local_url : ""
                        property string pid : ""
                        property alias vis: web.visible
                        Rectangle{
                            id : web
                            width: 200;height: 200;color: "red"
                            visible: false
                        }
                    }
                    

                    Dheerendra
                    @Community Service
                    Certified Qt Specialist
                    http://www.pthinks.com

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