In this lesson we want to learn How to Build GUI Application with ElectronJS & JavaScript, Building GUI application with ElectronJS and JavaScript is fairly straightforward process. Here is an example of how to build a simple application with ElectronJS and JavaScript:
- Start by installing ElectronJS by running npm install electron in your command line.
- Create new folder for your project and navigate to it in the command line.
- Create package.json file in your project directory by running npm init. This file will store information about your project such as the dependencies it needs.
- Create new file called main.js in your project directory. this file will contain the main JavaScript code for your application.
- In your main.js file, import the electron module and create new BrowserWindow object. This will create new window for your application.
|
1 2 3 4 5 6 7 8 |
const electron = require('electron'); const { app, BrowserWindow } = electron; let mainWindow; app.on('ready', () => { mainWindow = new BrowserWindow(); }); |
- In the same file, load an HTML file as the content for your window using loadFile method on BrowserWindow object.
|
1 |
mainWindow.loadFile('index.html'); |
- Create an index.html file in your project directory. this file will contain the HTML markup for your application.
- In the index.html file create the layout and design of your application using HTML, CSS and JavaScript.
- To run the application, in the command line run npm start
This is basic example of how to build a GUI application with ElectronJS and JavaScript. You can add more functionality and features to your application as needed.
This is index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>My GUI Application</title> </head> <body> <div class="container"> <h1>Welcome to my GUI Application</h1> <button class="submit-button">Submit</button> </div> </body> </html> |
This is style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.container { width: 50%; margin: 0 auto; text-align: center; } .submit-button { padding: 10px 20px; font-size: 18px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .submit-button:hover { background-color: #3e8e41; } |
This design includes basic container div that centers the content on the page and sets width of 50%. It also includes heading and a submit button. the CSS styles the container with text align center, and the submit button with a green background color, white text color, and a hover effect.
You can modify this design or add more elements as you need, to create the desired UI for your application.
Run the code using npm start and this will be the result.
You can see that we have default menubar, you can remove that and add your own, to remove the default menu bar and add your own in a GUI application built with ElectronJS and JavaScript, you can use Menu module from the electron package.
You can first import the Menu module by using the following line of code:
|
1 |
const { Menu } = require('electron'); |
Then, you can create your own custom menu template using an array of objects that describe the menu items and their properties. for example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
const menuTemplate = [ { label: 'File', submenu: [ { label: 'New', accelerator: 'CmdOrCtrl+N', click() { // Your code for creating a new file } }, { label: 'Open', accelerator: 'CmdOrCtrl+O', click() { // Your code for opening a file } }, { label: 'Save', accelerator: 'CmdOrCtrl+S', click() { // Your code for saving a file } }, { label: 'Exit', accelerator: 'CmdOrCtrl+Q', click() { // Your code for exiting the application } } ] }, { label: 'Edit', submenu: [ { label: 'Undo', accelerator: 'CmdOrCtrl+Z', click() { // Your code for undoing an action } }, { label: 'Redo', accelerator: 'CmdOrCtrl+Y', click() { // Your code for redoing an action } }, ] } ]; |
Then you can create new Menu object using the Menu.buildFromTemplate(menuTemplate) method, and set it as the application’s menu by using the Menu.setApplicationMenu(menu) method.
|
1 2 |
const menu = Menu.buildFromTemplate(menuTemplate); Menu.setApplicationMenu(menu); |
This way you can customize the menu bar with own menu items and functionality.
It’s worth noting that, you might also need to disable the default menu bar on the main window of your application. You can do this by setting the frame: false option when creating the BrowserWindow object.
|
1 2 3 4 5 |
const mainWindow = new BrowserWindow({ width: 800, height: 600, frame: false, // Disable the default menu bar }); |
