Loading HTML

You can use WebView to load HTML directly from QML. You can supply the HTML inline or as an asset in the assets directory. For more information about referencing the assets directory, see Working with the file system.

Loading HTML inline

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

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

This example is simple HTML, and not 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.

Screen showing 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 change the size, margins, width, and height of the WebView.

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 name 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++, you could use the following code sample, 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:

Screen that 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 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.

Last modified: 2014-05-14



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus