Guide Development Guide

Quickly develop desktop applications

Launching a desktop application in fibjs is very fast. Just type the following code to open and run a WebView window:

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { "type": "native" });

This code will open a WebView window built into the operating system and enter the fibjs.org website.

However, the built-in WebView of the system cannot satisfy the powerful desktop application development in terms of interface function or compatibility. Therefore, fibjs also supports cef-based application development.

Introduction to cef

The full name of cef is Chromium Embedded Framework, which is an open source project based on Google Chromium. The Google Chromium project is mainly developed for Google Chrome applications, and the goal of cef is to provide embeddable browser support for third-party applications. cef isolates the complex code of the underlying Chromium and Blink, and provides a set of product-level stable APIs, releases branches that track specific Chromium versions, and binary packages. Most of the features of cef provide rich default implementations, allowing users to do as little customization as possible to meet their needs. Typical application scenarios of cef include:

  • Embed an HTML5 compatible browser control into an existing local application.
  • Create a lightweight shell browser to host applications mainly developed with Web technology.
  • Some applications have independent drawing frameworks and use cef to render web content offline.
  • Use cef to do automated web testing.

cef3 is the next generation cef based on the Chomuim Content API multi-process architecture and has the following advantages:

  • Improved performance and stability (JavaScript and plugins are executed in a separate process).
  • Support Retina display.
  • Supports GPU acceleration of WebGL and 3D CSS.
  • Avant-garde features like WebRTC and voice input.
  • Provide better automated UI testing through DevTools remote debugging protocol and ChromeDriver2.
  • The ability to obtain current and future Web features and standards faster.

Prepare the operating environment

The binary package of cef3 can be downloaded from [ this page ]. The current version of fibjs is v90. It contains all the files needed to compile a specific version of cef3 on a specific platform (Windows, Mac OS X and Linux). The directory structure of different platforms is different, you need to reorganize the resource directory structure after downloading.

Windows operating system (Windows)

On the Windows platform folder structure is as follows, you can usually within binary packages Releaseand Resourcesfind all the files in the directory:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Application ├── fibjs.exe ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── chrome_elf.dll ├── d3dcompiler_47.dll ├── icudtl.dat ├── libEGL.dll ├── libGLESv2.dll ├── libcef.dll ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.dll │ └── libGLESv2.dll └── v8_context_snapshot.bin

Linux operating system (Linux)

On the Linux platform folder structure is as follows, you can usually within binary packages Releaseand Resourcesfind all the files in the directory:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Application ├── fibjs ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── icudtl.dat ├── libEGL.so ├── libGLESv2.so ├── libcef.so ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.so │ └── libGLESv2.so └── v8_context_snapshot.bin

On Linux Server because there is no desktop environment support, you can only --headlessrun mode when running in windowed mode when no need to install xorg:

1
apt install xorg

In some gpu support bad Linux Desktop, but also need to increase the --disable-gpustartup option is disabled gpu rendering.

Mac X platform (Mac OS X)

On the Mac X platform folder structure is as follows, you can usually within the package binary Release/Chromium Embedded Framework.frameworkfind all the files in the directory, if you download the cefclient, then you need to open the app of Contents to find the appropriate file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Application ├── fibjs ├── Chromium Embedded Framework ├── Libraries │ ├── libEGL.dylib │ ├── libGLESv2.dylib │ ├── libswiftshader_libEGL.dylib │ ├── libswiftshader_libGLESv2.dylib │ ├── libvk_swiftshader.dylib │ └── vk_swiftshader_icd.json └── Resources ├── Info.plist ├── ...... └── zh_TW.lproj └── locale.pak

You can also use the gui.configsettings cef_pathto specify cef binary path, and thus more flexibility to deploy the operating environment. When not set cef_paththe time, cef binaries must be deployed in the same directory as the executable file fibjs.

1 2 3
gui.config({ "cef_path": cef_path });

Prepare the operating environment, and then run the following code

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { // "type": "native" });

You will also see a browser window loaded with the official website of fibjs, but its engine is already the latest Chrome kernel. Note here need to cancel typeoption, otherwise will open os built webview.

The basic application of gui is very simple and can be quickly realized by referring to the gui document, so I won't repeat it. Next, we mainly introduce some special application methods.

Front-end and back-end service docking

Web-based desktop applications usually have two extension methods, one is WebView extension, and the other is to separate the front and back ends locally. In the former method, WebView is invasively extended, and the operating environment is no longer compatible with standard browsers. The latter method requires an http Server to be opened locally, which in turn causes the service interface to be exposed to the outside.

fibjs for extended desktop applications, based on a protocol scalability cef will WebView and the fibjs Handlertogether, so that the process WebView may be connected directly to the corresponding Handlerprocessor, fully compatible with the conventional B / S paradigm developed simultaneously front and rear ends , To ensure safety and portability. At the same time, the front-end and back-end code is completely consistent with the standard B/S front-end and back-end development, which can be developed and debugged in the browser, and then directly transplanted into a local application.

fibjs back-end processor configured manner, through gui.configdone.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
gui.config({ "backend": { "cef://test/": cef_files_path, "http://cef_test/": { "/mock/:act": (r, a) => { if (a == 'header') { r.response.write(r.firstHeader('test')); r.response.addHeader("test", "world"); } else if (a == 'post') { r.response.write(`[${r.firstHeader("Content-type")}]`); r.response.write(r.body.readAll()); } }, "/*": cef_files_path } } });

This code defines two back-end, is a ceftest domain protocol, static pointing to a directory cef_files_path, and the other is httpthe cef_test domain, pointing to a route.

In cef, there are some restrictions on the processing of non-standard protocols, such as not supporting post data to the server. Therefore, if you want better compatible front-end communication, you need to define http or https back-ends. Of course, this back-end does not pass The network protocol completes the communication, but is directly connected within the process.

For how to develop the Handler backend, please refer to:hello, world.

Windowless mode

In automated testing or process automation scenarios, the business operation process does not require user interaction, so it can be automatically run on the server in a windowless mode. At this time, headless mode is required to run.

fibjs supports two ways of headless, namely global headless and instance headless.

In global mode, all windows will run in headless mode, regardless of how the window is created. Run a global model, is designated --headlessstartup options.

1
fibjs --headless test.js

Call at program startup gui.configconfiguration can also achieve the same goal:

1 2 3
gui.config({ "headless": true });

Under Linux Server, although the headless mode does not require desktop support, the cef basic module still needs some basic component support, so xorg needs to be installed:

1
apt install xorg

In some applications, user interaction and automated processing are required at the same time. At this time, you can specify a window to use headless mode separately:

1 2 3
var win = gui.open("https://fibjs.org", { "headless": true });

It should be noted that because there is no user interaction, the headless instance cannot be actively closed by the user, so the program must be closed when it is not needed, otherwise the process will not automatically exit because of the existence of the instance.

DevTools interface

The Chrome DevTools Protocol allows tools to test, inspect, debug, and configure Chromium, Chrome, and other Blink-based browsers. The Chrome DevTools Protocol is divided into multiple domains (DOM, Debugger, Network, etc.), and each domain defines the corresponding supported commands and related events.

fibjs encapsulates the access interface of cdp, you can make full use of the built-in cdp interface of cef to directly debug web pages in WebView. The interface used by WebView to access the cdp service is WebView.dev. For detailed documentation of cdp, please refer to: https://chromedevtools.github.io/devtools-protocol/

Listed below are a few commonly used code snippets to show how to use dev to manipulate page elements. You can refer to the detailed usage demonstration test/cef_test.js.

Query the DOM

1 2 3 4 5 6 7 8 9 10 11 12 13
function getOuterHTML(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var html = win.dev.DOM.getOuterHTML({ "nodeId": e.nodeId }); return html.outerHTML; }

Simulate mouse operation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function click(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var box = win.dev.DOM.getBoxModel({ "nodeId": e.nodeId }); var mi = { "x": box.model.content[0] + 1, "y": box.model.content[1] + 1, "button": 'left', "clickCount": 1 } mi.type = "mousePressed"; win.dev.Input.dispatchMouseEvent(mi); mi.type = "mouseReleased"; win.dev.Input.dispatchMouseEvent(mi); }

Simulate keyboard operation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function type(win, text) { for (char of text) { win.dev.Input.dispatchKeyEvent({ "type": "char", "text": char }); } } function press(win, key) { var code = key_code[key]; var ki = { "key": key, "code": key, "windowsVirtualKeyCode": code, "nativeVirtualKeyCode": code }; ki.type = "keyDown"; win.dev.Input.dispatchKeyEvent(ki); ki.type = "keyUp"; win.dev.Input.dispatchKeyEvent(ki); }

Screenshot of the page

1 2 3 4 5 6 7 8 9 10 11
var ret = win.dev.Page.captureScreenshot({ clip: { "x": 0, "y": 0, "width": 100, "height": 100, "scale": 1 } }); var img = gd.load(encoding.base64.decode(ret.data));

Simulate User-Agent

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Network.setUserAgentOverride({ userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1', }); win.loadUrl('https://fibjs.org'); });

Listen for events

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Page.enable(); win.dev.Page.on("frameNavigated", ev => { console.log(ev.frame.url); win.close(); }); });

Multimedia support

Due to copyright issues, the binary distribution of cef usually does not include the decoding of mp4 and mp3. However, cef contains open source webm decoding. For independent desktop applications, it is recommended to use freely licensed webm encoding to process audio and video.

summary

Through the introduction of this section, we can quickly develop our own desktop applications, render html into images or PDF, and use the powerful interface of cdp to establish a front-end automation test and process automation engine.

👉 [ Hot update of server module ]