Using CEF as user interface

Learn this, you can use local files to achieve a pure HTML, JavaScript and CSS (bootstrap) based user interface, and use it to operate the system

1、 Create a new folder in the project: HTML resources. Then copy the bootstrap file directory structure and content into it. And set the copy to output directory value of these files to copy always

2、 To display and manipulate index.html In the interface. Add button button to execute with JavaScript. (cefcustomobject is an instance of the operation class later)

<button class="btn btn-info" onclick="cefCustomObject.showDevTools();"&>Open Chrome Dev Tools</button&>
  <button class="btn btn-primary" onclick="cefCustomObject.opencmd();"&>Open cmd.exe</button&>

3. Create a new operation class (user target class) (click the button to perform the operation.) For example, opencmd method: open the CMD process

4、 In the constructor (1 — 4 is the same as using CEF as the browser)::

1. Cefsetting instantiation settings

2. Use CEF to initialize settings

3. Instantiate the chromiumwebbrower object (locally located) index.html (file)

4. Load this object into the control and set it to fill

5. The browser builds objects to register JS events. Binding instantiates the operation class.

6. Some browser properties are set by browersettings. Assigned to the browser.

Git source code address:

https://gitee.com/HuLuMiaoMiao/SecondCefSharp

Reference (some changes are easy to understand and some mistakes are made)

https://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application

Similar Posts: