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

Xbox 360 Exclusive JRPGs on Xbox One

Image
Given it wasn't a big player in Japan (or Asia in general), JRPGs that were only available on the Xbox 360 are quite a rare breed indeed. Even rarer, then, are those that are included in the list of backwards compatible titles for Xbox One. Exclusives The only 3 titles that I know tick both boxes (360 exclusive AND backwards compatible on the Xbox One) are: Blue Dragon Infinite Undiscovery Lost Odyssey Infinite Undiscovery Infinite Undiscovery Lost Odyssey and Blue Dragon enjoy reasonably high profiles, but I have a soft spot for Infinite Undiscovery . It seemed to mainly exist as a test game for the new Star Ocean engine but is an enjoyable fantasy JRPG with a solid cast and good battle system. It also features a New Game+ mode, which bumps up the difficulty. Multi-platform Titles Then there are a few more which are backwards compatible but are available on other platforms: Star Ocean: The Last Hope As an example, Star Ocean: The Last Hope (TLH)
Read more