在WPF WebBrowser中使用Blockly

Question

在WPF WebBrowser中使用Blockly

oai*_*mac 10 javascript c# wpf webbrowser-control blockly

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

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

Answer 1

Rez*_*aei 9

简答

您可以使用WPF WebBrowser控件中的所有块功能,包括UI工具和API函数.为此,你应该:

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

另外,为了能够使用Blocky你应该WebBrowser使用没有兼容模式的最新文档模式并显示现代内容.

例

此示例显示:

如何动态加载工具箱
如何动态加载工作空间
如何使用javascript方法调用Blocky API方法.在该示例中,您可以查看showCode和runCode代理独立于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项目并命名它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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

5)编写C#代码

放置一个WebBrowser控件并命名它browser并处理它的LoadCompleted事件.也放了两个Button控件在Windows上,并将其命名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[] { });
}

Run Code Online (Sandbox Code Playgroud)

6)运行应用程序

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

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

归档时间：	8 年，11 月前
查看次数：	1559 次
最近记录：	6 年前