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
Developer
Paratheo
Posts: 133
Registered: ‎04-25-2009
My Device: Bold 9900
My Carrier: AT&T

Fitting entire web page onto screen with WebView + ScrollView

Hi guys, Im having trouble using WebView and Scrollview. I need to be able to fit web pages onto a screen so that with no user interaction, they are by default completely visible, no need to pan or zoom out. And of course, user needs to be able to zoom in and pan after image loads, which is why i need ScrollView. This is all mainly to do with just images, for instance loading a url that is an image. ex. http://cdn-static.zdnet.com/i/r/story/70/00/010830/bb-z10-i1-620x465.jpg

 

The problem is that when a large image loads, user cannot by default see the entire thing. And because i have set minimum content scale to 1, often times the image cannot be zoomed out. To see what I mean, see image below, representing two 720x720 screens with titlebar and actionbars and WebView.

 

webviewWire.png

 

I hope this helps you understand. Basically the image has to fit both vertically and horizontally, and maintain its aspect ratio. And from that point the user can then zoom in or out. But i have been unable to achieve this. Here is my WebView and ScrollView component.

 

Container {
            id: webViewContainer
            layout: StackLayout {
            }

            ScrollView {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                scrollViewProperties {
                    scrollMode: ScrollMode.Both
                    pinchToZoomEnabled: true
                }
                id: scrollView
                content: Container {
                    WebView {
                        settings.viewport: {
                            "width": "device-width",
                            "initial-scale": 1.0
                        }
                        onMinContentScaleChanged: {
                            // Update the scroll view properties to match the content scale
                            // given by the WebView.
                            scrollView.scrollViewProperties.minContentScale = minContentScale;
                            // Let's show the entire page to start with.
                            scrollView.zoomToPoint(0, 0, minContentScale, ScrollAnimation.None)
                        }

                        onMaxContentScaleChanged: {
                            // Update the scroll view properties to match the content scale
                            // given by the WebView.
                            scrollView.scrollViewProperties.maxContentScale = maxContentScale;
                        }

                        id: webView
                        url: webUrl             
                    }
                }
            }
        }

 

I would appreciate any help, and let me know if something is unclear. Thanks!

Please use plain text.