How to handle touch events of custom control in blackberry10

Question

I have a custom control called customContextMenu.qml, which has an image and label in each row. I want to handle the click/touch on that image and label together. How should I do that?

Currently, I add onTouch() in each container containing image and label, but it's not working. I am using that customContextMenu control in my main.qml.

Container {

  id: testPageCustomMBoxContainer
  objectName: "testPageCustomMBoxContainer"

  background:dropdownBack.imagePaint
  attachedObjects: [
    ImagePaintDefinition {
      id: dropdownBack
      repeatPattern: RepeatPattern.Fill
      imageSource: "asset:///images/dropdown_bg.png"
    }
  ]

layout: StackLayout {
  orientation: LayoutOrientation.TopToBottom  
}

maxWidth: 200.0 
maxHeight: 180.0
horizontalAlignment: HorizontalAlignment.Right
verticalAlignment: VerticalAlignment.Top

Container {

  id: testPageCustomMBoxRetestContainer
  objectName: "testPageCustomMBoxRetestContainer"

  preferredWidth:200.0
  preferredHeight:90.0 
  layout: StackLayout {
    orientation: LayoutOrientation.LeftToRight   
  }

  leftPadding: 10.0
  topPadding: 10.0
  bottomPadding: 10.0
  rightPadding: 20.0
  ImageView {
    imageSource: "asset:///images/retest.png"
    scalingMethod: ScalingMethod.AspectFit
    verticalAlignment: VerticalAlignment.Center
    layoutProperties: StackLayoutProperties {
      spaceQuota: 1.0
    }
  }

  Label {
    text: "Retest"
    horizontalAlignment: HorizontalAlignment.Right
    verticalAlignment: VerticalAlignment.Center
    textFormat: TextFormat.Plain

    layoutProperties: StackLayoutProperties {
      spaceQuota: 3.0
    }
  }

  onTouch: {    
    var retestPage = retestPage.createObject();
    testNavigationPane.push(retestPage);
  }
  attachedObjects: [
    ComponentDefinition {
      id:retestPage
      source: "main.qml"
    }
  ]
}
Container {

  id: testPageCustomMBoxHelpContainer
  objectName: "testPageCustomMBoxHelpContainer"

  preferredWidth: 200.0 
  preferredHeight: 90.0 
  layout: StackLayout {
    orientation: LayoutOrientation.LeftToRight
  }

  leftPadding: 10.0
  topPadding: 5.0
  bottomPadding: 15.0
  rightPadding: 20.0
  ImageView {
    imageSource: "asset:///images/help.png"
    scalingMethod: ScalingMethod.AspectFit

    verticalAlignment: VerticalAlignment.Center

    layoutProperties: StackLayoutProperties {
      spaceQuota: 1.0
    }
  }

  Label {
    text: "Help"
    horizontalAlignment: HorizontalAlignment.Right
    verticalAlignment: VerticalAlignment.Center
    textFormat: TextFormat.Plain 
    layoutProperties: StackLayoutProperties {
      spaceQuota: 3.0
    }

    onTouch: {
      var helpPage = helpPage.createObject();
      testNavigationPane.push(helpPage);
    }
    attachedObjects: [
      ComponentDefinition {
        id: helpPage
        source: "helpPage.qml"
        Page {
          paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
              onTriggered: {
                testNavigationPane.pop();
              }
            }
          }
        }
      }
    ]
  }
}

Answer 1

You need to use gesture handlers for things such as Touched or LongPressed. The onTouch event would only be used if you are trying to do something while the user holds their finger down or similar. Here is an example of code to show the differences between the two:

//Touched event - only fires if user touches and lets go of element.
//This is the preferred method
gestureHandlers: [
    TapHandler {
        onTapped: {
            //Code goes here
        }
    }
]

//Display active image if touched
//This would be used for something such as changing a background color of a button when pressed.
onTouch: {
    if (event.touchType == TouchType.Down) {
        //Do something on down touch - e.g. change background color
    } else if (event.touchType == TouchType.Up || event.touchType == TouchType.Cancel)     {
       //Users finger has been lifted OR has left the element.
    }
}