# 桌面環境集成
不同的操作系統在各自的桌面應用上提供了不同的特性。例如，在 windows 上應用曾經打開的文件會出現在任務欄的跳轉列表，在 Mac 上，應用可以把自定義菜單放在魚眼菜單上。
本章將會說明怎樣使用 Electron APIs 把你的應用和桌面環境集成到一塊。
## 最近文檔 (Windows & OS X)
Windows 和 OS X 提供獲取最近文檔列表的便捷方式，那就是打開跳轉列表或者魚眼菜單。
跳轉列表：
![JumpList][1]
魚眼菜單：
![Dock Menu][2]
為了增加一個文件到最近文件列表，你可以使用 [app.addRecentDocument][3] API:
```javascript
var app = require('app');
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');
```
或者你也可以使用 [app.clearRecentDocuments][4] API 來清空最近文件列表。
```javascript
app.clearRecentDocuments();
```
## Windows 需注意
為了這個特性在 Windows 上表現正常，你的應用需要被注冊成為一種文件類型的句柄，否則，在你注冊之前，文件不會出現在跳轉列表。你可以在 [Application Registration][5] 里找到任何關于注冊事宜的說明。
## OS X 需注意
當一個文件被最近文件列表請求時，`app` 模塊里的 `open-file` 事件將會被發出。
## 自定義的魚眼菜單(OS X)
OS X 可以讓開發者定制自己的菜單，通常會包含一些常用特性的快捷方式。
### 菜單中的終端
![Dock menu of Terminal.app][6]
使用 `app.dock.setMenu` API 來設置你的菜單，這僅在 OS X 上可行：
```javascript
var app = require('app');
var Menu = require('menu');
var dockMenu = Menu.buildFromTemplate([
{ label: 'New Window', click: function() { console.log('New Window'); } },
{ label: 'New Window with Settings', submenu: [
{ label: 'Basic' },
{ label: 'Pro'}
]},
{ label: 'New Command...'}
]);
app.dock.setMenu(dockMenu);
```
## 用戶任務(Windows)
在 Windows，你可以特別定義跳轉列表的 `Tasks` 目錄的行為，引用 MSDN 的文檔：
> Applications define tasks based on both the program's features and the key things a user is expected to do with them. Tasks should be context-free, in that the application does not need to be running for them to work. They should also be the statistically most common actions that a normal user would perform in an application, such as compose an email message or open the calendar in a mail program, create a new document in a word processor, launch an application in a certain mode, or launch one of its subcommands. An application should not clutter the menu with advanced features that standard users won't need or one-time actions such as registration. Do not use tasks for promotional items such as upgrades or special offers.
> It is strongly recommended that the task list be static. It should remain the same regardless of the state or status of the application. While it is possible to vary the list dynamically, you should consider that this could confuse the user who does not expect that portion of the destination list to change.
### IE 的任務
![IE][7]
不同于 OS X 的魚眼菜單，Windows 上的用戶任務表現得更像一個快捷方式，比如當用戶點擊一個任務，一個程序將會被傳入特定的參數并且運行。
你可以使用 [app.setUserTasks][8] API 來設置你的應用中的用戶任務：
```javascript
var app = require('app');
app.setUserTasks([
{
program: process.execPath,
arguments: '--new-window',
iconPath: process.execPath,
iconIndex: 0,
title: 'New Window',
description: 'Create a new window'
}
]);
```
調用 `app.setUserTasks` 并傳入空數組就可以清除你的任務列表：
```javascript
app.setUserTasks([]);
```
當你的應用關閉時，用戶任務會仍然會出現，在你的應用被卸載前，任務指定的圖標和程序的路徑必須是存在的。
### 縮略圖工具欄
在 Windows，你可以在任務欄上添加一個按鈕來當作應用的縮略圖工具欄。它將提供用戶一種用戶訪問常用窗口的方式，并且不需要恢復或者激活窗口。
在 MSDN，它被如是說：
> This toolbar is simply the familiar standard toolbar common control. It has a maximum of seven buttons. Each button's ID, image, tooltip, and state are defined in a structure, which is then passed to the taskbar. The application can show, enable, disable, or hide buttons from the thumbnail toolbar as required by its current state.
> For example, Windows Media Player might offer standard media transport controls such as play, pause, mute, and stop.
### Windows Media Player 的縮略圖工具欄
![Thumbnail toolbar of Windows Media Player][9]
你可以使用 [BrowserWindow.setThumbarButtons][10] 來設置你的應用的縮略圖工具欄。
```javascript
var BrowserWindow = require('browser-window');
var path = require('path');
var win = new BrowserWindow({
width: 800,
height: 600
});
win.setThumbarButtons([
{
tooltip: "button1",
icon: path.join(__dirname, 'button1.png'),
click: function() { console.log("button2 clicked"); }
},
{
tooltip: "button2",
icon: path.join(__dirname, 'button2.png'),
flags:['enabled', 'dismissonclick'],
click: function() { console.log("button2 clicked."); }
}
]);
```
調用 `BrowserWindow.setThumbarButtons` 并傳入空數組即可清空縮略圖工具欄：
```javascript
win.setThumbarButtons([]);
```
## Unity launcher 快捷方式(Linux)
在 Unity,你可以通過改變 `.desktop` 文件來增加自定義運行器的快捷方式，詳情看 [Adding shortcuts to a launcher][11]。
### Audacious 運行器的快捷方式：
![Launcher shortcuts of Audacious][12]
## 任務欄的進度條(Windows & Unity)
在 Windows，進度條可以出現在一個任務欄按鈕之上。這可以提供進度信息給用戶而不需要用戶切換應用窗口。
Unity DE 也具有同樣的特性，在運行器上顯示進度條。
### 在任務欄上的進度條：
![Progress bar in taskbar button][13]
### 在 Unity 運行器上的進度條
![Progress bar in Unity launcher][14]
給一個窗口設置進度條，你可以調用 [BrowserWindow.setProgressBar][15] API：
```javascript
var window = new BrowserWindow({...});
window.setProgressBar(0.5);
```
在 OS X，一個窗口可以設置它展示的文件，文件的圖標可以出現在標題欄，當用戶 Command-Click 或者 Control-Click 標題欄，文件路徑彈窗將會出現。
### 展示文件彈窗菜單：
![Represented file popup menu][16]
你可以調用 [BrowserWindow.setRepresentedFilename][17] 和 [BrowserWindow.setDocumentEdited][18] APIs：
```javascript
var window = new BrowserWindow({...});
window.setRepresentedFilename('/etc/passwd');
window.setDocumentEdited(true);
```
[1]:https://camo.githubusercontent.com/3310597e01f138b1d687e07aa618c50908a88dec/687474703a2f2f692e6d73646e2e6d6963726f736f66742e636f6d2f64796e696d672f49433432303533382e706e67
[2]: https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png
[3]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/app.md
[4]: https://github.com/electron/electron/blob/master/docs/tutorial/clearrecentdocuments
[5]: https://msdn.microsoft.com/en-us/library/windows/desktop/ee872121%28v=vs.85%29.aspx
[6]: https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png
[7]: https://camo.githubusercontent.com/30154e0cc36acfc968ac9ae076a8f0d6600dd736/687474703a2f2f692e6d73646e2e6d6963726f736f66742e636f6d2f64796e696d672f49433432303533392e706e67
[8]: https://github.com/electron/electron/blob/master/docs/api/app.md#appsetusertaskstasks
[9]: https://camo.githubusercontent.com/098cb0f52f27084a80ec6429e51a195df3d8c333/68747470733a2f2f692d6d73646e2e7365632e732d6d7366742e636f6d2f64796e696d672f49433432303534302e706e67
[10]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
[11]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
[12]: https://camo.githubusercontent.com/b6f54e2bc3206ebf8e08dd029529af9ec84d58ae/68747470733a2f2f68656c702e7562756e74752e636f6d2f636f6d6d756e6974792f556e6974794c61756e6368657273416e644465736b746f7046696c65733f616374696f6e3d41747461636846696c6526646f3d676574267461726765743d73686f7274637574732e706e67
[13]: https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png
[14]: https://cloud.githubusercontent.com/assets/639601/5081747/4a0a589e-6f0f-11e4-803f-91594716a546.png
[15]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
[16]: https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png
[17]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
[18]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
- 介紹
- 常見問題
- Electron 常見問題
- 向導
- 支持平臺
- 分發應用
- 提交應用到 Mac App Store
- 打包應用
- 使用 Node 原生模塊
- 主進程調試
- 使用 Selenium 和 WebDriver
- 使用開發人員工具擴展
- 使用 Pepper Flash 插件
- 使用 Widevine CDM 插件
- 教程
- 快速入門
- 桌面環境集成
- 在線/離線事件探測
- API文檔
- 簡介
- 進程對象
- 支持的 Chrome 命令行開關
- 環境變量
- 自定義的 DOM 元素
- File 對象
- <webview> 標簽
- window.open 函數
- 在主進程內可用的模塊
- app
- autoUpdater
- BrowserWindow
- contentTracing
- dialog
- globalShortcut
- ipcMain
- Menu
- MenuItem
- powerMonitor
- powerSaveBlocker
- protocol
- session
- webContents
- Tray
- 在渲染進程（網頁）內可用的模塊
- desktopCapturer
- ipcRenderer
- remote
- webFrame
- 在兩種進程中都可用的模塊
- clipboard
- crashReporter
- nativeImage
- screen
- shell
- 開發
- 代碼規范
- 源碼目錄結構
- 與 NW.js（原 node-webkit）在技術上的差異
- 構建系統概覽
- 構建步驟（OS X）
- 構建步驟（Windows）
- 構建步驟（Linux）
- 在調試中使用 Symbol Server