前端開發的程序員應該都知道Webix這個免費框架，本文會給出用其創建一個電子郵件客戶端用戶界面的步驟。Webix是一個JavaScript UI庫，可用其構建一些HTML5程序，熟悉它的程序員都知道，Webix快速、輕便且易于學習，與AngularJS、Vue.js和jQuery的集成都很方便，所以我最終選擇了Webix。（閱讀本文大概需要5分鐘，圖片較多，建議在有Wifi的情況下閱讀。）

Webix的工作原理

先來看看如何開始使用Webix（如果用過，請自動忽略這一部分），下載完成后，程序員應該在頁面上添加所需的JavaScript和CSS文件，這些都可以在代碼庫文件夾中找到：

在應用程序中不需要使用webix.ready，但它有助于確保在頁面完全加載后執行代碼（作為theonDocumentReady事件和onlload（）的替代方法）。

要在頁面上添加小部件，程序員可以使用view屬性，它的值定義將決定使用哪個小部件。在這個過程中，還可以使用其他屬性定義窗口小部件的外觀和工作原理。例如，創建一個圖表：

要在頁面上添加多個小部件，就必須創建一個布局（這將在下文中詳述）。

創建電子郵件客戶端

進入正題，先來看一下電子郵件客戶端的外觀：

因為Webix是一個完全可以與任何后端集成的客戶端框架，所以程序員只需要集中在用戶界面上就可以了。

步驟1：創建布局

在向應用程序中添加組件之前必須先定義其布局。TheLayout組件允許將頁面分成行和列，程序員可以創建嵌套行和列，設置其相對或絕對大小或者為用戶提供手動更改創建單元格大小的可能性。

布局組件最好的一點是，創建的頁面布局是一堆DIV容器，以便程序員可以在Webix小部件旁邊使用任何第三方組件。

讓我們來看看一切如何運作。如果要創建由三行組成的應用程序，可以使用以下代碼：

要創建三列布局，可以使用幾乎相同的代碼，把行換成列就可以了：

看起來很容易嗎？ 我們來看一個更復雜的例子：嵌套單元格：

結果如下：

使用嵌套行和列的不同組合，程序員可以創建項目需要的復雜布局。使用Resizer可以使單元格邊框可拖動，用戶將能夠手動調整其大小。

完成布局創建之后，程序員將使用模板組件為每個單元格添加標簽，包括一些要放置的組件，該模板允許呈現純文本或單個數據記錄。

以下是代碼：

目前，我們已經使用height和width屬性來定義所需的大小了。涉及的新屬性是type，它定義了布局邊框。

如果使用clean將獲得無邊框的單元格，使用wide將獲得有邊框的、有更大空間的單元格。

我們來檢查結果：

好，接下來的任務是用實際組件替換模板。

步驟2：添加工具欄

我們從工具欄組件開始，它可以包含各種元素，如按鈕或下拉菜單。

記住，要使用Webix創建組件，必須使用view:“component_name”代碼行，元素屬性允許選擇工具欄的內容。

接下來是添加標簽，以便用戶了解正在處理什么：

現在必須將此代碼添加到應用程序中，以替換以前創建的模板。

之前：

之后：

我們來檢查結果：

步驟3：添加文件夾樹

程序員可使用Tree widget進行此任務，data屬性定義了文件夾樹的結構。以下是代碼：

每個樹節點都有唯一的ID和一個將顯示在屏幕上的值。“Contact Groups”節點具有兩個子節點。

open:true屬性將打開此分支。除了描述的屬性，注意這個代碼行：select：true。它允許選擇樹項目。現在，您可以用代碼 "Tree"替換模板。

我們來檢查結果：

步驟4：添加日歷

現在，您可以在時間選擇器中添加一個日歷到應用程序。這個方便的互動小部件提供了必要的時間和日期，當你想填寫一個表單或創建一個新的事件。該小部件用于創建GanttPRO應用程序，允許用戶使用在線甘特圖：

這不是一件艱巨的任務：

在您使用代碼"Calendar" 替換模板之后，您將得到以下結果：

步驟5：使用DataTable組件顯示電子郵件列表

目前，應用程序中已經有了一些相當簡單的組件，因此可以繼續處理更復雜的內容。

程序員可使用DataTable組件來顯示電子郵件列表。它是一個高級的數據組件，支持許多功能，如過濾，排序，分頁等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真實的Web應用程序中運行的示例，請查看XL報告：

對于此示例，你需要使用JSON對象作為數據源：

如您所見，電子郵件列表將包含名稱，電子郵件地址，主題和日期等信息。

請注意，你還使用了文件夾屬性，其值確定存儲特定電子郵件的文件夾。在您的實例folder：1表示郵件存儲在收件箱文件夾中。The folder：2表示Webix在“發送”文件夾中存儲一個電子郵件。

現在可以創建一個新的DataTable組件：

scrollX：false代碼行禁用水平滾動條。columns屬性定義表將具有哪些列。第一列僅包含復選框。header:{ content:"masterCheckbox" }定義具有主復選框的標題，可用于選擇所有可用的電子郵件。使用“{common.checkbox（）}”，您可以在此列的每個單元格中添加一個復選框。

其他列只顯示數據源中的信息，id屬性的值定義在列（名稱，主題和日期）中顯示哪些數據。標題屬性將一個文本添加到標題。注意填充空間：fillspace:true。您已經使用它來強制列擴展以填充未使用的空間。

現在，用上面的代碼替換模板：“Email list”，你會得到這樣的東西：

步驟6：使用數據綁定

現在你必須編寫一些可以幫助Tree和DataTable協同工作的代碼。

記住，您在DataTable創建過程中使用的數據數組包含來自兩個不同文件夾的郵件：Inbox和Sent。您的任務是使DataTable組件根據所選文件夾顯示正確的電子郵件。要做到這一點，可以使用稱為數據綁定的機制。

使用bind（）函數實現數據綁定。應該從從屬組件調用，并將主組件作為參數。由于您希望DataTable根據所選節點樹更改其內容，因此第一個組件將是從屬組件，第二個組件將作為主節點。

除了綁定數據，你必須告訴你的應用程序，應該在應用程序加載之后選擇樹的第一個節點。 要實現該目標，您應該將相應的代碼放在ready方法中，如下所示：

現在，電子郵件列表的內容將根據所選文件夾進行更改：

步驟7：添加按鈕

這不是一件艱巨的任務，因為您已經學習了創建組件所需的屬性。您必須創建三個按鈕：Reply, Create和Delete。

這是您應該使用的代碼：

用實際的代碼替換模板后，你會得到這樣的：

用戶可能難以找到其他按鈕。為了簡化此任務，您可以給按鈕添加圖標。

Webix使用Font Awesome集合中的圖標。這些圖標是根據麻省理工學院許可證獲得許可的，有很多選擇。

要將常規按鈕轉換成帶有圖標的按鈕，您必須添加兩個屬性：

• Type將定義您將使用哪種按鈕

• Icon允許從收藏中選擇正確的按鈕

例如，如果要向“create”按鈕添加信封圖標，可以使用以下屬性組合：

使用相同的方法，您可以向所有按鈕添加圖標：

步驟8：顯示電子郵件內容

由于電子郵件的正文由HTML代碼呈現，您可以使用模板組件進行顯示。替換模板：“消息”代碼如下：

如果沒有選擇的電子郵件，用戶將看到以下消息：No message selected。您可以使用其id屬性的值來操作此組件。例如，您有一個包含消息的變量：

要在屏幕上顯示此消息，可以使用以下代碼：

步驟9.使用Windows

最后一步是提供創建新消息的可能，您已經擁有“create”按鈕，但它什么都不做。我們來改變一下：

接下來，用戶點擊此按鈕后，Webix將顯示一個窗口，該窗口的ID為“my_win”。此窗口將包含用于發送新電子郵件的表單，在顯示之前，您必須先刪除之前插入的數據。這就是為什么使用clear（）方法。

現在，您將定義此窗口的外觀。對于這個任務，你必須使用一個新的webix.ui（）構造函數：

移動屬性允許移動窗口，使用head屬性，可以定義窗口的標題。The position：“center”代碼行告訴Webix，新窗口應該出現在頁面的中心。body部分可能包含任何視圖。

步驟10：將窗體添加到窗口

Form widget可以以最小的努力創建Web窗體。

我們來看下面的例子：

無邊界屬性允許隱藏窗體的邊框。表單中最重要的是elements屬性，它定義了一組垂直排列的控件和控件組。

在您的情況下，表單將包含兩個文本字段，一個文本區域和兩個按鈕：發送和關閉。請注意，關閉按鈕使用hide（）方法關閉窗口。發送按鈕不執行任何操作，因為您的示例沒有后端。在使用click屬性的實際應用程序中，可以添加發送消息的代碼。

將創建表單的代碼添加到窗口代碼后，可以測試結果。單擊創建按鈕，屏幕上將出現一個新窗口：

Wrapping up

使用Webix，程序員可以盡可能少地為Web應用程序創建用戶界面。使用Layout組件，您可以快速構建復雜的布局。易用性允許程序員嘗試創建不同變體的模型，以確定哪些組件將保證更好的用戶體驗。

前端開發程序員需要做的就是在頁面上添加可用的數據組件，定義要使用的數據組件，并為其設置數據源。之后，程序員可以繼續進行配置過程，直到達到理想的結果。