Simple CEF Boilerplate

From GTA Network Wiki
Jump to: navigation, search

Simple CEF Boilerplate

Greetings,

as I've been noticing a lot of interest and confusion regarding CEFs, I will explain them a little bit here. First of all, here's a little helper class, that makes it easy to implement CEFs.

class CefHelper {
  constructor (resourcePath) {
    this.path = resourcePath
    this.open = false
  }

  show () {
    if (this.open === false) {
      this.open = true

      var resolution = API.GetScreenResolution()

      this.browser = API.CreateCefBrowser(resolution.Width, resolution.Height, true)
      API.WaitUntilCefBrowserInit(this.browser)
      API.SetCefBrowserPosition(this.browser, 0, 0)
      API.LoadPageCefBrowser(this.browser, this.path)
      API.ShowCursor(true)
    }
  }

  destroy () {
    this.open = false
    API.DestroyCefBrowser(this.browser)
    API.ShowCursor(false)
  }

  eval (string) {
    this.browser.eval(string)
  }
}

Now, somewhere in the same file, define a new CefHelper object, using following syntax. You can now show the CEF simply by calling the show() function on the object and destroy it with destroy()!

var cef = null;

API.OnResourceStart.connect(function() {
  cef = new CefHelper('clientside/resources/boilerplate.html');
  cef.show();
});

API.OnResourceStop.connect(function() {
  cef.destroy();
});

That's about it from the JavaScriptside of things - now let's head over to the HTML and CSS files.


  • clientside/resources/boilerplate.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
    </body>
</html>
  • clientside/resources/main.css
body {
    min-height: 100vh; /* edit or delete line to remove scrollbar */
    margin: 0;
    padding: 0;
}
  • meta.xml
<meta>
    <!-- Boilerplate-->        
        <file src="clientside/resources/main.css" />    
        <file src="clientside/resources/boilerplate.html" />

    <!-- Main -->
        <script src="clientside/main.js" type="client" lang="javascript" />
</meta>