Embedding in a .NET Application ​

The Visiontree Auto Renderer, while written in JavaScript, can be seamlessly integrated into a .NET application using a WebView. This document will guide you through the process of embedding the auto-renderer in a .NET application using WebView technologies, such as CefSharp and WebView2, and leveraging their bi-directional messaging API to facilitate communication between the auto-renderer and the host .NET system.

1. Selecting a WebView ​

To embed the Visiontree Auto Renderer in a .NET application, you will first need to choose a WebView technology. Two popular options are CefSharp and WebView2:

• CefSharp: A Chromium-based browser control for .NET applications, which provides excellent performance and compatibility with modern web technologies.
• WebView2: A Microsoft Edge (Chromium)-based WebView control for .NET applications, which ensures up-to-date features and security patches.

Both options offer similar capabilities and a bi-directional messaging API for communication between the JavaScript and .NET environments.

2. Configuring the WebView ​

After selecting a WebView, configure it to load the Visiontree Auto Renderer's JavaScript bundle and associated assets. This typically involves creating an HTML file that references the JavaScript bundle and other resources, and then instructing the WebView to load the file.

Ensure that the WebView's settings allow for the execution of JavaScript and the ability to send and receive messages from the .NET environment.

3. Embedding the Visiontree Auto Renderer ​

With the WebView configured, add it to your .NET application's user interface. The Visiontree Auto Renderer will be displayed within the WebView, providing a seamless integration into your application.

4. Implementing Bi-directional Communication ​

To facilitate communication between the Visiontree Auto Renderer and the host .NET system, use the bi-directional messaging API provided by the WebView.

• Sending Messages: To send messages from the .NET environment to the JavaScript environment, use the WebView's ExecuteScriptAsync or ExecuteScript methods to call JavaScript functions with the necessary arguments.
• Receiving Messages: To receive messages from the JavaScript environment, create a .NET object that exposes methods to be called from JavaScript. Register the object with the WebView using the RegisterAsyncJsObject (CefSharp) or AddHostObjectToScript (WebView2) methods. In your JavaScript code, call these methods using the window.chrome.webview.postMessage (WebView2) or window.cefQuery (CefSharp) APIs.

5. Example Usage ​

Here is an example of embedding the Visiontree Auto Renderer in a .NET application using CefSharp:

1. Install the CefSharp.WinForms NuGet package.
2. Create an HTML file that references the Visiontree Auto Renderer JavaScript bundle and associated assets.
3. Configure the CefSharp WebView:

using CefSharp;
using CefSharp.WinForms;

var browser = new ChromiumWebBrowser("path/to/your/html/file.html");
browser.BrowserSettings.WebSecurity = CefState.Disabled;

4. Add the WebView to your application's user interface.
5. Implement bi-directional communication:

// .NET -> JavaScript
await browser.GetMainFrame().EvaluateScriptAsync("yourJavaScriptFunction", args);

// JavaScript -> .NET
public class BoundObject
{
    public void YourDotNetMethod(string message)
    {
        // Process the message
    }
}

browser.RegisterAsyncJsObject("boundObject")