Unsolved Javascript Passing ID's not working.
-
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:mainBtn02onClicked{ 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.mp4Here 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.2Window {
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.htmlrunning 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?
-
@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 ?
-
@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.
-
@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.