• 面板定义参考
    • 选项
      • 属性
        • style
        • template
        • listeners
        • messages
        • behaviors
        • dependencies
        • $
      • 函数
        • ready ()
        • run ( argv )
        • close ()
      • DOM 事件
        • panel-show
        • panel-hide
        • panel-resize
        • panel-cut
        • panel-copy
        • panel-paste

    面板定义参考

    一份简单的面板定义
    1. Editor.Panel.extend({
    2. style: `
    3. :host { margin: 5px; }
    4. h2 { color: #f90; }
    5. `,
    6. template: `
    7. <h2>Hello World!</h2>
    8. `,
    9. ready () {
    10. Editor.log('Hello World!');
    11. },
    12. });

    选项

    属性

    style

    使用 CSS 定义你的样式。在 Panel 定义中,CSS 样式被定义在 Shadow DOM 中,所以他遵循 Shadow DOM 的样式定义规范。

    使用 :host 来表示 Panel 本身的样式。而在 Panel 中的其他样式则遵循 CSS 选择器的书写规则。由于采用 Shadow DOM,我们定义在面板内的样式和其他面板样式以及全局样式是隔离开的,所以不必担心 CSS命名污染的问题。

    更多的 Shadow DOM 的介绍可以参考:

    • http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom/
    • http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom-201/
    • http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom-301/

    template

    使用 HTML 标记语言定义你的面板的 UI 元素。

    listeners

    通过定义一个 Object 将 DOM 事件绑定到自定义函数上。这个 Object 的 Key 就是 DOM 事件名,Value则是函数本身。样例如下:

    1. Editor.Panel.extend({
    2. // ...
    3. listeners: {
    4. mousedown ( event ) {
    5. event.stopPropagation();
    6. Editor.log('on mousedown');
    7. },
    8. 'panel-resize' ( event ) {
    9. event.stopPropagation();
    10. Editor.log('on panel resize');
    11. }
    12. }
    13. });

    messages

    通过定义一个 Object 将 IPC 消息绑定到自定义函数上。这个 Object 的 Key 就是 IPC 消息名,Value则是函数本身。样例如下:

    1. Editor.Panel.extend({
    2. // ...
    3. messages: {
    4. 'foobar:say-hello' ( event ) {
    5. Editor.log(`Hello ${foobar}`);
    6. },
    7. }
    8. });

    behaviors

    behaviors 为一个数组,behaviors 会将数组中的元素通过 mixin 的方式融合到 Panel 本身。这为 Panel 中实现行为共享提供了比较方便的途径。

    使用方法如下:

    1. // foobar.js
    2. module.exports = {
    3. sayHello () {
    4. Editor.log('Hello Foobar');
    5. }
    6. }
    1. const Foobar = Editor.require('packages://foobar/foobar.js')
    2. Editor.Panel.extend({
    3. behaviors: [ Foobar ],
    4. ready () {
    5. this.sayHello();
    6. },
    7. });

    dependencies

    dependencies 为一个数组,其内部元素为 url 或 文件路径。 有时候我们会需要用到一些第三方库,通过指定 dependencies 会在 Panel 初始化前,就先将第三方库读入。

    使用方法如下:

    1. Editor.Panel.extend({
    2. dependencies: [
    3. 'packages://foobar/index.js',
    4. ],
    5. });

    $

    $ 为一个 Object,他可以通过 CSS 选择器的语法,将模板中的元素映射成 $ 变量方便用户使用。假设我们有以下代码:

    1. Editor.Panel.extend({
    2. template: `
    3. <div class="foo"></div>
    4. <div class="bar"></div>
    5. `,
    6. $: {
    7. foo: '.foo',
    8. bar: '.bar',
    9. }
    10. ready () {
    11. this.$foo.innerText = 'Foo';
    12. this.$bar.innerText = 'Bar';
    13. },
    14. });

    我们可以看到,通过选择器,我们得到 $foo$bar 两个元素。方便了我们在初始化过程中对其进行进一步的操作。

    函数

    ready ()

    当 Panel 被正确读入,模板实例化并且样式也被正确加入后,将会调动 ready 函数。

    run ( argv )

    当 Panel 第一次载入 ready 结束后,或者当 Panel 被 Editor.Panel.open 调用激活。 其中,通过Editor.Panel.open 的方式调用是可以传递参数 argv 给 run 函数。

    close ()

    当 Panel 被关闭退出前被调用。通过返回值决定 Panel 是否真正被关闭。如果返回为 true 则关闭 Panel。

    DOM 事件

    panel-show

    当 Panel 显示的时候发送

    panel-hide

    当 Panel 隐藏的时候发送

    panel-resize

    当 Panel 大小改变的时候发送

    panel-cut

    当操作系统剪切行为触发时发送

    panel-copy

    当操作系统复制行为触发时发送

    panel-paste

    当操作系统粘贴行为触发时发送