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
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();
}
},
...
最終效果如下：
