插入标准控件
本节内容可以参考示例文件"CaseStudy\WebViewer\DOM基础.Table"的窗口"插入标准控件"
到目前为止，Foxtable可以执行JS代码，JS代码可以执行Foxtable代码，这就是混合开发。
其实不单单是代码的混合，控件也可以混合，例如你可以在网页中插入Foxtable的标准控件。
示例
1、窗口的AfterLoad事件代码：
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft)
'将Foxtable库注入到WebViewer脚本环境
Dim
html
As
String
=
<![CDATA[
<html>
<head>
<title>单击事件测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { font-family: 'Microsoft YaHei'; padding: 20px; color: gray; }
.note { background: #fff3cd; border-left: 4px solid #ffc107; padding:
10px; margin: 10px 0; color: #856404; }
.date, .pubtitle, .subtitle, .other, .pubcity, .pubname, .isbn { color:
black; }
</style>
</head>
<body>
<div class="note">
⚡
在网页中插入标准控件示例（单击可编辑）
</div>
<div style="color:black; font-weight:bold;">
<p>This document demonstrates using a custom attribute
'contenteditable'.</p>
<p>The entire document is marked as non-editable excluding certain
elements. Those elements are marked as editable, they serve as input fields.</p>
<p>The user can navigate between input fields pressing the 'Tab'
key.</p>
</div>
<p> </p>
<h4>Publication</h4>
<p>Date of publication: <span id="f01" class="date">10/01/2004</span></p>
<p>Publication title: <span id="f02" class="pubtitle">Techniques for
authoring complex XML documents</span></p>
<p>Subtitle: <span id="f03" class="subtitle">Templates and structured
editing</span></p>
<p>Other data: <span id="f04" class="other">Proc. of the 2004 ACM Symposium
on Document Engineering</span></p>
<p>Publisher city: <span id="f05" class="pubcity">Milwaukee, WI</span></p>
<p>Publisher name: <span id="f06" class="pubname">ACM Press</span></p>
<p>ISBN: <span id="f07" class="isbn">1-59593-240-2</span></p>
<script>
const ft =
window.chrome.webview.hostObjects.sync.ft //引用Foxtable库
const targetIds =
['f01', 'f02', 'f03', 'f04', 'f05', 'f06', 'f07']; //
目标元素的ID列表
//
全局单击事件处理
document.body.addEventListener('click', function(e) {
const target = e.target;
const targetId = target.id;
//
检查是否是目标元素
if (targetIds.includes(targetId)) {
//
调用自定义函数
LinkControlToElement
ft.Functions.Execute("LinkControlToElement", targetId);
} else {
//
调用自定义函数
HideCurrentControl
ft.Functions.Execute("HideCurrentControl");
}
});
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
2、自定义函数LinkControlToElement的代码：
'''Async
Dim
frm
As
WinForm.Form = Forms("插入标准控件")
If
frm.Opened
Then
Functions.Execute("HideCurrentControl")
'隐藏之前的控件
Dim
id
As
String
= Args(0)
Dim
wv
As
WebViewer = frm.Controls("WebViewer1").WebViewer
Dim
elm = wv.getElementById(id)
Dim
curControl
As
WinForm.Control
Dim
value
As
String
= (Await
elm.textContent).Trim("""")
'要去掉双引号
Dim
className
As
String
=
Await
elm.className
Select
Case
className.Trim("""")
Case
"pubtitle",
"subtitle",
"other",
"pubname",
"isbn"
curControl = frm.Controls("TextBox1")
frm.Controls("TextBox1").Value
= value
Case
"date"
curControl = frm.Controls("DateTimePicker1")
frm.Controls("DateTimePicker1").Value
= value
Case
"pubcity"
curControl = frm.Controls("ComboBox1")
frm.Controls("ComboBox1").Value
= value
Case
Else
Return
Nothing
End
Select
'
获取元素位置
Dim
x
As
Integer
=
Await
elm.offsetLeft
Dim
y
As
Integer
=
Await
elm.offsetTop
Dim
width
As
Integer
=
Await
elm.offsetWidth
'
获取滚动位置
Dim
scrollLeft =
Await
wv.window.pageXOffset
Dim
scrollTop =
Await
wv.window.pageYOffset
'
定位控件
curControl.Location =
New
Point(x - scrollLeft, y - scrollTop)
curControl.Width = width + 20
curControl.Visible =
True
Vars("curControl")
= curControl.Name
'记录控件名
Vars("id")
= id
'记录元素id
End
If
3、自定义函数HideCurrentControl的代码：
Dim
frm
As
WinForm.Form = Forms("插入标准控件")
If
frm.Opened
AndAlso
Vars("curControl")
IsNot
Nothing
Then
Dim
wv
As
WebViewer = frm.Controls("WebViewer1").WebViewer
frm.Controls(Vars("curControl")).Visible
=
False
Dim
curControl = frm.Controls(Vars("curControl"))
curControl.WriteValue()
wv.getElementById(Vars("id")).textContent
= curControl.Text
Vars("curControl")
=
Nothing
Vars("id")
=
Nothing
End
If