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
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
Accepted Solution

Setting the WebView to the full height of the device

Hello, 

 

Recently I submitted one of my BlackBerry 10 applications to Built For BlackBerry but for it to be approved, I need to have the webView filling the whole page. The image below shows that the webView only covers about half of the page due to there not being enough content to fill an entire page. 

 

IMG_20140715_140450.png

 

Here is the code I am using for my webView:

 

Container {
        layout: DockLayout {
        
        }
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Fill
        background: Color.Black
        ScrollView {
            id: scrollView1
            scrollViewProperties.pinchToZoomEnabled: true
            scrollViewProperties.scrollMode: ScrollMode.Vertical
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }
                verticalAlignment: VerticalAlignment.Fill
                horizontalAlignment: HorizontalAlignment.Fill
                background: Color.Black
                WebView {
                    id: webView1
                    onLoadingChanged: {
                        if (loadRequest.status == WebLoadStatus.Started) {
                        
                        } else if (loadRequest.status == WebLoadStatus.Succeeded) {
                            webLoading.stop()
                        } else if (loadRequest.status == WebLoadStatus.Failed) {
                        
                        }
                    }
                    // WebView settings, initial scaling and width used by the WebView when displaying its content.
                    settings.viewport: {
                        "width": "device-width",
                        "initial-scale": 1.0
                    }
                    onMinContentScaleChanged: {
                        // Update the scroll view properties to match the content scale
                        // given by the WebView.
                        scrollView1.scrollViewProperties.minContentScale = minContentScale;
                        
                        // Let's show the entire page to start with.
                        scrollView1.zoomToPoint(0, 0, minContentScale, ScrollAnimation.None)
                    }
                    
                    onMaxContentScaleChanged: {
                        // Update the scroll view properties to match the content scale
                        // given by the WebView.
                        scrollView1.scrollViewProperties.maxContentScale = maxContentScale;
                    }
                    verticalAlignment: VerticalAlignment.Fill
                    horizontalAlignment: HorizontalAlignment.Fill
                }
                Divider {
                    id: infoTextDivider
                    visible: false
                
                }
                Container {
                    visible: false
                    id: infoTextContainer
                    
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center
                    Label {
                        multiline: true
                        id: infoText
                        textStyle.textAlign: TextAlign.Center
                    }
                }
            }
        }
        Container {
            id: loadMask
            background: Color.Black
            layout: DockLayout {
            
            }
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            Container {
                leftPadding: 10.0
                rightPadding: 10.0
                topPadding: 10.0
                bottomPadding: 10.0
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                ActivityIndicator {
                    id: webLoading
                    preferredHeight: 200.0
                    preferredWidth: 200.0
                    horizontalAlignment: HorizontalAlignment.Center
                    onStarted: {
                        loadMask.setVisible(true)
                    }
                    onStopping: {
                        loadMask.setVisible(false)
                    }
                }
                Label {
                    text: "Loading " + titleBar.title + "..."
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle.fontSize: FontSize.Large
                    textStyle.fontWeight: FontWeight.W100
                    textStyle.color: Color.White
                }
            }
        }
    }

 So any help with what I need to add in to get the webView to fill the entire page would be great!

 

Thanks in advance :smileyhappy: 

Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Setting the WebView to the full height of the device

in webview:

 

set:

preferredHeight: 1280
preferredWidth: 768
maxHieght: 1280
maxWidth: 768
minHeight: 720
minWidth: 720

 

Developer
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: Setting the WebView to the full height of the device

That solved it, thanks! :smileyhappy:
Developer
bmorr
Posts: 331
Registered: ‎04-13-2013
My Device: Z10

Re: Setting the WebView to the full height of the device

any time buddy :smileywink: had this exact problem just last night haha
BlackBerry Development Advisor
MSohm
Posts: 14,757
Registered: ‎07-09-2008
My Device: BlackBerry Passport

Re: Setting the WebView to the full height of the device

You won't be able to alter the WebView to stretch the content, but you can have it take up the full screen so that you see the web page background colour (white) on the whol page.  You can do that by setting the WebView height to Infinity.  That avoids having to use values for a particular resolution, which would require updates as different resolutions become available.

 

Here's some sample code and a screenshot.

 

import bb.cascades 1.2

Page {
    Container {
        layout: DockLayout {
        }
        
        // To enable scrolling in the WebView, it is put inside a ScrollView.
        ScrollView {
            id: scrollView
            
            // We let the scroll view scroll in both x and y and enable zooming,
            // max and min content zoom property is set in the WebViews onMinContentScaleChanged
            // and onMaxContentScaleChanged signal handlers.
            scrollViewProperties {
                scrollMode: ScrollMode.Both
                pinchToZoomEnabled: true
            }
            
            WebView {
                // The url that is loaded points to the QML of this recipe on GitHub.
                preferredHeight: Infinity
                id: blogWebView
                url: "http://www.wimbledon.com/mobile/en_GB/players/index.html"
                
                // WebView settings, initial scaling and width used by the WebView when displaying its content.
                settings.viewport: {
                    "width": "device-width",
                    "initial-scale": 1.0
                }
                
                onLoadProgressChanged: {
                    // Update the ProgressBar while loading.
                    progressIndicator.value = loadProgress / 100.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;
                }
                
                onLoadingChanged: {
                    
                    if (loadRequest.status == WebLoadStatus.Started) {
                        // Show the ProgressBar when loading started.
                        progressIndicator.opacity = 1.0
                    } else if (loadRequest.status == WebLoadStatus.Succeeded) {
                        // Hide the ProgressBar when loading is complete.
                        progressIndicator.opacity = 0.0;
                        progressIndicator.value = 0;
                        
                    } else if (loadRequest.status == WebLoadStatus.Failed) {
                        // If loading failed, fallback a local html file which will also send a java script message
                        
                        progressIndicator.opacity = 0.0
                        progressIndicator.value = 0;
                    }
                }
                
                /*
                 // This is the Navigation-requested signal handler so just print to console to illustrate usage.
                 onNavigationRequested: {
                 console.debug("NavigationRequested: " + request.url + " navigationType=" + request.navigationType)
                 }
                 */
            }
        } // ScrollView
        
        // A progress indicator that is used to show the loading status
        Container {
            bottomPadding: 25
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Bottom
            
            ProgressIndicator {
                id: progressIndicator
                opacity: 0
            }
        }
    }
}

 

I added a red outline so the border of the white area at the bottom shows up better.

 

IMG_20140715_094922.png

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker