Assigning calculated value to height property

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