Electron - przesyłanie informacji z widoku do pliku uruchomieniowego aplikacji

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 576 razy

Jeżeli zastanawiasz się jak przesłać jakąś informację czy też obiekt z pliku widoku do pliku uruchomieniowego aplikacji, którym (w moim przypadku) jest plik index.js to czym prędzej zaprzestań swoich starań! Tak się bowiem składa, że bardzo właśnie na tej podstronie postaram się przybliżyć nieco tajemnicę takowego przesyłania danych.

Electron udostępnia odpowiedni mechanizm do realizacji przesyłania danych z widoku do pliku index.js. Do tego niecnego planu wykorzystam następujący kod umieszczony w pliku index-view.js i zaimportowany do pliku index.html:

/** * import ipcRenderer-a umożliwiającego wysyłanie informacji */ const ipcRenderer = require("electron").ipcRenderer; window.addEventListener("load", () => { const okButton = document.querySelector("#ok"); const msgInput = document.querySelector("input[type='text']"); okButton.addEventListener("click", () => { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); }); msgInput.addEventListener("keydown", (event) => { if (event.code === "Enter") { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); msgInput.value = ""; } }); });

W pliku index.html wygląda to następująco:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <script src="./viewscripts/index-view.js"></script> <style> .command-container { display: flex; } .command-container input { width: calc(100vw - 30px); } </style> </head> <body style="background: white"> <h1>Hello World!</h1> <p> We are using node <script> document.write(process.versions.node); </script> , Chrome <script> document.write(process.versions.chrome); </script> , and Electron <script> document.write(process.versions.electron); </script> . </p> <div class="command-container"> <input type="text" /><button id="ok">Ok</button> </div> </body> </html>

Pozostało już tylko utworzyć plik messages.js z skryptem odbierającym komunikaty i wyświetlającym je w konsoli systemowej:

const { ipcMain } = require("electron"); class Messages { static initMessages(mainWindow) { /** * na zdarzenie 'electron-log-message' wyświetlić w konsoli przesyłane dane i * zwrócić wartość potwierdzającą jej odebranie */ ipcMain.on("electron-log-message", (e, message) => { console.log(message); e.returnValue = "sended"; }); } } module.exports.Messages = Messages;

Teraz już tylko pozostało w pliku index.js uruchomić metodę statyczną initMessage inicjalizującą odbieranie informacji pochodzących od widoku okna, której wywołanie powinno się znaleźć w funkcji createWindow:

function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); /** * Tutaj wskazywany jest plik widoku okna */ win.loadFile("index.html"); Messages.initMessages(win); /** * Tworzenie menu */ const mainMenu = Menu.buildFromTemplate(mainMenuTemplate); /** * Dodanie menu do okna */ Menu.setApplicationMenu(mainMenu); }

Po uruchomieniu tej jakże zaawansowanej aplikacji oczom twym powinien taki oto widok:

Electron wysyłanie komunikatów z widoku do pliku uruchomieniowego aplikacji
Rys. 1
Electron wysyłanie komunikatów z widoku do pliku uruchomieniowego aplikacji

Wpisanie jakiegoś komunikatu i zatwierdzenie go powinno skutkować wyświetleniem w konsoli Visual Studio Code np takiego komunikatu:

Message: message test
Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający przesyłanie danych z widoku do pliku uruchomieniowego programu
Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych autor: Laurence Lars Svekis, Maaike van Putten, Rob Percival

Tytuł:

JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych

Autor:

Laurence Lars Svekis, Maaike van Putten, Rob Percival

tytuł: JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript autor: Kyle Simpson

Tytuł:

JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript

Autor:

Kyle Simpson

tytuł: Wszechstronny JavaScript. Technologie: GraphQL, React, React Native i Electron autor: Adam D. Scott

Tytuł:

Wszechstronny JavaScript. Technologie: GraphQL, React, React Native i Electron

Autor:

Adam D. Scott

tytuł: JavaScript dla dzieci dla bystrzaków autor: Chris Minnick, Eva Holland

Tytuł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

Tytuł:

Modularny JavaScript dla zaawansowanych

Autor:

Nicolas Bevacqua

tytuł: JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi autor: Lynn Beighley

Tytuł:

JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi

Autor:

Lynn Beighley

tytuł: Matematyka dla programistów JavaScript autor: Jacek Piechota

Tytuł:

Matematyka dla programistów JavaScript

Autor:

Jacek Piechota

tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript autor: Nicholas C. Zakas

Tytuł:

ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript

Autor:

Nicholas C. Zakas

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona