2020/08/31 - [Web/JavaScript] - [Electron] Getting Started
2020/08/31 - [Web/JavaScript] - [Electron] BrowserWindow
2020/09/01 - [Web/JavaScript] - [Electron] IPC (Inter Process Communication)
2020/09/01 - [Web/JavaScript] - [Electron] Menu
2020/09/01 - [Web/JavaScript] - [Electron] Global Shortcut
2020/09/01 - [Web/JavaScript] - [Electron] Tray
I'm writing about BrowserWindow more detail.
In a previous posting, I explained BrowserWindow that it was used to create window in an elecrtron.
You can give the various options when you use the BrowserWindow.
Specify the Size
function createWindow() {
win = new BrowserWindow({width: 400, height: 300});
win.loadURL(`file://${__dirname}/index.html`);
// win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
}Now, the application is executed with specified size.
win = new BrowserWindow({
width: 400,
height: 300,
maxWidth: 800,
maxHeight: 600,
});This time it will can not be larger than the maximum size specified.
Conversely, a minimum size is also possible through minWidth, minHeight.
win = new BrowserWindow({
width: 400,
height: 300,
resizable: false,
});It is prevented to resize its size.
In addition to this, there are many options such as fullscreen, alwaysOnTop, etc.
Specify the Color
win = new BrowserWindow({ backgroundColor: "#00ACC1" });You can set the color as well.
But, I recommend styling with CSS.
Specify the Frame
win = new BrowserWindow({ frame: false });You can remove the frame.
Show when Ready
win = new BrowserWindow();
win.loadURL("https://github.com");If you run the above code, you can see the GitHub page after the showing application window.
It is not cool.
Let's make it better.
win = new BrowserWindow({ show: false });
win.loadURL("https://github.com");
win.once("ready-to-show", () => {
win.show();
});Now, you will see the window together with the GitHub page after all contents is loaded.
Parent/Child Window
Basically, the Electron can By default, the Electron can run multiple render processes with one main process.
Each render process has its own window.
You can set up a parent/child hierarchy between these windows.
Let's create a child.html file for an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child</title>
</head>
<body>
<h1>This is a child window</h1>
</body>
</html>And add it to main.js file.
let win;
let childWin;
function createWindow() {
win = new BrowserWindow();
win.loadURL(`file://${__dirname}/index.html`);
childWin = new BrowserWindow({ parent: win });
childWin.loadURL(`file://${__dirname}/child.html`);
win.on("closed", () => {
win = null;
});
}I set the existing window as a parent.
This is the modeless window, so you can move between parent and child as you want.
Then, let's change it to the modal window.
childWin = new BrowserWindow({ parent: win, modal: true });Reference
'Web > JavaScript' 카테고리의 다른 글
| [Electron] Tray (0) | 2020.09.01 |
|---|---|
| [Electron] Global Shortcut (0) | 2020.09.01 |
| [Electron] Menu (0) | 2020.09.01 |
| [Electron] IPC (Inter Process Communication) (0) | 2020.09.01 |
| [Electron] Getting Started (0) | 2020.08.31 |
댓글