WebView2

[advaro]

Hi - we are moving away from the .net web browser that we currently use and looking to use the new chromium based Microsoft Edge WebView2.
There is a runtime installer that installs it locally on a PC. Have run this and it said webview2 was already installed, all good.
Also ran it on the server, also said it was already installed.
But I can't for the life of me find it to import into Jade.
My understanding was I should have found it when importing under .net framework and Microsoft.Web.WebView2 but it's not there.
Have tried doing this on local PC thin client, on server as fat client but can't find it.
Has anyone used this new web view yet and can give me any pointers on how to get it imported?

Thanks
Stephen

[BeeJay]

Hi Stephen,

I have WebView2 working in JADE using the following steps. For the import steps I did this all using a single user IDE on my local machine and then extracted/loaded the imported controls into our main dev environment. I then put the three dlls below into the .\i686-msoft-win32-unicode\download\bin folder on the server so they would download to each thin client machine's .\bin folder.

Step 1
Download the WebView2 NuGet package from Microsoft.

Step 2
Copy the following three files from the NuGet package to the bin directory of the Jade environment. The first two are in the .\lib folder structure and the third one is in the .\runtimes folder structure in the NuGet package.

Microsoft.Web.WebView2.Core.dll
Microsoft.Web.WebView2.WinForms.dll
WebView2Loader.dll

Note: The WebView2Loader.dll has a 32 bit and a 64 bit version which needs to match the version of JADE you’re using for your thin client app. If your thin client apps run with 32 bit binaries, you’ll need the version of this dll which is in the .\runtimes\win-x86 folder in the package otherwise for a 64 bit thin client you’ll want the version in the .\runtimes\win-x64 folder in the package.

Step 3
Import the Microsoft.Web.WebView2.Core.dll using the .Net Import Wizard in JADE and using the Browse button on the relevant step of the wizard to select that dll in the bin folder.

Step 4
Import the Microsoft.Web.WebView2.WinForms.dll using the .Net Import Wizard in JADE and using the Browse button on the relevant step of the wizard to select that dll in the bin folder.

Step 5
Paint the new WebView2 control created by step 4 onto the relevant form.

Step 6
In the form load event, or similar, initialize the WebView2 control by calling the ensureCoreWebView2Async method on your painted control:

Code: Select all

self.webView.ensureCoreWebView2Async( null );

Step 7
Implement the coreWebView2InitializationCompleted event for your painted control to load up the web browser as appropriate. This method gets called when the above call to the ensureCoreWebView2Async method completes. In this example code I have a text box which contains the URL to navigate to. You could adjust this code as applicable to suit your requirements.

Code: Select all

webView21_coreWebView2InitializationCompleted(cntrl: WebView2 input; sender: JadeDotNetType input; e: JadeDotNetType input) updating; begin self.btnGo.enabled := true; self.webView.coreWebView2.CoreWebView2.navigate( self.txtURL.text.StringUtf8 ); end;

-------------------------------------------------------------------------

You should now find that the WebView2 browser control has rendered the desired ‘web page’ as per the IE ActiveX control.

Hope that helps.

Cheers,
BeeJay.

Any thoughts expressed are my own and in no way reflect the views of my employer. If this reply includes any sample code, or other changes such as registry key settings, I believe that this information is accurate and reliable and has been prepared with care but give no guarantee that the sample code or suggested changes will be free of defects or errors. No responsibility or liability, financial or otherwise, is accepted for any consequences arising out of the use of any sample code, registry changes, etc, including loss of profits, indirect, special or consequential losses or damages.

[BeeJay]

Hi Stephen,

One other gotcha to watch out for with using WebView2.

We use this in our application on the edit location screen to show that location on Google Maps - assuming the client has purchased a Google Maps API key. However, we still wanted users who don't have WebView2 installed to be able to interact with the edit location form.

If we had the control painted on the form and the user's machine didn't have WebView2 available, it would get an error during the form create resulting in the form never displaying for that user.

We therefore changed our application to dynamically add the control when the user attempts to swap to the folder sheet where Google Maps is rendered and handle the exception if the user's machine didn't have WebView2 available.

Depending on your intended usage of the WebView2 control, you may have to take a similar approach so users can still open the screen and interact with anything on that form which doesn't require the WebView2 control.

Cheers,
BeeJay.

Any thoughts expressed are my own and in no way reflect the views of my employer. If this reply includes any sample code, or other changes such as registry key settings, I believe that this information is accurate and reliable and has been prepared with care but give no guarantee that the sample code or suggested changes will be free of defects or errors. No responsibility or liability, financial or otherwise, is accepted for any consequences arising out of the use of any sample code, registry changes, etc, including loss of profits, indirect, special or consequential losses or damages.