manolo / gwtquery-gesture-plugin

A gwtQuery plugin for touch-devices gestures
7 stars 4 forks source link

Events are not fired in Cell #5

Open confile opened 9 years ago

confile commented 9 years ago

I tried to bind tap event to DOM elements in a Cell using UiRenderer. Here is my Cell Class:

import static com.google.gwt.query.client.GQuery.$;
import buddyis.mobile.client.rest.dto.ItemDto;
import buddyis.mobile.client.theme.base.AppCss;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.BrowserEvents;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.query.client.Function;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiRenderer;
import com.google.gwt.user.client.Event;

public class ItemCell extends AbstractCell<ItemDto> {

  public interface Renderer extends UiRenderer {
    void render(SafeHtmlBuilder sb, ItemDto itemDto);
  }

  private static Renderer renderer = GWT.create(Renderer.class);

  @UiField
  Element test;

  public ItemCell() {
    super(BrowserEvents.TOUCHSTART, BrowserEvents.TOUCHEND, BrowserEvents.CLICK, BrowserEvents.TOUCHCANCEL, BrowserEvents.TOUCHMOVE);

    $(test)
    .as(Gesture.Gesture)
    .on("tap", new Function() {
        public boolean f(Event ev) {
          GWT.log("tap ta111p");
          return true;
        }
    });

  }

  @Override
  public void render(com.google.gwt.cell.client.Cell.Context context, ItemDto value, SafeHtmlBuilder sb) {
    renderer.render(sb, value);
  }

}

This is my UiRenderer ui.xml template:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
    ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
    ui:generateLocales='default'>

    <div ui:field="test">
        some text
    </div>

</ui:UiBinder>

I tested on my iPhone5 iOS 7.1.1. There where no touches obtained from my CellList. It works on other elements which are not in the list.

confile commented 9 years ago

@manolo I tested a lot of different things but tab event is not triggered if the handler is registered before the element is in the DOM. The on function should not be influenced by this fact. Event if some elements are not part of the DOM when the handler is registered the event will be triggered.

I tested:

      $(".mytouch", contentList).on("click", new Function() {

      @Override
      public boolean f(Event ev) {
        int index = $(contentList).index($(this).get(0));
        GWT.log("div index: "+index);
        return true;
      }
    });

Does not trigger. It only triggers if I call the handler after I inserted mytouchelements in the contentList. This is not so good because I have to do it on each insertion which would register the handler more than once per object.

This:

    $(contentList).find("div")
      .on("tap", new Function() {
          public boolean f(Event ev) {
            GWT.log("tap ta112345");
            return true;
          }
      });

is also not working and this

    $(".mytouch")
    .on("tap", new Function() {
        public boolean f(Event ev) {
          GWT.log("tap ta112345");
          return true;
        }
    });

is also not working.

Do you have any idea how to fi this?

manolo commented 9 years ago

Is .mytouch a GWT widget?
Is it possible that you attach a small project with the full code to test the issue?