Buttons and MenuItems does not respond to touch event

[oeway]

Hi, I have a compiled java app that now works on mobile devices, however, the UI elements doesn't seem to respond to touch event. I had to patch manually one by one to forward the touchstart to click() call.

[carlopi]

We are aware that improvement in this area would be beneficial, but we are currently prioritizing other developments of CheerpJ and cannot commit to a time frame to have this implemented.

Did you manage to have the app working on mobile/Ipad with the forwarding?

[oeway]

Thanks for the quick response. The menu item works on mobile, but I noticed that I will need to scan all the UI elements including buttons and input boxes, also I have windows that require the user to draw on it, I will need to forward also touchmove touchend. The solution will be a bit hacky and unreliable.

I am wondering if there is any way that I can solve it from the "root", any suggestions?

On Fri 28 Aug 2020 at 16:50, Carlo Piovesan [email protected] wrote:

We are aware that improvement in this area would be beneficial, but we are currently prioritizing other developments of CheerpJ and cannot commit to a time frame to have this implemented.

Did you manage to have the app working on mobile/Ipad with the forwarding?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/leaningtech/cheerpj-meta/issues/89#issuecomment-682652490, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADU3SZ22GEXEMEN6QQV3BTSC672RANCNFSM4QOGLW4Q .

[carlopi]

I will discuss it with the rest of the development team, and we will get back in a few days with what we think are the options for this situation.

[angilbert]

I made a AWT button work on an iPad by adding a MouseListener as well as an ActionListener. When the button was touched then "mouseClicked()" was called. My event handler looks something like this...

  public class catchClickEvent extends MouseAdapter implements ActionListener
  {
    public void actionPerformed(ActionEvent ev) {
      processClickEvent(ev.getSource());
    }
    public void mouseClicked(MouseEvent ev) {
      processClickEvent(ev.getSource());
    }
  }

[oeway]

Thanks for testing, yes, I can confirm the buttons are working, but not the menu and input boxes.

Could you try a java.awt.MenuItem? I can open the menu but not able to click on the menu item.

I also noticed that java.awt.Frame is neither draggable nor resizable.

Currently I am using the following hacky solution to get most of the input elements working:

// setup a hook for fixing mobile touch event
const _createElement = document.createElement;
function touchClick(ev){
    ev.target.click();
    ev.preventDefault();
    if(["UL", 'LI', "BUTTON", "INPUT", "A"].includes(ev.target.tagName))
    ev.stopPropagation();
}
document.createElement = function (type){
    const elm = _createElement.call(document, type);
    elm.addEventListener("touchstart", touchClick, false);
    return elm
}

[angilbert]

I should explain, I don't work for LT. I am evaluating CheerpJ for my own purposes, and happened to notice the same issue as you, a week or two ago. I concur the fix does not work for MenuItem because MenuItem does not support MouseListener. I think the issue is with ActionListener specifically.

Have you tried using latest/loader.js (rather than 2.1?). The behaviour seems to be much improved.

[oeway]

I see, thanks for the clarification and sharing your thoughts.

I just tried 20200819/loader.js, 20200819_2/loader.js and 20200727/loader.js which I found in the recent chats in the gitter channel. However, non of them work for my app (https://ij.imjoy.io), they all complains an error: Uncaught (in promise) sun/font/FileFontStrike.

Do you have a specific version url that I can try?

[marsicplusplus]

@oeway the issue related to the FileFontStrike class was solved with today's build of cheerpj: 20200831

[oeway]

@oeway the issue related to the FileFontStrike class was solved with today's build of cheerpj: 20200831

Thank you! I confirm that it works now.

[oeway]

I just tired 20200831, it seems the touch support haven't change much, the menu item still not clickable, buttons as well (NOTE: many of the generated buttons are actually <input type="button">).