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