2016-04-30

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.



 

2016-04-22

Canberra Railway Museum


Small but nicely kept collection, well worth having a look. An interesting mix of passenger cars from different eras.