使用 Webix 建立 Email 客戶端

germo發表於2021-09-09
WebAI客戶端

Webix 是一個JavaScript UI 庫，提供了多達88個UI小部件和功能豐富的 CSS/HTML5 JavaScript 控制元件。使用 Webix 可以有效地加快 Web 應用的開發。文字將演示瞭如何透過 Webix 框架，來建立一個 Email 客戶端原型。

安裝 Webix

可以下載 Webix 的 JS、CSS 檔案，但最快的方式是使用 Webix 的 CDN， 如下：



    



    ...
快速開始

我們為我們的第一個應用建立第一個頁面 index.html。在 中定義 js 指令碼，來放置 UI 配置：



    



        /*  UI 配置 */

接著，我們編寫 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 }
            ]
        }
    ]
});

為了能更加友好顯示中文，我們在標籤裡面加上。

這樣，我們完整的第一個應用的程式碼如下：

用瀏覽器直接開啟我們的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；
  • 是一個用於包裹 HTML 內容的容器。這裡我們用來型別為header的template來說明這個是應用頭。更多 template 的型別，可以自行參閱；
  • 是一個功能豐富的資料表格元件；
    • 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 就是顯示普通的文字標籤

這裡，我們使用了 ，來建立圖表。

實現 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 = "大道至簡  ";

$$("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();
    }
},
...

最終效果如下：

圖片描述

原始碼
參考文獻
  • 本文同步至

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1868/viewspace-2799005/，如需轉載，請註明出處，否則將追究法律責任。

相關文章