Does Electron have MDI similar to WinForm MDI - electron

Question

I've been trying to search this up, but I can't find the answer.
In WinForms you can make an MDI to create forms inside of, so that the MDI child windows cannot go outside of the MDI parent window. Does Electron have this feature or something similar?

Answer 1

Nope because a Browser window cant contain another browser window ... unless you using a movable div with an iframe element... You have 2 options one create a modal window with your content like I've done here
or you can open a new remote window sub in your main JS entry file
const electron = require('electron');
const url = require('url');
const path = require('path');
const {app,BrowserWindow,Menu,ipcMain}= electron;
//SET env
//process.env.NODE_ENV = 'production';
let mainWindow;
let addWindow;
//listen for the app to be ready
app.on('ready',function(){
//creat the new mainWindow
mainWindow = new BrowserWindow({
width:1200,
height:1000,
frame:false,
webPreferences: {
plugins: true,
nodeIntegration: true
//contextIsolation: true
}
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname,'index.html'),
protocol:'file',
slashes: true
}));
//close all winsows on close
mainWindow.on('closed', function(){
app.quit();
});
//build menu from mainMenuTemplate
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
Menu.setApplicationMenu(mainMenu);
});
//handle add new sub window
function createAddWindow()
{
//creat the new mainWindow
addWindow = new BrowserWindow({
width:200,
height:200,
title:'add shoping list item'
});
//load html into window
addWindow.loadURL(url.format({
pathname: path.join(__dirname,'addWindow.html'),
protocol:'file',
slashes: true
}));
//garbage collection Handle
addWindow.on('close',function(){
addWindow= null;
});
}
//Catch Item:add from the subwindown and send to the main html
ipcMain.on('item:add' , function(e, item){
console.log(item);
mainWindow.webContents.send('item:add' , item);
addWindow.close();
});
//var remote = require('remote');
// var BrowserWindow = remote.require('mainWindow');
// function init() {
// Mainwindow.getElementById("min-btn").addEventListener("click", function (e) {
// var lMainwindow = Mainwindow.getFocusedWindow();
// lMainwindow.minimize();
// });
//
// Mainwindow.getElementById("max-btn").addEventListener("click", function (e) {
// var lMainwindow = Mainwindow.getFocusedWindow();
// lMainwindow.maximize();
// });
//
// Mainwindow.getElementById("Close-btn").addEventListener("click", function (e) {
// var lMainwindow = Mainwindow.getFocusedWindow();
// lMainwindow.close();
// });
// };
//
//
// init();
//Creat the menu template
const mainMenuTemplate =[
{
label:'File',
submenu:[
{label:'Add Item',
click(){
createAddWindow();
}
},
{
label:'Clear items',
click(){
mainWindow.webContents.send('item:clear');
console.log('clear click');
}
},
{
label:'Quit',
accelerator:process.platform=='darwin'? 'Command+Q' :'Ctrl+Q',
click(){
app.quit();
}
}
]
},
];
//disable Nasty security warnings
delete process.env.ELECTRON_ENABLE_SECURITY_WARNINGS;
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;
//if mac add empty object to the menu to get of the title electron
if(process.platform == 'darwin'){
mainMenuTemplate.unshift({});
}
//add dev tools if not in production
if (process.env.NODE_ENV !== 'production')
{
mainMenuTemplate.push({
label:'Developer Tools',
submenu :[
{
label:'toggle Dev Tools',
accelerator:process.platform=='darwin'? 'Command+I' :'Ctrl+I',
click(item , focusedWindow){
focusedWindow.toggleDevTools();
}
},{
role:'reload',
}
]
})
}
here is the electron reference to a new window object Window Object Reference
electron basically gives you a windows app menu with the chrome browser window... Nothing else... everything inside the window you have to code with your web technologies like HTML CSS and JS
If you find something that wont work in a web page it wont work in electron