It does not work with the latest version of electron. ipc is changed into two parts.</

Try this instead: <div class="highlight highlight-source-js notranslate position-r

Thanks. Waiting for your videos <g-emoji class="g-emoji" alias="+1" fallback-src="http

I 've download and set git repo on link here <a href="https://www.youtube.com/watch?v=

Needs to be updated [Multi Window Electron] about letswritecode HOT 12 CLOSED

shama commented on July 17, 2024

Needs to be updated [Multi Window Electron]

from letswritecode.

Comments (12)

shama commented on July 17, 2024

Yep! I've got some updated Electron videos in planning. Thanks!

from letswritecode.

akashnimare commented on July 17, 2024

I tried changing ipc to ipc.Main in your code with all the updated module although it didn't work.
main.js

const electron = require('electron');
const app = require('electron').app;
const remote = require('electron').remote;
const ipcMain = require('electron').ipcMain;
const menu = require('electron').Menu;


const menu = Menu.buildFromTemplate([
  {
    label: 'Electron',
    submenu: [
      {
        label: 'Prefs',
        click: function () {
          ipcMain.send('toggle-prefs')
        }
      }
    ]
  }
])
Menu.setApplicationMenu(menu)

app.js

const electron = require('electron');
const app = require('electron').app;
var ipcMain = require('electron').ipcMain

app.on('ready', function () {
  var mainWindow = new electron.BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadUrl('file://' + __dirname + '/main.html')
  mainWindow.openDevTools()

  var prefsWindow = new electron.BrowserWindow({
    width: 400,
    height: 400,
    show: false
  })
  prefsWindow.loadUrl('file://' + __dirname + '/prefs.html')

  ipcMain.on('toggle-prefs', function () {
    if (prefsWindow.isVisible())
      prefsWindow.hide()
    else
      prefsWindow.show()
  })
})

Still getiing an error Can not read property send of undefined at click
What other changes I should do here?

from letswritecode.

shama commented on July 17, 2024

Try this instead:

const {remote, ipcRenderer} = require('electron')
const {Menu} = remote

const menu = Menu.buildFromTemplate([
  {
    label: 'Electron',
    submenu: [
      {
        label: 'Prefs',
        click: function () {
          ipcRenderer.send('toggle-prefs')
        }
      }
    ]
  }
])
Menu.setApplicationMenu(menu)

main.js is on the renderer process because main.html does: <script>require('./main.js')</script>

from letswritecode.

akashnimare commented on July 17, 2024

Thanks man. It's working perfectly now. Should I send a PR with updated code?

from letswritecode.

akashnimare commented on July 17, 2024

Your code works fine in menu. But when I use this in tray it didn't work. I got this -

TypeError: Cannot match against 'undefined' or 'null'
main.js

'use strict';
const path = require('path');
const electron = require('electron');
const app = require('electron').app;
const {remote, ipcRenderer, shell} = require('electron')
const {Menu} = remote

let tray = null;

exports.create = win => {
    if (process.platform === 'darwin' || tray) {
        return;
    }

    const iconPath = path.join(__dirname, 'resources', 'Icon.png');

    const toggleWin = () => {
        if (win.isVisible()) {
            win.hide();
        } else {
            win.show();
        }
    };

    const reload = () => {
        win.reload();
    };

    const contextMenu = electron.Menu.buildFromTemplate([

        {
            label: 'Toggle',
            click() {
                toggleWin();
            }
        },
       {
            label: 'About',
            click() {
                ipcRenderer.send('About');
            }
       }            
    ]);

    tray = new electron.Tray(iconPath);
    tray.setToolTip(`${app.getName()}`);
    tray.setContextMenu(contextMenu);
    tray.on('click', toggleWin);
};

app.js

'use strict';
const path = require('path');
const electron = require('electron');
const app = require('electron').app;
var ipcMain = require('electron').ipcMain
const tray = require('./tray');

let mainWindow;
let aboutWindow;

function onClosed() {
    mainWindow = null;
    aboutWindow = null;
}

function createMainWindow() {
    const win = new electron.BrowserWindow({
        width: 1000,
        height: 600,
        icon: process.platform === 'linux' && path.join(__dirname, 'resources/Icon.png')
    });
    win.loadURL('file://' + __dirname + '/main.html');
    win.on('closed', onClosed);
    return win;
}

function createAboutWindow() {
    const abouturl = new electron.BrowserWindow({
    width: 400,
    height: 400,
    show: false
  })
  abouturl.loadURL('file://' + __dirname + '/about.html');
  abouturl.on('closed', onClosed);
  return abouturl;
}


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (!mainWindow) {
        mainWindow = createMainWindow();
    }
});

app.on('ready', () => {
    mainWindow = createMainWindow();
    tray.create(mainWindow);

    aboutWindow = createAboutWindow();
    ipcMain.on('About', function(){
        aboutWindow.show();
    });
});

from letswritecode.

shama commented on July 17, 2024

Should I send a PR with updated code?

Thanks! But I'll have some updated videos coming out soon. So I'll leave the code examples for those videos for electron <= 1.0.0.

For debugging, add win.openDevTools() to your window and then add debugger statements to places where the code isn't working. That will pause the app and let you inspect the state of the app at that time.

Also be careful doing const tray = require('./tray'); as <script>require('./tray')</script> will run that file in the renderer process and require('./tray') from app.js will be ran in the main process.

from letswritecode.

akashnimare commented on July 17, 2024

Thanks. Waiting for your videos 👍

from letswritecode.