Electron Build Desktop Apps HTML\CSS\JS | Creating Windows and Processes 02

Video Tutorial

Overview

So we are in the second tutorial on the Series of Electron and Building Desktop Apps using Web Technologies, I assume that you have already gone through the setup and created a simple window where a simple HTML page should be rendered, if not then make sure to watch the last Video Tutorial.

So in the Second Tutorial, we are going to explain the Main/Renderer Process and go through the process of creating new Windows (child or independent) on out application, without much talking let’s start our journey.

Main and Renderer Processes

So when we usually develop web apps, most of the time we are going to deal with the renderer process since we don’t have control over the browser gonna be used by the user, he can use any browser to access our website, but in the electron apps case we are dealing with the browser which means our apps is a browser instance (this is how electron works) and the renderer browser (our App), and they are completely two separate processes, we can exchange the data directly between them unless we use somthing like IPC which actually works by sending and receiving events between the two processes as simple as that we can either create a new window on a button click and that we are dealing with the rendering process and triggering the main process which will allow us to create a native window (platform specifi) by the way Electron uses Chromuim for Handling Platform Specific Process and Windows Creations.

In order to access the Electrons Modules (Main Process Specific) from the Renderer Process, you can use the Remote Module which works pretty much like an IPC

//On your Renderer.js file 
let remote = require('Electron').remote;
//Then you can Get any Electron's Module and use it without problems 
//For Example
let BrowserWindow = remote.BrowserWindow;

Creating and Managing Windows

Now Without Further a say we need to use the power of Nodejs alongside Electron to create a window, So create a function in the main process and uses the magical exports Nodejs’s specific keyword in order to access the createNewWindow() function from other files (renderer files), here how it would look like:

/* Creates a New Browser Window and returns the Handler */
exports.createNewWindow = (
    page,
    config = { width: 800, height: 600 }, ///< Default Width & Height 
    parentWD = mainWindow
) => {
    //Error Handling
    var init = true;
    try {
        if (!parentWD) throw "ParentWindowNULL"; ///< Throw Error on NULL Parent Window
    } catch (err) {
        init = false;
        dialog.showErrorBox("Warning!", err); ///< just show a dialog on error (We will cover dialogs in the next tutorial :) )
    }

    if (parentWD == "standalone") parentWD = null; ///< Not a Child Window (Independent)

    if (init) {
        var newWindow = new BrowserWindow({
            config,
            parent: parentWD,
            modal: true
        });

        //Load our Page on the New Window 
        newWindow.loadURL(
            url.format({
                pathname: path.join(__dirname, page),
                protocol: "file:",
                slashes: true
            })
        );

        return newWindow; //< Return Window Handler 
    }

    return null;
};

Now requiring the main.js file on the renderer.js using the require(), we can access and call our function (feel free to use ES6 import and export keywords)

//on the renderer.js 
let mainApp = require('./main');

let btn = document.getElementBuId('myBtn');

//Just using Some Button Click Event 
btn.addEventListener(() => {
   //We open a New Window with a CustomPage.html we have created
   mainApp.createNewWindow('../dist/customPage.html');
});
//On the Button Click We Should See a New Child Window Pops up on the Screen

on the BrowserWindow Module, there are a lot of Methods and Attributes that you can use either for altering the web contents or dealing with the navbar, you can check out the DOCS for more info.

<span style=”color:null”>What’s Next</span>

That was a very basic window creating but also is very important for any app setup.

in the next ones will see Dialogs (open, save or message Boxes) and dealing with Sessions and Cookies.

No Comments Yet