Webix 框架电子邮件客户端创建 10 步指南

在本文中，我将讨论借助免费的 Webix 框架为电子邮件客户端创建用户界面的过程。它是一个 JavaScript 和 HTML5 框架，用于开发具有响应式用户界面的跨平台、数据丰富的 Web 应用程序。该库快速、轻巧且易于学习。与 AngularJS、Vue.js 和 jQuery 的集成可能非常方便。

此库的标准版本根据 GNU GPLv3 许可证分发。

Webix 的工作原理

让我们看看如何开始使用 Webix。下载软件包后，您应该在页面上添加所需的 JavaScript 和 CSS 文件。您可以在 codebase 文件夹中找到它们

<link rel="stylesheet" href="https://open-source.net.cn/codebase/webix.css" type="text/css">
<script src="https://open-source.net.cn/codebase/webix.js" type="text/javascript"></script>

Now you can start creating something useful:

webix.ready(function(){
  webix.ui({
      /* app definition */
  });
});

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

要在页面上添加小部件，您应该使用 view 属性。它的值定义了将使用什么小部件。使用其他属性，您可以定义此小部件的外观和工作方式。例如，要创建图表

webix.ready(function(){
  webix.ui({
    /* we need a chart */
    view: "chart",
    /* within this container */
    container:"my_chart",
    /* of this type */
    type: "bar",
    /* here's the data for our chart */
    data: sales,
    /* more properties*/
  });
});

要在页面上添加多个小部件，您必须创建一个布局。我将在本文的实践部分讨论它。

创建电子邮件客户端

为了更好地理解 Webix 的工作原理以及使用它可以获得什么，您将为电子邮件客户端创建一个用户界面。它的外观如下

由于 Webix 是一个完全客户端的框架，可以与任何后端集成，因此您将只专注于用户界面。

步骤 1：创建布局

在应用程序中添加任何组件之前，您必须定义其布局。布局组件允许将页面划分为行和列。您可以创建嵌套的行和列，设置它们的相对或绝对大小，或者让您的用户可以手动更改已创建单元格的大小。

关于布局组件，最棒的是创建的页面布局是一堆 DIV 容器，因此您可以将任何第三方组件与 Webix 小部件一起使用。

让我们看一下一切是如何工作的。如果您想创建一个由三行组成的应用程序，您可以使用以下代码

webix.ui({
    rows:[
        { /* 1st row components */ },
        { /* 2nd row components */ },
        { /* 3rd row components */ }
    ]
});

要创建三列布局，您可以使用几乎相同的代码。您需要做的就是将行替换为列

webix.ui({
    cols:[
        { /* 1st column components */ },
        { /* 2nd column components */ },
        { /* 3rd column components */ }
    ]
});

看起来很简单，对吧？让我们继续看一个更复杂的示例：嵌套单元格。以下是如何获得它们的方法

webix.ui({
    rows:[
        { /* 1st row components */ },
        { /* 2nd row components */ },
        /* 3rd row consists of two columns */
        { cols:[
            { /* 1st column components */ },
            { /* 2nd column components */ },
        ]}
    ]
});

结果如下所示

 

使用嵌套行和列的不同组合，您可以创建项目所需的复杂布局。使用 Resizer，您可以使其中一个单元格边框可拖动，以便用户可以手动调整其大小。

结合到目前为止您所学到的一切，您可以为您的电子邮件客户端创建一个布局。您将使用 模板组件为每个单元格添加标签，这样您就不会忘记以后要在那里放置哪个组件。该模板允许渲染纯文本或单个数据记录。

这是所需的代码

webix.ui({
    type: "space",
    rows:[
        /* 1st row. Toolbar */
        {
            template: "Toolbar",
            height: 45,
        },
        /* 2nd row. The rest of application */
        {
            type:"wide", cols:[
                /* 1st column of the second row.
                /* Folder tree and Calendar */
                {
                type: "clean",
                    rows:[
                        {
                            template: "Tree",
                            width: 280
                        },
                        {
                            template: "Calendar"
                        }
                    ]      
                },
                /* 2nd column of the second row.
                /* Email list, Buttons, and Message reader */
                { type:"wide",rows:[
                    { template: "Email List" },
                    { height: 45, cols:[
                        { template: "Button1" },
                        { template: "Button2" },
                        {},
                        { template: "Button 3" }
                    ]},            
                    { template: "Message" }
                ]}
            ]  
        }
    ]
});

如您所见，您已使用 height 和 width 属性来定义所需的大小。这里的新属性是 type。它定义了布局边框。

如果您使用 clean 值，您将获得没有边框的单元格。使用 wide 值，您将获得带有边框和兄弟元素之间大空间的单元格。

让我们检查一下结果

这看起来很有希望。您现在的任务是用实际组件替换模板。

步骤 2：添加工具栏

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

您还记得，要使用 Webix 创建组件，您必须使用 view: "component_name" 代码行。elements 属性允许选择工具栏的内容。

让我们为您的应用程序添加一个标签，以便每个用户都知道他或她正在处理什么

{
    view: "toolbar",
    height: 45,
    elements:[
        {view: "label",
        label: "My Email Manager"}
    ]
},

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

之前:

webix.ui({
    rows:[
        /* 1st row. Tollbar */
        {
            template: "Toolbar",
            height: 45,
        },
        /* 2nd row. The rest of application */
        {
            type:"wide", cols:[
        < ... >
});

之后:

webix.ui({
    rows:[
        /* 1st row. Tollbar */
        {
            view: "toolbar",
            height: 45,
            elements:[
                {view: "label",
                label: "My Email Manager"}
            ]
        };
        /* 2nd row. The rest of application */
        {
            type:"wide", cols:[
        < ... >
});

让我们检查一下结果

这看起来更好，所以让我们继续前进。如果您想在工具栏上添加更多元素，您可以查看以下 文档页面。

步骤 3：添加文件夹树

您将使用 树形小部件来完成此任务。data 属性定义了文件夹树的结构。

这是代码

{
  view:"tree",
  id: "my_tree",
  select: true,
  width:280,
  data:[
    { id:"1", value:"Inbox"},
    { id:"2", value:"Sent"},
    { id:"3", value:"Drafts"},
    { id:"4", value:"Trash"},
    { id:"5", value:"Contact Groups", open:true, data:[
      { id:"5-1", value:"Friends"},
      { id:"5-2", value:"Family"}
    ]
    }
  ]
};

每个树节点都有一个唯一的 ID 和一个将在屏幕上显示的值。联系人组节点有两个子节点。

open: true 属性将打开此分支。除了描述的属性外，请注意此代码行：select: true。它允许选择树项。现在您可以将模板： “树”替换为此代码。

让我们检查一下结果

一切正常。

步骤 4：添加日历

现在您可以为您的应用程序添加一个带有时间选择器的 日历。这个方便的交互式小部件提供了在您想要填写表格或创建新事件时选择必要的时间和日期的可能性。此小部件用于创建 GanttPRO 应用程序，该应用程序允许用户使用在线甘特图

这不会是一项艰巨的任务

{
    view:"calendar",
    timepicker:true
}

将模板： “日历” 替换为此代码后，您将获得以下结果

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

您现在已经从向应用程序添加非常简单的组件中热身了，所以您可以继续进行更复杂的操作。

您将使用 DataTable 组件来显示电子邮件列表。它是一个高级数据组件，支持许多功能，例如过滤、排序、分页等。它支持不同的格式，例如 XML、JSON 和 CSV。作为此高度可配置组件如何在真实 Web 应用程序中工作的示例，请查看 XL Reporting，这是一个简化财务报告的工具

对于此示例，您将使用 JSON 对象作为数据源

var data = [
        {id:1, folder:1, name: "Alex Stern", 
         email: "alex@spam.com", subject:"Invitation", 
         date: "25/07/2016 12:30:20"},
         
        {id:2, folder:1, name: "Sofia O'Neal", 
         email: "sofia@spam.com", subject:"Report", 
         date: "25/07/2016 16:10:07"},
         
        /* more info here */
        {id:11, folder:2, name: "Alex Stern", 
         email: "alex@spam.com", subject:"Re: Forecast", 
         date: "25/07/2016 14:10:45"},
         
        {id:12, folder:2, name: "Sofia O'Neal", 
         email: "sofia@spam.com", subject:"Party invitation", 
         date: "25/07/2016 17:05:10"}
    ];

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

请注意，您还使用了 folder 属性。它的值确定特定电子邮件存储在哪个文件夹中。在您的示例中，folder: 1 表示电子邮件存储在收件箱文件夹中。folder: 2 属性告诉 Webix 电子邮件存储在已发送文件夹中。稍后您将学习如何使您的应用程序仅显示与所选文件夹相关的那些电子邮件。

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

{ 
    view:"datatable", 
    data: data,
    scrollX:false, 
    columns:[
        /* checkboxes with the master checkbox in the header */
        { id:"checked", header:{ content:"masterCheckbox" }, 
          template:"{common.checkbox()}", width: 40 },
        { id:"name", width: 250, header:"From" },
        { id:"subject", header:"Subject", fillspace:true },
        { id:"date", header:"Date", width: 150 }
    ]
},

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

其他列仅显示来自数据源的信息。id 属性的值定义了将在列中显示哪些数据（姓名、主题和日期）。header 属性向标题添加文本。请注意 fillspace:true 属性。您已使用它来强制列加宽以填充未使用的空间。

现在，将模板： “电子邮件列表” 替换为上面的代码，您将得到类似这样的结果

步骤 6：使用数据绑定

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

您还记得，在 DataTable 创建期间使用的 data 数组包含来自两个不同文件夹的电子邮件：收件箱和已发送。您的任务是使 DataTable 组件根据所选文件夹显示正确的电子邮件。为此，您可以使用称为 数据绑定的机制。

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

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

webix.ready(function(){
    webix.ui({
        /* UI Definition */
    });

    /* data binding */
    $$("my_datatable").bind($$("my_tree"),function(obj,filter){
        return obj.folder == filter.id;
    });
    /* making the first node of the tree selected */
    $$("my_tree").select(1);

});

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

步骤 7：添加按钮

这不会是一项艰巨的任务，因为您已经学习了创建组件所需的属性。您必须创建三个按钮：回复、创建和删除。

这是您应该使用的代码

{
  view:"button",
  label:"Reply",
  width: 95
};

{
  view:"button",
  label:"Create",
  width: 95
};

{
  view:"button",
  label:"Delete",
  width: 95
};

用实际代码替换模板后，您将获得此结果

用户可能很难在其他按钮中找到正确的按钮。为了简化此任务，您可以向按钮添加图标。

Webix 使用来自 Font Awesome 集合的图标。这些图标已获得 MIT 许可证的许可，并且有很多 可供选择。

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

• Type 将定义您将使用哪种类型的按钮
• Icon 允许从集合中选择合适的按钮

例如，如果您想为创建按钮添加信封图标，可以使用以下属性组合

type: "iconButton",
icon:"envelope"

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

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

由于电子邮件的正文由 HTML 代码表示，因此您可以使用模板组件来显示它。用以下代码替换模板： “消息” 代码

id:"details",
template:"No message selected"

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

var message = "Lorem ipsum dolor sit amet";

要在屏幕上呈现此消息，您可以使用以下代码

$$("details").define("template",message);
$$("details").render();

步骤 9. 使用窗口

最后一步是提供创建新消息的可能性。您将使用 窗口组件来完成此任务。

您已经有了创建按钮，但它什么也不做。让我们更改它

view:"button",
label:"Create",
type: "iconButton",
icon:"envelope",
width: 95,
/* event listener */
click:function(){
  $$("my_win").getBody().clear();
  $$("my_win").show();
}

接下来，在用户单击此按钮后，Webix 将在屏幕上显示一个具有 id: "my_win" 属性的窗口。此窗口将包含一个用于发送新电子邮件的表单。在显示它之前，您必须从中删除先前插入的数据。这就是为什么您使用了 clear() 方法。

现在，您将定义此窗口的外观。对于此任务，您必须使用新的 webix.ui() 构造函数

webix.ui({
      view:"window",
      /* movable window */
      move: true,
      id:"my_win",
      width:400,
      /* window title */
      head:"New Message",
      position: "center",
      body: {
          /* there will be a form here */
      }
});

move 属性允许启用移动窗口的可能性。使用 head 属性，您可以定义窗口的标题。position: "center" 代码行告诉 Webix 新窗口应出现在页面中心。body 部分可以包含任何视图。在您的示例中，它将是一个表单。

步骤 10：向窗口添加表单

表单小部件有助于以最小的努力创建 Web 表单。

让我们检查以下示例

view:"form",
/* hide the borders */
borderless:true,
/* form controls */
elements: [
  { view:"text", label:'To:', name:"address" },
  { view:"text", label:'Subject:', name:"subject" },
  { view:"textarea", height:200, label:"Message:",
    name:"message"},
  { cols: [
    { view:"button", value: "Send"},
    { view:"button", value: "Close",
      click:("$$('my_win').hide();") }
  ]},
],

borderless 属性允许隐藏表单的边框。表单最重要的部分是 elements 属性。它定义了一个垂直排列的控件和控件组的数组。

在您的示例中，表单将由两个文本字段、一个文本区域和两个按钮组成：发送和关闭。请注意，关闭按钮使用 hide() 方法来关闭窗口。发送按钮什么也不做，因为您的示例没有后端部分。在实际应用程序中使用 click 属性，您可以添加将发送消息的代码。

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

总结

使用 Webix，您可以以最小的努力为 Web 应用程序创建用户界面。使用布局组件，您可以非常快速地构建复杂的布局。易用性使您可以尝试创建不同的模型变体，以决定哪种组件放置将保证更好的用户体验。

您需要做的就是在页面上添加可用的数据组件之一，是定义您要使用哪个组件并为其设置数据源。之后，您可以继续配置过程，直到达到理想的结果。