-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HybridWebView control for integrating JS/HTML/CSS easily into a .NET …
…MAUI app (#22880) * Initial HybridWebView control to send messages between C# and .NET Fixes #22302
- Loading branch information
Showing
47 changed files
with
2,167 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
src/Controls/samples/Controls.Sample/Pages/Controls/HybridWebViewPage.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <views:BasePage | ||
| xmlns="http://schemas.microsoft.com/dotnet/2021/maui" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | ||
| x:Class="Maui.Controls.Sample.Pages.HybridWebViewPage" | ||
| xmlns:views="clr-namespace:Maui.Controls.Sample.Pages.Base" | ||
| Title="HybridWebView"> | ||
| <views:BasePage.Content> | ||
|
|
||
| <Grid ColumnDefinitions="2*,1*" RowDefinitions="Auto,1*"> | ||
|
|
||
| <Label | ||
| Grid.Row="0" | ||
| Grid.Column="0" | ||
| Text="HybridWebView here" | ||
| x:Name="statusLabel" /> | ||
|
|
||
| <Button | ||
| Grid.Row="0" | ||
| Grid.Column="1" | ||
| Text="Send message to JS" | ||
| Clicked="SendMessageButton_Clicked" /> | ||
|
|
||
| <HybridWebView | ||
| x:Name="hwv" | ||
| Grid.Row="1" | ||
| Grid.ColumnSpan="2" | ||
| HybridRoot="HybridSamplePage" | ||
| RawMessageReceived="hwv_RawMessageReceived"/> | ||
|
|
||
| </Grid> | ||
| </views:BasePage.Content> | ||
| </views:BasePage> |
23 changes: 23 additions & 0 deletions
23
src/Controls/samples/Controls.Sample/Pages/Controls/HybridWebViewPage.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| using System; | ||
| using Microsoft.Maui.Controls; | ||
|
|
||
| namespace Maui.Controls.Sample.Pages | ||
| { | ||
| public partial class HybridWebViewPage | ||
| { | ||
| public HybridWebViewPage() | ||
| { | ||
| InitializeComponent(); | ||
| } | ||
|
|
||
| private void SendMessageButton_Clicked(object sender, EventArgs e) | ||
| { | ||
| hwv.SendRawMessage("Hello from C#!"); | ||
| } | ||
|
|
||
| private void hwv_RawMessageReceived(object sender, HybridWebViewRawMessageReceivedEventArgs e) | ||
| { | ||
| Dispatcher.Dispatch(() => statusLabel.Text += e.Message); | ||
| } | ||
| } | ||
| } |
Binary file added
BIN
+17.7 KB
src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/docs/sample.pdf
Binary file not shown.
32 changes: 32 additions & 0 deletions
32
src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title></title> | ||
| <link rel="stylesheet" href="styles/app.css"> | ||
| <script src="scripts/HybridWebView.js"></script> | ||
| <script> | ||
| window.addEventListener( | ||
| "HybridWebViewMessageReceived", | ||
| function (e) { | ||
| var messageFromCSharp = document.getElementById("messageFromCSharp"); | ||
| messageFromCSharp.value += '\r\n' + e.detail.message; | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| Hybrid sample! | ||
| </div> | ||
| <div> | ||
| <button onclick="window.HybridWebView.SendRawMessage('Message from JS!')">Send message to C#</button> | ||
| </div> | ||
| <div> | ||
| Message from C#: <textarea readonly id="messageFromCSharp" style="width: 80%; height: 10em;"></textarea> | ||
| </div> | ||
| <div> | ||
| Consider checking out this PDF: <a href="docs/sample.pdf">sample.pdf</a> | ||
| </div> | ||
| </body> | ||
| </html> |
48 changes: 48 additions & 0 deletions
48
src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/scripts/HybridWebView.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| function HybridWebViewInit() { | ||
|
|
||
| function DispatchHybridWebViewMessage(message) { | ||
| const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } }); | ||
| window.dispatchEvent(event); | ||
| } | ||
|
|
||
| if (window.chrome && window.chrome.webview) { | ||
| // Windows WebView2 | ||
| window.chrome.webview.addEventListener('message', arg => { | ||
| DispatchHybridWebViewMessage(arg.data); | ||
| }); | ||
| } | ||
| else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) { | ||
| // iOS and MacCatalyst WKWebView | ||
| window.external = { | ||
| "receiveMessage": message => { | ||
| DispatchHybridWebViewMessage(message); | ||
| } | ||
| }; | ||
| } | ||
| else { | ||
| // Android WebView | ||
| window.addEventListener('message', arg => { | ||
| DispatchHybridWebViewMessage(arg.data); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| window.HybridWebView = { | ||
| "SendRawMessage": function (message) { | ||
|
|
||
| if (window.chrome && window.chrome.webview) { | ||
| // Windows WebView2 | ||
| window.chrome.webview.postMessage(message); | ||
| } | ||
| else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) { | ||
| // iOS and MacCatalyst WKWebView | ||
| window.webkit.messageHandlers.webwindowinterop.postMessage(message); | ||
| } | ||
| else { | ||
| // Android WebView | ||
| hybridWebViewHost.sendRawMessage(message); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| HybridWebViewInit(); |
10 changes: 10 additions & 0 deletions
10
src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/styles/app.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| button | ||
| { | ||
| background-color: dodgerblue; | ||
| border-radius: 5px; | ||
| border-width: 1px; | ||
| color: white; | ||
| cursor: pointer; | ||
| margin: 6px; | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| using System; | ||
|
|
||
| namespace Microsoft.Maui.Controls | ||
| { | ||
| /// <summary> | ||
| /// A <see cref="View"/> that presents local HTML content in a web view and allows JavaScript and C# code to interop using messages. | ||
| /// </summary> | ||
| public class HybridWebView : View, IHybridWebView | ||
| { | ||
| /// <summary>Bindable property for <see cref="DefaultFile"/>.</summary> | ||
| public static readonly BindableProperty DefaultFileProperty = | ||
| BindableProperty.Create(nameof(DefaultFile), typeof(string), typeof(HybridWebView), defaultValue: "index.html"); | ||
| /// <summary>Bindable property for <see cref="HybridRoot"/>.</summary> | ||
| public static readonly BindableProperty HybridRootProperty = | ||
| BindableProperty.Create(nameof(HybridRoot), typeof(string), typeof(HybridWebView), defaultValue: "wwwroot"); | ||
|
|
||
|
|
||
| /// <summary> | ||
| /// Specifies the file within the <see cref="HybridRoot"/> that should be served as the default file. The | ||
| /// default value is <c>index.html</c>. | ||
| /// </summary> | ||
| public string? DefaultFile | ||
| { | ||
| get { return (string)GetValue(DefaultFileProperty); } | ||
| set { SetValue(DefaultFileProperty, value); } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// The path within the app's "Raw" asset resources that contain the web app's contents. For example, if the | ||
| /// files are located in <c>[ProjectFolder]/Resources/Raw/hybrid_root</c>, then set this property to "hybrid_root". | ||
| /// The default value is <c>wwwroot</c>, which maps to <c>[ProjectFolder]/Resources/Raw/wwwroot</c>. | ||
| /// </summary> | ||
| public string? HybridRoot | ||
| { | ||
| get { return (string)GetValue(HybridRootProperty); } | ||
| set { SetValue(HybridRootProperty, value); } | ||
| } | ||
|
|
||
| void IHybridWebView.RawMessageReceived(string rawMessage) | ||
| { | ||
| RawMessageReceived?.Invoke(this, new HybridWebViewRawMessageReceivedEventArgs(rawMessage)); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Raised when a raw message is received from the web view. Raw messages are strings that have no additional processing. | ||
| /// </summary> | ||
| public event EventHandler<HybridWebViewRawMessageReceivedEventArgs>? RawMessageReceived; | ||
|
|
||
| public void SendRawMessage(string rawMessage) | ||
| { | ||
| Handler?.Invoke(nameof(IHybridWebView.SendRawMessage), rawMessage); | ||
| } | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
src/Controls/src/Core/HybridWebView/HybridWebViewRawMessageReceivedEventArgs.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| using System; | ||
|
|
||
| namespace Microsoft.Maui.Controls | ||
| { | ||
| public class HybridWebViewRawMessageReceivedEventArgs : EventArgs | ||
| { | ||
| public HybridWebViewRawMessageReceivedEventArgs(string? message) | ||
| { | ||
| Message = message; | ||
| } | ||
|
|
||
| public string? Message { get; } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.