您的位置:68399皇家赌场 > 服务器租用 > www.68399.com:NODE-WEBKIT教程(陆)NATIVE UI API 之MENU(菜

www.68399.com:NODE-WEBKIT教程(陆)NATIVE UI API 之MENU(菜

发布时间:2019-05-07 21:55编辑:服务器租用浏览(131)

    前言

    本文首要内容为nw.js官方文书档案中尚无关联,而在实际动手开垦过程中才遇见的难题以及经验的聚集。
    实际情况请查看官方文书档案:

    node-webkit教程(6)Native UI API 之Menu(菜单)

    文/玄魂

    目录

    node-webkit教程(6)Native UI API 之Menu(菜单)1

    前言... 2

    6.1  Menu 概述... 3

    6.2  menu api6

    6.2.1  new Menu([option])6

    6.2.2  Menu.items. 6

    6.2.3 Menu.items.length. 7

    6.2.4 Menu.items[i]7

    6.2.5  Menu.append(MenuItem item)7

    6.2.6 Menu.insert(MenuItem item, int i)7

    6.2.7 Menu.remove(MenuItem item)7

    6.2.8  Menu.removeAt(int i)7

    6.2.9  Menu.item[x].click. 7

    6.2.10  Menu.popup(int x, int y)8

    陆.叁 成立右键菜单... 八

    6.4  MenuItem.. 9

    www.68399.com,6.4.1 new MenuItem(option)9

    6.4.2 MenuItem.type. 9

    6.4.3  MenuItem.label10

    6.4.4  MenuItem.icon. 10

    6.4.5 MenuItem.tooltip. 11

    6.4.6  MenuItem.checked. 12

    6.4.7  MenuItem.enabled. 12

    6.4.8  MenuItem.submenu. 12

    6.4.9  MenuItem.click. 12

    6.6 小结... 12

     

    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.二  注意事项... 8

    3.3 EventEmitter. 8

    3.4 小结... 9

     

    1. MenuStrip与ContextMenu

    在聊nwjs中的Menu以前先说下在思想window桌面端应用开辟中的三种常见的美食做法。

    前言

    多少个月前,要付出3个差不离的显得应用,须求帮助离线播放(桌面应用)和在线播放(web应用)。

    旋即第壹想开的是flex,同一套代码(或然只需一丢丢的变动)就足以而且运营在桌面和浏览器上。由于多数表现效果要全新开采,笔者想到了impress.js()。若是选拔impress.js,就代表要将html伍当作桌面应用,当时想到要封装webkit,然则小编对那方面也不是很通晓,时间也很有限,就又沿着这些主旋律找寻,找到了node-webkit()。

    node-webkit解决了自家经过html和js来编排桌面应用的难点

    有关node-webkit的定义,依据作者的传道:

    “ 基于node.js和chromium的应用程序实时运维情形,可运行通过HTML(五)、CSS(3)、Javascript来编排的地头应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将两边的context完全结合,可在HTML代码中央直机关接接纳node.js的API。”

    www.68399.com 1

    前言

    多少个月前,要开支多少个简便的显示应用,供给援助离线播放(桌面应用)和在线播放(web应用)。

    当时首先想开的是flex,同1套代码(或然只需一点点的改动)就足以而且运转在桌面和浏览器上。由于众多呈现效果要全新开垦,小编想到了impress.js()。若是选取impress.js,就表示要将html5看成桌面应用,当时想到要封装webkit,不过本身对那上头也不是很熟习,时间也很简单,就又沿着这么些势头搜索,找到了node-webkit()。

    node-webkit消除了自己通过html和js来编排桌面应用的难题

    关于node-webkit的定义,依据作者的说法:

    “ 基于node.js和chromium的应用程序实时运转境况,可运转通过HTML(5)、CSS(叁)、Javascript来编排的本地应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将两者的context完全结合,可在HTML代码中央直机关接行使node.js的API。”

    www.68399.com 2

    windows中的MenuStrip

    首先种:MenuStrip,菜单栏,平时在主窗体中的顶部,横向显示。如图:

    www.68399.com 3

    6.1  Menu 概述

    Menu API 提供的是本地化的窗口菜单,即windows下常说的菜单栏,定义的菜单显示在本地化(native)window上,而不是属于DOM文书档案。参谋:node-webkit学习(4)Native UI API 之window()

    Menu分为二种,window菜单和上下文(右键)菜单(context menu)。

    创制menu对象使用构造函数Menu([option]),如:

    // Load native UI library

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

    // Create an empty menu

    var menu = new gui.Menu();

    不带参数构造的menu属于context menu,假若想创建window menu,使用如下情势:

    var your_menu = new gui.Menu({ type: 'menubar' });

    将window menu直接赋值给window 对象的menu属性就能够知效。

    gui.Window.get().menu = your_menu;

    创建menu德姆o.html和package.json。menuDemo.html代码如下:

    <html>

    <head>

        <title>menuDemo</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body >

        <h1>menu api 测试</h1>

        <script>

            // Load native UI library

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

            var win = gui.Window.get();

    //创建window menu

            var windowMenu = new gui.Menu({ type: 'menubar' });

            var windowSubmenu = new gui.Menu();

            var subMenuItem = new gui.MenuItem({ label: '子菜单项' });

            windowSubmenu.append(subMenuItem);

            windowMenu.append(

                new gui.MenuItem({ label: '子菜单', submenu: windowSubmenu })

                );

            win.menu = windowMenu;

            // Create an empty menu

            var menu = new gui.Menu();

            // Add some items

            menu.append(new gui.MenuItem({ label: 'Item A' }));

            menu.append(new gui.MenuItem({ label: 'Item B' }));

            menu.append(new gui.MenuItem({ type: 'separator' }));

            menu.append(new gui.MenuItem({ label: 'Item C' }));

            // Remove one item

            menu.removeAt(1);

            // Popup as context menu

            menu.popup(10, 10);

            // Iterate menu's items

            for (var i = 0; i < menu.items.length; i) {

                var element = document.createElement('div');

                element.appendChild(document.createTextNode(menu.items[i].label));

                document.body.appendChild(element);

            }

        </script> 

    </body>

    </html>

    package.json文件内容如下:

    {

      "name": "menu-demo",

      "main": "menuDemo.html",

      "nodejs":true,

      "width":100,

      "height":200,

       "window": {

        "title": "MenuDemo",

        "toolbar": true, 

        "width": 800, 

        "height": 600,

       "resizable":true,

       "show_in_taskbar":true,

       "frame":true,

       "kiosk":false

      },

      "webkit":{

      "plugin":true

      }

    }

    运营结果如下:

    www.68399.com 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

      }

    }

    www.68399.com 5

    www.68399.com 6

    若要访问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,即菜单栏。有了菜单栏之后就足以向里面增添菜单了。大家创立了三个美食指南“sub一”,通过加多MenuItem对象,增多该菜单的下拉选用,并定义了click事件。

    随即通过

    menubar.append(new gui.MenuItem({ label: '菜单1', submenu: sub1 }));

    将sub一增多为菜单1的子菜单。

    如今截至,菜单项成立完结,要求将其增多到当前窗口上。通过

    var win = gui.Window.get();

    获得窗口对象,然后通过

    win.menu = menubar;

    安装窗口的菜单。

    运维作效果果如下:

    www.68399.com 7

    对此每一种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大约可划分为如下的品类:

    windows中的ContextMenu

    第二种:ContextMenu,上下文菜单,也便是右键菜单,关联有些成分,再某些成分上点击右键呈现的美食做法
    www.68399.com 8

    6.2  menu api

    Extended Window APIs

    ·      Window

    ·      Frameless Window

    nw.js中的nw.Menu

    而在nw.js中,将windows系统的那三种菜单结合成二个对象:nw.Menu
    而区分的艺术在于构造的配备对象的 type属性。

    1. type属性设定为"menubar"则显现为MenuStrip行为,即窗体顶部菜单栏。
    2. type属性设定为"contextmenu"则显现为右键菜单行为。默感到右键菜单

    法定表达:

    /**
    * Object that contains options to use while creation of nw.Menu. example: new nw.Menu(MenuOption)
    */
    interface MenuOption {
       /**
        * {string} (Optional) two types are accepted by this method: "menubar" or "contextmenu". The value is set to "contextmenu" by default.
        */
       type: string;
    }
    

    轻蔑不申明出处的转发,越多相关内容,应接访问玄魂的博客(www.xuanhun521.com)

    Menus

    ·      Menu

    ·      MenuItem

    ·      Window menu 

    2. nwjs中的多级菜单结构重组

    在nwjs中,有关菜单的唯有三个指标,nw.Menunw.MenuItem。在那之中nw.Menu越来越多的效率与作为应该称之为 菜单会集。而 nw.MenuItem才是真的的 菜单项

    用一张图来描述Menu和MenuItem对应的实际上协会如图:
    www.68399.com 9
    如上图,红框为Menu,白灰为MenuItem,全数MenuItem的联谊均为Menu,而MenuItem的子集的系列为Menu。

    接下去创设三个上海教室中的顶部菜单栏的代码示例:

    //创建一个顶部菜单栏,类型为:menubar
    var menuBar = new nw.Menu({
      type: 'menubar'
    });
    
    //创建一个一级菜单项-文件
    var fileMenu = new nw.MenuItem({
      label: "文件",
    });
    
    //文件菜单的子菜单集合,类型为:contextmenu
    var fileMenuColl = new nw.Menu({ type: "contextmenu" });
    //设定一级菜单文件的子菜单
    fileMenu.submenu = fileMenuColl;
    
    
    // 创建一级菜单文件的子菜单:打开
    var openMenu = new nw.MenuItem({
      label: "打开",
      click: function () {
          console.log("打开");
      },
    });
    //将打开菜单项 添加入文件子菜单集合中
    fileMenuColl.append(openMenu);
    
    
    //创建一级菜单文件的子菜单:资源管理器
    var explorerMenu = new nw.MenuItem({
      label: "资源管理器",
      click: function () {
          console.log("资源管理器");
      },
    });
    fileMenuColl.append(explorerMenu);
    
    //最后将一级菜单项文件 添加入菜单栏
    menuBar.append(fileMenu);
    
    //设定窗体菜单栏
    nw.Window.get().menu = menuBar;
    

    成效如下:
    www.68399.com 10

    6.2.1  new Menu([option])

    构造函数,见上文。

    Platform Services

    ·      App – 每贰个利用都足以访问的大局函数

    ·      Clipboard – 剪贴板

    ·      Tray – 状态展现与通告

    ·      File dialogs-文件对话框

    ·      Shell 

    ·      Handling files and arguments

    叁. MenItem必须最后再被Menu.append增添

    标题见代码示例。
    如将上述代码化简后:

    var menuBar = new nw.Menu({ type: 'menubar' });
    var fileMenu = new nw.MenuItem({ label: "一级菜单" });
    
    var fileMenuColl = new nw.Menu();
    fileMenu.submenu = fileMenuColl;
    var openMenu = new nw.MenuItem({ label: "二级菜单" });
    fileMenuColl.append(openMenu);
    
    menuBar.append(fileMenu);//关键,放在最后没问题,正常!
    
    win.menu = menuBar;
    

    功效如下:
    www.68399.com 11

    可是一旦将menuBar.append(fileMenu)位居刚刚制造完fileMenu从此未来的话:

    var menuBar = new nw.Menu({ type: 'menubar' });
    var fileMenu = new nw.MenuItem({ label: "一级菜单" });
    //关键,创建fileMenu后立刻添加入菜单栏,会发生无法显示二级菜单的问题!!!
    menuBar.append(fileMenu);
    
    var fileMenuColl = new nw.Menu();
    fileMenu.submenu = fileMenuColl;
    var openMenu = new nw.MenuItem({ label: "二级菜单" });
    fileMenuColl.append(openMenu);
    
    win.menu = menuBar;
    

    问题:会现出二级菜单不能够开垦,只雅观到一流菜单的标题。
    此外,如若再次创下制fileMenu时直接在构造函数的安插对象中制定了submenu的话,也能够避规此主题材料。

    私感到这么些理应属于nwjs的1个bug或是多少个败笔。理论上来说都属性引用类型,先append再新添,或先新扩充再append应该都以足以的。至少在C#的WinForm开拓菜单时是那样的。

    由来不明。
    缓慢解决方案:只万幸付出进程中严刻遵从: 全体级其余菜单项,必须全体创建完结后最后再被父级append。

    6.2.2  Menu.items

    赢得该Menu下有所的MenuItem对象,重返结果为数组。上文中的例子,有诸如此类的代码:

           for (var i = 0; i < menu.items.length; i) {

                var element = document.createElement('div');

                element.appendChild(document.createTextNode(menu.items[i].label));

                document.body.appendChild(element);

            }

    上边的代码通过menu.items获取具备menuitem对象,遍历输出label。这里须求小心的是,并不是颇具的menuitem都有label属性。

    Tips

    ·      Show window after page is ready

    ·      Minimize to tray

    ·      Preserve window state between sessions

     

    4. nwjs顶部菜单栏不援救纯一流菜单

    在windows应用程序中:
    顶部菜单栏能够唯有一级菜单,而从未其属下二级菜单。未有二级菜单也可达成相应种种点击事件等等,不强制须要必须有二级菜单。

    而在nwjs中:
    顶部菜单栏的纯一流菜单,即未有二级菜单项的一流菜单不恐怕响应点击事件,其设定的click事件也是无用的,必须在二级菜单及越来越高端其他美食做法中才足以响应点击事件。

    那就推动1个难点:
    在把纯windows应用程序使用nwjs重写时,那么些纯一流菜单就亟须折叠到二级菜单中,技巧选拔。

    另外:
    nwjs中唯有顶部菜单受此影响,右键菜单不受此影响。

    那一点官方也有表达:

    To create a menubar, usually you have to create a 2-level menu and assign it to win.menu
    要开创三个窗体顶部菜单栏,必须选择二级菜单,并赋值给win.menu

    村办估量:
    nwjs只所以那样做是因为在mac OS系统中,似乎不扶助纯顶级菜单项。所以nwjs为了要同盟三方平台,统1作为,所以屏蔽了菜单栏的纯顶尖菜单项的点击成效,让其不持有实际职能,只好伸开二级菜单栏。

    6.2.3 Menu.items.length

    menuitem的个数。加入上文demo。

    三.2  注意事项

     

    5. 关于MenuItem

    6.2.4 Menu.items[i]

    通过索引再次回到1个menuitem对象。

    轻视不证明出处的转发,越来越多相关内容,应接访问玄魂的博客**www.xuanhun521.com**(node webkit学习(二)基本结构和安插)

     

    并非通过赋值的点子一向改换1个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(没领悟具体指什么,望读者告诉)

    关于type属性

    MenuItem菜单项有二种档案的次序normalcheckboxseparator
    normal:标准方式,也是默许形式,纯文本菜单项。
    checkbox:可选中的菜单项,后面会有一个对勾,重复点击状态来回切换。
    separator:分割菜单项,呈现为一条直线分隔符。

    身体力行代码:

    var reloadMenu = new nw.MenuItem({
        label: "刷新",
        type: "normal",
    });
    
    var separatorMenu = new nw.MenuItem({
        type: "separator"
    });
    
    var checkMenu = new nw.MenuItem({
        type: "checkbox",
        label: "是否展现缩略图"
    });
    
    var exitMenu = new nw.MenuItem({
        label: "退出",
    });
    

    职能如下:
    www.68399.com 12

    除此以外:MenuItem的type属性只可以在开创时设定,不可能在运行时动态改动。

    6.2.5  Menu.append(MenuItem item)

    向当前美食做法中增加3个menuitem对象,该对象在整个menuitem群集的尾巴部分。

    3.3 EventEmitter

    在node-webkit中,每2个ui元素都从node.js的EventEmitter承接而来,所以您能够用如下的办法监听成分的实施:

    menuitem.on('click', function() {

      console.log('Item is clicked');

    });

     

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:www.68399.com:NODE-WEBKIT教程(陆)NATIVE UI API 之MENU(菜

    关键词: 68399皇家赌场 Node.js nw.js node-webkit webkit

上一篇:JS特出标题解析

下一篇:没有了