• 编写面板界面
    • 定制你的模板
    • 界面排版
    • 添加 UI 元素
    • 为 UI 元素添加逻辑交互

    编写面板界面

    Cocos Creator 的面板界面使用 HTML5 标准编写。你可以为界面指定 HTML 模板和 CSS 样式，然后对界面元素绑定消息编写逻辑和交互代码。如果你之前有过前端页面编程经验，那么这些内容对你来说再熟悉不过。而没有前端编程经验的开发者也不必太担心，通过本节的学习，将可以让你在短时间内掌握 Creator 面板界面的编写技巧。

    定制你的模板

    通常在开始编写界面之前，我们总是希望能够在界面中看见点什么。我们可以通过面板定义函数的 template和 style 选项来稍微在面板界面上绘制点东西。

    一般我们会选择绘制一些区块用于规划界面布局，我们可以写以下代码：

    1. Editor.Panel.extend({
    2.   style: `
    3.     .wrapper {
    4.       box-sizing: border-box;
    5.       border: 2px solid white;
    6.       font-size: 20px;
    7.       font-weight: bold;
    8.     }
    10.     .top {
    11.       height: 20%;
    12.       border-color: red;
    13.     }
    15.     .middle {
    16.       height: 60%;
    17.       border-color: green;
    18.     }
    20.     .bottom {
    21.       height: 20%;
    22.       border-color: blue;
    23.     }
    24.   `,
    26.   template: `
    27.     <div class="wrapper top">
    28.       Top
    29.     </div>
    31.     <div class="wrapper middle">
    32.       Middle
    33.     </div>
    35.     <div class="wrapper bottom">
    36.       Bottom
    37.     </div>
    38.   `,
    39. });

    通过以上代码，我们获得了一个如下的界面效果：

    panel-01

    界面排版

    界面排版是通过在 style 中书写 CSS 来完成的。在上面的例子中，我们已经对界面做了简单的排版。如果对 CSS 不熟悉，推荐大家可以阅读 W3 School 的 CSS 教程 来加强。

    在界面排版过程中，有时候我们希望更好的表达元素之间的布局关系，比如我们喜欢 Top 和 Bottom 元素的高度固定为 30px，而 Middle 元素的高度则撑满剩余空间。这个时候我们就可以使用 CSS Flex 布局来制作。

    我们可以这么修改 style 部分：

    1. Editor.Panel.extend({
    2.   style: `
    3.     :host {
    4.       display: flex;
    5.       flex-direction: column;
    6.     }
    8.     .wrapper {
    9.       box-sizing: border-box;
    10.       border: 2px solid white;
    11.       font-size: 20px;
    12.       font-weight: bold;
    13.     }
    15.     .top {
    16.       height: 30px;
    17.       border-color: red;
    18.     }
    20.     .middle {
    21.       flex: 1;
    22.       border-color: green;
    23.     }
    25.     .bottom {
    26.       height: 30px;
    27.       border-color: blue;
    28.     }
    29.   `
    30. });

    由于 CSS Flex 布局语法有些复杂，为了方便大家使用，Cocos Creator 对这部分进行了重新包装，关于这部分的详细介绍，请阅读 界面排版。

    添加 UI 元素

    规划好布局后，我们就可以考虑加入界面元素来完成界面功能。通常，熟悉前端编程的开发人员会想到一些常用的界面元素，如 <button>，<input> 等等。这些元素当然是可以直接被使用，但是我们强烈推荐大家使用Cocos Creator 的内置 UI Kit 元素。这些内置元素都是以 ui- 开头，例如 <ui-button>，<ui-input>。Cocos Creator 提供了非常丰富的内置元素，开发人员可以通过 掌握 UI Kit 章节获得更详细的了解。

    内置元素不但在样式上经过细致的调整，同时也统一了消息发送规则并且能够更好的处理 focus 等系统事件。

    让我们稍微丰富一下我们上面的面板：

    1. Editor.Panel.extend({
    2.   style: `
    3.     :host {
    4.       display: flex;
    5.       flex-direction: column;
    6.       margin: 5px;
    7.     }
    9.     .top {
    10.       height: 30px;
    11.     }
    13.     .middle {
    14.       flex: 1;
    15.       overflow: auto;
    16.     }
    18.     .bottom {
    19.       height: 30px;
    20.     }
    21.   `,
    23.   template: `
    24.     <div class="top">
    25.       Mark Down 预览工具
    26.     </div>
    28.     <div class="middle layout vertical">
    29.       <ui-text-area resize-v value="请编写你的 Markdown 文档"></ui-text-area>
    30.       <ui-markdown class="flex-1"></ui-markdown>
    31.     </div>
    33.     <div class="bottom layout horizontal end-justified">
    34.       <ui-button class="green">预览</ui-button>
    35.     </div>
    36.   `,
    37. });

    如果一切正常，你将会看到如下界面：

    panel-02

    为 UI 元素添加逻辑交互

    最后让我们通过标准的事件处理代码来完成面板的逻辑部分。假设我们需要在每次点击预览按钮后，都会将 text-area中输入的 Markdown 文档，渲染并显示在下方。我们可以做如下代码操作：

    1. Editor.Panel.extend({
    2.   // ...
    4.   $: {
    5.     txt: 'ui-text-area',
    6.     mkd: 'ui-markdown',
    7.     btn: 'ui-button',
    8.   },
    10.   ready () {
    11.     this.$btn.addEventListener('confirm', () => {
    12.       this.$mkd.value = this.$txt.value;
    13.     });
    15.     // init
    16.     this.$mkd.value = this.$txt.value;
    17.   },
    18. });

    这里我们通过 $ 选择器，预先索引了我们需要的 ui 元素。在利用 HTML 标准 API addEventListener为元素添加事件。对于内置 UI Kit 元素，每个 UI 元素都拥有一组标准事件，他们分别是：cancel，change 和 confirm。同时，多数 UI 元素都会携带 value 属性，记录元素内相关的值信息。

    希望通过本节的代码示例，能够启发你进行面板界面开发的工作。当然，要灵活运用面板界面，还是需要深入学习和掌握 HTML5 标准。