Is it possible to use the Blockly google javascript libraries inside a WPF WebBrowser?
In particular, Blockly needs several js scripts. How can we reference the js libraries?
Is it possible to use the Blockly google javascript libraries inside a WPF WebBrowser?
In particular, Blockly needs several js scripts. How can we reference the js libraries?
Short Answer
You can use all blocky features including UI tools and API functions from WPF WebBrowser control. To do so you should:
script
tags referencing Blockyjs
, or methods which you want to call from C#, and required HTML and XML contents based on your requirement (for example toolbox and workspace). You can load toolbox and workspace dynamically at runtime.WebBrowser
control usingNavigate
orNavigateToString
InvokeScript
method ofWebBrowser
control.Also, to be able to use
Blocky
you should make theWebBrowser
use latest document mode without compatibility mode and show modern content.Example
This example shows:
showCode
andrunCode
proxy methods which are independent from wprkspace and will work with any workspace. You can call javascript methods from C#.You can use either of 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 example which shows how to use Blocky API to generate a javascript from Blocky workspace.
Download
You can clone or download working example from:
Creating Example Step by Step
The example contains a simple HTML file which in its head tag required javascript files are added. Also it contains two proxy methods which we created to call from C#.
Also the example contains two xml files. On for Blocky workspace and one for toolbox.
Note: creating those files is not compulsory and you can create workspace or toolbox dynamically at runtime. It's just to show you can load a workspace and toolbox at run-time and they don't need to be static.
1) Create WPF Application
Create a WPF project and name it
WpfAppllicatin1
.2) Create
blockyWorkspace.xml
FileCreate
blockyWorkspace.xml
file using below contents. This file will be used to create Blocky workspace.3) Create
blockyToolbox.xml
FileCreate
blockyToolbox.xml
file using below contents. This file will be used to create Blocky toolbox.4) Create
blockyHTML.html
FileCreate
blockyHTML.html
file using below contents. This file just contains reference to Blocky scripts and also our javascript methods which will be called from our application using C# code:5) Write C# Code
Put a
WebBrowser
control and name itbrowser
and handle itsLoadCompleted
event. Also put twoButton
controls on windows and name themshowCodeButton
andrunCodeButton
and handle theirClick
events like this:6) Run Application
When you run the application, after the buttons got enabled, click on first button and then you can get the result of
showCode
method which uses blocky API to generate javascript code from blocky workspace.Also you can run the code which you created using blocky by click on the second button.