NW.js之Native UI API概覽(3)
目錄
node-webkit學習(3)Native UI API概覽
- 3.1 Native UI api概覽
- Extended Window APIs.
- Menus.
- Platform Services.
- Tips.
- 3.2 注意事項
- 3.3 EventEmitter
- 3.4 小結
3.1 Native UI api概覽
Native UI API，是提供了在程式碼中訪問、控制應用程式介面顯示的介面。和使用node.js模組類似，想要訪問node-webkit的Native UI API，需要先載入“nw.gui”模組。node-webkit的模組命名遵循node.js規範，所以不必擔心產生衝突。
下面我們建立本文的示例程式。
先建立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> <head> <title>gui</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body > <h1>Hello GUI選單</h1> <script> 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> </body> </html>
首先，通過
var gui = require('nw.gui');
載入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 注意事項
不要通過賦值的方式直接修改一個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');
});