408 阿裏雲技術社區[雲棲]

使用 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="https://cdn.webix.com/edge/webix.css" type="text/css"> 
    <script src="https://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="https://cdn.webix.com/edge/webix.css" type="text/css"> 
    <script src="https://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="https://cdn.webix.com/edge/webix.css" type="text/css">
    <script src="https://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

參考文獻

最後更新：2017-06-26 02:02:25

使用 Webix 創建 Email 客戶端

安裝 Webix

快速開始

探索項目

進階

布局

實現 Toolbar

實現 Tree

實現 Calendar

實現 Email 列表

事件處理

按鈕實現

展示 Email 正文

編輯窗口

源碼

參考文獻

上一篇：分類算法之決策樹(Decision tree)

下一篇： Cacti 1.1.7 發布，網絡流量圖形監測分析工具

相關內容

熱門內容

最新內容

使用 Webix 創建 Email 客戶端

安裝 Webix

快速開始

探索項目

進階

布局

實現 Toolbar

實現 Tree

實現 Calendar

實現 Email 列表

事件處理

按鈕實現

展示 Email 正文

編輯窗口

源碼

參考文獻

上一篇： 分類算法之決策樹(Decision tree)

下一篇： Cacti 1.1.7 發布，網絡流量圖形監測分析工具

相關內容

熱門內容

最新內容

上一篇：分類算法之決策樹(Decision tree)