Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Trusted Contributor
Mitch99
Posts: 102
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

WebView rotation and JavaScript problems

Hi all,

 

I'm developing a BB10 app in QML/Cascades. It's layout is not landscape-orientaton friendly (the structure of it wouldn't fit well to Landscape mode) so I'm not supporting a layout change on device tilt to landscape mode... EXCEPT, when I have to display a graph.

 

I'm using WebView and JavaScript-driven (third party) HTML that constructs and draws a graph. Graph is also interactive - it responds to the touch and displays the graph's point data, and can be pinch-zoomed (all implemented from Javascript) 

 

In order to fully utilize the graphing area, I tilt the WebView's parent container 90 degrees using container's rotationZ parameter. Everything works fine, except I lose the ability to interact with the graph. If I don't tilt the graph 90 degrees, everything works fine. Does anyone have an idea why this is happening, and how to fix/circumvent it?

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: WebView rotation and JavaScript problems

Can you confirm that your page content does not respond to touch/click events  when the screen is rotated 90 degress?

 

OR do you see unexpected coordinates are being generated?

 

I wrote a sample web page that shows how to respond to orientation change events:

http://blackberry.github.io/WebWorks-Samples/kitchenSink/html/browser/orientation.html

 

Perhaps it may be helpful to you in troubleshooting this problem.

 

Last question - does the same behavior occur for your web content when it is run in the browser?  Or is it only happening within a native-WebView?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Trusted Contributor
Mitch99
Posts: 102
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: WebView rotation and JavaScript problems

I can definitely confirm that the code doesn't respond to touch only when rotated 90 degrees. I have tested the same code, the only difference being the rotation line enable/disabled.

 

I understand your comment re:unexpected coordinates generated... I have tried to interact in the areas where the controls would be if there was no rotation, as well as anywere on the screen, but there was no response.

 

I don't understand the point of your last question... are you suggesting that I somehow rotate the HTML content in the browser and see if that responds to the interaction?

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: WebView rotation and JavaScript problems

 

It appears that a rotate event does not occur within the WebView, signalling it to re-draw the page. I believe the best course of action is to listen for the device rotate event (from your app, but outside of your webview) to force a URL reload within the WebView.  This will force the viewport to redraw itself and the WebView to re-layout the content correctly.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Trusted Contributor
Mitch99
Posts: 102
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: WebView rotation and JavaScript problems

I set the rotation on the webView's parent container as a parameter, and set up a listener for rotate event:

 

        Container {
            id: card
            rotationZ: 90.0   
            
            onRotationZChanged: {
                webView.reload();
            }

            layout: DockLayout {
            
            }
...

 However, the event is never fired, since the parameter is set at container's creation. Obviously, I could rig something up so that rotate happens post-creation, but wanted to check if this is what you had in mind?

 

 

Please use plain text.
Trusted Contributor
Mitch99
Posts: 102
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: WebView rotation and JavaScript problems

I've rigged a button to call webView.reload();

 

I can confirm that the page reloads, but the interactivity on the graph is still absent. :smileysad:

Please use plain text.