Skip to content

Commit e23c5f0

Browse files
egvijayanandegvijayanand
authored
Merge pull request #95 from egvijayanand/working
HybridWebView sample updated to .NET MAUI 9 RC1
2 parents c1f65f5 + 103b847 commit e23c5f0

File tree

7 files changed

+126
-60
lines changed

7 files changed

+126
-60
lines changed

‎src/NET_9/HybridWebViewApp/App.xaml.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ public App()
99
}
1010

1111
protected override Window CreateWindow(IActivationState? activationState)
12-
=> new Window(new MainPage()) { Title = "HybridWebViewApp" };
12+
=> new MainWindow();
1313
}
1414
}

‎src/NET_9/HybridWebViewApp/MainWindow.xaml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Window
3+
x:Class="HybridWebViewApp.MainWindow"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:vw="clr-namespace:HybridWebViewApp.Views"
9+
Title="HybridWebViewApp"
10+
mc:Ignorable="d">
11+
<Window.Page>
12+
<vw:MainPage />
13+
</Window.Page>
14+
</Window>

‎src/NET_9/HybridWebViewApp/MainWindow.xaml.cs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace HybridWebViewApp
2+
{
3+
public partial class MainWindow : Window
4+
{
5+
public MainWindow()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
public MainWindow(Page page) : base(page)
11+
{
12+
InitializeComponent();
13+
}
14+
}
15+
}

‎src/NET_9/HybridWebViewApp/Resources/Raw/wwwroot/index.html

+23-18
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
<link rel="stylesheet" href="css/app.css" />
1111
<link rel="icon" href="data:,">
1212
<script src="scripts/hwv.js"></script>
13+
</head>
14+
<body>
15+
<h3>HybridWebView App!</h3>
16+
<div style="margin-left: 10px;">
17+
<input type="text" id="message" class="text-black" placeholder="Enter your message here" maxlength="50" />
18+
<button type="button" id="send" class="btn btn-primary" disabled>Send to .NET</button>
19+
</div>
20+
<div style="margin-top: 20px;">
21+
Messages from .NET: <textarea readonly id="msgFromCS" style="width: 80%; height: 300px;"></textarea>
22+
</div>
1323
<script>
1424
window.addEventListener(
1525
"HybridWebViewMessageReceived",
@@ -19,35 +29,30 @@
1929
msgFromCS.scrollTop = msgFromCS.scrollHeight;
2030
});
2131

22-
function onChanged() {
23-
var message = document.getElementById("message");
24-
var send = document.getElementById("send");
32+
let message = document.getElementById("message");
33+
let send = document.getElementById("send");
2534

35+
message.addEventListener("input", function() {
2636
if (message.value == '') {
2737
send.disabled = true;
2838
} else {
2939
send.disabled = false;
3040
}
31-
}
41+
});
42+
43+
message.addEventListener("keypress", function(e) {
44+
console.log(e.key);
45+
if (e.key === "Enter") {
46+
send.click();
47+
}
48+
});
3249

33-
function onSend() {
34-
var message = document.getElementById("message");
35-
var send = document.getElementById("send");
50+
send.addEventListener("click", function() {
3651
window.HybridWebView.SendRawMessage(message.value);
3752
message.value = '';
3853
send.disabled = true;
3954
message.focus();
40-
}
55+
});
4156
</script>
42-
</head>
43-
<body>
44-
<h3>HybridWebView App!</h3>
45-
<div style="margin-left: 10px;">
46-
<input type="text" id="message" class="text-black" placeholder="Enter your message here" maxlength="50" oninput="onChanged();" />
47-
<button type="button" id="send" class="btn btn-primary" onclick="onSend();" disabled>Send to .NET</button>
48-
</div>
49-
<div style="margin-top: 20px;">
50-
Messages from .NET: <textarea readonly id="msgFromCS" style="width: 80%; height: 300px;"></textarea>
51-
</div>
5257
</body>
5358
</html>

‎src/NET_9/HybridWebViewApp/Resources/Raw/wwwroot/scripts/hwv.js

+62-33
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,78 @@
1-
function HybridWebViewInit()
2-
{
3-
function DispatchHybridWebViewMessage(message) {
4-
const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } });
5-
window.dispatchEvent(event);
6-
}
1+
window.HybridWebView = {
2+
"Init": function () {
3+
function DispatchHybridWebViewMessage(message) {
4+
const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } });
5+
window.dispatchEvent(event);
6+
}
77

8-
if (window.chrome && window.chrome.webview) {
9-
// Windows WebView2
10-
window.chrome.webview.addEventListener('message', arg => {
11-
DispatchHybridWebViewMessage(arg.data);
12-
});
13-
}
14-
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
15-
// iOS and MacCatalyst WKWebView
16-
window.external = {
17-
"receiveMessage": message => {
18-
DispatchHybridWebViewMessage(message);
19-
}
20-
};
21-
}
22-
else {
23-
// Android WebView
24-
window.addEventListener('message', arg => {
25-
DispatchHybridWebViewMessage(arg.data);
26-
});
27-
}
28-
}
8+
if (window.chrome && window.chrome.webview) {
9+
// Windows WebView2
10+
window.chrome.webview.addEventListener('message', arg => {
11+
DispatchHybridWebViewMessage(arg.data);
12+
});
13+
}
14+
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
15+
// iOS and MacCatalyst WKWebView
16+
window.external = {
17+
"receiveMessage": message => {
18+
DispatchHybridWebViewMessage(message);
19+
}
20+
};
21+
}
22+
else {
23+
// Android WebView
24+
window.addEventListener('message', arg => {
25+
DispatchHybridWebViewMessage(arg.data);
26+
});
27+
}
28+
},
2929

30-
window.HybridWebView =
31-
{
3230
"SendRawMessage": function (message) {
31+
window.HybridWebView.__SendMessageInternal('RawMessage', message);
32+
},
33+
34+
"__SendMessageInternal": function (type, message) {
35+
36+
const messageToSend = type + '|' + message;
3337

3438
if (window.chrome && window.chrome.webview) {
3539
// Windows WebView2
36-
window.chrome.webview.postMessage(message);
40+
window.chrome.webview.postMessage(messageToSend);
3741
}
3842
else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
3943
// iOS and MacCatalyst WKWebView
40-
window.webkit.messageHandlers.webwindowinterop.postMessage(message);
44+
window.webkit.messageHandlers.webwindowinterop.postMessage(messageToSend);
4145
}
4246
else {
4347
// Android WebView
44-
hybridWebViewHost.sendRawMessage(message);
48+
hybridWebViewHost.sendMessage(messageToSend);
4549
}
50+
},
51+
52+
"InvokeMethod": function (taskId, methodName, args) {
53+
if (methodName[Symbol.toStringTag] === 'AsyncFunction') {
54+
// For async methods, we need to call the method and then trigger the callback when it's done
55+
const asyncPromise = methodName(...args);
56+
asyncPromise
57+
.then(asyncResult => {
58+
window.HybridWebView.__TriggerAsyncCallback(taskId, asyncResult);
59+
})
60+
.catch(error => console.error(error));
61+
} else {
62+
// For sync methods, we can call the method and trigger the callback immediately
63+
const syncResult = methodName(...args);
64+
window.HybridWebView.__TriggerAsyncCallback(taskId, syncResult);
65+
}
66+
},
67+
68+
"__TriggerAsyncCallback": function (taskId, result) {
69+
// Make sure the result is a string
70+
if (result && typeof (result) !== 'string') {
71+
result = JSON.stringify(result);
72+
}
73+
74+
window.HybridWebView.__SendMessageInternal('InvokeMethodCompleted', taskId + '|' + result);
4675
}
4776
}
4877

49-
HybridWebViewInit();
78+
window.HybridWebView.Init();

‎src/NET_9/HybridWebViewApp/Views/MainPage.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
Light={StaticResource Primary}}">
3939

4040
<Label
41-
x:Name="VersionLabel"
41+
x:Name="versionLabel"
4242
HorizontalOptions="Center"
4343
TextColor="{StaticResource White}"
4444
VerticalOptions="Center" />

‎src/NET_9/HybridWebViewApp/Views/MainPage.xaml.cs

+10-7
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,12 @@ public partial class MainPage : ContentPage
77
public MainPage()
88
{
99
InitializeComponent();
10+
message.ReturnCommand = new Command(SendMessage);
1011
var version = typeof(MauiApp).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion;
11-
VersionLabel.Text = $".NET MAUI ver. {version?[..version.IndexOf('+')]}";
12+
versionLabel.Text = $".NET MAUI ver. {version?[..version.IndexOf('+')]}";
1213
}
1314

14-
private void OnSendClicked(object sender, EventArgs e)
15-
{
16-
hwv.SendRawMessage(message.Text);
17-
message.Text = string.Empty;
18-
message.Focus();
19-
}
15+
private void OnSendClicked(object sender, EventArgs e) => SendMessage();
2016

2117
private async void OnRawMessageReceived(object sender, HybridWebViewRawMessageReceivedEventArgs e)
2218
{
@@ -27,5 +23,12 @@ private void OnMessageChanged(object sender, TextChangedEventArgs e)
2723
{
2824
send.IsEnabled = message.Text.Length > 0;
2925
}
26+
27+
private void SendMessage()
28+
{
29+
hwv.SendRawMessage(message.Text);
30+
message.Text = string.Empty;
31+
message.Focus();
32+
}
3033
}
3134
}

0 commit comments

Comments
 (0)