node-webkit學習(3)Native UI API概覽

時間 2019-11-13

標籤 node webkit 學習 native api 概覽简体版

原文原文鏈接

node-webkit學習(3)Native UI API概覽

文/玄魂javascript

目錄html

node-webkit學習(3)Native UI API概覽... 1html5

前言... 1java

3.1 Native UI api概覽... 2node

Extended Window APIs. 7ios

Menus. 7git

Platform Services. 7github

Tips. 7web

3.2 注意事項... 8json

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概覽

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>

</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>

</head>

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

</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 注意事項

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客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作詳細的介紹。

node-webkit學習(3)Native UI API概覽

node-webkit學習(3)Native UI API概覽

前言

3.1 Native UI api概覽

Extended Window APIs

Menus

Platform Services

Tips

3.2 注意事項

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客www.xuanhun521.com(node webkit學習(2)基本結構和配置)

3.3 EventEmitter

3.4 小結

更多相關內容，歡迎訪問玄魂的博客 www.xuanhun521.com