WebView

From WebOS101

For the Enyo kind, please see enyo.WebView.

The WebView Widget does not have a 'model' property.

Contents 1 Examples 1.1 Simple Example 1.1.1 HTML 1.1.2 Mojo 1.2 Advanced Example 1.2.1 HTML 1.2.2 Mojo 2 Missing Progress Icon

Examples

Simple Example

• Note: This example is not robust, and probably violates all kinds of "best practices." This example shows how to instantiate a WebView Widget and manually open URLs in it.

HTML

Obviously, you need to include the 'div' in the HTML for your scene:

<div id="WebView" x-mojo-element="WebView"></div>

Mojo

Set up the widget (I'm not dealing with event handlers in this example, you should check those out):

SomeAssistant.prototype.setup = function() {
    this.controller.setupWidget('WebView', {'url': 'http://www.example.com'}, {});
};
 
SomeAssistant.prototype.changePage = function(url) {
    this.controller.get('WebView').mojo.openURL(url);
};

What happens:

The setup method gets called and sets up the WebView (by id) Widget and the url property of the attribute object is loaded into the view. Now you can use the changePage method to pass an arbitrary URL to the Widget and have it navigate there.

Advanced Example

• Note: This example is also not robust, and probably violates all kinds of "best practices." This example shows how to dynamically instantiate a WebView Widget after a scene is already set up.
• Note: If you are using framework_config.json option 'timingEnabled', set it to false if you get 'unbalanced call to PerfTimer pause/resume' errors when listening to certain WebView events.

HTML

<div id="target"></div>

Mojo

A function to call that inserts the WebView Widget and displays it in the active scene:

SomeAssistant.prototype.dynamicWebView = function(target) {
    var controller = Mojo.Controller.stageController.activeScene();
    target.update('<div id="lateAdd" x-mojo-element="WebView"></div>');
    controller.setupWidget('lateAdd', {'url': 'http://www.example.com'}, {});
    controller.instantiateChildWidgets(document);
    Mojo.Event.listen($('lateAdd'), Mojo.Event.webViewLoadStopped, function() {controller.activate();}.bindAsEventListener(this));
};
...
...
    this.dynamicWebView($('target'));
...

What happens:

The dynamicWebView method gets called and updates the target element with a Mojo Widget. Next, the WebView is set up. Then instantiateChildWidgets updates the scene's DOM. Finally, when the page has completed loading, the scene is re-activated to force repainting of the scene.

Missing Progress Icon

Currently (as of 1.4.1) the loading icon doesn't appear on embedded WebViews. See this Palm Developer Forum Post