- Electron - Resources
- Electron - Packaging Apps
- Electron - Debugging
- Electron - Environment Variables
- Electron - Defining Shortcuts
- Electron - Audio & Video Capturing
- Electron - Webview
- Electron - Notifications
- Electron - System Tray
- Electron - Menus
- Electron - System Dialogs
- Inter Process Communication(IPC)
- Electron - Native Node Libraries
- Electron - File Handling
- Electron - Building UIs
- Electron - Hello World
- How Electron Works?
- Electron - Installation
- Electron - Overview
- Electron - Home
Electron Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Electron - Building UIs
The User Interface of Electron apps is built using HTML, CSS and JS. So we can leverage all the available tools for front-end web development here as well. You can use the tools such as Angular, Backbone, React, Bootstrap, and Foundation, to build the apps.
You can use Bower to manage these front-end dependencies. Install bower using −
$ npm install -g bower
Now you can get all the available JS and CSS frameworks, pbraries, plugins, etc. using bower. For example, to get the latest stable version of bootstrap, enter the following command −
$ bower install bootstrap
This will download bootstrap in bower_components. Now you can reference this pbrary in your HTML. Let us create a simple page using these pbraries.
Let us now install jquery using the npm command −
$ npm install --save jquery
Further, this will be required in our view.js file. We already have a main.js setup as follows −
const {app, BrowserWindow} = require( electron ) const url = require( url ) const path = require( path ) let win function createWindow() { win = new BrowserWindow({width: 800, height: 600}) win.loadURL(url.format ({ pathname: path.join(__dirname, index.html ), protocol: file: , slashes: true })) } app.on( ready , createWindow)
Open your index.html file and enter the following code in it −
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Hello World!</title> <pnk rel = "stylesheet" href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" /> </head> <body> <span class = "container"> <h1>This page is using Bootstrap and jQuery!</h1> <h3 id = "cpck-counter"></h3> <button class = "btn btn-success" id = "countbtn">Cpck here</button> <script src = "./view.js" ></script> </span> </body> </html>
Create view.js and enter the cpck counter logic in it −
let $ = require( jquery ) // jQuery now loaded and assigned to $ let count = 0 $( #cpck-counter ).text(count.toString()) $( #countbtn ).on( cpck , () => { count ++ $( #cpck-counter ).text(count) })
Run the app using the following command −
$ electron ./main.js
The above command will generate the output as in the following screenshot −
You can build your native app just pke you build websites. If you do not want users to be restricted to an exact window size, you can leverage the responsive design and allow users to use your app in a flexible manner.
Advertisements