Zebble | WebView class (displaying html)

Introduction to UI with C#

Cache and temp files and folders

WebView class (displaying html)

A WebView component (sub-class of View) allows you to render a piece of Html or a whole URL in an embedded browser component.

To use this component, install the Zebble.WebView nuget package.
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

To show an external URL, use:

To show some html directly, use:

<WebView Html="@GetHtml...()" />The value of HTML can be a full html page (wrapped in a <html>...</html> tag), or a partial html piece such as "<b>something</b>".

In the above example GetHtml() is a method in the code behind. Of course the data can come from the database, your domain objects, etc.

To show a html file from your Resources folder, use:

<WebView Url="MyPages/SomePage.html" />The above example assumes you have a file named SomePage.html under App.UI\Resources\MyPages folder.

Javascript, Image and CSS Files

In the HTML page, you can reference Javascript, Image or CSS files in your Resources folder.
You can also reference web-hosted resources by specifying the full url. For example:

...
<script type="text/javascript" src="MyPages/MyScript.js"></script>
<script type="text/javascript" src="http://mywebsite.com/MyScript.js"></script>
...
<img src="Images/Icons/Hello.png">

Communication between Javascript and Zebble code

The EvaluateJavascript() method allows you to run some Javascript code on the rendered page, and then get the value of its evaluation back.

MyWebView.EvaluateJavascript("$('.some-object').attr('value')");To send a message from the web page to the native app, you can use the following technique:

- From the web page context, navigate to a psudo url, such as my-command:my-param.

- In the C# code, handle the BrowserNavigating event and get the message to process.

<a href="#my-command_param1">Foo with param1</a>
<a href="#my-command_param2">Foo with param2</a>

<a href="#another-command_param3">Bar with param3</a>An in the C# code:

MyWebView.BrowserNavigating.Handle(e => {
if (e.Url.StartsWith("#my-command_")) DoMyThing(e.Url.TrimStart("#my-command_"));
else if (e.Url.StartsWith("#another-command_")) DoAnotherThing(e.Url.TrimStart("#another-command_"));
});

Important Tips

When generating a full page html, remember to set the viewport meta tag, otherwise the content will be rendered at the top left corner in UWP.
<head>
<meta name="viewport" content="width=device-width", initial-scale="1">
</head>

If using a local html file, it should be a valid xhtml. For example all tags should be closed and lowercase.
UWP does not support loading html content from local storage. However, Zebble solves that limitation. This is how it works:
1. It reads the HTML file and parses the html.
2. It then looks for <script> and <link css> tags which reference a local file.
3. It will then load those files and copies their content as embedded code inside the html page.
4. It will then load the combined html on the native device browser component.

Value:

The Value property determines the HTML content of current page.

Events:

on-BrowserNavigated: Raised when browser completed showing the content.
on-BrowserNavigating: Raised when browser started to showing the content.
on-LoadFinished: Raised when browser completed showing the content.
on-LoadingError: Raised when an error raised, when browser wants to show content.
on-SourceChanged: Raised when the address of the browser content is changed.