在WPF WebBrowser中使用Blockly
是否可以在WPF WebBrowser中使用Blockly google javascript库？
特别是，Blockly需要several js scripts。我们如何引用js库？
1 个答案:
答案 0 :(得分：8)
简答
您可以使用WPF WebBrowser控件中的所有块功能，包括UI工具和API函数。为此，你应该：
- 创建一个HTML内容，其中包含引用Blocky
script的{{1}}标记，或者您想要从C＃调用的方法，以及根据您的要求所需的HTML和XML内容（例如工具箱和工作区） 。您可以在运行时动态加载工具箱和工作区。 - 使用
js或WebBrowser将内容加载到 - 如果您需要使用
NavigateToString控件的InvokeScript方法调用脚本。
Navigate控件
此外，为了能够使用WebBrowser，您应该使Blocky使用最新文档模式而不使用兼容模式并显示现代内容。
实施例
此示例显示：
- 如何动态加载工具箱
- 如何动态加载工作区
- 如何使用javascript方法调用Blocky API方法。在该示例中，您可以看到
WebBrowser和showCode代理方法，这些方法独立于wprkspace，可以与任何工作区一起使用。您可以从C＃调用javascript方法。
例如，您可以使用Blocky Demos之一。我创建了一个示例，其中显示了使用Blocky API方法和Blocky UI Tools。此示例基于Generating Javascript示例，该示例演示如何使用Blocky API从Blocky工作区生成javascript。
下载
您可以从以下位置克隆或下载工作示例：
逐步创建示例
该示例包含一个简单的HTML文件，在其head标记中需要添加javascript文件。它还包含两个我们创建的代理方法，用于从C＃调用。
此示例还包含两个xml文件。用于Blocky工作区和用于工具箱的工作区。
注意：创建这些文件不是必需的，您可以在运行时动态创建工作区或工具箱。这只是为了表明您可以在运行时加载工作区和工具箱，而且它们不需要是静态的。
1）创建WPF应用程序
创建一个WPF项目并将其命名为runCode。
2）创建WpfAppllicatin1文件
使用以下内容创建blockyWorkspace.xml文件。该文件将用于创建Blocky工作区。
blockyWorkspace.xml 3）创建<xml>
<block type="controls_if" inline="false" x="20" y="20">
<mutation else="1"></mutation>
<value name="IF0">
<block type="logic_compare" inline="true">
<field name="OP">EQ</field>
<value name="A">
<block type="math_arithmetic" inline="true">
<field name="OP">ADD</field>
<value name="A">
<block type="math_number">
<field name="NUM">6</field>
</block>
</value>
<value name="B">
<block type="math_number">
<field name="NUM">7</field>
</block>
</value>
</block>
</value>
<value name="B">
<block type="math_number">
<field name="NUM">13</field>
</block>
</value>
</block>
</value>
<statement name="DO0">
<block type="text_print" inline="false">
<value name="TEXT">
<block type="text">
<field name="TEXT">Don't panic</field>
</block>
</value>
</block>
</statement>
<statement name="ELSE">
<block type="text_print" inline="false">
<value name="TEXT">
<block type="text">
<field name="TEXT">Panic</field>
</block>
</value>
</block>
</statement>
</block>
</xml>
文件
使用以下内容创建blockyToolbox.xml文件。该文件将用于创建Blocky工具箱。
blockyToolbox.xml 4）创建<xml>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
文件
使用以下内容创建blockyHTML.html文件。这个文件只包含对Blocky脚本的引用以及我们的javascript方法，这些方法将使用C＃代码从我们的应用程序中调用：
blockyHTML.html5）编写C＃代码
添加<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script src="https://blockly-demo.appspot.com/static/blockly_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/blocks_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/javascript_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/msg/js/en.js"></script>
</head>
<body>
<div id="host" style="height: 480px; width: 600px;"></div>
<script>
var workspace;
function init(toolboxXML, workspaceXML) {
workspace = Blockly.inject('host',
{ media: '../../media/', toolbox: toolboxXML });
var wx = Blockly.Xml.textToDom(workspaceXML)
Blockly.Xml.domToWorkspace(wx, workspace);
}
function showCode() {
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
var code = Blockly.JavaScript.workspaceToCode(workspace);
return code;
}
function runCode() {
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try { eval(code); } catch (e) { alert(e); }
}
</script>
</body>
</html>
控件并将其命名为WebBrowser并处理其browser事件。同时在Windows上放置两个LoadCompleted控件，并将它们命名为Button和showCodeButton并处理他们的runCodeButton事件，如下所示：
Click6）运行应用程序
运行应用程序时，在启用按钮后，单击第一个按钮，然后您可以获得public MainWindow()
{
InitializeComponent();
showCodeButton.IsEnabled = false;
runCodeButton.IsEnabled = false;
browser.NavigateToString(System.IO.File.ReadAllText(@"d:\blockyHTML.html"));
}
private void browser_LoadCompleted(object sender, NavigationEventArgs e)
{
showCodeButton.IsEnabled = true;
runCodeButton.IsEnabled = true;
var toolboxXML = System.IO.File.ReadAllText(@"d:\blockyToolbox.xml");
var workspaceXML = System.IO.File.ReadAllText(@"d:\blockyWorkspace.xml");
//Initialize blocky using toolbox and workspace
browser.InvokeScript("init", new object[] { toolboxXML, workspaceXML });
}
private void showCodeButton_Click(object sender, RoutedEventArgs e)
{
var result = browser.InvokeScript("showCode", new object[] { });
MessageBox.Show(result.ToString());
}
private void runCodeButton_Click(object sender, RoutedEventArgs e)
{
browser.InvokeScript("runCode", new object[] { });
}
方法的结果，该方法使用块状API从块状工作区生成javascript代码。
此外，您可以通过单击第二个按钮运行使用blocky创建的代码。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？