Scope problem

Stefanoxjx

Hello, I'm studying QML but I don't undestand scope of properties.
I'm writing this code but don't undestand how I can change label from buttons:

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MyLabel {id: myLabel; anchors.centerIn: parent }

    MyB1 {id: myB1}
    MyB2 {id: myB2}
    MyB3 {id: myB3}
}

MyLabel.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    property alias mlabel: myLabel.text

    Label {
        id: myLabel
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

MyB1.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    Button {
        id: mB1
        x: 10
        y: 10
        text: "Moon"
        onClicked: mlabel="Moon"
    }
}

MyB2.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    Button {
        id: mB2
        x: 10
        y: 50
        text: "Mars"
        onClicked: mlabel="Mars"
    }
}

MyB3.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    Button {
        id: mB3
        x: 10
        y: 90
        text: "Jupiter"
        onClicked: mlabel="Jupiter"
    }
}

Someone can help me to understand how I can make visible the Label globally?
Many thanks.

Stefano

SGaist

Hi,

That's not the correct thing to do. Your MyBX items should emit a signal with the text as parameter and your application window you should connect these signals to the mlabel property (for which you should rather keep the text property name, it will be cleaner and easier to understand)

Hope it helps

Stefanoxjx

Hi @SGaist and thanks for your reply.
I've modified the code as follow:

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    id: wnd
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property var    ml: "Stefano"

    MyLabel {id: myLabel; anchors.centerIn: parent }

    MyB1 {id: myB1}
    MyB2 {id: myB2}
    MyB3 {id: myB3}
}

MyB1.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {
    Button {
        id: mB1
        x: 10
        y: 10
        text: "Moon"
        onClicked: ml="Moon"
    }
}

MyB2.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    Button {
        id: mB1
        x: 10
        y: 10
        text: "Mars"
        onClicked: ml="Mars"
    }
}

MyB3.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {

    Button {
        id: mB1
        x: 10
        y: 10
        text: "Jupiter"
        onClicked: ml="Jupiter"
    }
}

MyLabel.qml

QtQuick.Controls 1.2

    Label {
        id: myLabel
        text: wnd.ml //qsTr("Hello World")
        anchors.centerIn: parent
    }

This code work fine.
For you Is the best way to make this?

Thanks.

Stefano

William McKIE

Hello,

In my opinion, your approach is complex *and evil*. In the words of @SGaist, the approach below is more easier to understand:

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    // ...
    
    Label {
        id: myLabel
        anchors.centerIn: parent
        text: "Stefano"
    }

    Button {
        x: 10
        y: 10
        text: "Moon"
        onClicked: myLabel.text = text
    }

    Button {
        x: 10
        y: 50
        text: "Mars"
        onClicked: myLabel.text = text
    }

    Button {
        x: 10
        y: 90
        text: "Jupiter"
        onClicked: myLabel.text = text
    }
}

Also note the use of 'Item' item as parent in your MyBX.qml fles are unnecessary because the Button item inherits from FocusScope which inherits from Item.

Of course, you would be able to make your own implementation of MyButton.qml - when it's required - that inherits from Button item and implement your own style later.

You can find more information about QML's scope in the documentation.

Sincerely,
William

Stefanoxjx

Hi, you have posted code in only one file.
For small app is ok, but my code was writed in more files because I'm thinking to divide code in many files to simplify reading and maintenance of big app .
Doing these tests I encountered scope problems.
Ok for "Item", I had doubts about this.
Thanks.

Stefano

SGaist

You're getting closer but again, you are doing it in reverse logic. Your buttons shouldn't know anything about your ApplicationWindow. Make them emit a signal containing their text and in MainWindow have something like:

MyB3 {
   id: myB2
   onMySignal: ml = text // text being the name of the parameter of your signal named mySignal
}