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

Webix的工作原理

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

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

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

要在頁(yè)面上添加多個(gè)小部件，就必須創(chuàng)建一個(gè)布局（這將在下文中詳述）。

創(chuàng)建電子郵件客戶端

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

因?yàn)閃ebix是一個(gè)完全可以與任何后端集成的客戶端框架，所以程序員只需要集中在用戶界面上就可以了。

步驟1：創(chuàng)建布局

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

布局組件最好的一點(diǎn)是，創(chuàng)建的頁(yè)面布局是一堆DIV容器，以便程序員可以在Webix小部件旁邊使用任何第三方組件。

讓我們來看看一切如何運(yùn)作。如果要?jiǎng)?chuàng)建由三行組成的應(yīng)用程序，可以使用以下代碼：

要?jiǎng)?chuàng)建三列布局，可以使用幾乎相同的代碼，把行換成列就可以了：

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

結(jié)果如下：

使用嵌套行和列的不同組合，程序員可以創(chuàng)建項(xiàng)目需要的復(fù)雜布局。使用Resizer可以使單元格邊框可拖動(dòng)，用戶將能夠手動(dòng)調(diào)整其大小。

完成布局創(chuàng)建之后，程序員將使用模板組件為每個(gè)單元格添加標(biāo)簽，包括一些要放置的組件，該模板允許呈現(xiàn)純文本或單個(gè)數(shù)據(jù)記錄。

以下是代碼：

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

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

我們來檢查結(jié)果：

好，接下來的任務(wù)是用實(shí)際組件替換模板。

步驟2：添加工具欄

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

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

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

現(xiàn)在必須將此代碼添加到應(yīng)用程序中，以替換以前創(chuàng)建的模板。

之前：

之后：

我們來檢查結(jié)果：

步驟3：添加文件夾樹

程序員可使用Tree widget進(jìn)行此任務(wù)，data屬性定義了文件夾樹的結(jié)構(gòu)。以下是代碼：

每個(gè)樹節(jié)點(diǎn)都有唯一的ID和一個(gè)將顯示在屏幕上的值。“Contact Groups”節(jié)點(diǎn)具有兩個(gè)子節(jié)點(diǎn)。

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

我們來檢查結(jié)果：

步驟4：添加日歷

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

這不是一件艱巨的任務(wù)：

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

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

目前，應(yīng)用程序中已經(jīng)有了一些相當(dāng)簡(jiǎn)單的組件，因此可以繼續(xù)處理更復(fù)雜的內(nèi)容。

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

對(duì)于此示例，你需要使用JSON對(duì)象作為數(shù)據(jù)源：

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

請(qǐng)注意，你還使用了文件夾屬性，其值確定存儲(chǔ)特定電子郵件的文件夾。在您的實(shí)例folder：1表示郵件存儲(chǔ)在收件箱文件夾中。The folder：2表示W(wǎng)ebix在“發(fā)送”文件夾中存儲(chǔ)一個(gè)電子郵件。

現(xiàn)在可以創(chuàng)建一個(gè)新的DataTable組件：

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

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

現(xiàn)在，用上面的代碼替換模板：“Email list”，你會(huì)得到這樣的東西：

步驟6：使用數(shù)據(jù)綁定

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

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

使用bind（）函數(shù)實(shí)現(xiàn)數(shù)據(jù)綁定。應(yīng)該從從屬組件調(diào)用，并將主組件作為參數(shù)。由于您希望DataTable根據(jù)所選節(jié)點(diǎn)樹更改其內(nèi)容，因此第一個(gè)組件將是從屬組件，第二個(gè)組件將作為主節(jié)點(diǎn)。

除了綁定數(shù)據(jù)，你必須告訴你的應(yīng)用程序，應(yīng)該在應(yīng)用程序加載之后選擇樹的第一個(gè)節(jié)點(diǎn)。 要實(shí)現(xiàn)該目標(biāo)，您應(yīng)該將相應(yīng)的代碼放在ready方法中，如下所示：

現(xiàn)在，電子郵件列表的內(nèi)容將根據(jù)所選文件夾進(jìn)行更改：

步驟7：添加按鈕

這不是一件艱巨的任務(wù)，因?yàn)槟呀?jīng)學(xué)習(xí)了創(chuàng)建組件所需的屬性。您必須創(chuàng)建三個(gè)按鈕：Reply, Create和Delete。

這是您應(yīng)該使用的代碼：

用實(shí)際的代碼替換模板后，你會(huì)得到這樣的：

用戶可能難以找到其他按鈕。為了簡(jiǎn)化此任務(wù)，您可以給按鈕添加圖標(biāo)。

Webix使用Font Awesome集合中的圖標(biāo)。這些圖標(biāo)是根據(jù)麻省理工學(xué)院許可證獲得許可的，有很多選擇。

要將常規(guī)按鈕轉(zhuǎn)換成帶有圖標(biāo)的按鈕，您必須添加兩個(gè)屬性：

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

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

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

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

步驟8：顯示電子郵件內(nèi)容

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

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

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

步驟9.使用Windows

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

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

現(xiàn)在，您將定義此窗口的外觀。對(duì)于這個(gè)任務(wù)，你必須使用一個(gè)新的webix.ui（）構(gòu)造函數(shù)：

移動(dòng)屬性允許移動(dòng)窗口，使用head屬性，可以定義窗口的標(biāo)題。The position：“center”代碼行告訴Webix，新窗口應(yīng)該出現(xiàn)在頁(yè)面的中心。body部分可能包含任何視圖。

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

Form widget可以以最小的努力創(chuàng)建Web窗體。

我們來看下面的例子：

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

在您的情況下，表單將包含兩個(gè)文本字段，一個(gè)文本區(qū)域和兩個(gè)按鈕：發(fā)送和關(guān)閉。請(qǐng)注意，關(guān)閉按鈕使用hide（）方法關(guān)閉窗口。發(fā)送按鈕不執(zhí)行任何操作，因?yàn)槟氖纠龥]有后端。在使用click屬性的實(shí)際應(yīng)用程序中，可以添加發(fā)送消息的代碼。

將創(chuàng)建表單的代碼添加到窗口代碼后，可以測(cè)試結(jié)果。單擊創(chuàng)建按鈕，屏幕上將出現(xiàn)一個(gè)新窗口：

Wrapping up

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

前端開發(fā)程序員需要做的就是在頁(yè)面上添加可用的數(shù)據(jù)組件，定義要使用的數(shù)據(jù)組件，并為其設(shè)置數(shù)據(jù)源。之后，程序員可以繼續(xù)進(jìn)行配置過程，直到達(dá)到理想的結(jié)果。