Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

List element label is invisible when a script is working!



  • 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!



  • 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:-

    0_1561533432974_73a62dee-01da-430f-bfa8-93c6cd34fc72-image.png

    In the logs iam just printing the text.

    Logs:-

    0_1561533493770_95eb348f-fbfb-4872-bbd3-696d82dc22c9-image.png

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


  • Qt Champions 2018

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



  • @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!



  • @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;
        }
    
    }
    


  • @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:-

    0_1561535751790_b1f7911f-600a-4ae9-a964-569e7d76d955-image.png

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



  • @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: { //...
    


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



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



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



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



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


Log in to reply