3
I’m making an application using Electron, divided the screen into header, footer, menu and content as done in a common web application.
The buttons need to perform the actions in the main Electron window but it is not working and do not know how to solve.
Is there another way to split this screen so that only one area is updated or how to redirect the user to another page in Electron? (Keep changing the content of the main page. I know it’s possible because I’ve seen even games developed in Electron)
index.html
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./photon/css/photon.min.css">
<script>
window.$ = window.jQuery = require('jQuery');
</script>
<script>
$(function () {
$("#header").load("header.html");
$("#footer").load("footer.html");
$("#menu").load("menu.html");
$("#conteudo").load("conteudo.html");
});
</script>
<script src="./controller.js"></script>
</head>
<body>
<div class="window">
<div id="header"></div>
<div class="window-content">
<div class="pane-group">
<div id="menu"></div>
<div id="conteudo"></div>
</div>
</div>
<div id="footer"></div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
header.html
<header class="toolbar toolbar-header">
<h1 class="title">Integração</h1>
<div class="toolbar-actions">
<div class="btn-group">
<button class="btn btn-default">
<span class="icon icon-home"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-folder"></span>
</button>
<button class="btn btn-default active">
<span class="icon icon-cloud"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-popup"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-shuffle"></span>
</button>
</div>
<button class="btn btn-default">
<span class="icon icon-home icon-text"></span> Filters
</button>
<div class="btn-group pull-right">
<button id="btnMinimizar" class="btn btn-default">
<span class="icon icon-minus"></span>
</button>
<button id="btnMaximizar" class="btn btn-default">
<span class="icon icon-window"></span>
</button>
<button id="btnFechar" class="btn btn-default">
<span class="icon icon-cancel"></span>
</button>
</div>
</div>
</header>
controller js.
$(document).ready(function () {
const app = require('electron').remote.app;
const {
remote
} = require('electron');
$('#btnFechar').click(function () {
console.log("Fechar");
remote.BrowserWindow.getFocusedWindow().close();
});
$('#btnMinimizar').click(function () {
console.log("Minimizar");
remote.BrowserWindow.getFocusedWindow().minimize();
});
$('#btnMaximizar').click(function () {
console.log("Maximizar");
if (remote.BrowserWindow.getFocusedWindow().isMAximized()) {
remote.BrowserWindow.getFocusedWindow().restore();
} else {
remote.BrowserWindow.getFocusedWindow().maximize();
}
});
});
Update 01: I took care of the button thing. It was a very simple problem I had just forgotten to call the controller.js script in the file where they were set.
Doubt now is only one: How to update only the content part as in a normal web page?
Thank you so much for your help and availability. Your reply helped a lot.
– lys