1. Controlling application window size
When building desktop applications, we need to consider how our applications need to be used by users. Then we need to provide a window that maximizes or minimizes display. Of course, we also want to run it in full screen.
In electron, we can configure the size of our windows. First, let's look at our demo project structure as follows:
|---- electron-demo | |--- node_modules # Dependency packages | |--- index.html # html file | |--- main.js # Entry file | |--- package.json | |--- app.js
package.json is as follows:
{ "name": "window-electron", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { }, "author": "kongzhi", "license": "ISC", "dependencies": { "electron": "^6.0.0" } }
As above, the entry file is main.js
The index.html code is as follows:
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> </body> </html>
The main.js code is as follows:
'use strict'; // Introduce electron Modular const electron = require('electron'); // Establish electron References to application objects const app = electron.app; const BrowserWindow = electron.BrowserWindow; // Define variable references to application windows let mainWindow = null; // Listen for window closure events app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); // take index.html Load into the application window app.on('ready', () => { mainWindow = new BrowserWindow({ width: 400, height: 200 }); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', () => { mainWindow = null; }); });
As shown in the above code, we set the size of the window to 400px * 200px; now we run electron in our project, and you can see the following pop-up window:
For more parameters, see the specific API( https://electronjs.org/docs/api/browser-window)
2. Setting the Size of Application Window
For example, we set the window size to 400 PX in width and 200 PX in height on the Browser Window real column; we pass the width and height of the window to the object, but we can also set the maximum width (maxWidth) and minimum width (minWidth) and maximum height (maxHeight) and minimum height (minHe Height) of the window. The code is added as follows:
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450 });
As above, the default width and height of our window are 400 * 200; when we open it, the default width and height, of course, we can drag the window to the maximum maxWidth(600px) and maxHeight(450). As follows:
Of course, we can also drag to the smallest window, such as the smallest height of 150 px, and the smallest width of 300 px.
As we set the default window size, when we run our application, it should be displayed in the middle by default. Of course, we can set the x axis and y axis display position of the window, such as the following code settings:
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10 });
As above, we set x: 10, y: 10, so when our window is opened, our window defaults to the top left corner of the screen. As shown in the following figure:
3. Full screen mode application
Electron also supports setting the application to full screen mode. We can add the full screen mode parameter fullscreen to the Browser Window real column and set it to true. The following code configuration:
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, fullscreen: true });
As in the above code, we set fullscreen: true, and when we run electron. in our project, we can open our application in full screen. Of course, if we don't need full screen, we can set fullscreen to false. The default should be false.
We can add a button to our index.html page. If we click the button, we will have the full screen. If we click the button again, we will quit the full screen mode. So we code the index.html as follows:
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> <button id="fullscreen" onclick="toggleFullScreen();">go full screen</button> <script type="text/javascript" src="./app.js"></script> </body> </html>
app.js has the following code:
'use strict'; // Use remote API To get the current window of the rendered page const remote = require('electron').remote; function toggleFullScreen() { const button = document.getElementById('fullscreen'); const win = remote.getCurrentWindow(); // Determine whether the current window is on full screen if (win.isFullScreen()) { win.setFullScreen(false); button.innerText = 'Go full screen'; } else { win.setFullScreen(true); button.innerText = 'Exit full screen'; } }
Full-screen mode switching is a very common requirement for video playback applications.
electron provides remote API s to enable front-end code to communicate with back-end code.
Creating Borderless Applications Using Electron
We can add a configuration item frame: false to the Browser Windows real column to set up a borderless application, as follows:
MainWindow = new BrowserWindow ({frame: false}); therefore, the configuration code in main.js is as follows:
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, frame: false });
The operation results are as follows:
As above, when we don't have a border, we can't drag the window. We can set the value to true, transparent: true to make the window transparent, as follows:
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, transparent: true });
The effect is as follows:
4. Create a kiosk application
In Electron, it supports setting the application into kiosk mode by passing an attribute named kiosk when initializing the Browser Windows materialization. After entering this mode, the application will be in full screen state, as shown in the following code:
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, kiosk: true });
If kiosk: true is set up above, our application will enter full screen mode through this setting. If we want to quit the application, the only way is through shortcut keys (Command + Q on Mac OS X, Alt + F4 on window/linux).
Kiosk mode belongs to the mode of locking screen. However, we can also add a button on the page, click the button to enter kiosk mode, and then click the button to exit the full-screen mode.
The index.html code is as follows:
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> <!-- <button id="fullscreen" onclick="toggleFullScreen();">go full screen</button> --> <button id="kiosk" onclick="toggleKiosk();">Enter Koisk</button> <script type="text/javascript" src="./app.js"></script> </body> </html>
The app.js code is as follows:
'use strict'; // Use remote API To get the current window of the rendered page const remote = require('electron').remote; function toggleKiosk() { const button = document.getElementById('kiosk'); const win = remote.getCurrentWindow(); if (win.isKiosk()) { win.setKiosk(false); button.innerText = 'Enter kiosk mode'; } else { win.setKiosk(true); button.innerText = 'Exit koisk mode'; } }
Koisk mode is very useful. When we click the button for the first time, we will enter koisk mode. After entering the mode, we can also click the button to exit.