Javascript Passing ID's not working.



  • I have 10 rectangles with id.. I want to change all to a certain state except the one that was clicked last.

    I am trying to create a function in QML that will change the states..

    I am calling my function on a clicked button evert like this..

    testIt("mainButton02")
    

    Here is my simple function.

        function testIt(a)
        {
            mainButton02.buttonShowAsClicked = false
            mainButton03.buttonShowAsClicked = false
            mainButton04.buttonShowAsClicked = false
            mainButton05.buttonShowAsClicked = false
            mainButton06.buttonShowAsClicked = false
            mainButton07.buttonShowAsClicked = false
            mainButton08.buttonShowAsClicked = false
            mainButton09.buttonShowAsClicked = false
            mainButton10.buttonShowAsClicked = false
            mainButton11.buttonShowAsClicked = false
    
    
            //why does this not work ?
            //a.buttonShowAsClicked = true
            
            //this one works just fine
            mainButton03.buttonShowAsClicked = true
    
    }
    

    I am not understanding why I can't get

    a.buttonShowAsClicked = true
    

    to work correctly... Is this a conversion that I am missing to turn text into the ID of the element ?

    I have also tried...

    testIt(id)
    

    without success...

    What am I missing ?



  • Hey !

    I just read a few times your question but i cant realy understand your code.., here :

    function testIt(a)
    {
    mainButton02.buttonShowAsClicked = false
    mainButton03.buttonShowAsClicked = false
    mainButton04.buttonShowAsClicked = false
    mainButton05.buttonShowAsClicked = false
    mainButton06.buttonShowAsClicked = false
    mainButton07.buttonShowAsClicked = false
    mainButton08.buttonShowAsClicked = false
    mainButton09.buttonShowAsClicked = false
    mainButton10.buttonShowAsClicked = false
    mainButton11.buttonShowAsClicked = false
    }

    Our function 'testIt(a)' dosn't know 'mainButton02/mainButton03/mainButton04...' .

    This function can only manipulate one value passed by parameter : '(a)'

    *My solution : deal with this using property bindings...

    lets imagine a button :

    /** ur app....

    property int intToTest // a click on eatch btn will change this value

    **/
    MainButton02{
    id: mainBtn02
    height:50
    width:100
    color:"red"

      //here our property bindings
    
     buttonShownAsClicked :  intToTest == 2    
     
    state : buttonSownAsClicked===true ? "Clicked State Name"  :  "Not Clicked State Name"   // state will follow    buttonShownAsClicked; if True  Clicked State else  Not Clicked State
    

    MouseArea{
    anchors.fill:mainBtn02

     onClicked{
             intToTest = 2
        }
    }
    

    }

    thx
    LA



  • Hi. Well just trying to learn QML as I go.. I have 10 buttons but I only want to show 1 as clicked at a time.

    I got it working .. but I feel it can be done better...
    http://www.eatoncode.com/resources/shareit/Screencast_11-59_17-07-2017.mp4

    Here is the code I currently have..

        function testIt(a)
        {
    		//disable all
            mainButton02.buttonShowAsClicked = false
            mainButton03.buttonShowAsClicked = false
            mainButton04.buttonShowAsClicked = false
            mainButton05.buttonShowAsClicked = false
            mainButton06.buttonShowAsClicked = false
            mainButton07.buttonShowAsClicked = false
            mainButton08.buttonShowAsClicked = false
            mainButton09.buttonShowAsClicked = false
            mainButton10.buttonShowAsClicked = false
            mainButton11.buttonShowAsClicked = false
    
    
    		//enable only 1
            if (a === "mainButton02")
            {
                mainButton02.buttonShowAsClicked = true
            }
            else if (a === "mainButton03")
            {
                mainButton03.buttonShowAsClicked = true
            }
            else if (a === "mainButton04")
            {
                mainButton04.buttonShowAsClicked = true
            }
            else if (a === "mainButton05")
            {
                mainButton05.buttonShowAsClicked = true
            }
            else if (a === "mainButton06")
            {
                mainButton06.buttonShowAsClicked = true
            }
            else if (a === "mainButton07")
            {
                mainButton07.buttonShowAsClicked = true
            }
            else if (a === "mainButton08")
            {
                mainButton08.buttonShowAsClicked = true
            }
            else if (a === "mainButton09")
            {
                mainButton09.buttonShowAsClicked = true
            }
            else if (a === "mainButton10")
            {
                mainButton10.buttonShowAsClicked = true
            }
            else if (a === "mainButton11")
            {
                mainButton11.buttonShowAsClicked = true
            }
    
        }
    

    I call it like this..

    testIt("mainButton03")
    

    Example

        MainButton {
            id:mainButton03
            buttonImageSource: "/icons/moreMenu.png"
            buttonWidth: interfaceMainRec.width
            buttonHeight: 50
            buttonText: ""
            y: 150 //start at
            onButtonClicked: {
    
                testIt("mainButton03")
    
                pageThree()
            }
        }
    
    
    
        MainButton {
            id:mainButton04
            buttonImageSource: "/icons/moreMenu.png"
            buttonWidth: interfaceMainRec.width
            buttonHeight: 50
            buttonText: ""
            y: 150 //start at
            onButtonClicked: {
    
                testIt("mainButton04")
    
                pageThree()
            }
        }
    

    I was hoping I could do something like this..

        function testIt(a)
        {
            var myStringArray = ["mainButton02","mainButton03","mainButton04","mainButton05","mainButton06","mainButton07","mainButton08","mainButton09","mainButton10","mainButton11"];
            var arrayLength = myStringArray.length;
            for (var i = 0; i < arrayLength; i++) {
                    if (a === myStringArray[i])
                       {
                        myStringArray[i].buttonShowAsClicked = true
                    }
                    else
                       {
                        myStringArray[i].buttonShowAsClicked = false
                    }
               }
        }
    

    and call it like this...

        MainButton {
            id:mainButton03
            buttonImageSource: "/icons/moreMenu.png"
            buttonWidth: interfaceMainRec.width
            buttonHeight: 50
            buttonText: ""
            y: 150 //start at
            onButtonClicked: {
    
                testIt(id)
    
                pageThree()
            }
        }
    
    
    
        MainButton {
            id:mainButton04
            buttonImageSource: "/icons/moreMenu.png"
            buttonWidth: interfaceMainRec.width
            buttonHeight: 50
            buttonText: ""
            y: 150 //start at
            onButtonClicked: {
    
                testIt(id)
    
                pageThree()
            }
        }
    

    I hope that gives everyone a bit more info on what I am trying to do.



  • Hi,

    This is a menu exemple i just did, without any Js code. I use property bindings
    /* Btn.qml*/

    import QtQuick 2.0

    Rectangle {

    id:root
    state : "normal"
    
    signal clickSignal // this signal is emited when we click inside mousearea
    

    MouseArea{
    anchors.fill: parent
    onClicked: clickSignal()
    }

    states: [ // our 2 states
    State{
    name: "normal"
    PropertyChanges { target: root; color: "grey" }
    },

                State{
                        name: "clicked"
                         PropertyChanges { target: root; color: "red" }
                 }
    
            ]
    

    }


    /main.qml/
    import QtQuick 2.6
    import QtQuick.Window 2.2

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("menu exemple")

    property int menuIndex : 0 //
    
    
    Row{ // simple row to put our buttons
         anchors.centerIn: parent
         spacing: 15
    
         Btn{
            id:btn1
            height: 50
            width: height
    
            state: menuIndex === 1 ? "clicked" : "normal"
    
            onClickSignal: menuIndex = 1
         }
    
        Btn{
            id:btn2
            height: 50
            width: height
    
            state: menuIndex === 2 ? "clicked" : "normal"
    
             onClickSignal: menuIndex = 2
        }
    
        Btn{
            id:btn3
            height: 50
            width: height
    
            state: menuIndex === 3 ? "clicked" : "normal"
    
             onClickSignal: menuIndex = 3
    
        }
    
    }
    

    }

    thx
    LA



  • *Or i should say "without any JS Function" not "code"



  • @EatonCode I hope everyone would always at least tell what Controls version they are using, or better, give the import statements they use. If you use Controls2 you have several options to create something like the screencast you gave. For example:

    import QtQuick 2.8
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.3
    Window {
        visible: true
        width: 640
        height: 480
    
        RowLayout {
            anchors.fill: parent
            ListView {
                id: tabbar
                orientation: ListView.Vertical
                implicitWidth: 200
                Layout.fillHeight: true
                delegate: Button {
                    checkable: true
                    autoExclusive: true
                    text: model.text
                    onClicked: {
                        tabbar.currentIndex = model.index
                    }
                }
                model: ListModel{
                    ListElement {text:"button1"}
                    ListElement {text:"button2"}
                    ListElement {text:"button3"}
                }
                Component.onCompleted: {
                    // initialize the checked button/page
                    // when the list is created
                    currentIndex = 1;
                    currentItem.checked = true;
                }
            }
            StackLayout {
                currentIndex: tabbar.currentIndex
                Label {text: "page1"}
                Label {text: "page2"}
                Label {text: "page3"}
            }
        }
    }
    
    

    I've got the impression you're trying to use QML without declarative features.



  • @LeLev Looking at your code and learning more about State.
    doc.qt.io/qt-5/qtquick-statesanimations-states.html

    running the code in my head if that's possible being so new.. where is the magic code that if you had 10 of these buttons and you only wanted 1 in a certain state at one time would change the other 9 states back to default?

    Is this newbie missing something?



  • @EatonCode Do you understand how property bindings work? It's crucial for using effective (or any kind of) QML. In EatonCode's example clicking a button changes the menuIndex property and each button's state is bind to that property. But your higher level goal could be achieved with higher level means, in this case models and views, like in my example above. Did you try that, it's a standalone main.qml? Why do you create your own button code from scratch while there are customizable buttons already in Quick Controls?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.