个人中心
gpt4 book ai didi

javascript - 在 WPF WebBrowser 中使用 Blockly

转载 作者：可可西里 更新时间：2023-11-01 02:41:51 25 4
gpt4 key购买 nike

是否可以在 WPF WebBrowser 中使用 Blockly google javascript 库？

特别是，Blockly 需要 several js scripts .我们如何引用 js 库？

最佳答案

简答

您可以使用 WPF 中的所有 block 状功能，包括 UI 工具和 API 函数 WebBrowser控制。为此，您应该:

  • 创建一个 HTML 内容，其中包含引用 Blocky js 的 script 标记，或您要从 C# 调用的方法，以及根据您的要求所需的 HTML 和 XML 内容(例如工具箱和工作区)。您可以在运行时动态加载工具箱和工作空间。
  • 使用 Navigate 或 NavigateToString 将内容加载到 WebBrowser 控件中
  • 如果你需要调用脚本使用InvokeScript WebBrowser 控件的方法。

此外，为了能够使用 Blocky，您应该让 WebBrowser 使用最新的文档模式而不是兼容模式并显示现代内容。

例子

这个例子表明:

  • 如何动态加载工具箱
  • 如何动态加载工作空间
  • 如何使用 javascript 方法调用 Blocky API 方法。在示例中，您可以看到 showCode 和 runCode 代理方法，它们独立于 wprkspace 并且适用于任何工作区。您可以从 C# 调用 javascript 方法。

您可以使用 Blocky Demos 中的任一个例如。我创建了一个示例，展示了如何使用 Blocky API 方法和 Blocky UI 工具。此示例基于 Generating Javascript展示如何使用 Blocky API 从 Blocky 工作区生成 javascript 的示例。

enter image description here

下载

您可以从以下位置克隆或下载工作示例:

逐步创建示例

该示例包含一个简单的 HTML 文件，该文件在其 head 标记中添加了所需的 javascript 文件。它还包含我们创建的两个从 C# 调用的代理方法。

该示例还包含两个 xml 文件。用于 Blocky 工作区，一个用于工具箱。

注意:创建这些文件不是强制性的，您可以在运行时动态创建工作区或工具箱。这只是为了表明您可以在运行时加载工作区和工具箱，它们不需要是静态的。

1) 创建 WPF 应用程序

创建一个 WPF 项目并将其命名为 WpfAppllicatin1。

2) 创建blockyWorkspace.xml文件

使用以下内容创建 blockyWorkspace.xml 文件。该文件将用于创建 Blocky 工作区。

<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>

3) 创建blockyToolbox.xml文件

使用以下内容创建 blockyToolbox.xml 文件。该文件将用于创建 Blocky 工具箱。

<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>

4) 创建blockyHTML.html文件

使用以下内容创建 blockyHTML.html 文件。此文件仅包含对 Blocky 脚本的引用以及我们的 javascript 方法，这些方法将使用 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>

5) 编写 C# 代码

放置一个WebBrowser 控件并将其命名为browser 并处理其LoadCompleted 事件。同时在窗口上放置两个 Button 控件并将它们命名为 showCodeButton 和 runCodeButton 并像这样处理它们的 Click 事件:

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[] { });
}

6) 运行应用

当您运行应用程序时，在启用按钮后，单击第一个按钮，然后您可以获得 showCode 方法的结果，该方法使用 block 状 API 从 block 状工作区生成 javascript 代码。

您还可以通过单击第二个按钮来运行您使用 blocky 创建的代码。

enter image description here enter image description here

关于javascript - 在 WPF WebBrowser 中使用 Blockly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40799977/

25 4 0
文章推荐： java - 如何删除 JTextArea 上的奇怪边框
文章推荐： java - 通过套接字发送 5MB 的数据？
文章推荐： python - 在 Python/Mechanize 中从 ECONNRESET 恢复
文章推荐： java - 一个服务器多个客户端
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com