We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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).

 

  1. # Clone the Quick Start repository

 

 

 

 

  1. # Go into the repository

 

 

$ cd electron-quick-start

 

 

 

  1. # Install the dependencies

 

$ 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.

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

 

 

 

 

Now see the created Electron Application as below.

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7123 10/17/2016 10/17/2016 JavaScript General
Did you find this information helpful?
Comments
Bruce Van Horn Jan 21, 2017
For quite some time now I've been saying to myself, "Man, if I had time to figure out how to use Syncfusion with Electron, I could make some really cool apps!"  It's that whole "having time" part.  I'm looking forward to working through this example!  Thank you so much!
Reply
Bruce Van Horn Jan 21, 2017
The part that still isn't clear is probably the most crucial part - step 2.  If I just paste the sample code in, it doesn't work because I don't have the references set up, and this tutorial didn't show how to do that.  The easy fix is to just put a zip file up with the final running example in it, or show the entire final index.html file.
Reply
Vignesh Kumar D R [Syncfusion] Jan 23, 2017

Hi Bruce Van Horn,

We have attached the zip file for the Electron Application as we have described in this KB.

Electron App:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/electron-582616690

 

Please refer the below link for control initialization and adding references.

https://help.syncfusion.com/js/control-initialization

 

Note:

To Run the Electron Application using the below command (navigate to electron folder) as we have previously mentioned in this KB.

 

npm start


Regards,

Vignesh Kumar DR

 

Reply
Bruce Van Horn Apr 06, 2017
OK, I'm back 3 months later :-)  Thank you so much for this.  Stand back!  I'm about to build stuff!
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon