setting QML Drawer properties in another QML file

Qjay

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 .

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

@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

dheerendra

First letter of the component name should be capital letter
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
   }

}

Qjay

@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 ?

dheerendra

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

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

dheerendra

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