📝 Update tutorials to ES6 [ci skip]

This commit is contained in:
Steve Kinney 2016-05-04 12:11:51 -06:00
parent 3271492c86
commit 55babea2bb
7 changed files with 66 additions and 63 deletions

View file

@ -71,8 +71,8 @@ require('/path/to/example.asar/dir/module.js');
You can also display a web page in an `asar` archive with `BrowserWindow`: You can also display a web page in an `asar` archive with `BrowserWindow`:
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const { BrowserWindow } = require('electron');
var win = new BrowserWindow({width: 800, height: 600}); let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file:///path/to/example.asar/static/index.html'); win.loadURL('file:///path/to/example.asar/static/index.html');
``` ```
@ -86,7 +86,7 @@ For example, to get a file with `$.get`:
```html ```html
<script> <script>
var $ = require('./jquery.min.js'); var $ = require('./jquery.min.js');
$.get('file:///path/to/example.asar/file.txt', function(data) { $.get('file:///path/to/example.asar/file.txt', (data) => {
console.log(data); console.log(data);
}); });
</script> </script>
@ -99,7 +99,7 @@ content of `asar` archive as file. For this purpose you can use the built-in
`original-fs` module which provides original `fs` APIs without `asar` support: `original-fs` module which provides original `fs` APIs without `asar` support:
```javascript ```javascript
var originalFs = require('original-fs'); const originalFs = require('original-fs');
originalFs.readFileSync('/path/to/example.asar'); originalFs.readFileSync('/path/to/example.asar');
``` ```

View file

@ -18,7 +18,7 @@ the currently running operating system's native notification APIs to display it.
**Note:** Since this is an HTML5 API it is only available in the renderer process. **Note:** Since this is an HTML5 API it is only available in the renderer process.
```javascript ```javascript
var myNotification = new Notification('Title', { let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet' body: 'Lorem Ipsum Dolor Sit Amet'
}); });
@ -117,8 +117,8 @@ const electron = require('electron');
const app = electron.app; const app = electron.app;
const Menu = electron.Menu; const Menu = electron.Menu;
var dockMenu = Menu.buildFromTemplate([ const dockMenu = Menu.buildFromTemplate([
{ label: 'New Window', click: function() { console.log('New Window'); } }, { label: 'New Window', click: () => { console.log('New Window'); } },
{ label: 'New Window with Settings', submenu: [ { label: 'New Window with Settings', submenu: [
{ label: 'Basic' }, { label: 'Basic' },
{ label: 'Pro'} { label: 'Pro'}
@ -209,24 +209,25 @@ You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set
thumbnail toolbar in your application: thumbnail toolbar in your application:
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const { BrowserWindow } = require('electron');
const path = require('path'); const path = require('path');
var win = new BrowserWindow({ let win = new BrowserWindow({
width: 800, width: 800,
height: 600 height: 600
}); });
win.setThumbarButtons([ win.setThumbarButtons([
{ {
tooltip: "button1", tooltip: "button1",
icon: path.join(__dirname, 'button1.png'), icon: path.join(__dirname, 'button1.png'),
click: function() { console.log("button2 clicked"); } click: () => { console.log("button2 clicked"); }
}, },
{ {
tooltip: "button2", tooltip: "button2",
icon: path.join(__dirname, 'button2.png'), icon: path.join(__dirname, 'button2.png'),
flags:['enabled', 'dismissonclick'], flags:['enabled', 'dismissonclick'],
click: function() { console.log("button2 clicked."); } click: () => { console.log("button2 clicked."); }
} }
]); ]);
``` ```
@ -266,7 +267,7 @@ To set the progress bar for a Window, you can use the
[BrowserWindow.setProgressBar][setprogressbar] API: [BrowserWindow.setProgressBar][setprogressbar] API:
```javascript ```javascript
var window = new BrowserWindow({...}); let window = new BrowserWindow({...});
window.setProgressBar(0.5); window.setProgressBar(0.5);
``` ```
@ -293,7 +294,7 @@ To set the overlay icon for a window, you can use the
[BrowserWindow.setOverlayIcon][setoverlayicon] API: [BrowserWindow.setOverlayIcon][setoverlayicon] API:
```javascript ```javascript
var window = new BrowserWindow({...}); let window = new BrowserWindow({...});
window.setOverlayIcon('path/to/overlay.png', 'Description for overlay'); window.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
``` ```
@ -315,7 +316,7 @@ To set the represented file of window, you can use the
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs: [BrowserWindow.setDocumentEdited][setdocumentedited] APIs:
```javascript ```javascript
var window = new BrowserWindow({...}); let window = new BrowserWindow({...});
window.setRepresentedFilename('/etc/passwd'); window.setRepresentedFilename('/etc/passwd');
window.setDocumentEdited(true); window.setDocumentEdited(true);
``` ```

View file

@ -10,10 +10,11 @@ const electron = require('electron');
const app = electron.app; const app = electron.app;
const BrowserWindow = electron.BrowserWindow; const BrowserWindow = electron.BrowserWindow;
var onlineStatusWindow; let onlineStatusWindow;
app.on('ready', function() {
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html'); onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
}); });
``` ```
@ -24,7 +25,7 @@ _online-status.html_
<html> <html>
<body> <body>
<script> <script>
var alertOnlineStatus = function() { const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline'); window.alert(navigator.onLine ? 'online' : 'offline');
}; };
@ -51,13 +52,14 @@ const app = electron.app;
const ipcMain = electron.ipcMain; const ipcMain = electron.ipcMain;
const BrowserWindow = electron.BrowserWindow; const BrowserWindow = electron.BrowserWindow;
var onlineStatusWindow; let onlineStatusWindow;
app.on('ready', function() {
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html'); onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
}); });
ipcMain.on('online-status-changed', function(event, status) { ipcMain.on('online-status-changed', (event, status) => {
console.log(status); console.log(status);
}); });
``` ```
@ -69,8 +71,8 @@ _online-status.html_
<html> <html>
<body> <body>
<script> <script>
const ipcRenderer = require('electron').ipcRenderer; const { ipcRenderer } = require('electron');
var updateOnlineStatus = function() { const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline'); ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
}; };

View file

@ -82,54 +82,54 @@ example being:
```javascript ```javascript
const electron = require('electron') const electron = require('electron')
// Module to control application life. // Module to control application life.
const app = electron.app const app = electron.app;
// Module to create native browser window. // Module to create native browser window.
const BrowserWindow = electron.BrowserWindow const BrowserWindow = electron.BrowserWindow;
// Keep a global reference of the window object, if you don't, the window will // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected. // be closed automatically when the JavaScript object is garbage collected.
let mainWindow let mainWindow;
function createWindow () { function createWindow () {
// Create the browser window. // Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600}) mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html') mainWindow.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools. // Open the DevTools.
mainWindow.webContents.openDevTools() mainWindow.webContents.openDevTools();
// Emitted when the window is closed. // Emitted when the window is closed.
mainWindow.on('closed', function () { mainWindow.on('closed', () => {
// Dereference the window object, usually you would store windows // Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time // in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element. // when you should delete the corresponding element.
mainWindow = null mainWindow = null;
}) });
} }
// This method will be called when Electron has finished // This method will be called when Electron has finished
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.on('ready', createWindow) app.on('ready', createWindow);
// Quit when all windows are closed. // Quit when all windows are closed.
app.on('window-all-closed', function () { app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar // On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q // to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
app.quit() app.quit();
} }
}) });
app.on('activate', function () { app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the // On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open. // dock icon is clicked and there are no other windows open.
if (mainWindow === null) { if (mainWindow === null) {
createWindow() createWindow();
} }
}) });
// In this file you can include the rest of your app's specific main process // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here. // code. You can also put them in separate files and require them here.

View file

@ -28,7 +28,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so'
// Optional: Specify flash version, for example, v17.0.0.169 // Optional: Specify flash version, for example, v17.0.0.169
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169'); app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169');
app.on('ready', function() { app.on('ready', () => {
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
@ -36,7 +36,7 @@ app.on('ready', function() {
plugins: true plugins: true
} }
}); });
mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.loadURL(`file://${__dirname}/index.html`);
// Something else // Something else
}); });
``` ```

View file

@ -43,7 +43,7 @@ and where to find Electron's binary:
```javascript ```javascript
const webdriver = require('selenium-webdriver'); const webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder() const driver = new webdriver.Builder()
// The "9515" is the port opened by chrome driver. // The "9515" is the port opened by chrome driver.
.usingServer('http://localhost:9515') .usingServer('http://localhost:9515')
.withCapabilities({ .withCapabilities({
@ -58,7 +58,7 @@ var driver = new webdriver.Builder()
driver.get('http://www.google.com'); driver.get('http://www.google.com');
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver'); driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
driver.findElement(webdriver.By.name('btnG')).click(); driver.findElement(webdriver.By.name('btnG')).click();
driver.wait(function() { driver.wait(() => {
return driver.getTitle().then(function(title) { return driver.getTitle().then(function(title) {
return title === 'webdriver - Google Search'; return title === 'webdriver - Google Search';
}); });
@ -94,29 +94,29 @@ $ npm install webdriverio
```javascript ```javascript
const webdriverio = require('webdriverio'); const webdriverio = require('webdriverio');
var options = { const options = {
host: "localhost", // Use localhost as chrome driver server host: 'localhost', // Use localhost as chrome driver server
port: 9515, // "9515" is the port opened by chrome driver. port: 9515, // "9515" is the port opened by chrome driver.
desiredCapabilities: { desiredCapabilities: {
browserName: 'chrome', browserName: 'chrome',
chromeOptions: { chromeOptions: {
binary: '/Path-to-Your-App/electron', // Path to your Electron binary. binary: '/Path-to-Your-App/electron', // Path to your Electron binary.
args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/ args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/
}
} }
}
}; };
var client = webdriverio.remote(options); var client = webdriverio.remote(options);
client client
.init() .init()
.url('http://google.com') .url('http://google.com')
.setValue('#q', 'webdriverio') .setValue('#q', 'webdriverio')
.click('#btnG') .click('#btnG')
.getTitle().then(function(title) { .getTitle().then((title) => {
console.log('Title was: ' + title); console.log('Title was: ' + title);
}) })
.end(); .end();
``` ```
## Workflow ## Workflow

View file

@ -59,8 +59,8 @@ app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.p
// The version of plugin can be got from `chrome://plugins` page in Chrome. // The version of plugin can be got from `chrome://plugins` page in Chrome.
app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866'); app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866');
var mainWindow = null; let mainWindow = null;
app.on('ready', function() { app.on('ready', () => {
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
webPreferences: { webPreferences: {
// The `plugins` have to be enabled. // The `plugins` have to be enabled.