23 Replies Latest reply on Oct 8, 2015 12:46 AM by Joydeep Chakraborty

    Windows 8 Tablet problems

    Bart Fukkink

      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

        • Re: Windows 8 Tablet problems
          Pietro Francesco Maggi

          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

          1 of 1 people found this helpful
            • Re: Windows 8 Tablet problems
              Bart Fukkink

              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

                • Re: Windows 8 Tablet problems
                  Jon Tara

                  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.

                    • Re: Windows 8 Tablet problems
                      Pietro Francesco Maggi

                      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

                      • Re: Windows 8 Tablet problems
                        Bart Fukkink

                        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

                  • Re: Windows 8 Tablet problems
                    Jon Tara
                    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" />
                    1 of 1 people found this helpful
                      • Re: Windows 8 Tablet problems
                        Mark Nongkhlaw

                        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)

                        • Re: Windows 8 Tablet problems
                          Bart Fukkink

                          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

                            • Re: Windows 8 Tablet problems
                              Jon Tara

                              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. 

                                • Re: Windows 8 Tablet problems
                                  Bart Fukkink

                                  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

                            • Re: Windows 8 Tablet problems
                              Douglas Lise

                              Hi Bart.

                               

                              I am having trouble with this same issue.

                              After a year, had you solved this problem?

                               

                              Thanks in advance,

                              • Re: Windows 8 Tablet problems
                                Joydeep Chakraborty

                                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

                                • Re: Windows 8 Tablet problems
                                  Joydeep Chakraborty

                                  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