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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

行者武松 2017-08-01 16:21:00 浏览1142
展开阅读全文

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

安装 Webix

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

快速开始

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

接着,我们编写 UI 配置:

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

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

用浏览器直接打开我们的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

Toolbar(工具栏)可以包含各种元素,如按钮或下拉菜单等。

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

 

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

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

实现 Tree

创建菜单目录树:

其中:

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

最终效果如下:

实现 Calendar

创建日历组件:

其中:

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

最终效果如下:

实现 Email 列表

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

创建Email 列表:

其中:

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

最终效果如下:

事件处理

事件,让组件具备交互功能:

其中:

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

最终效果如下:

按钮实现

按钮实现如下:

其中:

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

最终效果如下:

展示 Email 正文

展示 Email 正文实现如下:

如果想显示文本,可以编写如下脚本:

最终效果如下:

编辑窗口

发送邮件,我们需要有一个编辑窗口:

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

最终效果如下:


作者:OSC-waylau

来源:51CTO

网友评论

登录后评论
0/500
评论
行者武松
+ 关注