使用 Webix 创建 Email 客户端
生活随笔
收集整理的這篇文章主要介紹了
使用 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
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();} }, ...最終效果如下：
源碼
- https://github.com/waylau/webix-tutorial
參考文獻
- https://opensource.com/article/17/5/10-step-guide-webix-framework
- https://docs.webix.com/tutorials__quick_start.html
- 本文同步至https://waylau.com/email-client-with-webix
轉載于:https://my.oschina.net/waylau/blog/1027097
總結
以上是生活随笔為你收集整理的使用 Webix 创建 Email 客户端的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： scalikejdbc 学习笔记(4)
- 下一篇： 安装Kubernetes-Dashboa