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
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

WebView Control Usage

[ Edited ]

Hey, I've been toying around with the WebView control with not a lot of luck. I want to display a web page (retrieved via a full URL, "http://www.google.com" for example) inside of a Container.

 

Is that the purpose of WebView? How can I got about doing that?

 

I have this code:

 

if(url.isValid())
{
    m_WebContent = new WebView();
    m_WebContent->setPreferredSize(768.0f, 800.0f);
m_WebContent->setLayoutProperties(StackLayoutProperties::create().horizontal(HorizontalAlignment::Center)); m_WebContent->setUrl(QUrl("http://www.google.com")); } m_ContentContainer->add(m_Title); m_ContentContainer->add(m_WebContent);
}

 

I belive this should load the content because the documentation for "const QUrl url " says:

 

The current url for the view.

It can be set, which is identical to calling load with the same url. It can also spontaneously change as a result of redirects or JavaScript.

 

So by calling setUrl I am effectively calling the load function.

 

I have a feeling I'm misunderstanding this control. Can any point me in the right direction as to how I can use this control to do what I want, or as to why it can't be used for my purposes?

 

p.s. m_Title (which is a TextArea) displays properly. It's only the WebView control I'm having issues with.

 

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.
Contributor
djmbb
Posts: 30
Registered: ‎06-14-2012
My Device: Simulator
My Carrier: all

Re: WebView Control Usage

WebView itself is a bit skimpy.

To get it to be of some use one needs to "extend " it.

You could try code such as below

 

Flickable {
    property alias title: webView.title
    property alias icon: webView.icon
    property alias progress: webView.progress
    property alias url: webView.url
    property alias back: webView.back
    property alias stop: webView.stop
    property alias reload: webView.reload
    property alias forward: webView.forward

    id: flickable
    //width: parent.width
    //contentWidth: Math.max(parent.width,webView.width)
    //contentHeight: Math.max(parent.height,webView.height)

    contentHeight:  Math.max(webView.height, height); //webView.height // Math.max(childrenRect.height);
    contentWidth : Math.max(webView.width, width);   //webView.width //childrenRect.width


    //anchors.top: headerSpace.bottom
    //anchors.bottom: parent.top
    //anchors.left: parent.left
    //anchors.right: parent.right
   // pressDelay: 200


    clip: true;
    //contentHeight: agbsText.height +20
    //contentWidth : width


    onWidthChanged : {
        // Expand (but not above 1:1) if otherwise would be smaller that available width.
        if (width > webView.width*webView.contentsScale && webView.contentsScale < 1.0)
            webView.contentsScale = width / webView.width * webView.contentsScale;
    }

    WebView {
        id: webView
        transformOrigin: Item.TopLeft

        function fixUrl(url)
        {
            if (url === "") return url
            if (url[0] === "/") return "file://"+url
            if (url.indexOf(":")<0) {
                if (url.indexOf(".")<0 || url.indexOf(" ")>=0) {
                    // Fall back to a search engine; hard-code Wikipedia
                    return "http://en.wikipedia.org/w/index.php?search="+url
                } else {
                    return "http://"+url
                }
            }
            return url
        }


        //url: fixUrl(webBrowser.urlString)
        smooth: false // We don't want smooth scaling, since we only scale during (fast) transitions
        focus: true

        onAlert: console.log(message)
        //-------------------------------------------------
        onLoadStarted: mainWin.showWaitDlg(qsTr("loading page"))
        onLoadFinished: mainWin.hideWaitDlg()
        onLoadFailed: mainWin.hideWaitDlg()
        //--------------------------------------------------
        function doZoom(zoom,centerX,centerY)
        {
            if (centerX) {
                var sc = zoom*contentsScale;
                scaleAnim.to = sc;
                flickVX.from = flickable.contentX
                flickVX.to = Math.max(0,Math.min(centerX-flickable.width/2,webView.width*sc-flickable.width))
                finalX.value = flickVX.to
                flickVY.from = flickable.contentY
                flickVY.to = Math.max(0,Math.min(centerY-flickable.height/2,webView.height*sc-flickable.height))
                finalY.value = flickVY.to
                quickZoom.start()
            }
        }

        Keys.onLeftPressed: webView.contentsScale -= 0.1
        Keys.onRightPressed: webView.contentsScale += 0.1

        preferredWidth: flickable.width
        preferredHeight: flickable.height
        contentsScale: 1
        onContentsSizeChanged: {
            // zoom out
            contentsScale = Math.min(1,flickable.width / contentsSize.width)
        }
        onUrlChanged:
        {
            //console.debug("webView.onUrlChanged().. ",url)
            //focus = true
            ///reload.invoke()
            // got to topleft
            flickable.contentX = 0
            flickable.contentY = 0
          //  if (url != null) { header.editUrl = url.toString(); }
        }
        onDoubleClick: {
                        if (!heuristicZoom(clickX,clickY,2.5)) {
                            var zf = flickable.width / contentsSize.width
                            if (zf >= contentsScale)
                                zf = 2.0*contentsScale // zoom in (else zooming out)
                            doZoom(zf,clickX*zf,clickY*zf)
                         }
                       }

        SequentialAnimation {
            id: quickZoom

            PropertyAction {
                target: webView
                property: "renderingEnabled"
                value: false
            }
            ParallelAnimation {
                NumberAnimation {
                    id: scaleAnim
                    target: webView
                    property: "contentsScale"
                    // the to property is set before calling
                    easing.type: Easing.Linear
                    duration: 200
                }
                NumberAnimation {
                    id: flickVX
                    target: flickable
                    property: "contentX"
                    easing.type: Easing.Linear
                    duration: 200
                    from: 0 // set before calling
                    to: 0 // set before calling
                }
                NumberAnimation {
                    id: flickVY
                    target: flickable
                    property: "contentY"
                    easing.type: Easing.Linear
                    duration: 200
                    from: 0 // set before calling
                    to: 0 // set before calling
                }
            }
            // Have to set the contentXY, since the above 2
            // size changes may have started a correction if
            // contentsScale < 1.0.
            PropertyAction {
                id: finalX
                target: flickable
                property: "contentX"
                value: 0 // set before calling
            }
            PropertyAction {
                id: finalY
                target: flickable
                property: "contentY"
                value: 0 // set before calling
            }
            PropertyAction {
                target: webView
                property: "renderingEnabled"
                value: true
            }
        }
        onZoomTo: doZoom(zoom,centerX,centerY)
    }
}


Please use plain text.
Trusted Contributor
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

Re: WebView Control Usage

Hmmm, there's some discussion about it in the native forum too:

http://supportforums.blackberry.com/t5/Native-Development/Cascades-WebView-Control/td-p/1708773

 

It also appears I can't even use WebView with the simulator:

https://bdsc.webapps.blackberry.com/devzone/resources/releasenotes

 

That's discouraging. :smileysad:

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.
BlackBerry Development Advisor (Retired)
selom
Posts: 60
Registered: ‎05-10-2012
My Device: Blackberry 10 Alpha
My Carrier: none

Re: WebView Control Usage

Hello Brennan, the webview does not work in the simulator at this time, however it will work properly on the alpha device if you happen to have one.

 

Cheers

Selom

Please use plain text.
Trusted Contributor
marcelnijman
Posts: 117
Registered: ‎06-19-2012
My Device: PlayBook + Red Z10 + BB10 Dev Alpha C
My Carrier: none

Re: WebView Control Usage

Loading pages works, even page re-directions work. It just doesn't display anything. But this should have been clearly stated in the API documentation! I lost a few hours trying to get it to work.

 

Please use plain text.
Trusted Contributor
marcelnijman
Posts: 117
Registered: ‎06-19-2012
My Device: PlayBook + Red Z10 + BB10 Dev Alpha C
My Carrier: none

Re: WebView Control Usage

To avoid confusion, I'm talking about the simulator.

Please use plain text.