Javascript Passing ID's not working.

EatonCode

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 ?

ODБOï

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

EatonCode

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.

ODБOï

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

ODБOï

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

Eeli K

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

EatonCode

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

Eeli K

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

ODБOï

@Eeli-K said in Javascript Passing ID's not working.:

Why do you create your own button code from scratch while there are customizable buttons already in Quick Controls?

Why not ?

Eeli K

@LeLev That's a good answer, but I thought that AbstractButton and those inheriting it already have exclusivity implemented. The looks is fully customizable, so why not use that and avoid duplicating existing functionality, avoid bugs, being able to focus on what you actually need? This is not criticism, just a question to make clear if the original poster is aware of the easier possibilities and capabilities of the Quick Controls. After all, my code implements a whole skeleton application in the amount of code which EatonCode uses to implement changing the exclusive state of the buttons...

BTW, I had an error in the previous post, it was LeLev's code, not EatonCode's which I was referring to as "EatonCode's example". LeLev's code is OK if EatonCode wants to implement buttons with states.

EatonCode

@Eeli-K - Sorry Just started learning this... I created from scratch because that's the way I was taught.

https://www.youtube.com/playlist?list=PLB22HyVdO1GkLFrvRi5vIo5XcWS0EflxD

It's tutorials based in 2013, I am a bit late to the party and all the other tutorials I came across assume you already know the basics. I felt there was a better way of doing things, that's why I posted the question.

I created my button template in 1 qml file and gave it a few properties then used that to create all the buttons you see.

In all the tutorials I have seen so far they mention javascript and CSS but, but from the replies I have gotten this far, it seems writing javascript in the QML is frowned against.

I have been creating all my QML from scratch, but I have noticed when you create a QML UI Form you're not allowed to use javascript, and I assume this is why people are against javascript?

At first, I do admit I did not actually run your code, I was trying to understand the logic behind it. But I did end up building it...

http://www.eatoncode.com/resources/shareit/Screencast_01-12_26-07-2017.mp4

I have not learned models and views yet but I have seen it referenced a few times.