Electron 桌面環(huán)境集成

不同的操作系統(tǒng)在各自的桌面應(yīng)用上提供了不同的特性。例如，在 windows 上應(yīng)用曾經(jīng)打開的文件會出現(xiàn)在任務(wù)欄的跳轉(zhuǎn)列表，在 Mac 上，應(yīng)用可以把自定義菜單放在魚眼菜單上。

本章將會說明怎樣使用 Electron APIs 把你的應(yīng)用和桌面環(huán)境集成到一塊。

最近文檔 (Windows & OS X)

Windows 和 OS X 提供獲取最近文檔列表的便捷方式，那就是打開跳轉(zhuǎn)列表或者魚眼菜單。

跳轉(zhuǎn)列表：

魚眼菜單：

為了增加一個文件到最近文件列表，你可以使用 app.addRecentDocument API:

var app = require('app');
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');

或者你也可以使用 app.clearRecentDocuments API 來清空最近文件列表。

app.clearRecentDocuments();

Windows 需注意

為了這個特性在 Windows 上表現(xiàn)正常，你的應(yīng)用需要被注冊成為一種文件類型的句柄，否則，在你注冊之前，文件不會出現(xiàn)在跳轉(zhuǎn)列表。你可以在 Application Registration 里找到任何關(guān)于注冊事宜的說明。

OS X 需注意

當(dāng)一個文件被最近文件列表請求時，app 模塊里的 open-file 事件將會被發(fā)出。

自定義的魚眼菜單(OS X)

OS X 可以讓開發(fā)者定制自己的菜單，通常會包含一些常用特性的快捷方式。

菜單中的終端

使用 app.dock.setMenu API 來設(shè)置你的菜單，這僅在 OS X 上可行：

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);

用戶任務(wù)(Windows)

在 Windows，你可以特別定義跳轉(zhuǎn)列表的 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 的任務(wù)

不同于 OS X 的魚眼菜單，Windows 上的用戶任務(wù)表現(xiàn)得更像一個快捷方式，比如當(dāng)用戶點擊一個任務(wù)，一個程序?qū)粋魅胩囟ǖ膮?shù)并且運(yùn)行。

你可以使用 app.setUserTasks API 來設(shè)置你的應(yīng)用中的用戶任務(wù)：

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'
  }
]);

調(diào)用 app.setUserTasks 并傳入空數(shù)組就可以清除你的任務(wù)列表：

app.setUserTasks([]);

當(dāng)你的應(yīng)用關(guān)閉時，用戶任務(wù)會仍然會出現(xiàn)，在你的應(yīng)用被卸載前，任務(wù)指定的圖標(biāo)和程序的路徑必須是存在的。

縮略圖工具欄

在 Windows，你可以在任務(wù)欄上添加一個按鈕來當(dāng)作應(yīng)用的縮略圖工具欄。它將提供用戶一種用戶訪問常用窗口的方式，并且不需要恢復(fù)或者激活窗口。

在 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 的縮略圖工具欄

你可以使用 BrowserWindow.setThumbarButtons 來設(shè)置你的應(yīng)用的縮略圖工具欄。

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."); }
  }
]);

調(diào)用 BrowserWindow.setThumbarButtons 并傳入空數(shù)組即可清空縮略圖工具欄：

win.setThumbarButtons([]);

Unity launcher 快捷方式(Linux)

在 Unity,你可以通過改變 .desktop 文件來增加自定義運(yùn)行器的快捷方式，詳情看 Adding shortcuts to a launcher。

Audacious 運(yùn)行器的快捷方式：

任務(wù)欄的進(jìn)度條(Windows & Unity)

在 Windows，進(jìn)度條可以出現(xiàn)在一個任務(wù)欄按鈕之上。這可以提供進(jìn)度信息給用戶而不需要用戶切換應(yīng)用窗口。

Unity DE 也具有同樣的特性，在運(yùn)行器上顯示進(jìn)度條。

在任務(wù)欄上的進(jìn)度條：

在 Unity 運(yùn)行器上的進(jìn)度條

給一個窗口設(shè)置進(jìn)度條，你可以調(diào)用 BrowserWindow.setProgressBar API：

var window = new BrowserWindow({...});
window.setProgressBar(0.5);

在 OS X，一個窗口可以設(shè)置它展示的文件，文件的圖標(biāo)可以出現(xiàn)在標(biāo)題欄，當(dāng)用戶 Command-Click 或者 Control-Click 標(biāo)題欄，文件路徑彈窗將會出現(xiàn)。

展示文件彈窗菜單：

你可以調(diào)用 BrowserWindow.setRepresentedFilename 和 BrowserWindow.setDocumentEdited APIs：

var window = new BrowserWindow({...});
window.setRepresentedFilename('/etc/passwd');
window.setDocumentEdited(true);