Electron - tworzenie własnego prostego routingu i zmiana widoku w ramach jednego okna
Stronę tą wyświetlono już: 272 razy
Czas zrobić sobie prosty routing by z najdzikszą rozkoszą przełączać widok aplikacji w ramach jednego okna! Coby dłużej nie marnować czasu oto kod klasy, którą w tym jakże niecnym celu wykorzystuję do zrealizowania zadania routingu:
- const electron = require("electron");
- class RouteItem {
- path = "";
- viewClass;
- viewFile = "";
- children = new Array();
- constructor(
- path = "",
- viewClass = null,
- viewFile = "",
- children = new Array()
- ) {
- this.path = path;
- this.viewClass = viewClass;
- this.viewFile = viewFile;
- this.children = children;
- }
- changePath(path = new Array()) {
- let pathCopy = [...path];
- if (path.length) {
- const pathItem = pathCopy.shift();
- if (pathItem === this.path) {
- if (pathCopy.length) {
- if (this.children.length) {
- for (let i = 0; i < this.children.length; i++) {
- const returned = this.children[i].changePath(pathCopy);
- if (returned) {
- return returned;
- }
- }
- return false;
- }
- return false;
- }
- return this;
- }
- return false;
- }
- }
- }
- class Routing {
- routes = new Array();
- wnd;
- constructor(wnd, routes = new Array()) {
- this.routes = routes;
- this.wnd = wnd;
- }
- changeRoute(path = "") {
- const tablePath = path.split("/");
- for (let i = 0; i < this.routes.length; i++) {
- const returned = this.routes[i].changePath(tablePath);
- if (returned) {
- this.wnd.loadFile(returned.viewFile);
- return returned;
- }
- }
- return null;
- }
- }
- module.exports.RouteItem = RouteItem
- module.exports.Routing = Routing
Klasa RouteItem opisuje obiekt ścieżki routingu. Z kolei klasa Routing przeznaczona jest do obsługi przełączania widoku. Samo utworzenie ścieżek routingu w pliku index.js wygląda następująco:
- winRouting = new Routing(win , [
- new RouteItem('home', null, './index.html', [
- new RouteItem('subRouting', null, './sub-routing-view.html')
- ]),
- new RouteItem('trussCalculator', null, './truss-calculator.html', [])
- ])
Powyższy kod umieszczony został w funkcji tworzącej okno programu. Warto nadmienić, że konieczna będzie obsługa komunikatu przychodzącego na żądanie zmiany ścieżki:
- ipcMain.on(
- 'change-win-route',
- (e, routePath) => {
- console.log(routePath);
- winRouting.changeRoute(routePath)
- }
- )
w pliku index.js należy zaimportować obiekt ipcMain w następujący sposób:
- const { app, BrowserWindow, Menu, ipcMain } = require("electron");
Teraz w pliku index.html trzeba dodać parę przycisków:
- <button id="truss-calculator">Truss calculator</button>
- <button id="sub-routing">Podstrona</button>
A następnie w pliku index-view.js:
- const trussCalculator = document.querySelector("#truss-calculator");
- const subuRouting = document.querySelector("#sub-routing");
- trussCalculator.addEventListener(
- "click",
- () => {
- if (newViewWindow) {
- newViewWindow.close()
- newViewWindow = null;
- }
- ipcRenderer.send('change-win-route', 'trussCalculator');
- }
- )
- subuRouting.addEventListener(
- "click",
- () => {
- if (newViewWindow) {
- newViewWindow.close()
- newViewWindow = null;
- }
- ipcRenderer.send('change-win-route', 'home/subRouting');
- }
- )
Stworzyłem do celów pokazowych dwa dodatkowe widoki, jeden w pliku truss-calculator.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Truss calculator</title>
- <meta
- http-equiv="Content-Security-Policy"
- content="script-src 'self' 'unsafe-inline';"
- />
- <script src="./viewscripts/truss-calculator-view.js"></script>
- <style>
- </style>
- </head>
- <body style="background: white">
- <div>
- <h2>Welcome to Pyrry</h2>
- <button id="home">Home</button>
- </div>
- <iframe src="https://obliczeniowo.com.pl/Angular_examples/TrussCalculator" width="100%" height="800" ></webview>
- </body>
- </html>
I drugi w pliku sub-routing-view.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Truss calculator</title>
- <meta
- http-equiv="Content-Security-Policy"
- content="script-src 'self' 'unsafe-inline';"
- />
- <script src="./viewscripts/truss-calculator-view.js"></script>
- <style>
- </style>
- </head>
- <body style="background: white">
- <div>
- <h2>Sub routing</h2>
- <button id="home">Home</button>
- </div>
- </body>
- </html>
Dodałem też jeden plik z skryptem truss-calculator-view.js:
- /**
- * import ipcRenderer-a umożliwiającego wysyłanie informacji
- */
- const ipcRenderer = require("electron").ipcRenderer;
- const electron = require("electron");
- let newViewWindow = undefined;
- window.addEventListener("load", () => {
- const btHome = document.querySelector("#home");
- btHome.addEventListener(
- "click",
- () => {
- if (newViewWindow) {
- newViewWindow.close()
- newViewWindow = null;
- }
- ipcRenderer.send('change-win-route', 'home');
- }
- )
- const webview = document.querySelector('webview')
- const indicator = document.querySelector('.indicator')
- const loadstart = () => {
- indicator.innerText = 'loading...'
- }
- const loadstop = () => {
- indicator.innerText = ''
- }
- webview.addEventListener('did-start-loading', loadstart)
- webview.addEventListener('did-stop-loading', loadstop)
- });
Teraz po uruchomieniu programu będzie można przełączać się pomiędzy widokami.