List element label is invisible when a script is working!

[closx]

Hello all, this may be a tricky problem :C
I have a list model like that,
//
school.qml

LeftTextMenu{
                id:leftMenu
                model:schoolStuff
                selection: true
                onClicked: function(ind)
                {
                    changeTarget(ind+1);
                }
            }

//                WorkerScript {
//                id: worker
//                source: "qrc:/scripts/modelworker.js"
//                }

            ListModel{
                id: schoolStuff
                ListElement{
                    name: qsTr("My Grades")
                    target: 1
                    selected: false
                }
                ListElement{
                    name: qsTr("GPA Calculator")
                    target: 2
                    selected: false
                }
                ListElement{
                    name: qsTr("Academic Calendar")
                    target: 3
                    selected: false
                }
            }

            Repeater {
                model:schoolStuff
                Text {
                    text: name
                }
            }

If I enable the WorkerScript, labels become invisible. And if I disable it, labels goes visible, but app does not understands that the item is selected, colors won't change, console longs won't be printed etc... Following script,
//
modelworker.js

WorkerScript.onMessage = function(msg) {
                        var ind = msg.ind;
                        var model = msg.model
                        for(var i=0;i<model.count;i++)
                        {
                         model.setProperty(i,"selected",false);
                        }
                        console.log("index : "+ind);
                        model.setProperty(ind,"selected",true);
                        model.sync();
}

What can be causing this guys? And how can I solve this?
Thanks!

[Shrinidhi Upadhyaya]

Hi @closx , there are few mistakes in your code, i have changed your code and have written a sample code which will help you achieve your functionality.

• Dont use a repeater inside the ListView, you should just specify the delegate, if you are using something like a ColumnLayout then you can use a repeater.

Sample Code:-

  ListView{
    id:leftMenu

    model: schoolStuff
    width: 100
    height: 100

    delegate: Text {
        id: txt

        text: name
        color: activeFocus ? "red" : "black"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                txt.forceActiveFocus()
                console.log(text)
            }
        }
     }
  }

  ListModel{
    id: schoolStuff

    ListElement{
        name: qsTr("My Grades")
        target: 1
        selected: false
    }
    ListElement{
        name: qsTr("GPA Calculator")
        target: 2
        selected: false
    }
    ListElement{
        name: qsTr("Academic Calendar")
        target: 3
        selected: false
     }
  }

• So when you click on the text the color of the text will change to red.

Sample Output:-

In the logs iam just printing the text.

Logs:-

Note:- You can remove the target and selected property from the ListModel i guess because you were using them just for highlighting.

[GrecKo]

@Shrinidhi-Upadhyaya said in List element label is invisible when a script is working!:

Dont use a repeater inside the ListView, you should just specify the delegate

There's no ListView in OP's code though.

@closx What is LeftTextMenu?

[closx]

@Shrinidhi-Upadhyaya You are the best! Thanks for your answer!
Actually, I need the target and that "index" function. Because when you select the item, something changes in screen and it is connected to that "target" and stuff.
I have my code changed like that,

            LeftTextMenu{
                id:leftMenu
                model:schoolStuff
                selection: true
//                onClicked: function(ind)
//                {
//                    changeTarget(ind+1);
//                }
                delegate: LeftTextButton {
                    id: txt
                    text: name
                    color: activeFocus ? GSystem.leftTextMenuItemPressedColor : GSystem.leftTextMenuItemColor
                    MouseArea {
                        anchors.fill: parent
                        onClicked: function(ind){
                            txt.forceActiveFocus();
                            console.log(text);
                            changeTarget(ind+1);
                        }
                    }
                 }
            }

//                WorkerScript {
//                id: worker
//                source: "qrc:/scripts/modelworker.js"
//                }

            ListModel{
                id: schoolStuff
                ListElement{
                    name: qsTr("My Grades")
                    target: 1
                    selected: false
                }
                ListElement{
                    name: qsTr("GPA Calculator")
                    target: 2
                    selected: false
                }
                ListElement{
                    name: qsTr("Academic Calendar")
                    target: 3
                    selected: false
                }
            }

So, backgrounds are changing by selecting the button now. But it is like stucked in the first page "My Grades"...
Again, thanks for your help!

[closx]

@GrecKo Hello,
LeftTextMenu is a preset that I use for menus. It calls another preset "LeftTextButton" and does the setting. For ex,
LeftTextButton.qml

import QtQuick 2.0
import ck.gmachine 1.0

Rectangle {
    id: root
    property alias text: caption.text
    property alias area: marea
    property color clickbg: GSystem.leftTextMenuItemPressedColor
    property color bgcolor: GSystem.leftTextMenuItemColor
    property bool selection: false

    width:200
    height:75
    anchors.horizontalCenter: parent.horizontalCenter
    color:bgcolor
    Text{
        id:caption
        font.family: GSystem.myriadproita.name
        font.italic: true
        font.pixelSize: 24
        color: "white"
        anchors.centerIn: parent
    }
    MouseArea{
        id:marea
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
//        onPressed: color = clickbg;
//        onReleased: color = bgcolor;
    }

}

[Shrinidhi Upadhyaya]

@GrecKo , i thought he had custom ListView, as the name suggested a menu and he was also assinging it a model, if iam wrong iam sorry :-)

@closx , if you are using a ListView and then you can just update the currentIndex,

leftMenu.currentIndex = index
console.log(text)
console.log(leftMenu.currentIndex)

So when you click on the Text the currentIndex of the ListView will get updated.

Logs:-

If you tell me what is expected UI and what you want to do, maybe i could suggest a better solution.

[closx]

@Shrinidhi-Upadhyaya Hello and thanks for your answer!
Actually, Now I understood what @GrecKo asked to me. Well, LeftTextMenu is a ListView inside a Rectangle. The root is rectangle.

Rectangle {
           id:root
           x:0
           clip:true
           anchors.verticalCenter: parent.verticalCenter
           property alias delegate: mview.delegate
           property alias model: mview.model
           property bool selection: false
           signal clicked(int index)
           signal released(int index)
           color: GSystem.leftTextMenuColor
           width: GSystem.leftTextMenuWidth
           height:GSystem.leftTextMenuHeight
           ListView{
                id:mview
                interactive: false
                anchors.verticalCenter: root.verticalCenter
                anchors.verticalCenterOffset: 20
                spacing:20
                delegate: txtmenudlg
                width:root.width
                height: mview.model.count * 95
                focus:true
           }

        Component {
            id:txtmenudlg
            LeftTextButton{
                   id:wrapper
                   text :qsTr(name)// + mytrans.emptyString
                   bgcolor:(model.selected)?GSystem.leftTextMenuItemPressedColor:GSystem.leftTextMenuItemColor
                   area.onPressed: { //...

[closx]

Hello all, I finally figured it out what is wrong. It is a known QT bug (QTBUG-32850). (see more: https://bugreports.qt.io/browse/QTBUG-32850)
qsTr is not working with javascript and QT_TR_NOOP cannot be translated. So I got my whole software translated (316 labels) but I cannot translate JUST THREE OF THEM :( I guess I am going to create 4 pages for 4 languages and make the language difference by page difference...
Does anyone knows how can I solve? -patch on the website I just mentioned does not work-

[KroMignon]

@closx said in List element label is invisible when a script is working!:

is a known QT bug (QTBUG-32850)

Which Qt Version you are using? This bug has been closed since Qt 5.2.1

[closx]

@KroMignon Oh! mine is 5.12.3 lmao
So this should not be the bug I am talking about right :D
But what else can it be?
Use the javascript -> qsTr does not visible, functions works
Do not use -> qsTr visible, functions wont work

[KroMignon]

@closx said in List element label is invisible when a script is working!:

But what else can it be?

I guess you have a JavaScriptEngine error, something in your JavaScript and/or QML try to access to something which is not define or null.
This is why I reduce as much as I can JavaScript and QML and move all whatever possible to C++/native world. On JSEngine error the execution just stop on error and continue with next event... It is very hard to find them because you have to go through each case to be sure nothing has been misspelled!

Can you see any QML warning/error in debug console?

[closx]

@KroMignon said in List element label is invisible when a script is working!:

@closx said in List element label is invisible when a script is working!:

But what else can it be?

I guess you have a JavaScriptEngine error, something in your JavaScript and/or QML try to access to something which is not define or null.
This is why I reduce as much as I can JavaScript and QML and move all whatever possible to C++/native world. On JSEngine error the execution just stop on error and continue with next event... It is very hard to find them because you have to go through each case to be sure nothing has been misspelled!

Can you see any QML warning/error in debug console?

I guess that is the disappointing part of QML. There is no any error message or warning. I should always find what is wrong. I guess that is why I always asking questions to the experts here :D After I started to learn QML, I learned how faultless C++ is... Thanks for your attention! I will focus on another solution method!
See you :D