Getting into Electron

Looking for something new and interesting, I decided to take my first, tentative steps into the world of Electron. While I'm quite interested in the possibilities offered by Node.js, I've not actually done much with it, so jumping into Electron is that little bit more daunting. I have spent plenty of time with JavaScript/jQuery though, which is the important thing.

First off is the setting up the basic application structure. Each application has a couple of files essentially describing it and laying out behavior and functions, then at least one more file that contains the visible content.

The first file, package.json is a basic description of the application that points to the main file that holds the core.

package.json
1
2
3
4
5
{
  "name"    : "testapp",
  "version" : "0.1.0",
  "main"    : "main.js"
}

In this case (and by default IIRC), the core file is named main.js.

First off, this file enables Electron itself (by way of a require statement), adds some short-hand constants, and sets up the main window. In addition, it adds a handler that quits the application when the window is closed.

After setting the dimensions of the window, the file index.html is loaded, the File/Edit/etc. menus are disabled, and behavior for handling the window being closed is added.


main.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on('window-all-closed', function() {
    app.quit();
});

app.on('ready', function() {
    mainWindow = new BrowserWindow({width:1024, height: 768});
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    mainWindow.setMenu(null);
    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});



The rest of the application is comprised of the usual mix of HTML, CSS and JavaScript that you'd write for any website/app. In this example, I just have a 3 column layout displaying version info and a button (that allows me to test jQuery functionality via my external fakeButton.js file - which, in short, changes the button size and color to indicate it has been clicked).

index.html

 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
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>testapp</title>
        <link rel="stylesheet" type="text/css" href="lib/style.css" />
    </head>

    <body>

        <div class="container">

            <img src="img/generic-heading.png" alt="heading" title="heading" width="480" height="120" />

            <div class="column-left">

                <div class="link-container">

                    <p><a href="http://www.google.com/" title="test link">google</a></p>

                </div>

            </div>

            <div class="column-right">

                <div class="link-container">

                    <p>some more stuff</p>

                </div>

            </div>

            <div class="column-center">

                <div class="content">

                    <h2>Content goes here</h2>

                    <ul>Version info:
                        <li>node <script>document.write(process.versions.node)</script></li>
                        <li>Chrome <script>document.write(process.versions.chrome)</script></li>
                        <li>and Electron <script>document.write(process.versions.electron)</script></li>
                    </ul>

                    <input type="submit" name="buttonTest" id="buttonTest" value="Click Here" class="button" />

                </div>

            </div>

        </div>

    </body>

    <script>window.$ = window.jQuery = require('./lib/jquery-2.2.3.min.js');</script>
    <script src="./lib/fakeButton.js"></script>

</html>


It's important to take note of the <script> block that enables jQuery (with thanks to the answer provided at http://stackoverflow.com/a/32621989):

<script>window.$ = window.jQuery = require('./lib/jquery-2.2.3.min.js');</script>

Finally, to test, pass the application directory to Electron and the application window will fire up.



 

Comments

Post a Comment

Popular posts from this blog

Change the ComputerName value in Unattend.xml using PowerShell

A quick and dirty PowerShell script to update the value of ComputerName in Unattend.xml before imaging. This particular value is located at: <unattend>  <settings pass="generalize">   <component name="Microsoft-Windows-Shell-Setup" processorArchitecture="amd64" publicKeyToken="31bf3856ad364e35" language="neutral" versionScope="nonSxS" xmlns:wcm="http://schemas.microsoft.com/WMIConfig/2002/State" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">     <computername> Which is a bit of a mouthful, but we can be lazy and just pull the value from the nth component node (in my case it's 3, or the 4th component node). PowerShell uses dots to describe the hierarchical path, which looks a lot neater than the above: $xml.unattend.settings.component[3].computername To repeat, the value of .component[n] will change depending on the structure of the file. The value of the...
Read more

Testing out Link Aggregation

Image
I picked up a TP-Link managed switch last week as something of a compromise between affordability and features - as it turns out though, it does just about everything I could ask for, just without the extra expense from buying something that has HP or Cisco written on the side. I grabbed the TL-SG3216, a fanless L2 managed switch with 16x1Gigabit ports as it ticked all the boxes: Silent (fanless) Managed Link Aggregation/802.3ad (LACP) 802.1Q (VLAN) STP As a bonus, the CLI interface (via console cable or ssh) is very similar to Cisco's IOS, so I don't have to learn an entirely new syntax to configure it. Before I replace my existing switch, I spent a bit of time testing out its features. First up, I setup a spare Raspberry Pi with a second ethernet interface (via a USB dongle) to test out link aggregation. First up, the configuration on the Pi (Raspbian): Install ifenslave to allow for the creation of bonded network interfaces # apt-get install ifenslav...
Read more

Adding 802.1Q Trunking to Debian GNU/Linux

Here's a quick guide to setting up 802.1Q trunking for VLANs on a Debian GNU/Linux box connected to one or more Cisco Catalyst switches, which could then be used as a cheap router replacement. Configuration on the Debian box: Add 8021q to /etc/modules so 802.1Q support is enabled at startup. To install it immediately: # modprobe 8021q Use vconfig to add the VLANs to the interface you'll be using (if vconfig is missing, run apt-get install vlan ): # vconfig add eth0 2 (In the above, eth0 is the physical interface and 2 is the ID of the VLAN) Give the interface an IP. Choose an address in the range you've set aside for that particular VLAN. In this example, VLAN 2 is using 192.168.2.0/24. # ifconfig eth0.2 192.168.2.201 netmask 255.255.255.0
Read more