文档章节

使用 Webix 创建 Email 客户端

waylau
 waylau
发布于 2017/06/26 00:25
字数 1818
阅读 603
收藏 21

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 内容的容器。这里我们用来类型为headertemplate来说明这个是应用头。更多 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

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: "waylau521@gmail.com", subject: "Invitation",
            date: "25/07/2017 12:30:20"
        },
        {                                                
            id: 2, folder: 1, name: "老卫",
            email: "waylau521@163.com", subject: "Report",
            date: "25/07/2017 16:10:07"
        },
        {
            id: 11, folder: 2, name: "Way Lau",
            email: "waylau521@gmail.com", subject: "Re: Forecast",
            date: "25/07/2017 14:10:45"
        },

        {
            id: 12, folder: 2, name: "老卫",
            email: "waylau521@163.com", 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();
    }
},
...

最终效果如下:

源码

参考文献

© 著作权归作者所有

waylau

waylau

粉丝 523
博文 100
码字总数 182147
作品 2
深圳
架构师
私信 提问
加载中

评论(2)

waylau
waylau

引用来自“Lucixfer”的评论

这个框架以前收费的~ 现在开源了?
有分开原版和商业收费版本,功能上还是有些差异的~
Lucixfer
Lucixfer
这个框架以前收费的~ 现在开源了?
2016上半年最有发展前景的5款框架

  【IT168 翻译】近几年,Web应用的重心由后台逐渐转向前端,后台渐渐只需处理数据,而前端则不只要求功能齐全,还要求高颜值。下面我们就为大家来推荐一下2016上半年最有趣也是最有发展前...

it168网站
2016/07/13
0
0
Webix学习笔记-创建一个基本应用程序-00-简介

在开始学习Webix之前,没有什么比使用一个实例更容易理解一个框架的用法。 下面的步骤将引导我们开始使用Webix,Webix的开发不需要任何特殊的工具,使用一个带语法着色的文本即可。 引入库文...

寡鸡蛋
2013/10/13
0
0
Webix 2.3 发布,新增一些功能

Webix 2.3 发布,两个细节上的改变是——默认日历控件上时间解析格式为"%Y-%m-%d" to "%Y-%m-%d %H:%i";布局大小发生变化(此版本中高度和宽度是布局上的一个全尺寸,包括所有边缘和填充)。...

oschina
2015/05/08
2.9K
10
Webix学习笔记-表格应用-01-Loading

只要是企业级的应用,基本上逃不过Table的应用,大量的表格用来显示、操作数据变成了一种魔咒。估计罪魁祸首还是Microsoft Excel,不管是手工电子表格、C/S架构的应用软件还是B/S架构的应用软...

寡鸡蛋
2013/10/20
0
1
Webix 1.4 发布,支持数据和网格提示

Webix 1.4 已于最近发布,新版本除了支持数据和网格提示之外还支持WebSocket和IndexedDB。数据提示功能让你能够使用图片或者复杂的HTML内容作为选择选项。 另一方面,你可以借助于网格提示功...

玛雅牛
2014/01/17
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
5
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
5
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部