Ответ 1
Короткий ответ
Вы можете использовать все блокирующие функции, включая инструменты пользовательского интерфейса и функции API, из элемента управления WPF WebBrowser. Для этого вам необходимо:
- Создайте содержимое HTML, которое содержит теги
script, ссылающиеся на Blockyjs, или методы, которые вы хотите вызывать из С#, и требуемое содержимое HTML и XML в соответствии с вашими требованиями (например, набор инструментов и рабочее пространство). Вы можете загружать набор инструментов и рабочее пространство динамически во время выполнения. - Загрузка содержимого в элемент управления
WebBrowserс помощьюNavigateилиNavigateToString - Если вам нужно вызвать скрипт, используйте метод
InvokeScriptэлемента управленияWebBrowser.
Кроме того, чтобы иметь возможность использовать Blocky, вы должны заставить WebBrowser использовать режим последней версии документа без режима совместимости и показывать современный контент.
Пример
Этот пример показывает:
- Как вы можете загружать набор инструментов динамически
- Как вы можете загружать рабочее пространство динамически
- Как вы можете вызывать блочные методы API, используя методы javascript. В примере вы можете видеть прокси-методы
showCodeиrunCode, которые не зависят от wprkspace и будут работать с любым рабочим пространством. Вы можете вызывать методы JavaScript из С#.
Вы можете использовать любой из блочных демонстраций, например. Я создал пример, который показывает как использование Blocky API, так и Blocky UI Tools. Этот пример основан на примере Generation Javascript, который показывает, как использовать Blocky API для генерации javascript из рабочей области Blocky.
Скачать
Вы можете клонировать или скачать рабочий пример с:
Создание примера шаг за шагом
В примере содержится простой HTML файл, в заголовок которого добавлены необходимые файлы JavaScript. Также он содержит два прокси-метода, которые мы создали для вызова из С#.
Также пример содержит два XML файла. Включено для рабочей области "Блочный" и одно для панели инструментов.
Примечание: создание этих файлов не является обязательным, и вы можете динамически создавать рабочее пространство или набор инструментов во время выполнения. Это просто для того, чтобы показать, что вы можете загрузить рабочее пространство и набор инструментов во время выполнения, и они не должны быть статичными.
1) Создать приложение WPF
Создайте проект WPF и назовите его WpfAppllicatin1.
2) Создать файл blockyWorkspace.xml
Создайте файл 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>
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, используя содержимое ниже. Этот файл просто содержит ссылку на скриптовые блоки, а также на наши методы javascript, которые будут вызываться из нашего приложения с использованием кода С#:
<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) Написать код С#
Поместите элемент управления 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 из блочной рабочей области.
Также вы можете запустить код, который вы создали, используя blocky, нажав на вторую кнопку.
