Loading HTML - Cascades for BB 10 - BlackBerry Developer

Loading HTML inline

This QML code sample show you how to provide HTML inline.

WebView {
     id: webView
     html: "<html><head><title>Hello, world!</title></head>" +
           "<body>Hello, world!</body>"+
           "</html>"
}

This is pretty simple HTML, and not very useful. But you can use simple HTML to display the current temperature in a simple table in your weather app. Here's a sample of how you can do that:

import bb.cascades 1.0

Page {
    content: 
        Container {                    
            id: weatherItem
            
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }

        Container {
            id: weatherpicture
            layout: StackLayout {}
            topPadding: 30
            leftPadding: 70
           
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
               
            ImageView {
                imageSource: "asset:///images/sun.png"
                }
            }
            
        Container {
            id: weathertable
            layout: StackLayout {}
            topPadding: 30
            leftPadding: 0
            horizontalAlignment: HorizontalAlignment.Left
                
            layoutProperties: StackLayoutProperties {
                 spaceQuota: 3
             }
             WebView {
                 id: webView
                 html: "<html><head>" +
                 "<title>Today's temperature</title>" +
                 "</head>" +
                 "<body>" +
                     "<h2 align=center>Today's temperature</h2>" + 
                     "<table border=1 align=center cellpadding=10>" +
                     "<tr><th>Celsius</th>" + 
                      "<th>Fahrenheit </th>" + 
                      "<th>Feels like</th></tr>" +
                      "<tr><td align=center id=\"tempc\">18C</td>" + 
                      "<td align=center id=\"tempf\">64F</td>" +
                      "<td align=center id=\"templ\">24C</td></tr>" +

                      "</table>"+
                 "</body>"+
                 "</html>"
              } // end WebView
        } // end WebView Container
    } // end main Container
} // end Page

And here's what the above code sample HTML would look like in a WebView in your app.

You can use the userStyleSheetLocation property to override the default cascading style sheet in your WebView.

This image shows an HTML table in WebView on a device.

You can add a button to refresh the temperature data using the evaluateJavaScript() function. Here's a code sample that shows you how to add that button:

Button { 
   id: replyButton
   text: "Refresh"
   preferredWidth: 100
   onClicked: {
       webView.evaluateJavaScript("var c = 25; " +
             "var f = c * 9 / 5 + 32; " +
             "document.getElementById(‘tempc‘).innerHTML= c + ‘C‘;" + 
             "document.getElementById(‘tempf‘).innerHTML= f + ‘F‘;" + 
             "document.getElementById(‘templ‘).innerHTML=‘30C‘;")
   } // end onclicked
} // end button

To change the appearance of the WebView, you can use any of the Control properties. You can modify the size, margins, width, and height of the WebView using

Loading HTML as an asset

You can create an HTML file and deliver it as web content in your app. To use HTML content as an asset, you must specify the asset name and the local path to the assets directory. The local path to the assets directory is local:///. The asset name is the local path of the HTML file in the assets folder, including the file extension. Let's say that you have an asset called myHTML.html that you placed in the assets/web folder of your project. Here's how to create a WebView with your HTML as an asset.

WebView {
     id: webView
     url: "local:///assets/web/myHTML.html"  
}

In C++, it would look like this, with some added checking to make sure that the file exists first:

if(QFile.exists("myApp/assets/web/myHTML.html")) 
{     
    qDebug() << "Found HTML file!"; 
    
    WebView* web = (WebView*)root->findChild<WebView*>("Web");     
    QUrl url = QUrl::fromLocalFile("myApp/assets/web/myHTML.html");     
    web->setUrl(url);
}

Adding gesture handling to your WebView

To add support for user interaction on a WebView, you need to add gesture handling to your app. Gesture handling lets a user pinch to zoom in and out of the content that your app loads in your WebView in a ScrollView. To learn about gesture handling, including adding PinchHandler objects to your ScrollView, see Touch interaction.

You must set pinchToZoomEnabled to true on your ScrollViewProperties, and connect your WebView signals to your ScrollView properties. You can set maxContentScale: 5 and minContentScale: 1 to limit how much the content can zoom. If the user reaches the maxContentscale value, the content doesn't zoom any more and bounces to the zoom level allowed by the maxContentScale property.

Here's a code sample that demonstrates gesture handling in a WebView:

This image demonstrates pinching in a WebView.

ScrollView {
    id: scrollView
    scrollViewProperties {
        scrollMode: ScrollMode.Both
        pinchToZoomEnabled: true
        maxContentScale: 5
        minContentScale: 1 
    }

    layoutProperties: StackLayoutProperties { spaceQuota: 1.0 }
   
    Container {
        background: Color.LightGray

        WebView {
            id: webView
            html: "local:///assets/web/myHTML"
   
            onMinContentScaleChanged: {
               scrollView.scrollViewProperties.minContentScale = minContentScale;
            }
   
            onMaxContentScaleChanged: {
               scrollView.scrollViewProperties.maxContentScale = maxContentScale;
            }
        } // end WebView
    } // end container
} // end ScrollView

Integrating a WebView with other apps

To integrate a WebView with other applications, set the activeTextEnabled property to true to indicate that you want a post-processor to run to highlight any ActiveText segments and connect them to the invocation framework. This setting allows users to click on ActiveText segments in the web content and invoke other apps on the device. To learn about launching another application or an external service from a WebView, see App integration.

This processing takes place immediately after a webpage is loaded and may cause delays to loading the webpage in your app.