2023-02-26 01:30

getting-started-electron/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+src/node_modules
+dist

getting-started-electron/main.js

@@ -0,0 +1,55 @@
+const { app, BrowserWindow, Menu, MenuItem } = require('electron');
+
+function createWindow() {
+    let win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        webPreferences: {
+            nodeIntegration: true
+        }
+    });
+
+    createMenu();
+
+    win.loadFile('src/index.html');
+
+    win.webContents.openDevTools();
+
+
+}
+
+function createMenu() {
+    const menu = [
+        {
+            label: 'File',
+            submenu: [
+                { label: 'Exit', role: 'quit' }
+            ]
+        },
+        {
+            label: 'Edit',
+            submenu: [
+                { label: 'Copy', role: 'copy' },
+                { label: 'Cut', role: 'cut' },
+                { label: 'Paste', role: 'paste' },
+                { type: 'separator' },
+                { label: 'Undo', role: 'undo' },
+                { label: 'Redo', role: 'redo' },
+            ]
+        }
+    ];
+
+    Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
+}
+
+app.whenReady().then(createWindow);
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
+app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow();
+    }
+});

getting-started-electron/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "getting-electron",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "pack-linux": "electron-packager . my-test-app --out ./dist --platform-linux --asar --overwrite=true --prune=true",
+    "pack-windows": "electron-packager . my-test-app --out ./dist --platform=win32 --asar --overwrite=true --prune=true",
+    "clean": "rm -r ./dist/*",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "asar": "^3.0.3",
+    "electron": "^8.2.3",
+    "electron-packager": "^14.2.1"
+  },
+  "dependencies": {
+    "mustache": "^4.0.1"
+  }
+}

getting-started-electron/src/components.js

@@ -0,0 +1,48 @@
+const Mustache = require('mustache');
+
+class UIComponent {
+    constructor(template, options) {
+        this.template = template;
+        this.options = options;
+    }
+    apply(params = {}) {
+        for (let key in params) {
+            this.options[key] = params[key];
+        }
+    }
+}
+
+class Toolbar extends UIComponent {
+
+    constructor() {
+        super(`<h1>{{title}}</h1>`, {
+            title: "empty"
+        });
+    }
+
+    apply(params = {}) {
+        super.apply(params);
+        document.querySelector('#toolbar').innerHTML
+            = Mustache.render(this.template, this.options);
+    }
+}
+
+class Statusbar extends UIComponent {
+    constructor() {
+        super(`<span class="current-time">{{currentDateTime}}</span>`, {
+            currentDateTime: new Date().toLocaleString()
+        });
+
+    }
+
+    apply(params = {}) {
+        super.apply(params);
+        this.options['currentDateTime'] = new Date().toLocaleString();
+        document.querySelector('#statusbar').innerHTML
+            = Mustache.render(this.template, this.options);
+    }
+}
+
+module.exports = {
+    Toolbar, Statusbar
+};

getting-started-electron/src/index.css

@@ -0,0 +1,68 @@
+* {
+    box-sizing: content-box;
+}
+html,
+body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+html *,
+body * {
+    font-size: 16px;
+}
+body > .container {
+    width: 100%;
+    height: 100%;
+    background-color: #f4f4f4;
+}
+.grid-container {
+    display: grid;
+    grid-template-rows: 64px 1fr 24px;
+    grid-template-columns: 180px 1fr;
+}
+#toolbar {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: yellow;
+}
+#toolbar * {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+#side-pane {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    background-color: lightsteelblue;
+}
+#content-pane {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+#statusbar {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: lightgray;
+}
+#statusbar * {
+    font-size: 0.85rem;
+    color: grey;
+}
+#statusbar > .current-time {
+    float: right;
+}
+p {
+    color: red;
+}

getting-started-electron/src/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test</title>
+    <link rel="stylesheet" href="index.css" />
+
+    <script>
+        const { Toolbar, Statusbar } = require('./components');
+
+        let uiToolbar = new Toolbar();
+        let uiStatusbar = new Statusbar();
+
+        window.addEventListener('DOMContentLoaded', () => {
+            //alert('Hello');
+            uiToolbar.apply({ title: "Hahaha" });
+            setInterval(() => {
+                uiStatusbar.apply();
+            }, 1000);
+        });
+    </script>
+</head>
+
+<body class="grid-container">
+    <div id="toolbar"></div>
+    <div id="side-pane">sidebar</div>
+    <div id="contene-pane">
+        <p>Hello~</p>
+        <button onclick="uiToolbar.apply({title: 'kiki'})">Click</button>
+    </div>
+    <div id="statusbar"></div>
+</body>
+
+</html>