Vaadin 6.8.4 + Touchkit on Android 4.x Browser

Hi,

we discovered some problems in the mentioned combination.
It seems, that the listeners of NavigationButton / Button
get called twice in some situations. I append a small example.

greetings
Ralf
12558.java (3.13 KB)

Hi,

One of my colleague pointed out similar issue with older ipad. Apparently some older browsers fired so called simulated events although they are cancelled. Now this comes up as there is “accelerated buttons” in latest TouchKit. This seems to happen only if the click is “slow”. With fast tap it works at least on ios5 ipad.

I created
an issue ticket
for it added a workaround to TouchKit. Would you test
this snapshot
and let me know if your android device works? We have some Android devices at office, but probably not one that you are using. If the workaround kills the issue on you device I’ll quickly release a new version.

cheers,
matti

Hi,

thanks for the fast response.
Unfortunately, the Snapshot-Version does not make a difference.

BTW, i have the issues with TK Version 2.1.2 and 2.1.1,
it is ok when i switch from Vaadin 6.8.4 back to 6.8.2

greetings
Ralf

Just to mention:
I am using an Acer A700 with Android 4.1.1,
we have the same problems on a Samsung with Android 4.0.3

Hi,

Ok. In that case it appears to be a problem in Vaadin core, not in TouchKit. I’ll try to look into it today with one Android 4 tablet.

cheers,
matti

Hi,

Could you retry with the snapshot now? My workaround appeared to work only on normal button. I rewrote one part and now it seems to work both on ios and android 4. There is probably some change in cores touchscroll stuff that brings this up in 6.8.4. I hope the new snapshot works at least with the latest core.

Thanks in advance!

cheers,
matti

Hi,

i just checked your latest snapshot.
The ‘normal’ Button() seems to be ok, but the NavigationButton() still has problems,
sometimes even the Android Browser crashes on navigating to the sub menu.

I found out, selecting rows in a table is a problem, too.
After tapping on a row, it gets selected, but after that,
it gets deselected immediately, like a second tap.

I will extend my test app and append it later.

That heavy caching is another story, sometimes i see pages,
that are over 20 minutes old, even an application restart
does not change it, if it is done with an other browser
or with eclipse.

greetings
Ralf

Hmm, I tested exactly on the same test case that you sent me. It worked on Android. Gotta see my test devices version when I’m at the office. Probably need to buy some new test devices as well.

The Table issue is probably completely separate and in the Vaadin core. It definitely needs to be addressed as well. Would you file a description and test about it to dev.vaadin.com.

BTW. Don’t know if you knew this already, but when testing with TouchKit with new version, always remember to recompile widgetset. Most browser fixes/workarounds are usually done to the client side code that needs to be compiled to javascript. Then it is often best to first load the application and let it “rest” a moment so that new version of script is loaded to local html5 app cache. Then reload the app.

cheers,
matti

Hi,

sorry for my late answer.
i checked everything again, and it seems to be ok now
with 6.8.4 and your latest 2.1.3 snapshot.
(no double events, and selecting table rows works, too)
may be it was one missing recompile of the widgetset
(but i swear i have done it) or some odd caching thing.

i noticed that styles.css is not cached (or not very long),
changes seem to get to the browser very fast,
but the content of a page can even survive an application
restart…

the performance of scrolling in a table with 1000 items
is very poor on my device, maybe this is another point.
i attach my extended version of my test case.

grretings
Ralf
12562.java (5.16 KB)

Hi,

Good to hear the button issue is now solved. There is now version 2.1.3 in the Directory with this fix.

Scrolling large tables on Android is something I’m afraid we can’t solve easily. The Android browser is just quite slow although your browser should use “native scrolling”. There are notable differences among devices, but I can tomorrow check your example on some of our devices. Google is currently putting its efforts on Chrome branded android browser. Have you tried on its pre releases?

To workaround the issue, you could try making cache rate smaller in Table. In some cases it is better to to display just some parts of the data (using table or vertical component group + navigation buttons) and then show more when user selects an item.

About those page content updates: I’m pretty sure the are from stateful nature of Vaadin. Changes can also survive between server restarts as application servers can serialize sessions to disk and then read the old version of object when restarted. Tricks to overcome this during development:

  • add the infamous “?restartApplication” query parameter to url. That will clear session on each reload of the app and you can see your changes if your IDE has been able to inject new class to your test server. If class change didn’t succeed, you’ll also need to restart the server

  • go pro
    and combine the above with jrebel → less need for server restarts

cheers,
matti

Hi,

I’m still experiencing the problem with the navigation button firing twice. I’m using vaadin 6.8.4 and touchkit 2.1.3. And I’m testing my application on a Samsung Galaxy S II.
When I debug the click handler I get the same event twice with a time difference between 500ms and 1000ms. Never smaller then 500ms probably because this is checked in the client side gwt code. Also the X and Y coordinates of the click event are always -1?

Hi,

Do you have test case I could try to reproduce the issue? There is currently a 500ms threshold, but apparently that might not be enough in all cases. If it is not enough there must be something that is really taking your android browser to its knees. For NavigationButton I could considerer increasing that value blindly as navigationbutton should not be ever clicked twice without a longer timeout. For normal button that will probably be a bad idea.

Click details like x and y position have never worked for NavigationButton. Do you have some real use case for those?

cheers,
matti

Hi Matti,

I want to apologize for my late reply, I didn’t watched the topic so I didn’t got notifications of your response and I was in the assumption nothing changed while actually you answered right away. Again sorry for the mixup on my behalf. Concerning the test case, I currently don’t have one, but I will see what I can do, Concerning the increase of the timeout on the NavigationButton, that would indeed help me a lot because I really see these double clicks often in my application.

Concerning the x and y coordinates on the click event of the navigation button, I just wondered if it was something wrong with my setup, but if you say this is the normal, I can perfectly live with that :slight_smile:

I also agree with you that increasing the timeout on the navigation button solves the issue for navigation buttons but doesn’t solve the problem for standard vaadin buttons. And they too appear to have the same behaviour. For example in my application I have a table with a selection listener and on top of the table I show a popup with a close button, It happens often that when I click the close button the popup closes but also the row in the table underneath the close button is clicked/selected. This off course is not the right behaviour and confuses the user. However I wouldn’t know how to solve this issue nice and easy?

Kind Regards,

Niels

Hi,

I’d really appreciate if you could share a demonstration where it can be reproduced. Also what kind of device do you have, slow or fast? I’ve been about to push the “build button” for a new maintenance release, but I’d still like to fine tune this part if I had a real world example.

The other issue is probably an ancient issue in Table component. It has bit invalid handling of click events and it may interpret a click when e.g. just dragging mouse over a row and then releasing the button. There is a
ticket about it
. Please vote it via
bug fix priority
!

cheers,
matti

Hi,

I tried to reproduce this problem in a very small application but up till now, I can’t reproduce the behaviour. So please don’t let my problem stop you from pushing that “build button”.
For now I solved my problem by subclassing VButton en VNavigationButton and override the onClick() and onTouchEnd() methods respectively. These overridden methods are just empty. So my problem really only occurs when vaadin launches these “simulated” mouse events. For now however I can’t explain why this doesn’t happen in a simple standard application, Probably something stupid on my side. I will investigate this further and let you know if I come up with the real root cause. Thanks for the help!

Kind Regards,

Niels

Hi,

During the weekend I did some further investigation of the problem and I was able to “reproduce” it in a minimal test application.
Apparently I only see the issue (double clicks) when I enable a user scalable view port (and a maximum viewport scale). And even then I only see it 60 to 70% of the time and only on certain phones (see below)

My test case: I started off with the maven archetype which generates a very simple vaadin application that shows a single button, and when you click that button a label is added to the RootPanel. I extended this very simple application by hiding the original button when it is clicked and showing another button in that same place. Obviously when I click the first button once. I want the label to appear but I don’t want to trigger the second button (the one that replaces the first button, because I simply didn’t clicked it). But this is what happens on my smartphone.

I tested it on:

  • Samsung S II (Android 4.0.3 and 4.0.4) → Has the issue
  • HTC One X (Android 4.0.4) → Has the issue
  • Samsung Galaxy Nexus (Android 4.1, with chrome as standard browser) → Does not have the issue in the chrome browser, but does have the issue in the dolphin browser)
  • Samsung spica i5700 (Android 2.1, older phone) → Does not have the issue
  • IPhone 4S (iOS6) → Does not have the issue
    → It appears that this is a general issue on Android 4 devices and that it is fixed on Android 4.1 (probably by the upgrade from the android stock browser to the chrome browser), haven’t tested it on a Android 2.3?

I posted the code on my dropbox:
https://www.dropbox.com/sh/u4pyj4xc6mpv279/VbL4OuLH_H

To be complete I will also include the code of my main application below:


package vaadinDoubleClickTest;

import com.vaadin.addon.touchkit.ui.TouchKitApplication;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class MyVaadinApplication extends TouchKitApplication
{
    @Override
    public void init() {
        super.init();
        // THIS STUFF BREAKS IT!!!
        getMainWindow().setViewPortUserScalable(true);
        getMainWindow().setViewPortInitialScale(1.0f);
        getMainWindow().setViewPortMaximumScale(4.0f);

    }

    @Override
    public void onBrowserDetailsReady() {

        final Button button = new Button("Click Me");
        final Button forbiddenButton = new Button("DON'T Click Me");
        final CssLayout layout = new CssLayout();
        button.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                event.getButton().setVisible(false);
                forbiddenButton.setVisible(true);
                getMainWindow().addComponent(new Label("Thank you for clicking"));
            }
        });
        forbiddenButton.addListener(new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                event.getButton().setVisible(false);
                button.setVisible(true);
                MyVaadinApplication.this.getMainWindow().showNotification("DON'T touch me", Window.Notification.TYPE_ERROR_MESSAGE);
            }
        });
        forbiddenButton.setVisible(false);
        getMainWindow().addComponent(button);
        getMainWindow().addComponent(forbiddenButton);
    }

    
}

Please feel free if you have any questions or if I wasn’t clear in my explanation.

Thanks in advance,
Kind Regards,

Niels