Call WebView Page

Elements/Components Used:

WebView, ScrollView, Button

BlackBerry 10 Cascades QML WebView

This post will only contain QML functions/items (no C++ required).

Often times you will want to call a webpage from within your app by the click of a button and have the web display inside of the app (as in not opening the browser).  The fine folks at RIM/BlackBerry created a feature in Cascades called WebView to be used in situations such as this.

main.qml

import bb.cascades 1.0

NavigationPane {
id: navigationPane
Page {
Button {
id: buttonID
onClicked: {
var blogpage = goToWebView.createObject();
navigationPane.push(blogpage);
}
attachedObjects: ComponentDefinition {
id: goToWebView
source: "blog.qml"
}
text: "Go To My Blog"
}
}
}

blog.qml

import bb.cascades 1.0
Page {
ScrollView {
scrollViewProperties.pinchToZoomEnabled: true
scrollViewProperties.scrollMode: ScrollMode.Both
Container {
background: Color.create ("#f8f8f8")
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
WebView {
url: "http://www.bbcascadescode.tumblr.com/"
}
}
}
}

On the main.qml page you see I've made a call from the onClicked bring up "blog.qml" and blog.qml is a page with a WebView item pointing to a website.  An important thing to note is that the main.qml needs to be a Navigation pane.

Another useful example:

main.qml

import bb.cascades 1.0

NavigationPane {
id: navigationPane
Page {
Container {
TextField {
id: whatiwanttosearch
}
Button {
id: buttonID
onClicked: {
var searchpage = goToSearch.createObject();
navigationPane.push(searchpage);
}
attachedObjects: ComponentDefinition {
id: goToSearch
source: "lookup.qml"
}
text: "Search"
}
}
}
}

lookup.qml

import bb.cascades 1.0

Page {
ScrollView {
scrollViewProperties.pinchToZoomEnabled: true
scrollViewProperties.scrollMode: ScrollMode.Both
Container {
background: Color.create ("#f8f8f8")
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
WebView {
url: "https://www.google.com/search?q=" + whatiwanttosearch.text
}
}
}
}

In this example the lookup.qml page is again a WebView but brings over what the user inputs in the label id: "whatiwanttosearch" and adds that to the web address (and in this case being Google, actually searches on Google the text from the label).  Useful for Google, Twitter, or anything that has web addresses that can easily be appended for specific pages.

-Brian