Hi
In one of the scenes in my app, there are too many buttons to fit on the screen size.
Therefore I would need to implement a scrollable view.
I think the easiest way to do this is to implement a MultiTouchArea and enable the drag in the Y Axis.
In order to do this, I have to make sure the MultiTouchArea’s height is long enough to contain/cover all of the buttons in the scene.
I do not want to hard code this, as that would be clumsy.
I’d rather calculate the height based on the number of buttons that will be displayed in the screen based on the json file read/parsed.
This is the whole code:
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import VPlay 1.0
SceneBase {
property bool onOrOff
onOnOrOffChanged: {
toggleSplBtn.color = (onOrOff == true) ? "red" : "darkblue"
}
Sound {
id: soundChosen
}
SimpleButton {
id: toggleSplBtn
anchors.top: parent.top
anchors.right: parent.right
text: "Spell"
Component.onCompleted: {
if(onOrOff == true){
toggleSplBtn.color = "red"
}else{
toggleSplBtn.color = "darkblue"
}
}
onClicked: {
onOrOff = !onOrOff
console.debug(onOrOff)
}
}
SimpleButton {
anchors.left: parent.left
anchors.bottom: parent.bottom
text: "Back"
onClicked: {
console.debug("BACK TO MAIN MENU")
window.state = "menu"
}
}
Scene {
id: movableScene
MultiTouchArea {
//anchors.fill: parent
width: parent.width
height: parent.height
//NOTE: I want to set height above based on the calculation below
enabled: true
multiTouch.target: parent
multiTouch.dragAxis: MultiTouch.YAxis
multiTouch.maximumY: 0
onPressed: {
console.debug("multi touch for movableScene")
}
}
EntityManager {
id: entityManager
entityContainer: movableScene
}
property url jsonFile: "json/ThirtyConsonantsWithVowels.json"
Component {
id: btnComp
EntityBase {
id: entityBaseX
property int index: 1
property string character
property double spacing: 50
property double widthValue: 40
property double heightValue: 40
property double numOfCol: 8
property double widthOfSet: numOfCol * spacing
entityId: index
entityType: "buttonEntity"
SimpleButton {
id: btn
property int col: index % numOfCol + 1
property int row: Math.floor(index / numOfCol) + 1
x: col * spacing + (parent.parent.width - widthOfSet)/2 - spacing + (spacing - widthValue)/2
y: row * spacing
width: widthValue
height: heightValue
//text: col + "/" + row
text: character
onClicked: {
console.debug("button " + btn.text + " clicked")
if(onOrOff){
soundChosen.source = "snd/" + btn.text + "-complete" + ".wav"
soundChosen.play()
}else{
soundChosen.source = "snd/" + btn.text + ".wav"
soundChosen.play()
}
console.debug(soundChosen.source)
}
}
Component.onCompleted: console.debug("btn created " + index)
}
}
Component.onCompleted: {
console.debug("consonantsPlusVowelsScene - Component.onCompleted")
console.debug(jsonFile)
console.debug("inside consonantsPlusVowels")
var data = fileUtils.readFile(jsonFile)
console.debug(data)
var jsonObj = JSON.parse(data)
console.debug("jsonObj")
console.debug(jsonObj)
for(var i = 0; i < jsonObj.length; i++)
{
console.debug(jsonObj[i])
entityManager.createEntityFromComponentWithProperties(btnComp, {index: i, character: jsonObj[i]})
console.debug("create button")
}
//console.debug("CHECK CHECK CHECK CHECK")
//console.debug("entityBaseX.numOfCol")
//console.debug(entityBaseX.numOfCol)
//var numOfRow = jsonObj.length / entityBaseX.numOfCol
//console.debug("numOfRow is below " + numOfRow)
//console.debug(numOfRow)
//movableScene.height = numOfRow * btn.spacing
//movableScene.height = 100
}
}
}
The main area of concern in the above code is:
MultiTouchArea {
//anchors.fill: parent
width: parent.width
height: parent.height
//NOTE: I want to set height above based on the calculation below
enabled: true
multiTouch.target: parent
multiTouch.dragAxis: MultiTouch.YAxis
multiTouch.maximumY: 0
onPressed: {
console.debug("multi touch for movableScene")
}
}
But instead of “height: parent.height” above, I would like to assign a value to height that is based on a calculation done inside the Component.onCompleted block.
Is this possible???
How?
Thank you