JS - ElectronEueung Mulyana
http://eueung.github.io/js/electronJS CodeLabs | Attribution-ShareAlike CC BY-SA
1 / 27
Agenda
Electron Quick Start, Boilerplate
Angular.JS Todo @ Electron
Electron + Photon
Photon Angular Todo-App
2 / 27
package.json + main.js + index.html4 / 27
package.json
{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron main.js" }, "repository": { "type": "git", "url": "git+https://github.com/atom/electron-quick-start.git" }, "keywords": [ "Electron", "quick", "start", "tutorial" ], "author": "GitHub", "license": "CC0-1.0", "bugs": { "url": "https://github.com/atom/electron-quick-start/issues" }, "homepage": "https://github.com/atom/electron-quick-start#readme" "devDependencies": { "electron-prebuilt": "̂0.36.0" }}
main.js
'use strict';const electron = require('electron');const app = electron.app; const BrowserWindow = electron.BrowserWindow; //--------------------------------------let mainWindow;//--------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//--------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() { mainWindow = null; });});
5 / 27
Electron Quick Startpackage.json + main.js + index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <script></script> </head>
<body> <h1>Hello World!</h1> We are using node <script> Chrome <script> </ and Electron <script> </body></html>
document.write(process.versions.node)document.write(process.versions.chrome)
document.write(process.versions.electron)
6 / 27
Electron Boilerplatesindresorhus/electron-boilerplate
7 / 27
package.json + index.js + index.html + index.css8 / 27
package.json
{ "name": "app", "productName": "App", "version": "0.0.0", "description": "", "license": "MIT", "repository": "user/repo", "author": { "name": "", "email": "", "url": "" }, "electronVersion": "0.36.0", "scripts": { "test": "xo", "start": "electron .", "build": "electron-packager . $npm_package_productName --out=dist --ignore='̂/dist$' --prune --asar --all --version=$npm_package_electronVersion" }, "files": [ "index.js", "index.html", "index.css" ], "keywords": [ "electron-app", "electron" ], ...}
... "dependencies": { "electron-debug": "̂0.5.0" }, "devDependencies": { "electron-packager": "̂5.0.0", "electron-prebuilt": "̂0.36.0", "xo": "̂0.12.0" }, "xo": { "esnext": true, "envs": [ "node", "browser" ] }
9 / 27
index.js
'use strict';const electron = require('electron');const app = electron.app;//-------------------------------require('crash-reporter').start();require('electron-debug')();//-------------------------------let mainWindow;//-------------------------------function onClosed() { mainWindow = null; }//-------------------------------function createMainWindow() { const win = new electron.BrowserWindow({ width: 800, height:
win.loadURL(̀file://${__dirname}/index.html̀); win.on('closed', onClosed);
return win;}//-------------------------------app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});//-------------------------------app.on('activate', () => { if (!mainWindow) { mainWindow = createMainWindow(); }});//-------------------------------app.on('ready', () => { mainWindow = createMainWindow(); });
10 / 27
Angular.JS Todo @ Electron
11 / 27
12 / 27
13 / 27
{ "name": "app-03", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "devDependencies": { "electron-prebuilt": "̂0.36.0" }, "dependencies": { "lowdb": "̂0.11.2" }}
package.json
main.js
'use strict';const electron = require('electron');const app = electron.app; const BrowserWindow = electron.BrowserWindow; //--------------------------------------let mainWindow;//--------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//--------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/angular-offline-todo.html' mainWindow.setMenu(null);
mainWindow.on('closed', function() { mainWindow = null; });});
14 / 27
(function () { 'use strict';
angular.module('todoApp', []) .controller('todoListController', [TodoListController]);
function TodoListController() { var todoList = this; todoList.todos = []; var low = require('lowdb'); var storage = require('lowdb/file-sync'); todoList.db = low('app-03/db.json', { storage }); getAllTodos();
todoList.addTodo = function() { var varid = todoList.db('todos').size(); while(todoList.db('todos').find({ id: varid })) { varid +=
var data = { id: varid, text: todoList.todoText, done: todoList.db('todos').push(data);
todoList.todos.push(data); todoList.todoText = ''; };
todoList.remaining = function() { var count = 0; angular.forEach(todoList.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; };
angular-offline-todo.js
todoList.archive = function() { var oldTodos = todoList.todos; todoList.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) todoList.todos.push(todo); }); };
todoList.updDone = function(idx){ var data = todoList.db('todos') .chain() .find({ id: todoList.todos[idx].id }) .assign({ done: todoList.todos[idx].done}) .value(); };
function getAllTodos() { todoList.todos = todoList.db('todos').cloneDeep(); }; }
})();
15 / 27
<!doctype html><html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></ <!-- <script src="angular-offline-todo-service.js"></script> --> <script src="angular-offline-todo.js"></script> <link rel="stylesheet" href="angular-offline-todo.css"> </head> <body> <h2>Todo</h2> <div ng-controller="todoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining [ <a href="" ng-click="todoList.archive()">archive</a <ul class="unstyled"> <li ng-repeat="todo in todoList.todos track by $index" <input type="checkbox" ng-model="todo.done" ng-click <span class="done-{{todo.done}}">{{todo.text}}</span </li> </ul> <form ng-submit="todoList.addTodo()"> <input type="text" ng-model="todoList.todoText" size placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add" </form> </div> </body></html>
angular-offline-todo.html
16 / 27
Electron + Photon
17 / 27
18 / 27
Photon Template App
{ "name": "proton-template-app", "version": "1.0.0", "description": "A simple template app for Proton", "main": "app.js", "author": "Connor Sears", "scripts": { "start": "electron ." }}
package.json
app.js
var app = require('app'); var BrowserWindow = require('browser-window'); //-------------------------------------var mainWindow = null;//-------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//-------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({ width: 800, height: 600, 'min-width': 480, 'min-height': 360, 'accept-first-mouse': true, 'title-bar-style': 'hidden' });
mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.setMenu(null);
mainWindow.on('closed', function() { mainWindow = null; });});
19 / 27
Photon Template Apppackage.json + app.js
index.html + js/menu.js
var remote = require('remote')var Menu = remote.require('menu')var MenuItem = remote.require('menu-item')//---------------------------------var menu = new Menu()menu.append(new MenuItem({ label: 'Delete', click: function() { alert('Deleted') }}));//---------------------------------menu.append(new MenuItem({ label: 'More Info...', click: function() { alert('Here is more information') }}));//---------------------------------window.addEventListener('contextmenu', function (e) { e.preventDefault(); menu.popup(remote.getCurrentWindow());}, false);
js/menu.js
20 / 27
index.html
<!DOCTYPE html>
<head> <title>Photon</title> <link rel="stylesheet" href="../css/photon.min.css"> <script src="js/menu.js" charset="utf-8"></script> </head> <body> <div class="window">
<header class="toolbar toolbar-header"> <h1 class="title">Photon</h1> </header>
<div class="window-content"> <div class="pane-group"> ... </div> </div> </div> </body></html>
<html>
<div class="pane pane-sm sidebar"> <nav class="nav-group"> <h5 class="nav-group-title">Favorites</h5> <span class="nav-group-item"> <span class="icon icon-home" <span class="nav-group-item active"> <span class="icon icon-light-up" <span class="nav-group-item"> <span class="icon icon-download" <span class="nav-group-item"> <span class="icon icon-folder" <span class="nav-group-item"> <span class="icon icon-window" <span class="nav-group-item"> <span class="icon icon-signal" <span class="nav-group-item"> <span class="icon icon-monitor" </nav></div>
<div class="pane"> <table class="table-striped"> <thead> <tr> <th>Name</th> <th>Kind</th> <th>Date Modified</th </thead> <tbody> <tr> <td>bars.scss</td> <td>Document</td> <td>Oct 13, 2015 ... <tr> <td>base.scss</td> <td>Document</td> <td>Oct 13, 2015
</tbody> </table></div>
21 / 27
Photon Angular Todo-App
22 / 27
23 / 27
# angular-offline-todo.css
.margin10 { margin: 10px; width: inherit !important;}
# app.jsmainWindow.loadURL('file://' + __dirname + '/angular-offline-todo.html'
# angular-offline-todo.jstodoList.db = low('app-05/app/db.json', { storage }); Minor Changes
app.js
angular-offline-todo.js
angular-offline-todo.css
24 / 27
angular-offline-todo.html
<!doctype html><html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></ <script src="angular-offline-todo.js"></script> <link rel="stylesheet" href="angular-offline-todo.css">
<link rel="stylesheet" href="../css/photon.min.css"> <script src="js/menu.js" charset="utf-8"></script> </head> <body>
<div class="window" ng-controller="todoListController as todoList"
<header class="toolbar toolbar-header"> <h1 class="title">Photon Angular Todo.App</h1> </header>
... </div>
</body></html>
<div class="window-content"> <div class="pane-group">
<table class="table-striped"> <thead> <tr> <th>DONE</th> <th>Todo</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todoList.todos track by $index" <td><input type="checkbox" ng-model="todo.done" ng-click <td><span class="done-{{todo.done}}">{{todo.text}} </tr> </tbody> </table>
</div></div>
<footer class="toolbar toolbar-footer"> <div class="toolbar-actions"> <form ng-submit="todoList.addTodo()"> <span class="pull-left margin10">{{todoList.remaining()}} of {{todoList.todos.length}} remaining [
<input class="form-control btn btn-primary pull-right margin10" <input type="text" class="form-control pull-right margin10" placeholder="add new todo here"> </form> </div></footer>
25 / 27
References1. Electron2. sindresorhus/awesome-electron3. Photon · Components
26 / 27
ENDEueung Mulyana
http://eueung.github.io/js/electronJS CodeLabs | Attribution-ShareAlike CC BY-SA
27 / 27