Я разрабатываю приложение для приборной панели, я намерен создать несколько окон, которые можно настроить, выбрав предопределенные макеты окон. Иллюстрированный макет будет примерно таким:
Сейчас я работаю над фреймворком Electron. Я делаю это путем создания нескольких BrowserWindow, фиксируя размер экрана и вычисляя размеры и положение окон. Вот как я это пишу:
// app/main.js
// Module to control application life.
var app = require('electron').app;
// Module to create native browser window.
var BrowserWindow = require('electron').BrowserWindow;
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function () {
app.quit();
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function () {
var screenElectron = require('electron').screen;
var mainScreen = screenElectron.getPrimaryDisplay();
var extScreen = null;
var allScreens = screenElectron.getAllDisplays();
var screenWidth = mainScreen.workArea.width;
var screenHeight = mainScreen.workArea.height;
var screenX = mainScreen.workArea.x;
var screenY = mainScreen.workArea.y;
console.log("Number of screens: " + allScreens.length);
console.log("Main screen: " + JSON.stringify(screenElectron.getPrimaryDisplay()));
console.log("All screen: " + JSON.stringify(screenElectron.getAllDisplays()));
console.log("Current display: " + Math.floor(screenWidth / 4) + " ; " + Math.floor(screenHeight / 4) + " ; " + screenX + " ; " + (screenY + Math.floor(screenHeight * 1 / 4)));
// Create the browser window.
mainWindow = new BrowserWindow({
width: Math.floor(screenWidth * 50 / 100),
height: Math.floor(screenHeight * 50 / 100)
});
var win1 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win2 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 1 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win3 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 2 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win4 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 3 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win5 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight * 3 / 4),
x: screenX + Math.floor(screenWidth * 3 / 4),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win6 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight * 1 / 4),
x: screenX + Math.floor(screenWidth * 3 / 4),
y: screenY + Math.floor(screenHeight * 3 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win7 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 2 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win8 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 3 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win9 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 4 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win10 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 5 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var focusWin = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth * 50 / 100),
height: Math.floor(screenHeight * 5 / 6),
x: screenX + Math.floor(screenWidth / 4),
y: screenY + Math.floor(screenHeight * 1 / 6),
resizable: false,
backgroundColor: '#2e2c29'
})
// Load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
win1.loadURL('file://' + __dirname + '/index.html');
win2.loadURL('file://' + __dirname + '/index.html');
win3.loadURL('file://' + __dirname + '/index.html');
win4.loadURL('file://' + __dirname + '/index.html');
win5.loadURL('file://' + __dirname + '/index.html');
win6.loadURL('file://' + __dirname + '/index.html');
win7.loadURL('file://' + __dirname + '/index.html');
win8.loadURL('file://' + __dirname + '/index.html');
win9.loadURL('file://' + __dirname + '/index.html');
win10.loadURL('file://' + __dirname + '/index.html');
focusWin.loadURL('file://' + __dirname + '/index.html');
});
Может ли кто-нибудь посоветовать, хорошая ли это структура / стратегия, поскольку я делаю все окна независимыми друг от друга вместо обычного веб-приложения, где все содержится в одном окне? Больше всего меня беспокоит скорость отклика этих окон и содержимое каждого окна. Оцените любой совет здесь ...