nw.js node-webkit系列（4）Native UI API 概述和应用规范

落日映苍穹つ 2021-09-10 19:54 241阅读 0赞

本节主要介绍Native UI API 概述和应用规范，在后续节中再详细介绍Native UI API的主要控件接口。Native UI API，是提供了在代码中访问、控制应用程序界面显示的接口。常见用途是用户通过操作应用显示界面的控件便捷地实现自己想要的服务。

# （一）规范 #

这里是我们在node-webkit下创建Native UI控件的APIs。实际上，去使用我们的Native UI库，你首先需要使用require函数去加载nw.gui模块（模块名称的命名并没有依照node的标准，所以不会遇到模块名称冲突）：

var gui = require('nw.gui');

然后你用创建GUI元素的方式创建一个js对象：

// Standard way of creating elements
    var element = new gui.ElementName(option);
    
    // Example of creating a menu
    var menu = new gui.Menu({ title: 'Menu Title' });

可以通过对象“.”的方式设置或获取其属性，属性包括标题、标签、图标和菜单，就像使用DOM做的一样，如：

menu.title = 'New Title';
    console.log('Menu title is', menu.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]);
    }

请千万不要通过重定义去替换一个元素，如

menu.items[2] = new gui.MenuItem(...);

这绝对是错误的，要更新一个元素，请直接更新就好了，如

menu.items[2].title = 'New Title'

要替换一个元素，请先移除原来的元素再重新插入。

另外，在使用Native UI API过程中，当开发者写了不恰当的代码时，我们并不做异常抛出，而是使应用程序直接崩掉。所以请小心地使用它，如使用已被删除的元素或根本没有该类型的元素，我们将会毫无征兆的将系统崩掉而不会先告诉你错误了。

还有一件事情是，当你移除一个元素后，请给该元素赋以null值，以防你不小心重新使用它，这一点很重要。

var tray = new gui.Tray(...);
    // blablabla...
    // We are done with it
    tray.remove();
    tray = null; // This line is very important

# （二）事件发射器 #

在node-webkit里，所有的UI元素都继承与Node.js的事件发射器，所以请你用以下方式监听元素事件：

menuitem.on('click', function() {
      console.log('Item is clicked');
    });

# （三）不要做的事情 #

总之，千万不要做以下几件事情：

（1）不要重复创建UI元素和重复使用它们。

（2）不要通过重定义去替换一个元素，如

menu.items[2] = new gui.MenuItem(...);

（3）请不要随便移除元素，如果要移除请在移除后设置带元素为null值。

（4）不要改变元素的类型属性

nw.js node-webkit系列（4）Native UI API 概述和应用规范

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Kendo UI开发教程(4): UI Widgets 概述

相关 TMX1.4b规范概述

相关 nw.js node-webkit系列（13）Native UI API 其它

相关 nw.js node-webkit系列（11）Native UI API Tray的使用

相关 nw.js node-webkit系列（10）Native UI API Clipboard的使用

相关 nw.js node-webkit系列（9）Native UI API App的使用

相关 nw.js node-webkit系列（8）Native UI API MenuItem的使用

相关 nw.js node-webkit系列（7）Native UI API Menu的使用

相关 nw.js node-webkit系列（5）Native UI API Window的使用

相关 nw.js node-webkit系列（4）Native UI API 概述和应用规范