mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

standardize all javascript blocks in English docs

Browse source
This commit is contained in:
Zeke Sikelianos 2016-07-25 18:39:25 -07:00
parent dd9935a9d7
commit 06a354a2eb
37 changed files with 567 additions and 445 deletions
Download patch file Download diff file Expand all files Collapse all files

31
docs/tutorial/application-packaging.md
View file

@ -51,29 +51,29 @@ $ asar list /path/to/example.asar
Read a file in the `asar` archive:
```javascript
const fs = require('fs');
fs.readFileSync('/path/to/example.asar/file.txt');
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')
```
List all files under the root of the archive:
```javascript
const fs = require('fs');
fs.readdirSync('/path/to/example.asar');
const fs = require('fs')
fs.readdirSync('/path/to/example.asar')
```
Use a module from the archive:
```javascript
require('/path/to/example.asar/dir/module.js');
require('/path/to/example.asar/dir/module.js')
```
You can also display a web page in an `asar` archive with `BrowserWindow`:
```javascript
const {BrowserWindow} = require('electron');
let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file:///path/to/example.asar/static/index.html');
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('file:///path/to/example.asar/static/index.html')
```
### Web API
@ -85,10 +85,10 @@ For example, to get a file with `$.get`:
```html
<script>
let $ = require('./jquery.min.js');
let $ = require('./jquery.min.js')
$.get('file:///path/to/example.asar/file.txt', (data) => {
console.log(data);
});
console.log(data)
})
</script>
```
@ -99,16 +99,17 @@ content of an `asar` archive as a file. For this purpose you can use the built-i
`original-fs` module which provides original `fs` APIs without `asar` support:
```javascript
const originalFs = require('original-fs');
originalFs.readFileSync('/path/to/example.asar');
const originalFs = require('original-fs')
originalFs.readFileSync('/path/to/example.asar')
```
You can also set `process.noAsar` to `true` to disable the support for `asar` in
the `fs` module:
```javascript
process.noAsar = true;
fs.readFileSync('/path/to/example.asar');
const fs = require('fs')
process.noAsar = true
fs.readFileSync('/path/to/example.asar')
```
## Limitations of the Node API

70
docs/tutorial/desktop-environment-integration.md
View file

@ -20,11 +20,11 @@ the currently running operating system's native notification APIs to display it.
```javascript
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
});
})
myNotification.onclick = () => {
console.log('Notification clicked');
};
console.log('Notification clicked')
}
```
While code and user experience across operating systems are similar, there
@ -75,14 +75,16 @@ To add a file to recent documents, you can use the
[app.addRecentDocument][addrecentdocument] API:
```javascript
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');
const {app} = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
```
And you can use [app.clearRecentDocuments][clearrecentdocuments] API to empty
the recent documents list:
```javascript
app.clearRecentDocuments();
const {app} = require('electron')
app.clearRecentDocuments()
```
### Windows Notes
@ -113,19 +115,17 @@ To set your custom dock menu, you can use the `app.dock.setMenu` API, which is
only available on macOS:
```javascript
const electron = require('electron');
const app = electron.app;
const Menu = electron.Menu;
const {app, Menu} = require('electron')
const dockMenu = Menu.buildFromTemplate([
{ label: 'New Window', click() { console.log('New Window'); } },
{ label: 'New Window with Settings', submenu: [
{ label: 'Basic' },
{ label: 'Pro'}
{label: 'New Window', click () { console.log('New Window') }},
{label: 'New Window with Settings', submenu: [
{label: 'Basic'},
{label: 'Pro'}
]},
{ label: 'New Command...'}
]);
app.dock.setMenu(dockMenu);
{label: 'New Command...'}
])
app.dock.setMenu(dockMenu)
```
## User Tasks (Windows)
@ -162,6 +162,7 @@ To set user tasks for your application, you can use
[app.setUserTasks][setusertaskstasks] API:
```javascript
const {app} = require('electron')
app.setUserTasks([
{
program: process.execPath,
@ -171,13 +172,14 @@ app.setUserTasks([
title: 'New Window',
description: 'Create a new window'
}
]);
])
```
To clean your tasks list, just call `app.setUserTasks` with an empty array:
```javascript
app.setUserTasks([]);
const {app} = require('electron')
app.setUserTasks([])
```
The user tasks will still show even after your application closes, so the icon
@ -209,34 +211,36 @@ You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set
thumbnail toolbar in your application:
```javascript
const {BrowserWindow} = require('electron');
const path = require('path');
const {BrowserWindow} = require('electron')
const path = require('path')
let win = new BrowserWindow({
width: 800,
height: 600
});
})
win.setThumbarButtons([
{
tooltip: 'button1',
icon: path.join(__dirname, 'button1.png'),
click() { console.log('button1 clicked'); }
click () { console.log('button1 clicked') }
},
{
tooltip: 'button2',
icon: path.join(__dirname, 'button2.png'),
flags: ['enabled', 'dismissonclick'],
click() { console.log('button2 clicked.'); }
click () { console.log('button2 clicked.') }
}
]);
])
```
To clean thumbnail toolbar buttons, just call `BrowserWindow.setThumbarButtons`
with an empty array:
```javascript
win.setThumbarButtons([]);
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setThumbarButtons([])
```
## Unity Launcher Shortcuts (Linux)
@ -267,8 +271,9 @@ To set the progress bar for a Window, you can use the
[BrowserWindow.setProgressBar][setprogressbar] API:
```javascript
let win = new BrowserWindow({...});
win.setProgressBar(0.5);
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setProgressBar(0.5)
```
## Icon Overlays in Taskbar (Windows)
@ -294,8 +299,9 @@ To set the overlay icon for a window, you can use the
[BrowserWindow.setOverlayIcon][setoverlayicon] API:
```javascript
let win = new BrowserWindow({...});
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
```
## Represented File of Window (macOS)
@ -316,9 +322,10 @@ To set the represented file of window, you can use the
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs:
```javascript
let win = new BrowserWindow({...});
win.setRepresentedFilename('/etc/passwd');
win.setDocumentEdited(true);
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true)
```
## Dragging files out of the window
@ -342,6 +349,7 @@ In web page:
In the main process:
```javascript
const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,

52
docs/tutorial/online-offline-events.md
View file

@ -6,16 +6,14 @@ using standard HTML5 APIs, as shown in the following example.
_main.js_
```javascript
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const {app, BrowserWindow} = require('electron')
let onlineStatusWindow;
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
});
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
```
_online-status.html_
@ -26,13 +24,13 @@ _online-status.html_
<body>
<script>
const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline');
};
window.alert(navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', alertOnlineStatus);
window.addEventListener('offline', alertOnlineStatus);
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)
alertOnlineStatus();
alertOnlineStatus()
</script>
</body>
</html>
@ -47,21 +45,17 @@ to the main process and handled as needed, as shown in the following example.
_main.js_
```javascript
const electron = require('electron');
const app = electron.app;
const ipcMain = electron.ipcMain;
const BrowserWindow = electron.BrowserWindow;
let onlineStatusWindow;
const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow
app.on('ready', () => {
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
});
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})
ipcMain.on('online-status-changed', (event, status) => {
console.log(status);
});
console.log(status)
})
```
_online-status.html_
@ -71,15 +65,15 @@ _online-status.html_
<html>
<body>
<script>
const {ipcRenderer} = require('electron');
const {ipcRenderer} = require('electron')
const updateOnlineStatus = () => {
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
};
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
updateOnlineStatus();
updateOnlineStatus()
</script>
</body>
</html>

30
docs/tutorial/quick-start.md
View file

@ -80,56 +80,52 @@ The `main.js` should create windows and handle system events, a typical
example being:
```javascript
const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
const {app, BrowserWindow} = require('electron')
// 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.
let win;
let win
function createWindow() {
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600});
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
win.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
win.webContents.openDevTools();
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
app.quit()
}
});
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
createWindow()
}
});
})
// 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.

7
docs/tutorial/using-pepper-flash-plugin.md
View file

@ -20,6 +20,9 @@ before the app ready event. Also, turn on `plugins` option of `BrowserWindow`.
For example:
```javascript
const {app, BrowserWindow} = require('electron')
const path = require('path')
// Specify flash path, supposing it is placed in the same directory with main.js.
let pluginName
switch (process.platform) {
@ -39,7 +42,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')
app.on('ready', () => {
win = new BrowserWindow({
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
@ -48,7 +51,7 @@ app.on('ready', () => {
})
win.loadURL(`file://${__dirname}/index.html`)
// Something else
});
})
```
You can also try loading the system wide Pepper Flash plugin instead of shipping

32
docs/tutorial/using-selenium-and-webdriver.md
View file

@ -79,7 +79,7 @@ upstream, except that you have to manually specify how to connect chrome driver
and where to find Electron's binary:
```javascript
const webdriver = require('selenium-webdriver');
const webdriver = require('selenium-webdriver')
const driver = new webdriver.Builder()
// The "9515" is the port opened by chrome driver.
@ -87,22 +87,22 @@ const driver = new webdriver.Builder()
.withCapabilities({
chromeOptions: {
// Here is the path to your Electron binary.
binary: '/Path-to-Your-App.app/Contents/MacOS/Electron',
binary: '/Path-to-Your-App.app/Contents/MacOS/Electron'
}
})
.forBrowser('electron')
.build();
.build()
driver.get('http://www.google.com');
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
driver.findElement(webdriver.By.name('btnG')).click();
driver.get('http://www.google.com')
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
driver.findElement(webdriver.By.name('btnG')).click()
driver.wait(() => {
return driver.getTitle().then((title) => {
return title === 'webdriver - Google Search';
});
}, 1000);
return driver.getTitle().then((title) => {
return title === 'webdriver - Google Search'
})
}, 1000)
driver.quit();
driver.quit()
```
## Setting up with WebdriverIO
@ -132,7 +132,7 @@ $ npm install webdriverio
### 3. Connect to chrome driver
```javascript
const webdriverio = require('webdriverio');
const webdriverio = require('webdriverio')
const options = {
host: 'localhost', // Use localhost as chrome driver server
port: 9515, // "9515" is the port opened by chrome driver.
@ -143,9 +143,9 @@ const options = {
args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/
}
}
};
}
let client = webdriverio.remote(options);
let client = webdriverio.remote(options)
client
.init()
@ -153,9 +153,9 @@ client
.setValue('#q', 'webdriverio')
.click('#btnG')
.getTitle().then((title) => {
console.log('Title was: ' + title);
console.log('Title was: ' + title)
})
.end();
.end()
```
## Workflow

13
docs/tutorial/using-widevine-cdm-plugin.md
View file

@ -51,23 +51,26 @@ enabled.
Example code:
```javascript
const {app, BrowserWindow} = require('electron')
// You have to pass the filename of `widevinecdmadapter` here, it is
// * `widevinecdmadapter.plugin` on macOS,
// * `libwidevinecdmadapter.so` on Linux,
// * `widevinecdmadapter.dll` on Windows.
app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.plugin');
app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.plugin')
// 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')
let win = null;
let win = null
app.on('ready', () => {
win = new BrowserWindow({
webPreferences: {
// The `plugins` have to be enabled.
plugins: true
}
});
});
})
win.show()
})
```
## Verifying the plugin