HybridWebView Control

HybridWebView Control

The HybridWebView Control is part of the HybridWebApp.Toolkit project and is a simple way to begin integrating the HybridWebApp Framework into new projects.

Installation

Add the package to a new Windows Phone 8, Windows Phone 8.1 or both the Phone and Windows projects within a Universal App project via NuGet.

This can be done via right-click on References or the Package Manager Console using the command:

Install-Package HybridWebApp.Toolkit

If you're new to NuGet, there's some nice reading over here to get you up to speed.

Usage

Basics

Open up the XAML for the page that will host the control. Usually this will be something like MainPage.xaml and add a reference to the toolkit namespace:

xmlns:toolkit="using:HybridWebApp.Toolkit.Controls"

Next add the HybridWebView control into your XAML:

<toolkit:HybridWebView />

Your page should look similar to this:

<Page
    x:Class="MyHybridWebApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyHybridWebApp"
    xmlns:toolkit="using:HybridWebApp.Toolkit.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <toolkit:HybridWebView />
    </Grid>
</Page>

Next, enter the resolved starting page for the website you want to manage. If you enter a URI that redirects, ie: http://example.org which resolves/redirects to http://www.example.org the framework will not function as expected and you'll enter into a world of pain.

<toolkit:HybridWebView WebUri="http://www.example.org" />

At this point you'll now have an app that displays the specified website on load which isn't very interesting.

Custom Styles and JavaScript

Next, lets start customising the look and behaviour of this website by adding js and css to the project and instructing the HybridWebView control to load them.

This is as simple as creating two files within the project (lets call them app.js and app.css) and referencing them from the control:

<toolkit:HybridWebView CssResourcePath="ms-appx:///www/css/app.css" JsResourcePath="ms-appx:///www/js/app.js" />

Make sure to set the appropriate Build Action on the CSS and JS files. For most projects this will be Content.

Styles added in the css file will be applied and JavaScript will be injected into the page when the website finishes loading.

Add the following into your app.js file:

app = {};
app.doSomething = function() {
    var myObj = {}
    myObj.prop1 = "abc";
    myObj.prop2 = "def";

    var msg = {};
    msg.payload = JSON.stringify(myObj);
    msg.type = "mytype";

    framework.scriptNotify(JSON.stringify(msg));
}

app.doSomething();

Then add an event handler to the MessageReceived event on the HybridWebView Control:

<toolkit:HybridWebView WebUri="http://www.example.org" MessageReceived="HybridWebView_MessageReceived" CssResourcePath="ms-appx:///www/css/app.css" JsResourcePath="ms-appx:///www/js/app.js"

This event is important as this is where the messages from the website back to the host app will land.

Add the following into your code-behind file and put a breakpoint inside the WebHost_MessageReceived event handler:

public class MyType
{
    public string Prop1 { get; set; }
    public string Prop2 { get; set; }
}

private async void WebHost_MessageReceived(HybridWebView sender, ScriptMessage msg)
{
    switch (msg.Type)
    {
        case "mytype":
            {
                var myTypeObj = JsonConvert.DeserializeObject<MyType>(msg.Payload);
                break;
            }
    }
}

When you run the app your breakpoint should be hit and the object posted back from the website will be available for use!

HybridWebView Members

LoadingBackgroundBrush

The brush used on the loading overlay

LoadingBackgroundImage

The image displayed on the loading overlay

LoadingBackgroundImageWidth

Width of the image displayed on the loading overlay

OfflineBackgroundBrush

Brush used on the offline overlay

OfflineBackgroundImage

Image displayed on the offline overlay

OfflineBackgroundImageWidth

Width of the image displayed on the offline overlay

OfflineForegroundBrush

Foreground used on the offline overlay

OfflineTitle

Text used for the title displayed in the offline overlay. Defaults to "Navigation Failed."

OfflineSubtitle

Text used for the subtitle displayed in the offline overlay. Defaults to "Check your data connection then retry."

CssResourcePath

Path to the CSS resource file, ie: ms-appx:///www/css/app.css

CssResourcePathPhone

Path to additional CSS that should be loaded for the phone, ie: ms-appx:///www/css/app.phone.css

CssResourcePathNotPhone

Path to additional CSS that should be loaded for the phone, ie: ms-appx:///www/css/app.notphone.css

JsResourcePath

Path to the JS resource file, ie: ms-appx:///www/css/app.js

WebUri

The URI that should be loaded by the control. Very important to specify the correctly resolved initial URI here.

NavigateOnLoad

When true, the navigation will begin when the control loads

EnableLoadingOverlay

When true, the default loading overlay is displayed during navigation requests.

EnableOfflineOverlay

When true, the default offline overlay is displayed when navigation attempts fail due to connectivity

OpenOtherHostsExternal

When true, all requests with a host/path combination that differs from the WebUri will be opened in an external IE window

WebRoute

Used to specify custom routing rules

CanGoBack

When true, the control can navigate backward

CanGoForward

When true, the control can navigate forward