How to create Electron based desktop apps using Essential JS for Windows, Mac OS and Linux?.
How to create Electron based desktop apps using Essential JS for Windows, Mac OS and Linux?
Introduction
Electron (Formerly known as Atom Shell) is used to create cross platform (Linux, Windows and OS X) desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.
This doesn't mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.
Electron uses Chromium and Node.js (Building block of Electron) so we can build the app with HTML, CSS, and JavaScript.
Prerequisites and Compatibility
Prerequisites
Running this requires Node.js (which includes npm) on your system.
Compatibility
OS X
Only 64bit binaries are provided for OS X, and the minimum OS X version supported is OS X 10.9.
Windows
Windows 7 and later are supported, older operating systems are not supported (and do not work).
Both x86 and amd64 (x64) binaries are provided for Windows. Please note, the ARM version of Windows is not supported for now.
Linux
The prebuilt ia32(i686) and x64(amd64) binaries of Electron are built on Ubuntu 12.04, the arm binary is built against ARM v7 with hard-float ABI and NEON for Debian Wheezy.
Whether the prebuilt binary can run on a distribution depends on whether the distribution includes the libraries that Electron is linked to on the building platform, so only Ubuntu 12.04 is guaranteed to work, but following platforms are also verified to be able to run the prebuilt binaries of Electron:
- Ubuntu 12.04 and later
- Fedora 21
- Debian 8
Using Syncfusion Essential JS controls with Electron Framework:
Syncfusion framework integrate with Electron framework and use the both framework in a single application.
Steps to add the sample and run the Application
Follow the below steps and enter the below commands using command prompt window.
Step1:
To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer, then enter the below command line using terminal (Mac OS) or Command Prompt (Windows).
i)# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
|
ii)# Go into the repository
$ cd electron-quick-start
|
iii)# Install the dependencies
$ npm install
|
Learn more about Electron and its API in the documentation.
Step2:
Add the Syncfusion JS and CSS file reference as mentioned in the link in index.html file located in the below image.
When refer jQuery reference add the below code in head tag.
<script> window.nodeRequire = require; delete window.exports; delete window.module; </script> |
Step3:
Add the below sample code in in index.html file and render Button control.
Add <Button> element to create a Button control.
<div class="case1"> <table> <tr> <td> <input type="checkbox" id="play" /> </td> <td> <button id="start">Start</button> </td> <td> <button id="stop">stop</button> </td> <td> <button id="open">Open</button> </td> <td> <button id="save">Save</button> <ul id="menu1"> <li><span>Open...</span></li> <li><span>Save</span></li> <li><span>Delete</span></li> </ul> </td> </tr> </table> </div> |
Initialize Button in the script with properties.
<script> $(function () { $("#play").ejToggleButton({ showRoundedCorner: true, defaultText: "Play", activeText: "Pause", size: "large", click: "playpause", contentType: "textandimage", defaultPrefixIcon: "e-icon e-mediaplay e-uiLight", activePrefixIcon: "e-icon e-mediapause e-uiLight", });
$("#start").ejButton({ size: "large", showRoundedCorner: true, click: "start",
});
$("#stop").ejButton({ showRoundedCorner: true, size: "large", click: "stop", });
$("#open").ejButton({ showRoundedCorner: true, size: "large",
}); $("#save").ejSplitButton({ size: "large", showRoundedCorner: true, targetID: "menu1", create: "spltbtnLoad",
}); }); </script> |
Add the following styles.
<style> #play, #pause, #stop, #open, #bold, #italic, #underline { border-radius: 100px; /* for rounded corners*/ }
ul li span { color: white; }
.case1 { margin: 100px; }
.officeribben { margin: 100px; }
.sample { margin: 100px; }
.audiodiv { margin: 100px; } </style> |
Step4:
Run the Electron Application using the below command line.
$ npm start
|
Now see the created Electron Application as below.