Update part of web page with Electron. (Change only content and keep header, footer and fixed menu)

3

I am making an application using Electron, split the screen into header, footer, menu and content as it does in an ordinary web application.

ThebuttonsneedtoperformtheactionsinthemainElectronwindowbutitisnotworkingandIdonotknowhowtosolveit.

IsthereanotherwaytosplitthisscreensothatonlyoneareaisupdatedorhowtoredirecttheusertoanotherpageonElectron?(Iknowit'spossiblebecauseI'veseenevengamesdevelopedinElectron)

index.html        

<head><metacharset="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 solved the issue of the buttons. It was a very simple problem I just forgot to call the controller.js script in the file where they were defined.

The question now is only one: How do I update only part of the content as on a normal web page?

    
asked by anonymous 19.10.2018 / 23:54

1 answer

1

Very interesting question!

There's an idea how to do it on this page: Link to W3schools

    
26.10.2018 / 18:05