Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 833 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
Layout wykonany przez autora strony, wszelkie prawa zastrzeżone. Jakiekolwiek użycie części lub całości grafik znajdujących się na tej stronie bez pisemnej zgody jej autora surowo zabronione.