CODEWITHSUNDEEP
javascriptnode.jshtmlelectroncreatewindow
Steven Kanberg
Steven Kanberg

Reputation: 6393

BrowserWindow rendering in Electron App



I'm in need of some expert JavaScript assistance regarding an app I am building using Electron. The heart of the matter is if I navigate away from the primary page (index.html) and navigate back to it the page briefly, but very noticeably, displays the div and ul elements that make up the vertical tabbed menu that sits on the left side of the page (see pics below).

What my colleague and I can't seem to figure out nor can we find adequate information on across the web is how to fix or adjust this. It was suggested by one person we know that perhaps building some sort of renderer to maintain different window threads as they are created in Main.js, but he didn't know how nor have we found information on how to do this. Is this the right path?

Or is this simply a case of misplaced or missing code that is keeping the page from loading correctly each time?

Or something else all together? Any assistance would be greatly appreciated as my back is against on wall on solving this. Thank you in advance!

Index.html rendering:

enter image description here

Index.html post-rendering:

enter image description here


Main.js:

const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
var express = require('express');
var expressapp = express();

var hostname = 'localhost';
var port = 3000;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1920,
height: 1080,
webPreferences: {
  nodeIntegration: true,
  resizable: true,
  fullscreenable: true,
  maximizable: true,
  minamizable: true,
  movable: true,
  autoHideMenuBar: false,
  allowDisplayingInsecureContent: true,
  allowRunningInsecureContent: true
  }
  })


  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`);

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

// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

expressapp.use(express.static(__dirname + '/public'));

expressapp.listen(port, hostname, function() {
console.log(`Server running at http://${hostname}:${port}`);
});


Index.html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" type:"text/css" href="css/jquery-ui.min.css">
  <link rel="stylesheet" type:"text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type:"text/css" href="css/jquery.scrollbar.css">
  <link rel="stylesheet" type:"text/css" href="css/tabs.css">
  <link rel="stylesheet" type:"text/css" href="css/persian-datepicker-0.4.5.min.css">
  <link rel="stylesheet" type:"text/css" href="css/clockpicker.css">
  <link rel="stylesheet" type:"text/css" href="styles.css">
  <link rel="stylesheet" type:"text/css" href="css/entry.css">
  <link rel="stylesheet" type:"text/css" href="css/navbar.css">
  <link rel="stylesheet" type:"text/css" href="css/modal.css">
  <meta id="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
<form name="mainForm">
  <div id="sections">
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
        <li><a href="#section6">Section 6</a></li>
        <li><a href="#section7">Section 7</a></li>
        <li><a href="#section8">Section 8</a></li>
        <li><a href="#section9">Section 9</a></li>
        <li><a href="#section10">Section 10</a></li>
        <li><a href="#section11">Section 11</a></li>
      </ul>
...
  <script>
      window.jQuery = window.$ = require('jquery');
  </script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.scrollbar.min.js"></script>
  <script src="js/persian-date.min.js"></script>
  <script src="js/persian-datepicker-0.4.5.min.js"></script>
  <script src="js/clockpicker.js"></script>
  <script src="js/jqwidgets/jqxcore.js"></script>
  <script src="js/jqwidgets/jqxexpander.js"></script>
  <script src="js/jqwidgets/jqxinput.js"></script>
  <script src="js/jqwidgets/jqxpasswordinput.js"></script>
  <script src="js/jqwidgets/jqxbuttons.js"></script>
  <script src="js/jqwidgets/jqxvalidator.js"></script>
  <script src="js/data.js"></script>
  <script src="js/model.js"></script>
  <script src="js/view.js"></script>
  <script src="js/form-init.js">
  </script>
</form>
</body>
</html>


Altered browser window code:

let win;

function createWindow() {
// Create the browser window.
win = new BrowserWindow({
show: false,
width: 1920,
height: 1080,
backgroundColor: '#4d6b9e',
webPreferences: {
nodeIntegration: true,
resizable: true,
fullscreenable: true,
maximizable: true,
minamizable: true,
movable: true,
autoHideMenuBar: false,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true
}
})

win.loadURL(`file://${__dirname}/index.html`);

// and load the index.html of the app.
win.once('ready-to-show', () => {
win.show()
})

Upvotes: 1

Views: 3614

Answers (2)

Kim Gentes
Kim Gentes

Reputation: 1628

Your code example here shows that you are running your Express server as part of your main Electron process :

var express = require('express');
var expressapp = express();

From what I've read around, this is bad practice, since it means that any operations your Express server has to do will momentarily hang your Electron main process thread while they are serviced. This isn't consequential when you are doing small file loads, but anything significant will hang the Electron main process from managing its regular tasks (updating the electron frame, menus etc-- the application wrapper that surrounds the browser display area) while it handles any work coming in related to the Express server (which you've created and now runs inside of the Electron main process).

A more complete explanation of this issue is found at : https://blog.axosoft.com/2016/03/04/electron-things-to-know/

I haven't found a good solution for this issue yet, but binding the Express server instance to the Electron main process is a timebomb for any hopes of expanding your application to do much more than serve a few files.

Upvotes: 1

Vadim Macagon
Vadim Macagon

Reputation: 14847

I can't really tell what's going on from your screenshots and description, but have you tried setting the background color for the browser window?

Also, it would be remiss of me not to mention that running an express server inside an Electron app is generally a Bad Idea unless your app is only meant to run on an air-gapped machine.

Upvotes: 0

Related Questions