Tutorial Switch Multiple Window di Electron JS menggunakan button

Cara melakukan switch multiple window di Electron JS menggunakan button sangat mudah. Salah satu cara yang bisa digunakan adalah menggunakan Button dengan EventListener click.

Electron JS atau Electron merupakan Electron adalah suatu kerangka kerja yang digunakan untuk membangun aplikasi berbasis komputer meja (desktop), dimana aplikasi yang dihasilkan dapat berjalan dalam semua sistem operasi seperti Windows, Linux, dan MacOS. Electron dibuat oleh Cheng Zhao dan kemudian dibangun, dikembangkan, serta diawasi oleh GitHub. Electron dirilis pertama kali pada tanggal 15 Juli 2013. (Wikipedia).

Pada tutorial ini, saya akan membahas cara melakukan Switch Multiple Window tersebut dengan mudah. Sebagai contoh saya akan mengalihkan antara Window 1 dan Window 2. Mari simak tutorial di bawah ini.

Note**: Saya menggunakan Electron Forge yang merupakan alat lengkap untuk membangun dan menerbitkan aplikasi Electron. Alasannya mudah yaitu tidak perlu membuat struktur file Electronnya dari awal tinggal fokus ke pengerjaan project atau aplikasi yang kamu buat.

Buka terminal/CMD dan masukkan perintah di bawah ini secara bertahap.

Jika memakai Yarn:

yarn global remove create-electron-app
yarn create electron-app my-app --template=webpack
cd my-app
yarn start

Jika memakai NPM:

npm uninstall -g create-electron-app
npm init electron-app@latest my-app -- --template=webpack
cd my-app
npm start

my-app tersebut silahkan ubah sesuai nama project yang kamu buat.

Untuk mengalihkan antara Window 1 dan Window 2, kamu perlu menambahkan code di bawah ini.

Pada file forge.config.js: (tambahkan array di entryPoints dengan name yaitu new_window dan html datanya diubah menjadi new.html, tinggal kamu copy dari main_window dan edit). Perhatikan codenya di bawah ini.


entryPoints: [
    {
        html: './src/index.html',
        js: './src/renderer.js',
        name: 'main_window',
        preload: {
            js: './src/preload.js',
        },
    },
    {
        html: './src/new.html',
        js: './src/renderer.js',
        name: 'new_window',
        preload: {
            js: './src/preload.js',
        },
    },
],

Buat file new.html pada folder src seperti gambar di bawah ini.

Code pada index.html:

<body>
    <h1>💖 Pongkagame!</h1>
    <button id="switchSecondWindow">Switch to Window 2</button>
    <p>Welcome to Window 1</p>
    <script>
      const { ipcRenderer } = require('electron');

      const secondButton = document.getElementById('switchSecondWindow');

      secondButton.addEventListener('click', () => {
        ipcRenderer.send('openWindow2'); // send message "openWindow2"
      });
    </script>
</body>

Code pada new.html:

<body>
    <h1>💖 Pongkagame!</h1>
    <button id="switchFirstWindow">Switch to Window 1</button>
    <p>Welcome to Window 2</p>
    <script>
      const { ipcRenderer } = require('electron');

      const firstButton = document.getElementById('switchFirstWindow');

      firstButton.addEventListener('click', () => {
        ipcRenderer.send('openWindow1'); // send message "openWindow1"
      });
    </script>
</body>

Code pada main.js:

Tambah modul ipcMain pada require('electron').

const { app, BrowserWindow, ipcMain } = require('electron');

Ubah fungsi createWindow seperti code berikut:

const createWindow = () => {
  // Create the browser window 1.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();

  // Create the browser window 2.
  const newWindow = new BrowserWindow({
    width: 500,
    height: 500,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: NEW_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

  // and load the new.html of the app.
  newWindow.loadURL(NEW_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  // newWindow.webContents.openDevTools();
  
  // hide newWindow when app is launched
  newWindow.hide();
  
  // If you get the message "openWindow2" then mainWindow will hide and newWindow will show
  ipcMain.on('openWindow2', (event, args) {
    mainWindow.hide();
    newWindow.show();
  });
  
  // If you get the message "openWindow1" then newWindow will hide and mainWindow will show
  ipcMain.on('openWindow1', (event, args) {
    newWindow.hide();
    mainWindow.show();
  });

  // If it exits the mainWindow then the application will exit
  mainWindow.on('closed', () {
    app.quit();
  });
  
  // If it exits the newWindow then the application will exit
  newWindow.on('closed', () {
    app.quit();
  });
};

Penjelasan modul:

ipcRenderer adalah modul Electron yang menyediakan cara untuk berkomunikasi secara asinkron antara proses renderer (yaitu proses yang menjalankan antarmuka pengguna aplikasi) dengan proses utama (yaitu proses yang mengelola siklus hidup aplikasi dan menangani fungsionalitas tingkat sistem).
ipcMain adalah adalah modul Electron yang menyediakan cara untuk berkomunikasi secara asinkron antara proses utama (yaitu proses yang mengelola siklus hidup aplikasi dan menangani fungsionalitas tingkat sistem) dengan proses renderer (yaitu proses yang menjalankan antarmuka pengguna aplikasi).

Dalam code ini, ipcMain.on() mendengarkan pesan pada saluran 'openWindow2', dan ketika pesan diterima, ia melakukan hide pada mainWindow dan melakukan show pada newWindow namun jika ipcMain.on() mendengarkan pesan pada saluran 'openWindow1', dan ketika pesan diterima, ia melakukan hide pada newWindow dan melakukan show pada mainWindow.

Bagaimana mudah sekali bukan cara membuat switch multiple window di Electron JS menggunakan button. Jika kamu ingin full codenya, silakan klik link di bawah ini.

Full Code
Click here

Referensi:

~ Terima Kasih ~