Native UI API，是提供了在代碼中通路、控制應用程式界面顯示的接口。和使用node.js子產品類似，想要通路node-webkit的Native UI API，需要先加載“nw.gui”子產品。node-webkit的子產品命名遵循node.js規範，是以不必擔心産生沖突。
node-webkit學習(3)Native UI API概覽
文/玄魂
目錄
node-webkit學習(3)Native UI API概覽... 1
前言... 1
3.1 Native UI api概覽... 2
Extended Window APIs. 7
Menus. 7
Platform Services. 7
Tips. 7
3.2 注意事項... 8
3.3 EventEmitter. 8
3.4 小結... 9
前言
幾個月前，要開發一個簡易的展示應用，要求支援離線播放（桌面應用）和線上播放（web應用）。
當時第一想到的是flex，同一套代碼（或者隻需少量的更改）就可以同時運作在桌面和浏覽器上。由于很多展現效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。如果選擇impress.js，就意味着要将html5作為桌面應用，當時想到要封裝webkit，但是本人對這方面也不是很熟悉，時間也很有限，就又沿着這個方向搜尋，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我通過html和js來編寫桌面應用的難題。
至于node-webkit的定義，按照作者的說法：
“ 基于node.js和chromium的應用程式實時運作環境，可運作通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程式。node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且将二者的context完全整合，可在HTML代碼中直接使用node.js的API。”
3.1 Native UI api概覽
下面我們建立本文的示例程式。
先建立guidemo.html，内容如下：
<html>
<head>
</head>
<body>
<h1>Hello GUI</h1>
<script>
</script>
</body>
</html>
package.json内容如下：
{
"name": "gui-demo",
"main": "guidemo.html",
"nodejs":true,
"width":100,
"height":200,
"window": {
"title": "GUI DEMO",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false
},
"webkit":{
"plugin":true
}
}
若要通路native ui api，需要先加載“nw.gui”子產品，代碼如下：
var gui = require('nw.gui');
加載gui子產品之後，就可以像建立普通的javascript對象一樣，建立GUI元素了。例如，我們可以使用如下代碼建立一個菜單：
var menu = new gui.Menu({ title: '菜單' });
下面，我們按如下内容修改guidemo.html：
<html>
<title>gui</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body >
<h1>Hello GUI菜單</h1>
var gui = require('nw.gui');
var menubar = new gui.Menu({ type: 'menubar' });
var sub1 = new gui.Menu();
sub1.append(new gui.MenuItem({
label: '子菜單1',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));
menubar.append(new gui.MenuItem({ label: '菜單1', submenu: sub1 }));
var win = gui.Window.get();
win.menu = menubar;
</script>
首先，通過
加載nw.gui子產品。
随後通過
var menubar = new gui.Menu({ type: 'menubar' });
建立了一個menubar類型的Menu，即菜單欄。有了菜單欄之後就可以向其中添加菜單了。我們建立了一個菜單“sub1”，通過添加MenuItem對象，添加該菜單的下拉選項，并定義了click事件。
menubar.append(new gui.MenuItem({ label: '菜單1', submenu: sub1 }));
将sub1添加為菜單1的子菜單。
目前為止，菜單項建立完畢，需要将其添加到目前視窗上。通過
var win = gui.Window.get();
擷取視窗對象，然後通過
win.menu = menubar;
設定視窗的菜單。
運作效果如下：
對于每個gui對象的屬性，比如title、label、 icon 和menu，可以直接通過對象去通路和修改。比如下面的代碼：
menu.title = 'New Title';
remove、append 和 insert方法，在每個GUI對象上都可以使用，例如：
menu.append(new gui.MenuItem({ label: 'Im an item' }));
menu.removeAt(0);
子元素通常被存儲在items字段中，可以通過索引進行通路:
for (var i = 0; i < menu.items.length; ++i) {
console.log('MenuItem', i, menu.items[i]);
在上面的示例代碼中，我們主要以menue為例進行介紹，native ui api大緻可劃分為如下的類别：
Extended Window APIs
· Window
· Frameless Window
Menus
· Menu
· MenuItem
· Window menu
Platform Services
· App – 每一個應用都可以通路的全局函數
· Clipboard – 剪貼闆
· Tray – 狀态顯示與通知
· File dialogs-檔案對話框
· Shell
· Handling files and arguments
Tips
· Show window after page is ready
· Minimize to tray
· Preserve window state between sessions
3.2 注意事項
鄙視不标明出處的轉載，更多相關内容，歡迎通路玄魂的部落格www.xuanhun521.com(node webkit學習(2)基本結構和配置)
不要通過指派的方式直接修改一個GUI對象，比如：
menu.items[0] = item
或者
item = new gui.MenuItem({})
想要替換一個元素，需要先remove再insert。
在調用gui api過程中出現的異常，目前node-webkit并沒有做處理，程式會直接崩潰。要小心重複删除元素之類的操作。
删除一個對象之後，要将其設定為null值，如：
var tray = new gui.Tray(...);
// blablabla...
// We are done with it
tray.remove();
tray = null; // This line is very important
Do not change UI types' prototype（沒明白具體指什麼，望讀者告知）
3.3 EventEmitter
在node-webkit中，每一個ui元素都從node.js的EventEmitter繼承而來，是以你可以用如下的方式監聽元素的實踐：
menuitem.on('click', function() {
console.log('Item is clicked');
});
3.4 小結
本文内容主要來自node-webkit的官方英文文檔（https://github.com/rogerwang/node-webkit/wiki/API-Overview-and-Notices），做了适當的改編和調整。主要目的是從整體上認識Native UI API，同時了解基本用法。之後的文章，會對每一個類别的api做詳細的介紹。
更多相關内容，歡迎通路玄魂的部落格 www.xuanhun521.com
ps：nw.js，electron交流群 313717550
作者：玄魂
出處：http://www.cnblogs.com/xuanhun/
原文連結：http://www.cnblogs.com/xuanhun/
更多内容，請通路我的個人站點 對程式設計，安全感興趣的，加qq群：hacking-1群：303242737，hacking-2群：147098303，nw.js，electron交流群 313717550。
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。
關注我：