2

ダッシュボード アプリケーションを開発しています。私の意図は、事前定義されたウィンドウ レイアウトを選択してカスタマイズできる複数のウィンドウを用意することです。図示されたレイアウトは次のようになります。 ダッシュボードの計画レイアウト

私は現在、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');

});

すべてが1つのウィンドウに含まれる通常のWebアプリではなく、すべてのウィンドウを互いに独立させているため、これが良い構造/戦略であるかどうか、誰にもアドバイスできますか? 私の最大の懸念は、これらのウィンドウの応答性と各ウィンドウの内容です。ここで何かアドバイスをいただければ幸いです...

4

0 に答える 0