A simple QML component test

tomy

Hi,

Please take a look at this project.
MyText.qml:

import QtQuick 2.9

Text {
     width: 30; height: 30
     text: "Right"
     color: "green"
     font.pixelSize: 20
     visible: false
}

main.qml:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 720
    height: 620
    title: qsTr("QML Test")

    Rectangle {
        id: container

        MyText {
            id: myText
            x: 200; y: 200
        }
        
        myText.visible: true
    }
}

I get this error:

qrc:/main.qml:17: Cannot assign to non-existent property "myText"

Why does the Qt Creator show this error and how to solve it please?

ODБOï

@tomy Hello,
You have this error because of line "myText.visible: true",

Rectangle { // Container
id: container

    MyText {
        id: myText
        x: 200; y: 200
    }
    
    myText.visible: true // here is your error,  because myText is not a property of  container

} // END container

in fact you are trying to assign a value but you are not inside a function, and not inside your Item..

You can directly change 'visible' property of your 'MyText' like this :

MyText {
id: myText
x: 200; y: 200
visible:true // change is inside 'myText'
}

or if you want to access from outSide by id, enywhere in your main qml file :

Component.onCompleted : myText.visible = true; // (this is javascript so '=' and not ' : ' )

I hope this will help you

tomy

@LeLev
Thank you.
But two subjects: inside a function or a Timer (out of the component) we could use myText.visible.

And the other, apparently we can call a function from inside another function or Timer.

Are my assumptions right? Are there any general rules about these two?

ODБOï

@tomy you can access properties from any Javascript not necessarily Timer or Function :

function setVisible(){
myText.visible = true
}

function autherFunction(){ // this will call 'setVisible()'
setVisible();
}

signal doWork // custom signal
onDoWork : { // automaticaly generated Handler for 'doWork' signal
// myText.visible = true // OK
// setVisible() // OK
// autherFunction() // OK
}
exemples :

Timer {
onTriggered: {
// myText.visible = true // OK
// setVisible() // OK
// autherFunction() // OK
}
}
MouseArea{
onClicked : {
// myText.visible = true // OK
// setVisible() // OK
// autherFunction() // OK

      //doWork() //  emit signal : so handler 'onDoWork' is called

}
}

There are auther manners to use javascript in QML; more info here :
http://doc.qt.io/qt-5/qtqml-javascript-expressions.html

tomy

@LeLev
Thank you very much, but could you please use code tags for your code to be read easily?

ODБOï

@tomy ```
import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

Window {
visible: true
width: 640
height: 480
title: qsTr("JS in QML")

signal aSignal // mySignal
 //Component.onCompleted: aSignal() //you can emit your signal whenever you want  'on<SignalName>' will be executed
 onASignal: myText.visible = true

// Component.onCompleted: myText.visible = true // you can directly change property accessing item by id


//function 1 
function changeVisible(e){
    e.visible = !e.visible
}

//function 2 
function changeVisible1(){
    myText.visible = !myText.visible
}


Button{
    onClicked: changeVisible(myText) // Using function 1
  //onClicked: changeVisible1() // Using function 2


    text : myText.visible ? "Hide" : "Show"  // Using JS for binding
}

MyText{
    id:myText
    anchors.centerIn: parent
}

}

 just exemples of using js in QML

tomy

Thank you very much.

ODБOï

@tomy you're welcome ;)