javascript - 在 WPF WebBrowser 中使用 Blockly

Question

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

特别是 Blockly 需要几个 js 脚本。我们如何引用 js 库？

score 10 · Accepted Answer

简答

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

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

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

例子

此示例显示：

如何动态加载工具箱
如何动态加载工作区
如何使用 javascript 方法调用 Blocky API 方法。在示例中，您可以看到独立于 wprkspaceshowCode并可runCode与任何工作空间一起使用的代理方法。您可以从 C# 调用 javascript 方法。

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

下载

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

逐步创建示例

该示例包含一个简单的 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使用 blocky API 从 blocky 工作区生成 javascript 代码的方法的结果。

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

javascript - 在 WPF WebBrowser 中使用 Blockly

1 回答 1

简答

例子

下载

Related

Reference