在 WPF WebBrowser 中使用 Blockly

Question

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

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

Answer 1

简答

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

创建一个 HTML 内容，其中包含引用 Blocky js 的 script 标记，或者您要从 C# 调用的方法，并且需要 HTML 和 XML 内容根据您的要求（例如工具箱和工作区）。您可以在运行时间动态加载工具箱和工作区。
使用Navigate或NavigateToString

WebBrowser

如果您需要调用脚本，请使用 WebBrowser 控件的 InvokeScript 方法。

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

例子

这个例子显示：

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

您可以使用任一 Blocky Demos for example. I created an example which shows both using Blocky API methods and Blocky UI Tools. This example is based on Generating 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事件。同时在 windows 上放置两个 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方法的结果，该方法使用块状API生成javascript 来自块状工作区的代码。

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

在 WPF WebBrowser 中使用 Blockly

Use Blockly inside a WPF WebBrowser

javascript

c#

wpf

webbrowser-control

blockly

简答

例子

下载