Articles in this section
Category / Section

How to create Electron based desktop apps using Essential JS for Windows, Mac OS and Linux?.

3 mins read

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

 

 

 

Electron

 

ii)# Go into the repository

 

 

$ cd electron-quick-start

 

 

Electron quick start

 

iii)# Install the dependencies

 

$ npm install

 

 

npm install

 

 

Note:

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.

project file

 

Note:

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

 

 

 

project start

 

Now see the created Electron Application as below.

 

Application output

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied