rudifa · October 26, 2022 15:53 · Oct 26, 2022 · Oct 26, 2022 · Oct 26, 2022 · Oct 26, 2022
diff --git a/Electron IPC Pattern #1 b/Electron IPC Pattern #1
@@ -0,0 +1,7 @@
+// 1. the renderer attaches a listener to the button defined in the html file
+//  . on user click, the listener calls the function setTitle passing on the value from the input element
+
+// 2. the preload defines the function that will be called by setTitle and pass on the title sending the event set-title
+
+// 3. the main attaches a listener for the event set-title
+//    that will get the title an put it into the browser window title
diff --git a/preload.js b/preload.js
@@ -1,4 +1,4 @@
-// 2. the preload defines the function that will be called by setTitle and pass on the title
+// 2. the preload defines the function that will be called by setTitle and pass on the title sending the event set-title
 
 const { contextBridge, ipcRenderer } = require('electron')
 

diff --git a/main.js b/main.js
@@ -8,6 +8,8 @@ function createWindow () {
     }
   })
 
+  // 3. the main attaches a listener for the event set-title
+  //    that will get the title an put it into the browser window title
   ipcMain.on('set-title', (event, title) => {
     const webContents = event.sender
     const win = BrowserWindow.fromWebContents(webContents)

diff --git a/preload.js b/preload.js
@@ -1,3 +1,5 @@
+// 2. the preload defines the function that will be called by setTitle and pass on the title
+
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {

diff --git a/renderer.js b/renderer.js
@@ -1,3 +1,6 @@
+// 1. the renderer attaches a listener to the button defined in the html file
+//  . on user click, the listener calls the function setTitle passing on the value from the input element
+
 const setButton = document.getElementById('btn')
 const titleInput = document.getElementById('title')
 setButton.addEventListener('click', () => {

diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Hello World!</title>
+  </head>
+  <body>
+    Title: <input id="title"/>
+    <button id="btn" type="button">Set</button>
+    <script src="./renderer.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,30 @@
+const {app, BrowserWindow, ipcMain} = require('electron')
+const path = require('path')
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  ipcMain.on('set-title', (event, title) => {
+    const webContents = event.sender
+    const win = BrowserWindow.fromWebContents(webContents)
+    win.setTitle(title)
+  })
+
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "five-chocolate-verify-9v1cn",
+  "productName": "five-chocolate-verify-9v1cn",
+  "description": "My Electron application description",
+  "keywords": [],
+  "main": "./main.js",
+  "version": "1.0.0",
+  "author": "rudifarkas",
+  "scripts": {
+    "start": "electron ."
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "electron": "21.2.0"
+  }
+}
diff --git a/preload.js b/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    setTitle: (title) => ipcRenderer.send('set-title', title)
+})
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,6 @@
+const setButton = document.getElementById('btn')
+const titleInput = document.getElementById('title')
+setButton.addEventListener('click', () => {
+    const title = titleInput.value
+    window.electronAPI.setTitle(title)
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,3 @@
+/* styles.css */
+
+/* Add styles here to customize the appearance of your app */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/* styles.css */

		/* Add styles here to customize the appearance of your app */
No results found