Electron - tworzenie własnego prostego routingu i zmiana widoku w ramach jednego okna

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 578 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.

Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający przełączanie widoku okna
Propozycje książek