How can I embed the Roomle Rubens Configurator in a WPF WebView2?

Question

I would like to embed the Roomle Rubens Configurator in a WPF dialog of a Windows desktop application.
I want to use a WebView2 control and have followed the instructions for Get started with WebView2 in WPF apps to create a desktop application.
I also know how to embed the configurator in a website. A nice documentation can be found here: Embedding Integration .

My question is how do I put things together?

I would like to display the configurator as documented in the WebView of my application and communicate with it. I want to set and change parameters in my WPF UI, send the parameters to the web application and update the view.

Answer 1

Do it step by step:

1. Create a WPF dialog with a WebView2 control. See Get started with WebView2 in WPF apps

2. Create a resource folder for the web content and add roomle-configurator-api.es.min.js . The files can be found here: Roomle Rubens Configurator Embedding Lib .
   (In the example the name of the folder is resource\\wwwroot )

3. Get the quick start html from here: Embedding Integration - Copy & Paste without package manager .
   Create an index.html file in the resource folder and paste the content from the quick start guide.

4. Establish a mapping between a virtual host name and the path of the web resources folder. Set the source of the web view by the local host:

    async private Task InitializeAsync(WebView2 webView) { string hostName = "rubens.example" string localResourcePath = Path.Join(AppDomain.CurrentDomain.BaseDirectory, @"resource\\wwwroot"); await webView.EnsureCoreWebView2Async(); webView.CoreWebView2.SetVirtualHostNameToFolderMapping( hostName, localResourcePath, CoreWebView2HostResourceAccessKind.DenyCors); webView.Source = new Uri($"https://{hostName}/index.html"); }

   EnsureCoreWebView2Async wait for CoreWebView2 initialization. The method explicitly triggers initialization of the control's CoreWebView2.
   SetVirtualHostNameToFolderMapping sets a mapping between a virtual host name and a folder path to make available to web sites via that host name.

5. Add an event listener to the host app. In the following example, width and height data is retrieved from the event and set to the corresponding attributes of the root component with configurator.extended.setParameterOfRootComponent :

    window.chrome.webview.addEventListener('message', arg => { if (arg.data.width) { configurator.extended.setParameterOfRootComponent({ "key": "width" }, arg.data.width.toString()); } if (arg.data.height) { configurator.extended.setParameterOfRootComponent({ "key": "height" }, arg.data.height.toString()); } });

6. Set events to the host app:

    public void ChangeHeight(WebView2 webView, int newHeight) => webView.CoreWebView2.PostWebMessageAsJson($"{{ \\"height\\" : {newHeight} }}");

   CoreWebView2.PostWebMessageAsJson posts the specified webMessageAsJson to the top level document in this WebView.
   CoreWebView2.PostWebMessageAsString posts a message that is a simple String rather than a JSON string representation of a JavaScript object.

The full example can be found in the GitHub repository: Roomle/roomle-configurator-wpf-cs-example