Eto.Forms React.js integration

Rhino Developer
, ,
1

Hi everyone,

We were thinking about to change our UI with better javascript components using React. Is this possible to integrate React.js with Eto.Forms WebView? Do they work as two way function? For example in SketchUp there is a repo to connect with them. Does Rhino has these kind of examples to connect with React.js?

Best regards,
-Oğuzhan

2

@curtisw - any input you can provide here would be great.

3

Eto in Rhino uses WPF on a Windows target. The Webcontrol is an Internet Explorer. Do you want that? Sound like a bad hack if you ask me. Instead you could create a backend server in Rhino and just fetch from that in a independent React frontend… Wouldn’t that make more sense? There are many options to do that with a wide range of technologies and approaches, but thats the approach I would take. This would also allow you to open the GUI on another device.

Also instead of using React which is quite a heavy package, isn‘t something more lightweight like Vue.js a better choice, or even just a static website if its about invoking some commands with nice styles? If you can get rid of React that would allow you to be much more flexible. React is pretty much known for being a total overkill for many use-cases, but people use that because its modern and hyped…

1 Like
4

I know we’re moving Eto’s web control to WebView2 (e.g Chromium). Not sure this will happen until Rhino 8.

– Dale

1 Like
5

Hi @TomTom,

Firstly sorry for my late reply. I was busy on this with SketchUp UI version. We are aiming to use component based power of the React because we have similar blocks (nested components) in the UI. Agree with you about it is heavy but still robust and easy to manage components.

We are planning to take off below dashboard in Modelur4SketchUp. But this dashboard works like one way function means that gets the data and render it. Not sending data to back. But it is also possible with SketchUp.

ModelurDashboard

Maybe @curtisw can put some inputs, it is possible to implement react with eto somehow to connection between Rhino and Reactjs UI directly.

Best,
-Oğuzhan

1 Like
7

Hey @oguzhankoral,

Using Eto’s WebView you can have two way communication by way of the WebView.DocumentLoading event… something in the form of:

var webView = new WebView();

webView.DocumentLoading += (sender, e) =>
{
	if (e.Uri.Scheme == "myscheme")
	{
		e.Cancel = true; // prevent navigation
		
		var path = e.Uri.PathAndQuery;
		if (path == "dosomething")
		{
			// do something..
		}
	}
};

… then in your javascript you only need to do something like:

window.location = 'myscheme:dosomething';

To communicate back to javascript you can use WebView.ExecuteScript()

Hope this helps!

2 Likes
8

Hi everyone,

I’ve been following this fascinating discussion on integrating React.js with Eto.Forms for enhancing UI components in Rhino applications. The insights shared, especially regarding the potential use of Eto’s WebView for two-way communication and the exploration of alternatives like backend servers or adopting lighter frameworks, have been incredibly informative.

Given the evolution of web technologies and their integration into desktop applications, I’m curious about any updates or further developments in this space. With Rhino’s move towards WebView2, as mentioned, does this transition offer new opportunities for integrating modern JavaScript frameworks like React.js more seamlessly? Also, has anyone experimented with Curtis’s suggestion for two-way communication using the WebView.DocumentLoading event and WebView.ExecuteScript() for React.js interactions?

Appreciate all the knowledge shared here and looking forward to any additional insights or experiences, particularly in bridging the gap between desktop and web UI components effectively.

Best regards,
Ryan

9

Here is another thread on using WebView as a Rhino/GH user interface:

Cheers

DK

1 Like
10

Hi @ryan.jenson90,

Time flies.
We have moved to the WebView2 with version of RhinoCommon 7.30. And it is way easier than WebView. The thing you need to do have a host panel object which is inherited from RhinoWindows.Controls.WpfElementHost and register this object into Rhino.UI.Panels.

You should have a .xaml file for WebView2 which defines Browser instance to bind your C# class as Javascript object by using Browser.CoreWebView2.AddHostObjectToScript(bindingName, yourBindingClass). And then on your Javascript part you need to call exact functions you defined in your binding C# class.

You might require a deep dive in this but it is totally doable. It requires some domain knowledge on JS to achieve async/await communication between UI and C# by creating promises and resolving them with craftsmanship.

Best

2 Likes