做前端开发的程序员应该都知道Webix这个免费框架，本文会给出用其创建一个电子邮件客户端用户界面的步骤。Webix是一个JavaScript UI库，可用其构建一些HTML5程序，熟悉它的程序员都知道，Webix快速、轻便且易于学习，与AngularJS、Vue.js和jQuery的集成都很方便，所以我最终选择了Webix。（阅读本文大概需要5分钟，图片较多，建议在有Wifi的情况下阅读。）

Webix的工作原理

先来看看如何开始使用Webix（如果用过，请自动忽略这一部分），下载完成后，程序员应该在页面上添加所需的JavaScript和CSS文件，这些都可以在代码库文件夹中找到：

在应用程序中不需要使用webix.ready，但它有助于确保在页面完全加载后执行代码（作为theonDocumentReady事件和onlload（）的替代方法）。

要在页面上添加小部件，程序员可以使用view属性，它的值定义将决定使用哪个小部件。在这个过程中，还可以使用其他属性定义窗口小部件的外观和工作原理。例如，创建一个图表：

要在页面上添加多个小部件，就必须创建一个布局（这将在下文中详述）。

创建电子邮件客户端

进入正题，先来看一下电子邮件客户端的外观：

因为Webix是一个完全可以与任何后端集成的客户端框架，所以程序员只需要集中在用户界面上就可以了。

步骤1：创建布局

在向应用程序中添加组件之前必须先定义其布局。TheLayout组件允许将页面分成行和列，程序员可以创建嵌套行和列，设置其相对或绝对大小或者为用户提供手动更改创建单元格大小的可能性。

布局组件最好的一点是，创建的页面布局是一堆DIV容器，以便程序员可以在Webix小部件旁边使用任何第三方组件。

让我们来看看一切如何运作。如果要创建由三行组成的应用程序，可以使用以下代码：

要创建三列布局，可以使用几乎相同的代码，把行换成列就可以了：

看起来很容易吗？ 我们来看一个更复杂的例子：嵌套单元格：

结果如下：

使用嵌套行和列的不同组合，程序员可以创建项目需要的复杂布局。使用Resizer可以使单元格边框可拖动，用户将能够手动调整其大小。

完成布局创建之后，程序员将使用模板组件为每个单元格添加标签，包括一些要放置的组件，该模板允许呈现纯文本或单个数据记录。

以下是代码：

目前，我们已经使用height和width属性来定义所需的大小了。涉及的新属性是type，它定义了布局边框。

如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。

我们来检查结果：

好，接下来的任务是用实际组件替换模板。

步骤2：添加工具栏

我们从工具栏组件开始，它可以包含各种元素，如按钮或下拉菜单。

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

接下来是添加标签，以便用户了解正在处理什么：

现在必须将此代码添加到应用程序中，以替换以前创建的模板。

之前：

之后：

我们来检查结果：

步骤3：添加文件夹树

程序员可使用Tree widget进行此任务，data属性定义了文件夹树的结构。以下是代码：

每个树节点都有唯一的ID和一个将显示在屏幕上的值。“Contact Groups”节点具有两个子节点。

open:true属性将打开此分支。除了描述的属性，注意这个代码行：select：true。它允许选择树项目。现在，您可以用代码 "Tree"替换模板。

我们来检查结果：

步骤4：添加日历

现在，您可以在时间选择器中添加一个日历到应用程序。这个方便的互动小部件提供了必要的时间和日期，当你想填写一个表单或创建一个新的事件。该小部件用于创建GanttPRO应用程序，允许用户使用在线甘特图：

这不是一件艰巨的任务：

在您使用代码"Calendar" 替换模板之后，您将得到以下结果：

步骤5：使用DataTable组件显示电子邮件列表

目前，应用程序中已经有了一些相当简单的组件，因此可以继续处理更复杂的内容。

程序员可使用DataTable组件来显示电子邮件列表。它是一个高级的数据组件，支持许多功能，如过滤，排序，分页等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真实的Web应用程序中运行的示例，请查看XL报告：

对于此示例，你需要使用JSON对象作为数据源：

如您所见，电子邮件列表将包含名称，电子邮件地址，主题和日期等信息。

请注意，你还使用了文件夹属性，其值确定存储特定电子邮件的文件夹。在您的实例folder：1表示邮件存储在收件箱文件夹中。The folder：2表示Webix在“发送”文件夹中存储一个电子邮件。

现在可以创建一个新的DataTable组件：

scrollX：false代码行禁用水平滚动条。columns属性定义表将具有哪些列。第一列仅包含复选框。header:{ content:"masterCheckbox" }定义具有主复选框的标题，可用于选择所有可用的电子邮件。使用“{common.checkbox（）}”，您可以在此列的每个单元格中添加一个复选框。

其他列只显示数据源中的信息，id属性的值定义在列（名称，主题和日期）中显示哪些数据。标题属性将一个文本添加到标题。注意填充空间：fillspace:true。您已经使用它来强制列扩展以填充未使用的空间。

现在，用上面的代码替换模板：“Email list”，你会得到这样的东西：

步骤6：使用数据绑定

现在你必须编写一些可以帮助Tree和DataTable协同工作的代码。

记住，您在DataTable创建过程中使用的数据数组包含来自两个不同文件夹的邮件：Inbox和Sent。您的任务是使DataTable组件根据所选文件夹显示正确的电子邮件。要做到这一点，可以使用称为数据绑定的机制。

使用bind（）函数实现数据绑定。应该从从属组件调用，并将主组件作为参数。由于您希望DataTable根据所选节点树更改其内容，因此第一个组件将是从属组件，第二个组件将作为主节点。

除了绑定数据，你必须告诉你的应用程序，应该在应用程序加载之后选择树的第一个节点。 要实现该目标，您应该将相应的代码放在ready方法中，如下所示：

现在，电子邮件列表的内容将根据所选文件夹进行更改：

步骤7：添加按钮

这不是一件艰巨的任务，因为您已经学习了创建组件所需的属性。您必须创建三个按钮：Reply, Create和Delete。

这是您应该使用的代码：

用实际的代码替换模板后，你会得到这样的：

用户可能难以找到其他按钮。为了简化此任务，您可以给按钮添加图标。

Webix使用Font Awesome集合中的图标。这些图标是根据麻省理工学院许可证获得许可的，有很多选择。

要将常规按钮转换成带有图标的按钮，您必须添加两个属性：

• Type将定义您将使用哪种按钮

• Icon允许从收藏中选择正确的按钮

例如，如果要向“create”按钮添加信封图标，可以使用以下属性组合：

使用相同的方法，您可以向所有按钮添加图标：

步骤8：显示电子邮件内容

由于电子邮件的正文由HTML代码呈现，您可以使用模板组件进行显示。替换模板：“消息”代码如下：

如果没有选择的电子邮件，用户将看到以下消息：No message selected。您可以使用其id属性的值来操作此组件。例如，您有一个包含消息的变量：

要在屏幕上显示此消息，可以使用以下代码：

步骤9.使用Windows

最后一步是提供创建新消息的可能，您已经拥有“create”按钮，但它什么都不做。我们来改变一下：

接下来，用户点击此按钮后，Webix将显示一个窗口，该窗口的ID为“my_win”。此窗口将包含用于发送新电子邮件的表单，在显示之前，您必须先删除之前插入的数据。这就是为什么使用clear（）方法。

现在，您将定义此窗口的外观。对于这个任务，你必须使用一个新的webix.ui（）构造函数：

移动属性允许移动窗口，使用head属性，可以定义窗口的标题。The position：“center”代码行告诉Webix，新窗口应该出现在页面的中心。body部分可能包含任何视图。

步骤10：将窗体添加到窗口

Form widget可以以最小的努力创建Web窗体。

我们来看下面的例子：

无边界属性允许隐藏窗体的边框。表单中最重要的是elements属性，它定义了一组垂直排列的控件和控件组。

在您的情况下，表单将包含两个文本字段，一个文本区域和两个按钮：发送和关闭。请注意，关闭按钮使用hide（）方法关闭窗口。发送按钮不执行任何操作，因为您的示例没有后端。在使用click属性的实际应用程序中，可以添加发送消息的代码。

将创建表单的代码添加到窗口代码后，可以测试结果。单击创建按钮，屏幕上将出现一个新窗口：

Wrapping up

使用Webix，程序员可以尽可能少地为Web应用程序创建用户界面。使用Layout组件，您可以快速构建复杂的布局。易用性允许程序员尝试创建不同变体的模型，以确定哪些组件将保证更好的用户体验。

前端开发程序员需要做的就是在页面上添加可用的数据组件，定义要使用的数据组件，并为其设置数据源。之后，程序员可以继续进行配置过程，直到达到理想的结果。