A Zebble plugin that allow you to show web pages in your application.
A WebView component (sub-class of View) allows you to render a piece of Html or a whole URL in an embedded browser component.
- Available on NuGet: https://www.nuget.org/packages/Zebble.WebView/
- Install in your platform client projects.
- Available for iOS, Android and UWP.
<WebView Url="http://www.Google.com" /><WebView Html="@GetHtml...()" />The value of HTML can be a full html page (wrapped in a ... 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.
<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">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')");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:
It reads the HTML file and parses the html.
It then looks for <script> and <link css> tags which reference a local file.
It will then load those files and copies their content as embedded code inside the html page.
It will then load the combined html on the native device browser component.
The Value property determines the HTML content of current page.
| Property | Type | Android | iOS | Windows |
|---|---|---|---|---|
| Url | string | x | x | x |
| Html | string | x | x | x |
| Value | object | x | x | x |
| MergeExternalResources | bool | x | x | x |
| Event | Type | Android | iOS | Windows |
|---|---|---|---|---|
| BrowserNavigated | AsyncEvent | x | x | x |
| BrowserNavigating | AsyncEvent<NavigatingEventArgs> | x | x | x |
| LoadingError | AsyncEvent<string> | x | x | x |
| LoadFinished | AsyncEvent | x | x | x |
| SourceChanged | AsyncEvent | x | x | x |
| Method | Return Type | Parameters | Android | iOS | Windows |
|---|---|---|---|---|---|
| SetHtml | Task | value -> string | x | x | x |
| SetUrl | Task | value -> string | x | x | x |
| EvaluateJavaScript | void | script-> string | x | x | x |
| EvaluateJavaScriptFunction | void | function -> string, args-> string[] | x | x | x |
| GetExecutableHtml | string | - | x | x | x |