Clone wiki

ChromiumFX / Walkthrough 01

Walkthrough 01 - Getting started with the Browser Control

Note: This document is not up to date. While the overall concepts are still valid, some of the functions mentioned in it may have changed.

This walkthrough is about getting started with the ChromiumWebBrowser. See also Walkthrough 02 - Getting started with the remoting framework

In order to use the WebBrowserControl, you have to reference ChromiumFX.dll and ChromiumWebBrowser.dll. The native libcfx.dll library and the CEF libraries have to be in a place where they can be found: by default, in the same directory as the executing assembly or in a subdirectory called "cef".

The ChromiumFX and ChromiumWebBrowser assemblies provide 3 namespaces:

    using Chromium;
    using Chromium.Remote;
    using Chromium.WebBrowser;

First of all, initialize the framework:

    public class Program {

        [STAThread]
        public static void Main() {

            ChromiumWebBrowser.Initialize();

This loads the native libraries and sets up ChromiumFX for use with the ChromiumWebBrowser control. ChromiumFX wants to find the native libraries in the assembly directory or in a subdirectory called /cef. Optionally the libraries can be loaded from a different location with one of the LoadLibraries overloads:

    public class Walkthrough01 {

        [STAThread]
        public static void Main() {

            CfxRuntime.LoadLibraries(@"C:\path\to\cef\directory");
            ChromiumWebBrowser.Initialize();

ChromiumFX will be initialized with default settings. Optionally you can register to the ChromiumWebBrowser.OnBeforeCfxInitialize before you call Initialize(); this will give you a chance to change CfxSettings, register to CfxBrowserProcessHandler events or add a CfxOnBeforeCommandLineProcessingEventHandler.

    public class Walkthrough01 {

        [STAThread]
        public static void Main() {

            CfxRuntime.LoadLibraries(@"C:\path\to\cef\directory");
            ChromiumWebBrowser.OnBeforeCfxInitialize += ChromiumWebBrowser_OnBeforeCfxInitialize;
            ChromiumWebBrowser.Initialize();

Now create a Form and fill it with a ChromiumWebBrowser control.

            Form f = new Form();
            f.Size = new Size(800, 600);

            ChromiumWebBrowser wb = new ChromiumWebBrowser();
            wb.Dock = DockStyle.Fill;
            wb.Parent = f;

In a real application, we could now register, for instance, javascript callbacks for the main frame.

            wb.AddGlobalJSFunction("HelloApp").Execute += HelloApp_Execute;
            wb.AddGlobalJSFunction("DoSomething").Execute += DoSomething_Execute;

Being HelloApp_Execute and DoSomething_Execute event handler functions defined in the same class:

        static void HelloApp_Execute(object sender, CfrV8HandlerExecuteEventArgs e) {
            var numberOfArguments = e.Arguments.Length;
            if(numberOfArguments > 0) {
                var firstArg = e.Arguments[0].IntValue;
                MessageBox.Show("First argument supplied: " + firstArg);
            }
            e.SetReturnValue(100);
        }

This could now be executed by

            wb.ExecuteJavascript("var x = HelloApp();");

Or by javascript in a page loaded into the browser control. For example, we can add some custom web resources to the browser:

            var html = " <button onclick='var x = HelloApp(12345); document.getElementById(\"demo\").innerHTML =x;'>";
            html += "Trigger HelloApp(12345) callback function.</button><br><br><img src='http://localresource/image'>";
            html += "<br><p>Callback returned: <span id='demo'></span></p>";
            html += "<br><br><button onclick='DoSomething();'>Do something</button>";

            var bm = new System.Drawing.Bitmap(100, 100);
            using(var g = System.Drawing.Graphics.FromImage(bm)) {
                g.DrawLine(System.Drawing.Pens.Black, 0, 0, 100, 100);
            }

            wb.SetWebResource("http://localresource/text.html", new Chromium.WebBrowser.WebResource(html));
            wb.SetWebResource("http://localresource/image", new Chromium.WebBrowser.WebResource(bm));

Now let's just show the browser, load that custom resource into the browser window and enter the message loop.

            f.Show();
            wb.LoadUrl("http://localresource/text.html");
            Application.Run(f);

Press the button in the browser window and enjoy the message box informing "First argument supplied: 12345" :)

Don't forget to shutdown the ChromiumFX runtime when you are done:

            CfxRuntime.Shutdown();

Find this and more examples in the CfxTestApp project.

Updated