使用 Webix 创建 Email 客户端

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

安装 Webix

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

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> 
    <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>  
    </head>
    ...
</html>

快速开始

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

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> 
    <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>  
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
        /*  UI 配置 */
        </script>
    </body>
</html>

接着，我们编写 UI 配置：

webix.ui({
    rows: [
        {
            view: "template",
            type: "header", 
            template: "我的应用!"
        },
        {
            view: "datatable",
            autoConfig: true,
            data: [
                { title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },
                { title: "老卫", year: 1987, votes: 53248, rating: 5.9, rank: 6 }
            ]
        }
    ]
});

为了能更加友好显示中文，我们在<head>标签里面加上<meta charset="UTF-8">。

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

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
    <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript" charset="utf-8">
        /*  UI 配置 */
        webix.ui({
            rows: [
                {
                    view: "template",
                    type: "header", 
                    template: "我的应用!"
                },
                {
                    view: "datatable",
                    autoConfig: true,
                    data: [
                        { title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },
                        { title: "老卫", year: 1987, votes: 53248, rating: 5.9, rank: 6 }
                    ]
                }
            ]
        });
    </script>
</body>

</html>

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

探索项目

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

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

webix.ui({
  // 组件
});

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

webix.ready(function(){
  webix.ui({
      ....
  });
});

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

rows: [
    {
        view: "template",
        type: "header", 
        template: "我的应用!"
    },
    {
        view: "datatable",
        autoConfig: true,
        data: [
            { title: "Way Lau", year: 1987, votes: 533848, rating: 8.9, rank: 5 },
            { title: "老卫", year: 1987, votes: 53248, rating: 5.9, rank: 6 }
        ]
    }
]

在上述例子中，我们用到了两种类型的 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 客户端”。

布局

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

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" }
                    ]
                }
            ]
        }
    ]
});

其中：

cols 就是列，每行（row）可能包含了多个列（col）；
height 和 width 属性来定义视图所需的大小了
type，它定义了布局边框。如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。

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

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

...
{
    view: "toolbar",
    height: 45,
    elements:[
        {view: "label", label: "Webix Email 客户端"}
    ]
},
...

elements 用来放置子的view组件。
label 就是显示普通的文本标签

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

实现 Tree

创建菜单目录树：

...
{
    view:"tree",
    id: "my_tree",
    select: true,
    width:280,
    data:[
        { id:"1", value:"收件箱"},
        { id:"2", value:"已发送"},
        { id:"3", value:"草稿箱"},
        { id:"4", value:"垃圾箱"},
        { id:"5", value:"通讯录", open:true, 
            data:[
                { id:"5-1", value:"好友"},
                { id:"5-2", value:"家人"}
            ]
        }
    ]
},
...

其中:

tree 是一个功能丰富的树形组件；
open 设置为 true，来让我们的树在初始化时就处于打开状态。

最终效果如下：

实现 Calendar

创建日历组件：

...
{
    view:"calendar",
    timepicker:true
},
...

其中:

calendar 是一个功能丰富的日历组件；
timepicker 设置为 true，在日历上显示时间选择器。

最终效果如下：

实现 Email 列表

还记得我们的在“快速开始”部分的那个表格吗？这里同样需要用表格来实现 Email 列表：

创建Email 列表：

...
 {
    id: "my_datatable",
    view: "datatable",
    scrollX: false,
    columns: [
        {
            id: "checked", header: { content: "masterCheckbox" },
            template: "{common.checkbox()}", width: 40
        },
        { id: "name", width: 250, header: "发件人" },
        { id: "subject", header: "主题", fillspace: true },
        { id: "date", header: "时间", width: 150 }
    ],
    data: [
        {
            id: 1, folder: 1, name: "Way Lau",
            email: "[email protected]", subject: "Invitation",
            date: "25/07/2017 12:30:20"
        },
        {                                                
            id: 2, folder: 1, name: "老卫",
            email: "[email protected]", subject: "Report",
            date: "25/07/2017 16:10:07"
        },
        {
            id: 11, folder: 2, name: "Way Lau",
            email: "[email protected]", subject: "Re: Forecast",
            date: "25/07/2017 14:10:45"
        },

        {
            id: 12, folder: 2, name: "老卫",
            email: "[email protected]", subject: "Party invitation",
            date: "25/07/2017 17:05:10"
        }
    ]
    },
...

其中:

columns 用来定义表头；
` header:{ content:”masterCheckbox” }` 定义了可以全选列表的 checkbox；
template:"{common.checkbox()}" 设置每个列表项都会带有一个 checkbox；
scrollX 设置为 false，意味着禁用了水平的滚动条。
fillspace 设置为 true，意味可以自动填充宽度。

最终效果如下：

事件处理

事件，让组件具备交互功能：

...
// 绑定事件
$$("my_datatable").bind($$("my_tree"),function(obj,filter){
    return obj.folder == filter.id;
});

// 选中第一个节点
$$("my_tree").select(1);
...

其中：

“my_datatable” 为 datatable 组件的 id。绑定了”my_tree”的点击事件；
$$("my_tree").select(1) 意味着树节点会选中第一个节点。

最终效果如下：

按钮实现

按钮实现如下：

...
{
    height: 45, cols: [
        {
            view:"button",
            label:"回复",
            width: 95
        },
        {
            view:"button",
            label:"创建",
            width: 95
        },
        {},
        {
            view:"button",
            label:"删除",
            width: 95
        }
    ]
},
...

其中：

“my_datatable” 为 datatable 组件的 id。绑定了”my_tree”的点击事件；
$$("my_tree").select(1) 意味着树节点会选中第一个节点。

最终效果如下：

展示 Email 正文

展示 Email 正文实现如下：

...
{
    id:"details",
    template:"No message selected"
},
...

如果想显示文本，可以编写如下脚本：

var message = "大道至简  https://waylau.com";

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

最终效果如下：

编辑窗口

发送邮件，我们需要有一个编辑窗口：

webix.ui({
    view:"window",
    move: true,
    id:"my_win",
    width:400,
    head:"创建新邮件",
    position: "center",
    body: {
        view:"form",
        borderless:true,
        elements: [
        { view:"text", label:'收件人:', name:"address" },
        { view:"text", label:'主题:', name:"subject" },
        { view:"textarea", height:200, label:"内容:", name:"message"},
        { cols: [
            { view:"button", value: "发送", },
            { view:"button", value: "关闭", click:("$$('my_win').hide();") }
        ]},
        ],
    }
});

然后在“创建”的按钮上，添加弹出窗口的事件：

...
{
    view:"button",
    label:"创建",
    width: 95,
    click:function(){
        $$("my_win").getBody().clear();
        $$("my_win").show();
    }
},
...

最终效果如下：

源码

https://github.com/waylau/webix-tutorial

安装 Webix

快速开始

探索项目

进阶

布局

实现 Tree

实现 Calendar

实现 Email 列表

事件处理

按钮实现

展示 Email 正文

编辑窗口

源码

参考文献

Way Lau

Contact

Donate

安装 Webix

快速开始

探索项目

进阶

布局

实现 Toolbar

实现 Tree

实现 Calendar

实现 Email 列表

事件处理

按钮实现

展示 Email 正文

编辑窗口

源码

参考文献

Way Lau

Contact

Donate