Is there any way to embedded Blockly into a wpf application?

469 views
Skip to first unread message

James Ma

unread,
Oct 31, 2018, 11:35:36 PM10/31/18
to Blockly
I'm going to use blockly to build a setup page for user event handler, and I want to embed this page into my c# wpf application.  It works fine in IE & Chrome.

However, when I use the WebBrowser control in my application to navigate the web page, it seems that WebBrowser control doesn't support some javascript property features.  There are some error prompted and the workspace does not shown.

May I know if there has any other way that I can embed the blockly page into a wpf application?

Erik Pasternak

unread,
Nov 1, 2018, 1:28:09 PM11/1/18
to Blockly
Hi James,

We've never used wpf before so I'm not sure what alternatives there are. Hopefully someone else on the forum has a suggestion and please let us know if you figure out something that works.

Cheers,
Erik

James Ma

unread,
Nov 3, 2018, 2:59:50 AM11/3/18
to Blockly
Just find an example here: https://github.com/r-aghaei/BlockyExample

It works fine except that the mouse cursor will be disappear when moving over some non-editable area of a block.

Erik Pasternak於 2018年11月2日星期五 UTC+8上午1時28分09秒寫道:

James Ma

unread,
Nov 4, 2018, 10:43:58 PM11/4/18
to Blockly
Just for reference.

If someone want to embed Blockly into a .net application, CEF (https://github.com/cefsharp/CefSharp) is a better choice if chrome is available.  It works fine with my project. 
Besides of the mouse cursor issue, there also have javascript error using webbrowser control.  For example, if you drag on the empty area right after page loaded, it will bring the window to bottom, and if you drag again, it will trigger javascript error.  And there also have many chance to hit javascript error.

For safety, I have changed to use cef instead of the default webbrowser control.

gcmf...@avans.nl

unread,
Nov 5, 2018, 3:03:08 AM11/5/18
to Blockly
Hi James,

It's possible to embed Blockly into a wpf application, just use the .NET webbrowser. I had some problems with it aswell, but i worked it out.

for the mouse cursor issue you talked about in which the window goes to the bottom and triggers an error, just remove the following line in blockly_compressed.

document.activeElement&&document.activeElement.blur();    at     Blockly.WorkspaceSvg.prototype.setBrowserFocus=function()

James Ma

unread,
Nov 5, 2018, 3:57:40 AM11/5/18
to Blockly
Hi Gijs,

Thanks a lot, I will try it tonight.

Besides, do you have problem in display of cursor?  The mouse cursor is missing when moving over the non-editable area of a block.

I'm now testing the CEF, it works fine except that I have to deploy a number of files, and i'm not sure if it need to install chrome for using CEF, some user may not want to install other browser.  So far, CEF works much and much better than webbrowser control.


gcmf...@avans.nl於 2018年11月5日星期一 UTC+8下午4時03分08秒寫道:

James Ma

unread,
Nov 5, 2018, 4:24:19 AM11/5/18
to Blockly
Removed the document.activeElement&&document.activeElement.blur();    at     Blockly.WorkspaceSvg.prototype.setBrowserFocus=function() in blockly_compressed.js as tested again, the problem cannot be fixed.

Just open the page, drag on the empty area, the application will go to bottom.  
Click on the blank area to bring it to top, and drag without anything in the blank area, a javaScript error will be prompted.
Right click on some area can also trigger the javaScritp error.

But if I click on the toolbox item right after application started, it will not bring the window to bottom, and I can do everything without error.



gcmf...@avans.nl於 2018年11月5日星期一 UTC+8下午4時03分08秒寫道:

gcmf...@avans.nl

unread,
Nov 6, 2018, 8:16:16 AM11/6/18
to Blockly
Hi,

Don't use CEF if you don't want users to install the chromium webbrowser. 

The script errors will tell you in which file and line the error promted, maybe that will help. 

Removing the document.activeElement&&document.activeElement.blur(); line in blockly_compressed worked for me.

Also, use var instead of let. IE doesn't support let and will give errors if you use it. 
Reply all
Reply to author
Forward
0 new messages