SimpleTouchHandler inside VerticalList Item

Question

Hi EW Team,
I have a question relative to the vertical lists and I could not find the info inside the documentation.
I'm using EW 9.20 and I have a vertical list. Inside the list's item I want to have a clickable button : "on / off".

I have a slideTouchHandler to navigate in the list and a singleTouchHandler to select the VerticalList.SelectedItem.

My current implementation does not work (with a singleTouchHandler), is this a limitation of EW 9.20? If not, is it because there's something with overlays of touchHandler ? (one for clicking the selected item, and one for the (on/off feature)

Thank you in advance

Answer 1

Hello Velas,

My current implementation does not work (with a singleTouchHandler), is this a limitation of EW 9.20?

No, there are no limitations. However, it is important to take in account the right stacking order of the touch handler and evtl. the configuration of their retarget condition. Let's assume you want (1) a Vertical List to be scrolled by a Slide Touch Handler, (2) list items to be selectable by a single tap and (3) additional widgets (Push Button, etc.) to be contained inside the items. Then following could work for you:

1. Add to the component containing the Vertical List a Simple Touch Handler.

2. Arrange the Simple Touch Handler behind the Vertical List. This means the Z-Order of the Simple Touch Handler has to be lower than the of the Vertical List. The Z-Order can be seen in Inspector window. See Inspector's Members area.

The Simple Touch Handler can be used to react to taps. You can connect a slot method to the handler's OnRelease property. In the slot method you can evaluate the taped position and select the item at the position. Following could be the implementation of such method. Note the if-condition evaluating the variable AutoDeflected. It is important to detect whether the release is caused because the user really left the finger (AutoDeflected == false) or whether the Simple Touch Handler has resigned and the interaction has be taken over by another touch handler (for example by the Slide Touch Handler):

3. Add to the component containing the Vertical List a Slide Touch Handler.

4. Connect the Slide Touch Handler with the Vertical List.

5. Arrange the Slide Touch Handler behind the Simple Touch Handler. This means the Z-Order of the Slide Touch Handler has to be lower than the of the Simple Touch Handler.

6. Configure the property RetargetCondition of the Simple Touch Handler as shown below. This will have the effect of the handler to 'resign' when you perform a wipe gesture or you touch the handler for longer time.

7. In the component implementing the item add widgets (Push Button, etc.).

With this configuration, when the user hits a button, the button reacts and handles the interaction. When the user taps an item (outside the buttons) the Simple Touch Handler processes the interaction. When you touch and drag the finger, then the Simple Touch Handler resigns (according to its RetargetCondition) and the Slide Touch Handler behind it takes over. Now you can scroll the list.

I hope it helps you further.

Best regards

Paul Banach

Comments

Thank you for the detailled response, I had a solution but yours is much more maintainable and it helped me learn more about the retarget condition parameter.

Answer 2

Nevermind I found another way, by calculating the position of the selector singleTouchHandler for the localPosition of the selected Item. If the localPosition lands on my switch on/off, i send a signal to trigger it.
Not the prettiest but at least functionnal.

 

if (VerticalList.SelectedItem == itemNo) {
    var Application::Item l_selected = (Application::Item)VerticalList.GetViewForItem(itemNo) ;
    if (l_selected == null) {
      trace "view null, error";
      return;
    }
    var Views::Text l_text = (Views::Text)l_selected.FindViewAtPosition(null, l_selected.LocalPosition( SimpleTouchHandler.CurrentPos ), Core::ViewState[]);
    
    if (l_text == null) {
      trace "text null, error";
      return;
    }

    if        (l_text.String == "On/Off") {
      signal l_selected.TriggerOnOff;