Needs to be updated [Multi Window Electron]

akashnimare commented 8 years ago

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

Main process - ipc.Main
Renderer process - ipc.Renderer

shama commented 8 years ago

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

akashnimare commented 8 years ago

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?

shama commented 8 years ago

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>

akashnimare commented 8 years ago

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

akashnimare commented 8 years ago

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();
    });
});

shama commented 8 years ago

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.

akashnimare commented 8 years ago

Thanks. Waiting for your videos :+1: