Electron - tworzenie własnego prostego routingu i zmiana widoku w ramach jednego okna
Autor podstrony: Krzysztof Zajączkowski
Stronę tą wyświetlono już: 583 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:
