实用！如何使用 Webix 创建 Email 客户端

Webix 是一个JavaScript UI 库，提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。 (分开源和商业收费版本) 使用 Webix 可以有效地加快 Web 应用的开发。文本将演示了如何通过 Webix 框架，来创建一个 Email 客户端原型。

可以下载 Webix 的 JS、CSS 文件，但最快的方式是使用 Webix 的 CDN， 如下：

我们为我们的第一个应用创建第一个页面 index.html。在  中定义 js 脚本，来放置 UI 配置：

接着，我们编写 UI 配置：

为了能更加友好显示中文，我们在标签里面加上 。

这样，我们完整的第一个应用的代码如下：

用浏览器直接打开我们的index.html 页面，可以看到如下效果：

那么，我们来简单介绍下 Webix 的原理。

Webix 的应用程序都是放置在 script 脚本中：

需要注意的是，如果想让 Webix 脚本在 HTML 文档加载完了再执行，可以使用 webix.ready(function(){ ....}) 来包裹我们的 Webix，用法如下：

下面代码是用 Webix 中的 view 来定义一个视图组件，多个 view 可以实现复杂的应用布局结构：

在上述例子中，我们用到了两种类型的 view，其中，

• rows 代码垂直布局的多个列，这个，我们每个行（row）就是一个view；

• ui.template 是一个用于包裹 HTML 内容的容器。这里我们用来类型为header的template来说明这个是应用头。更多 template 的类型，可以自行参阅https://docs.webix.com/samples/80_docs/template_types.html；

• ui.datatable 是一个功能丰富的数据表格组件；

• autoConfig 设置为 true，表明表格会根据数据来自适应；

• data 就是表格中放置的数据

在快速了解 Webix 的相关概念之后，我们就要来创建一个稍微复杂一点的应用，就是本文的主要内容“Email 客户端”。

从大布局开始，再逐步求精，是构建前端应用的基本思路。我们创建了如下布局结构：

其中：

• cols 就是列，每行（row）可能包含了多个列（col）；

• height 和 width 属性来定义视图所需的大小了

• type，它定义了布局边框。如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。

Toolbar（工具栏）可以包含各种元素，如按钮或下拉菜单等。

记住，要使用Webix创建组件，必须使用view:“component_name”代码行，元素属性允许选择工具栏的内容。

• elements 用来放置子的view组件。

• label 就是显示普通的文本标签

这里，我们使用了 ui.chart，来创建图表。

创建菜单目录树：

其中:

• tree 是一个功能丰富的树形组件；

• open 设置为 true，来让我们的树在初始化时就处于打开状态。

最终效果如下：

创建日历组件：

其中:

• calendar 是一个功能丰富的日历组件；

• timepicker 设置为 true，在日历上显示时间选择器。

最终效果如下：