Skip to content

Commit 1dfb9d4

Browse files
ShangminxShangminx
authored
Merge pull request #190 from MicrosoftEdge/user/shangmin/addMissingFile
Add missing file for winforms sample
2 parents 1be6f4f + 5ba6c7d commit 1dfb9d4

File tree

3 files changed

+309
-0
lines changed

3 files changed

+309
-0
lines changed

‎SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.csproj‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,11 @@
3737
<None Update="assets\AppStartPageBackground.png">
3838
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
3939
</None>
40+
<None Update="assets\hostObject.html">
41+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
42+
</None>
43+
<None Update="assets\webMessages.html">
44+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
45+
</None>
4046
</ItemGroup>
4147
</Project>

‎SampleApps/WebView2WindowsFormsBrowser/assets/hostObject.html‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<html>
2+
<body>
3+
<button id='runTest'>Run Test</button>
4+
<button id='method'>Method with param</button>
5+
<button id='methodAsync'>Method with param (async)</button>
6+
<button id='methodAsynTaskVoid'>Method with param (async) without result</button>
7+
<button id='methodNoParam'>Method no param</button>
8+
<button id='methodNoParamAsync'>Method no param (async)</button>
9+
<button id='methodNoParamAsyncVoid'>Method no param (async) without result</button>
10+
<button id='propertyGet'>Property Get</button>
11+
<button id='propertySet'>Property Set</button>
12+
<button id='indexerGet'>Get object[index]</button>
13+
<button id='indexerSet'>Set object[index]</button>
14+
<button id='indexerGetAlias'>Get Items[index]</button>
15+
<button id='indexerSetAlias'>Set Items[index]</button>
16+
<div id="div_iframe" style="display: none;"></div>
17+
<script>
18+
//! Create IFrame from the parent html page and load it
19+
function createIFrame() {
20+
var i = document.createElement("iframe");
21+
i.src = "https://appassets.example/hostObject.html";
22+
i.scrolling = "auto";
23+
i.frameborder = "0";
24+
i.height = "50%";
25+
i.width = "100%";
26+
i.name = "iframe_name";
27+
var div = document.getElementById("div_iframe");
28+
div.appendChild(i); div.style.display = 'block';
29+
};
30+
31+
window.onload = function () {
32+
if (window.top === window) {
33+
createIFrame();
34+
}
35+
};
36+
37+
function getStack() {
38+
try {
39+
throw new Error('');
40+
} catch (error) {
41+
return error.stack;
42+
}
43+
}
44+
45+
function valueToString(value) {
46+
return '(' + JSON.stringify(value) + ', ' + (typeof value) + ')';
47+
}
48+
49+
async function assert(condition, text, message) {
50+
if (!condition) {
51+
alert('Assertion failed, ' + text + ': ' + message);
52+
} else {
53+
console.log('assert passed: ' + text);
54+
}
55+
}
56+
57+
function assertEqual(actual, expected, text)
58+
{
59+
assert(expected === actual, text, ('Equality assertion failed. ' +
60+
'Expected ' + valueToString(expected) + ', ' +
61+
'Actual ' + valueToString(actual) + ', ' + getStack()));
62+
}
63+
64+
document.getElementById('runTest').addEventListener('click', async () => {
65+
const bridge = chrome.webview.hostObjects.bridge;
66+
let expected_result = 'value1';
67+
bridge.Prop = expected_result;
68+
let result = await bridge.Prop;
69+
assertEqual(result, expected_result, 'property on bridge');
70+
const value2 = 'value2';
71+
result = await bridge.Func(value2);
72+
expected_result = 'BridgeAddRemoteObject.Func(' + value2 + ')';
73+
assertEqual(result, expected_result, 'method with parameter');
74+
result = await bridge.Func2();
75+
expected_result = 'BridgeAddRemoteObject.Func2()';
76+
assertEqual(result, expected_result, 'method with no parameter');
77+
result = await bridge.FuncAsync(500);
78+
expected_result = 'BridgeAddRemoteObject.FuncAsync(500)';
79+
assertEqual(result, expected_result, 'async method with parameter');
80+
result = await bridge.FuncAsyncTaskVoid(500);
81+
expected_result = null;
82+
assertEqual(result, expected_result, 'async method with parameter without result');
83+
result = await bridge.Func2Async();
84+
expected_result = 'BridgeAddRemoteObject.Func2Async()';
85+
assertEqual(result, expected_result, 'async method with no parameter');
86+
result = await bridge.Func2AsyncTaskVoid();
87+
expected_result = null;
88+
assertEqual(result, expected_result, 'async method with no parameter without result');
89+
result = await bridge.FuncAsync(0);
90+
expected_result = 'BridgeAddRemoteObject.FuncAsync(0)';
91+
assertEqual(result, expected_result, 'async method with no delay');
92+
93+
const another_object = bridge.AnotherObject;
94+
another_object.Prop = value2;
95+
result = await another_object.Prop;
96+
expected_result = value2;
97+
assertEqual(result, expected_result, 'property on another_object');
98+
99+
chrome.webview.hostObjects.options.shouldSerializeDates = true;
100+
const date = new Date();
101+
bridge.DateProp = date;
102+
const date2 = await bridge.DateProp;
103+
assertEqual(date2.getTime(), date.getTime(), 'test date object serialization');
104+
105+
let index = 123;
106+
expected_result = 'aa';
107+
bridge[index] = expected_result;
108+
result = await bridge[index];
109+
assertEqual(result, expected_result, 'bridge[index]');
110+
index = 321;
111+
expected_result = 'bb';
112+
bridge.Items[index] = expected_result;
113+
result = await bridge.Items[index];
114+
assertEqual(result, expected_result, 'bridge.Items[index]');
115+
116+
let resolved_bridge = await bridge;
117+
result = await bridge.GetObjectType(resolved_bridge);
118+
expected_result = 'BridgeAddRemoteObject';
119+
assertEqual(result, expected_result, 'type of resolved_bridge');
120+
result = await bridge.GetObjectType(bridge);
121+
expected_result = 'BridgeAddRemoteObject';
122+
assertEqual(result, expected_result, 'type of bridge');
123+
result = await bridge.GetObjectType(another_object);
124+
expected_result = 'AnotherRemoteObject';
125+
assertEqual(result, expected_result, 'type of another_object');
126+
result = await bridge.GetObjectTypeAsync(another_object);
127+
expected_result = 'AnotherRemoteObject';
128+
assertEqual(result, expected_result, 'type of another_object asynchronously');
129+
130+
alert('Test End');
131+
});
132+
133+
document.getElementById('method').addEventListener('click', async () => {
134+
const bridge = chrome.webview.hostObjects.bridge;
135+
const result = await bridge.Func(prompt('Method parameter text', 'Method parameter text'));
136+
alert(result);
137+
});
138+
139+
document.getElementById('methodAsync').addEventListener('click', async () => {
140+
const bridge = chrome.webview.hostObjects.bridge;
141+
const result = await bridge.FuncAsync(prompt('How many milliseconds should the async operation take? Enter zero or less to make it return immediately and synchronously.', '2000'));
142+
alert(result);
143+
});
144+
145+
document.getElementById('methodAsynTaskVoid').addEventListener('click', async () => {
146+
const bridge = chrome.webview.hostObjects.bridge;
147+
const result = await bridge.FuncAsyncTaskVoid(prompt('How many milliseconds should the async operation take? Enter zero or less to make it return immediately and synchronously.', '2000'));
148+
alert(result);
149+
});
150+
151+
document.getElementById('methodNoParam').addEventListener('click', async () => {
152+
const bridge = chrome.webview.hostObjects.bridge;
153+
const result = await bridge.Func2();
154+
alert(result);
155+
});
156+
157+
document.getElementById('methodNoParamAsync').addEventListener('click', async () => {
158+
const bridge = chrome.webview.hostObjects.bridge;
159+
const result = await bridge.Func2Async();
160+
alert(result);
161+
});
162+
163+
document.getElementById('methodNoParamAsyncVoid').addEventListener('click', async () => {
164+
const bridge = chrome.webview.hostObjects.bridge;
165+
const result = await bridge.Func2AsyncTaskVoid();
166+
alert(result);
167+
});
168+
169+
document.getElementById('propertyGet').addEventListener('click', async () => {
170+
const bridge = chrome.webview.hostObjects.bridge;
171+
const result = await bridge.Prop;
172+
alert(result);
173+
});
174+
175+
document.getElementById('propertySet').addEventListener('click', async () => {
176+
const bridge = chrome.webview.hostObjects.bridge;
177+
bridge.Prop = prompt('Property text', 'Property text');
178+
});
179+
180+
document.getElementById('indexerGet').addEventListener('click', async () => {
181+
const bridge = chrome.webview.hostObjects.bridge;
182+
const result = await bridge[1];
183+
alert(result);
184+
});
185+
186+
document.getElementById('indexerSet').addEventListener('click', async () => {
187+
const bridge = chrome.webview.hostObjects.bridge;
188+
bridge[1] = prompt('Property text', 'Property text');
189+
});
190+
191+
document.getElementById('indexerGetAlias').addEventListener('click', async () => {
192+
const bridge = chrome.webview.hostObjects.bridge;
193+
const result = await bridge.Items[12];
194+
alert(result);
195+
});
196+
197+
document.getElementById('indexerSetAlias').addEventListener('click', async () => {
198+
const bridge = chrome.webview.hostObjects.bridge;
199+
bridge.Items[12] = prompt('Property text', 'Property text');
200+
});
201+
</script>
202+
</body>
203+
</html>

‎SampleApps/WebView2WindowsFormsBrowser/assets/webMessages.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ScenarioWebMessage</title>
5+
<script>
6+
"use strict";
7+
window.chrome.webview.addEventListener('message', arg => {
8+
if ("WindowBounds" in arg.data) {
9+
document.getElementById("window-bounds").value = arg.data.WindowBounds;
10+
}
11+
if ("SetColor" in arg.data) {
12+
document.getElementById("colorable").style.color = arg.data.SetColor;
13+
}
14+
});
15+
16+
function SetTitleText() {
17+
let titleText = document.getElementById("title-text");
18+
window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
19+
}
20+
21+
function GetWindowBounds() {
22+
window.chrome.webview.postMessage("GetWindowBounds");
23+
}
24+
function createIFrame() {
25+
var i = document.createElement("iframe");
26+
i.src = "https://appassets.example/webMessages.html";
27+
i.scrolling = "auto";
28+
i.frameborder = "0";
29+
i.height = "90%";
30+
i.width = "100%";
31+
i.name = "iframe_name";
32+
var div = document.getElementById("div_iframe");
33+
div.appendChild(i); div.style.display = 'block';
34+
};
35+
window.onload = function () {
36+
var class_value;
37+
var menu_item;
38+
var description;
39+
if (window.top === window) {
40+
var div_summary = document.getElementById("div_summary");
41+
div_summary.style.display = 'block';
42+
createIFrame();
43+
class_value = "ICoreWebView2";
44+
menu_item = "Post Message JSON";
45+
description = "page";
46+
}
47+
else {
48+
class_value = "ICoreWebView2Frame";
49+
menu_item = "IFrame Post Message JSON";
50+
description = "iframe";
51+
}
52+
53+
document.getElementById("class1").innerHTML = class_value;
54+
document.getElementById("class2").innerHTML = class_value;
55+
document.getElementById("class3").innerHTML = class_value;
56+
document.getElementById("menu").innerHTML = menu_item;
57+
document.getElementById("page").innerHTML = description;
58+
};
59+
</script>
60+
</head>
61+
<body>
62+
<div id="div_summary" style="display: none;">
63+
<h1>WebMessage sample page</h1>
64+
<p>
65+
This page demonstrates basic interaction between the host app and the webview by
66+
means of Web Messages.
67+
</p>
68+
</div>
69+
70+
<h2>Posting Messages</h2>
71+
<p id="colorable">
72+
Messages can be posted from the host app to this <label id="page"></label> using the
73+
functions <code><label id="class1"></label>::PostWebMessageAsJson</code> and
74+
<code><label id="class2"></label>::PostWebMessageAsString</code>. Try using the menu item
75+
"Script-&gt;<label id="menu"></label>" to send the message <code>{"SetColor":"blue"}</code>.
76+
It should change the text color of this paragraph.
77+
</p>
78+
79+
<h2>Receiving Messages</h2>
80+
<p>The host app can receive messages by registering an event handler with
81+
<code><label id="class3"></label>::HandleWebMessage</code>. If you enter text and click
82+
"Send", this <label id="page"></label> will send a message to the host app which will change the text of
83+
the title bar.</p>
84+
<input type="text" id="title-text" />
85+
<button onclick="SetTitleText()">Send</button>
86+
87+
<h2>Round trip</h2>
88+
<p>
89+
The host app can send messages back in response to received messages. If you click
90+
"Get window bounds", the host app will report back the bounds of its window, which will
91+
appear in the text box.
92+
</p>
93+
<button onclick="GetWindowBounds()">Get window bounds</button><br>
94+
<textarea id="window-bounds" rows="4" readonly></textarea>
95+
96+
<div id="div_iframe" style="display: none;">
97+
<h2>IFrame</h2>
98+
</div>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)