BlackBerry 10 WebView Example

it is easy to use and to show a web view in BB 10. we can follow just few examples and can see the web view  on our device or on emulator.

1) create a new project with name WebViewExample

now edit the main.qml and copy the given below code to it


import bb.cascades 1.0


NavigationPane {
    id: myNavPane
    Page {
        Container {
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            TextField {
                id: mySearchTerm
               text: "jitesh upadhyay's blog"
            }
            Button {
                id: myButton
                text: "Search"

                onClicked: {
                    var page = pageDefinition.createObject();
                    myNavPane.push(page);
                }

                attachedObjects: ComponentDefinition {
                    id: pageDefinition
                    source: "mysearch.qml"
                } // end attachedObjects
            } // end Button
        } // end Container
    } // end Page
} // end NavigationPane

2) in second step just make a new qml document with name mysearch.qml

and copy the following code to it


import bb.cascades 1.0

Page {
    ScrollView {
        Container {
            background: Color.create("#f8f8f8")
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }
            Label {
                id: statusLabel
                leftMargin: 10
                text: "No webpage yet."
            }
            WebView {//http://www.blogger.com/profile/16670167524123575126
                url: "https://www.google.com/search?q=" + mySearchTerm.text
                onLoadingChanged: {
                    if (loadRequest.status == WebLoadStatus.Started) {
                        statusLabel.setText("Load started.")
                    } else if (loadRequest.status == WebLoadStatus.Succeeded) {
                        statusLabel.setText("Load finished.")
                    } else if (loadRequest.status == WebLoadStatus.Failed) {
                        statusLabel.setText("Load failed.")
                    }
                }
            } // end WebView
        } // end container
    } // end Scrollview
}// end page

3) just click the button and you can visit my blog on yours currently running web view.