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:

Listing 1
  1. const electron = require("electron");
  3. class RouteItem {
  4. path = "";
  5. viewClass;
  6. viewFile = "";
  7. children = new Array();
  9. constructor(
  10. path = "",
  11. viewClass = null,
  12. viewFile = "",
  13. children = new Array()
  14. ) {
  15. this.path = path;
  16. this.viewClass = viewClass;
  17. this.viewFile = viewFile;
  18. this.children = children;
  19. }
  21. changePath(path = new Array()) {
  22. let pathCopy = [...path];
  24. if (path.length) {
  25. const pathItem = pathCopy.shift();
  26. if (pathItem === this.path) {
  27. if (pathCopy.length) {
  28. if (this.children.length) {
  29. for (let i = 0; i < this.children.length; i++) {
  30. const returned = this.children[i].changePath(pathCopy);
  31. if (returned) {
  32. return returned;
  33. }
  34. }
  35. return false;
  36. }
  37. return false;
  38. }
  39. return this;
  40. }
  41. return false;
  42. }
  43. }
  44. }
  46. class Routing {
  47. routes = new Array();
  48. wnd;
  50. constructor(wnd, routes = new Array()) {
  51. this.routes = routes;
  52. this.wnd = wnd;
  53. }
  55. changeRoute(path = "") {
  56. const tablePath = path.split("/");
  58. for (let i = 0; i < this.routes.length; i++) {
  59. const returned = this.routes[i].changePath(tablePath);
  60. if (returned) {
  61. this.wnd.loadFile(returned.viewFile);
  62. return returned;
  63. }
  64. }
  65. return null;
  66. }
  67. }
  69. module.exports.RouteItem = RouteItem
  70. 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:

Listing 2
  1. winRouting = new Routing(win , [
  2. new RouteItem('home', null, './index.html', [
  3. new RouteItem('subRouting', null, './sub-routing-view.html')
  4. ]),
  5. new RouteItem('trussCalculator', null, './truss-calculator.html', [])
  6. ])

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:

Listing 3
  1. ipcMain.on(
  2. 'change-win-route',
  3. (e, routePath) => {
  4. console.log(routePath);
  5. winRouting.changeRoute(routePath)
  6. }
  7. )

w pliku index.js należy zaimportować obiekt ipcMain w następujący sposób:

Listing 4
  1. const { app, BrowserWindow, Menu, ipcMain } = require("electron");

Teraz w pliku index.html trzeba dodać parę przycisków:

Listing 5
  1. <button id="truss-calculator">Truss calculator</button>
  2. <button id="sub-routing">Podstrona</button>

A następnie w pliku index-view.js:

Listing 6
  1. const trussCalculator = document.querySelector("#truss-calculator");
  2. const subuRouting = document.querySelector("#sub-routing");
  3. trussCalculator.addEventListener(
  4. "click",
  5. () => {
  6. if (newViewWindow) {
  7. newViewWindow.close()
  8. newViewWindow = null;
  9. }
  10. ipcRenderer.send('change-win-route', 'trussCalculator');
  11. }
  12. )
  14. subuRouting.addEventListener(
  15. "click",
  16. () => {
  17. if (newViewWindow) {
  18. newViewWindow.close()
  19. newViewWindow = null;
  20. }
  21. ipcRenderer.send('change-win-route', 'home/subRouting');
  22. }
  23. )

Stworzyłem do celów pokazowych dwa dodatkowe widoki, jeden w pliku truss-calculator.html:

Listing 7
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Truss calculator</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <script src="./viewscripts/truss-calculator-view.js"></script>
  11. <style>
  12. </style>
  13. </head>
  14. <body style="background: white">
  15. <div>
  16. <h2>Welcome to Pyrry</h2>
  17. <button id="home">Home</button>
  18. </div>
  20. <iframe src="https://obliczeniowo.com.pl/Angular_examples/TrussCalculator" width="100%" height="800" ></webview>
  21. </body>
  22. </html>

I drugi w pliku sub-routing-view.html:

Listing 8
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Truss calculator</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <script src="./viewscripts/truss-calculator-view.js"></script>
  11. <style>
  12. </style>
  13. </head>
  14. <body style="background: white">
  15. <div>
  16. <h2>Sub routing</h2>
  17. <button id="home">Home</button>
  18. </div>
  20. </body>
  21. </html>

Dodałem też jeden plik z skryptem truss-calculator-view.js:

Listing 9
  1. /**
  2. * import ipcRenderer-a umożliwiającego wysyłanie informacji
  3. */
  4. const ipcRenderer = require("electron").ipcRenderer;
  6. const electron = require("electron");
  8. let newViewWindow = undefined;
  10. window.addEventListener("load", () => {
  11. const btHome = document.querySelector("#home");
  13. btHome.addEventListener(
  14. "click",
  15. () => {
  16. if (newViewWindow) {
  17. newViewWindow.close()
  18. newViewWindow = null;
  19. }
  20. ipcRenderer.send('change-win-route', 'home');
  21. }
  22. )
  24. const webview = document.querySelector('webview')
  25. const indicator = document.querySelector('.indicator')
  27. const loadstart = () => {
  28. indicator.innerText = 'loading...'
  29. }
  31. const loadstop = () => {
  32. indicator.innerText = ''
  33. }
  35. webview.addEventListener('did-start-loading', loadstart)
  36. webview.addEventListener('did-stop-loading', loadstop)
  37. });

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

Komentarze