Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test - WebView (Revised File for Review) #8

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions webview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
# WebView

NUI `WebView` is a special components for show web content. It supports interaction with web content through touch or key inputs so that you can browse multiple web pages.

## Load Web Content

You can load the Web content as follows:::: (Sagar - Added three new colons)

- Set the Url property.

In normal case, a web page is expressed as an internet address. You can set the address in the Url property: (Sagar - Replaced period with colon)

```csharp
var webview = new WebView()
{
Size = new Size(1280, 960),
Url = "https://docs.tizen.org"
};
NUIApplication.GetDefaultWindow().Add(webview);
```

In the preceding code snippet, connection to the internet is required and the application needs an internet privilege: `http://tizen.org/privilege/internet`.
You can also load a local resource file as a content of a `WebView`.

```csharp
var webview = new WebView()
{
Size = new Size(1280, 960),
Url = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "hello.html"
};
NUIApplication.GetDefaultWindow().Add(webview);
```

- Call the `LoadUrl. Calling `LoadUrl` is equivalent to setting the `Url` property. The first example code snipet can be changed as follows:

```csharp
var webview = new WebView()
{
Size = new Size(1280, 960),
};
webview.LoadUrl("https://docs.tizen.org")
NUIApplication.GetDefaultWindow().Add(webview)
```

- Specify a web code in a string instead of the `Url`. You can write the web code directly:

```csharp
var webview = new WebView()
{
Size = new Size(1280, 960),
};
webview.LoadHtmlString("<p>Hello World!</p>");
NUIApplication.GetDefaultWindow().Add(webview);
```

From the simple HTML text to the complicated web page, you can load the content using `LoadHtmlString`.

## Events

Web View provides several events. The following are the most commonly used events in WebView:

| Event | Description |
|----------------------|---------------------------------------------------------------|
| `PageLodStarted` | This event is emitted when the page loading has started. |
| `PageLoadFinished` | This event is emitted when the page loading has completed. |
| `PageLoadError | This event is emitted when the page loading has failed.
| `UrlChanged | This event is emitted when the page url is changed. |


- Add an event handler:

```csharp
void OnPageLoded(object sender, EventArgs e)
{
Tizen.Log.Info(tag, "Web page has been loaded.")
}
```
```csharp
webview.PageLoadFinished += OnPageLoded;
```

- Remove an event handler:

```csharp
webview.PageLoadFinished -= OnPageLoded;
```

## WebView with JavaScript

NUI `WebView` provides several APIs to control JavaScript in a currently loaded web page.

- `EvaluateJavaScript`

This API enables executing JavaScript code on a web page. For example, the following code can change the document's background color of a loaded web page to yellow:
```csharp
var webview = new WebView()
{
Size = new Size(1280, 960)
};
webview.PageLoadFinished += (s, e) =>
{
webview.EvaluateJavaScript("document.body.style.backgroundColor = 'yellow';");
};
webview.LoadUrl("https://docs.tizen.org");
NUIApplication.GetDefaultWindow().Add(webview);
```

- `AddJavaScriptMessageHandler`

This API provides a way to inject a C# method as a JavaScript function named `postMessage to a web page. The following example shows how to inject a C# method. To execute injected method, it uses `EvaluateJavaScript`:

```csharp
void InjectedMethod(string message)
{
Tizen.Log.Info("TestWebView", "Message: " + message);
}
```
```csharp
var webview = new WebView()
{
Size = new Size(1280, 960),
};
mWebView.AddJavaScriptMessageHandler("InjectedObject", InjectedMethod);
webview.LoadUrl("https://docs.tizen.org");
webview.PageLoadFinished += (s, e) =>
{
webview.EvaluateJavaScript("InjectedObject.postMessage('Hello World!');");
};
NUIApplication.GetDefaultWindow().Add(webview);
```

As a result of the code execution, you get a log message in a Tizen device as follows
```
I/TestWebView (3524): WebViewTest.cs: InjectedMethod(49) > Message: Hello World!
```

## Related Information
* Dependencies
- Tizen 6.5 and Higher