Windows 8 Tablet problems

Hello,

We are running into some problems when we try to deploy our application, created with RhoMobile, on tablets that are running a full version of Windows 8. Whenever we start our application (or any application made with RhoMobile) we cannot click on any links. When we click on a simple link like:

<a href="<%= url_for( :controller => :Example ) %>">Example link</a>

Nothing happens on the device. Also when the screen is getting big and scrollbars appear on the screen, we cannot use those scrollbars. When we also activate jQuery Mobile we cannot use any of the controls that jQuery Mobile provides.

NOTE: We create the setup for this version using the default win32 builds: rake device:win32:production

We are seeing these problems on the following Hardware:

- HP ElitePad 900 G1 tablet (our primary testing device)

- Dell Venue 11 Pro tablet (a device from one of our customers).

Both are running Windows 8.1 with the latest updates available through Windows Update. And both devices rely on the Touch screen for input.


We have tried several things:

1. Check RhoStudio versions:

- RhoStudio 4.0 -> Works.

- RhoStudio 4.1 -> Does not work.

- RhoStudio 4.2 -> Does not work.

- RhoStudio 5.0 -> Does not work.

It looks like a RhoStudio update broke this functionality somehow.

2. Create a new app from scratch.

- We see the same behaviour as in our application. I have attached the sample application to the post to reproduce the problems. When you build this application for a Windows8 tablet you can easily see that none of the links on the front screen work.

NOTE: This sample application does NOT use jQuery Mobile.

3. Try an usb mouse.

- When we connect an usb mouse to the device (with the supplied connector) the application seems to work, as long as you use the mouse to click. The screen stil does not respond to the touch input.

Our gues is that Touch events are not handled correctly on these devices.

Does anyone have any quick solutions for the problems we are seeing? Our customer is in no position to use USB mouses with their tablets since they are holding the tablet in their hands to work with (and it looks really silly using a mouse with a tablet).

Thanks, Bart

Jon Tara
When attempting to open the

When attempting to open the page in Internet Explorer

So, this implies that you were able to assign a fixed port, and can access the pages using Internet Explorer. You have a means to debug the HTML/CSS/Javascript, then.

I'm unfamiliar with IE developer tools, but I assume they are similar to those that come with Chrome, Safari, or Firefox. You should be able to see if some file failed to load, set breakpoints in JS code, etc.

Can you show an example of the HTML and/or javascript that isn't working?

What version of jQuery are you using? From the above, I gather you are not using jQuery Mobile? It's unclear from your post, I gather you intend to use JQM but you did some of the testing without it?

Also when the screen is getting big and scrollbars appear on the screen, we cannot use those scrollbars

The screen should not be "getting big". That's the browser's adaptive behavior for websites that were designed for desktop. Presumably, your pages were not designed for desktop. Did you include the recommended <meta> tag? (When using jQuery Mobile, that is.)

<meta name="viewport" content="width=device-width, initial-scale=1">

As well, I've seen this suggested when working with IE. This will keep it in "modern standard" mode, and avoid failing back to emulating earlier IE quirks.

  1. <meta http-equiv="X-UA-Compatible" content="IE=8" />

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Mark Nongkhlaw
Dont mean to hijack this

Dont mean to hijack this thread, but Jon, do you have any tag that will make links for email, SMS, phone work in IE (by IE I mean the mobile device's IE-based Webview, and I suppose Bart meant the same)

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Jon,The issue I opened

Hello Jon,

The issue I opened this post about is in 2 situations:

1. The main application we develop. In this we use jQuery Mobile to show several controls on the screen and we use some plugins for some user experience features (like textarea elements that grow when the user inputs a lot of text).

2. A sample application created from a new RhoMobile application, stripped to a nearly empty HTML page. The sample application (also found in the first post) looks like this:

Layout.erb:

<!DOCTYPE html>

<html>

  <head>

  <title>Win8TabletProblems</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

  <script src="/public/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

  </head>

  <body>

  <%= @content %>

  </body>

</html>

Index.erb:

<ul>

  <li>

  <a href="<%= url_for( :controller => :PageElements ) %>">Page elements not responding</a>

  </li>

  <li>

  <a href="<%= url_for( :controller => :Scrollbar ) %>">Scrollbar not responding</a>

  </li>

</ul>

We also have 2 controllers to show different effects (PageElements and Scrollbar), these are also stripped to simple nearly empty HTML pages.

So in both situations, with and without jQuery Mobile we have the same problems. Is it still jQuery Mobile that is the problem then?

After some testing, the second meta tag you listed did not make the application behave any differently.

Cheers. Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
In your tests where you are

In your tests where you are not using jQuery Mobile, I would upgrade to the latest jQuery. You should be able to use 2.1.1. Make sure, though, that you use the IE meta I gave above (sorry, it wasn't quite right - see below...). It will make sure that IE is in standards mode. That is important.


<meta http-equiv="X-UA-Compatible" content="IE=edge" />


How to Use X-UA-Compatible

When you say works/doesn't work with various version of RhoStudio, is that with the same app built with different versions? Or with a new app generated by that version?

Set your port to a fixed port, and use desktop IE8 (on a real desktop, and also on the device) to test. First, I'd make sure your controller is working. You can test this from the IE8 navigation bar. Just type in a URL that you know should respond.  Check the Rhodes log for activity/errors.

Once you have a page up, try clicking on a link. Check the Rhodes log for activity and errors, and check the Javascript console for errors.

What does the actual HTML markup for the links look like? While I doubt that url_for is malfunctioning, I'd still take a look at the HTML.

If the HTML looks right, test those URLs in a browser. If that works, then make a simple page with just HTML and store it in public. Does that work? If that fails, I'd next load a simple page from a local file on the tablet. 

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Alright, I gave your tips a

Alright, I gave your tips a test:


- Update jQuery:

I have downloaded jQuery 2.1.1 and added it to the application. It made no difference.

- Meta tag:

I have added your meta tag to the application. It made no difference with jQuery 1.9.1 and with 2.1.1


- Fixed port:

I set the fixed port and ran the application on the device. When I open the test application in Internet Explorer on the device, everything works. I can get from the main page to different pages using the normal <a> links in the application. I think I might have had the wrong url when I tried this earlier.


- HTML markup:

The resulting HTML is as follow:

<a href="/app/PageElements">Page elements not responding</a>

It looks like normal HTML to me, the url_for method is not broken. These urls also work correctly in the browser.


- RhoStudio versions:

We tested this with installers from our app that we make each month for our release. So we have different versions from our application that where made in the past with different versions of rhostudio.


- Testpage in the public folder:

When I make a test html page and put it in the public folder, I cannot reach it when I use an <a> link to that page.

I do not think its the content of the application that is the problem in this regard. It looks to me that the shell that runs the application on Windows might have a small issue with clicks and touches.

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Mark Nongkhlaw
Hi Bart,Is there any specific

Hi Bart,

Is there any specific reason you need to build with latest RMS/Rhodes version? Because I tested your sample app on a Windows 7 PC with Rhodes 3.3.2 and deployed it on the WP7 emulator and it seems to run fine. I'm sure it would run the same on a WP8 device.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
I think the shell you are

I think the shell you are referring to would be QT.  We use QT as the webkit engine for Win32 builds, and between rho 4.0 and 4.1 we switched from QT4.7 to 5.1, so I think this is likely a QT related issue.  Can you double check the QT install on your build machine and make sure something didn't go wrong there? 

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
I built your app on my

I built your app on my machine.  Seems to work OK on my laptop, but I don't have a touch Win32 tablet.  See if this works any differently.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Daniel,Thank you for

Hello Daniel,

Thank you for the explanation and taking the time to make a setup! Sadly the setup does not fix this problem on the tablet.

I have checked my install and it seems I got the correct version if I compare it to the documentation. I also checked with a colleague of mine, and when he took a loot at this problem, he also attempted to create a setup with RhoStudio 5. He confirmed that he had also updated QT to the correct version that is stated in the docs.

So if the problem is in QT, is there anything I can do about it to fix it?

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
I'm not aware of any QT

I'm not aware of any QT settings that can be tweaked or anything like that.  I think you will need to open a case with support.  I think it will help them if you make it clear that the problem started in Rho version 4.1 which is the same release that we updated QT to 5.1. 

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Alright, wich support should

Alright, wich support should I contact for this then? Motorola Support or QT support (If they have one...)?

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
Motorola/Rhoimobile support. 

Motorola/Rhoimobile support.  Rhomobile Support

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
Ah, I didn't know that Rhodes

Ah, I didn't know that Rhodes uses a WebKit browsers on Windows! So, the IE meta will have no effect. It is only needed if you are using IE.

Sounds like you are homing-in on the problem!

I'd suggest, then, when doing any testing in a browser with a fixed server port, don't use IE - use Chrome. It will be closer to the actual running environment.

Chome is a useful development tool, because then you can use it's inspection and debugging capabilities.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Pietro Francesc...
Hi Bart,have you tried to set

Hi Bart,

have you tried to set a fixed TCP/IP port and connect to that using IE?

just to see if there's any routing/firewall problem.

You can try to connect using one of the two URL:

this is usually routed internally depending on the platform:

rhodes/RhodesApp.cpp at master · rhomobile/rhodes · GitHub

~Pietro

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Bart Fukkink
Hello Pietro,When attempting

Hello Pietro,

When attempting to open the page in Internet Explorer the application responds to nothing I try. I am getting no response from the buttons that I use.

I have also tried Google Chrome on the device, and in that it works as expected.

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
Please try a simple

Please try a simple application without jQuery Mobile. Just a simple HTML page. Do something simple with a button. (page change, alert).

You may need to update to a later version of jQuery Mobile. The one packaged with Rhodes is rather old, and unfortunately, it's hard to support OSs that may be released in the future. And that's what Windows 8.1 was when the old jQuery Mobile that comes with Rhdoes was released - an OS from the future.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Pietro Francesc...
Jon advise is very true

Jon advise is very true (however I've some difficulties to believe that Win8.1 is an OS from the future :-)

The problem is that Bart reported that the app, when built with RhoMobile 4.0 was working correctly. Is this correct Bart, same app compiled with v4.0 or v4.1-5.0 behaves differently on Win8.1?

~Pietro

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Mark Nongkhlaw
>Win8.1 is an OS from the

>Win8.1 is an OS from the future ...

What Jon meant was its the future with respect to jQM version support when compared to the one shipped with Rhomobile

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Pietro,That statement is

Pietro,

That statement is correct. When we deploy an older version of our application to the device, everything works correctly. When we take a newer version, wich is build with a new RhoMobile version, the application does not respond correctly to any user input.

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Jon,I hope you have

Hello Jon,

I hope you have read my entire post correctly because I also stated this:

2. Create a new app from scratch.

- We see the same behaviour as in our application. I have attached the sample application to the post to reproduce the problems. When you build this application for a Windows8 tablet you can easily see that none of the links on the front screen work.

NOTE: This sample application does NOT use jQuery Mobile.

I have created a sample application from nothing and that has a simple HTML page in it with an <a> tag as link in it. (This sample application is also attached to the opening post).

I do not believe updating jQuery Mobile will resolve all of the issues when it is not included.

Kind regards,

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Douglas Lise
Hi Bart.I am having trouble

Hi Bart.

I am having trouble with this same issue.

After a year, had you solved this problem?

Thanks in advance,

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Joydeep Chakraborty
Hi Bart,As the behavior is

Hi Bart,

As the behavior is broken while upgrading from 4.x to 5.x, this will be  a bug either in QT library or in Rho Code.

1.Which version of QT library are you using?As far as I remember QT was upgraded from 4.7.4 to 5.1 while upgrading the RMS from 4.1 to 5.0. It may be related to QT 5.0 issue.

2.Can you try with latest QT binaries(say QT 5.5)? Do you know how to do that?

3. Is it only on Windows 8.1 or all Windows devices?

Regards,

Joydeep

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Joydeep Chakraborty
Hi Bart,We have just

Hi Bart,

We have just investigated the issue.

It seems

RMS 4.0 uses QT 4.7.4

RMS 4.1 and above uses QT 5.1.1.

This is  issue with Rho code with QT 5.1.1 compatibility. This has been fixed in RMS 5.0.25.

Please use a version 5.0.25 and above. Should work

Please find below the commit link which fixes the issue. Hope this helps.

win32: webview touch events fixed · rhomobile/rhodes@cfaf592 · GitHub

Regards,

Joydeep

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments