文章/答案/技术大牛

发布

社区首页 >问答首页 >在WPF WebBrowser中使用Blockly

问在WPF WebBrowser中使用Blockly
EN

Stack Overflow用户

提问于 2016-11-25 07:44:04

回答 1查看 3.1K关注 0票数 11

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

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

blockly

javascript

wpf

webbrowser-control

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-29 09:23:06

简短回答

您可以使用所有块特性，包括来自WPF WebBrowser控件的UI工具和API函数。要做到这一点，你应该：

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

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

示例

这个例子显示：

如何动态加载工具箱
如何动态加载工作区
如何使用javascript方法调用块API方法。在本例中，您可以看到独立于wprkspace的showCode和runCode代理方法，它们将与任何工作区一起工作。您可以从C#调用javascript方法。

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

下载

您可以从以下站点复制或下载工作示例：

逐步创建示例

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

该示例还包含两个xml文件。打开块工作空间，一个打开工具箱。

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

1)创建WPF应用程序

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

blockyWorkspace.xml 2)创建文件

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

<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 3)创建文件

使用以下内容创建blockyToolbox.xml文件。此文件将用于创建块式工具箱。

<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文件。该文件只包含对块脚本的引用，还包含我们的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方法的结果，该方法使用块API从块工作区生成javascript代码。

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

票数 10

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40799977

复制

相似问题

问在WPF WebBrowser中使用Blockly
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在WPF WebBrowser中使用BlocklyEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在WPF WebBrowser中使用Blockly
EN