webix框架中文版_使用Webix框架创建电子邮件客户端的十步指南

webix框架中文版

在本文中，我将讨论在免费的Webix框架的帮助下为电子邮件客户端创建用户界面的过程。这是一个JavaScript和HTML5框架，用于开发具有响应用户界面的跨平台，数据丰富的Web应用程序。该库快速，轻巧且易于学习。与AngularJS，Vue.js和jQuery集成可能非常方便。

该库的标准版本根据GNU GPLv3许可证发行。

Webix如何工作

让我们看一下如何开始使用Webix。下载软件包后，应在页面上添加所需JavaScript和CSS文件。您可以在codebase文件夹中找到它们：

< link rel = "stylesheet" href = "codebase/webix.css" type = "text/css" >

        < script src = "codebase/webix.js" type = "text/javascript" ></ script >

Now you can start creating something useful :

webix. ready ( function ( ) { webix. ui ( { /* app definition */ } ) ; } ) ;

不需要在您的应用程序中使用webix.ready ，但这有助于确保在页面完全加载后执行代码（作为onDocumentReady事件和onlload（）方法的替代方法）。

要在页面上添加小部件，应使用view属性。其值定义将使用的窗口小部件。使用其他属性，您可以定义此小部件的外观和工作方式。例如，要创建一个图表：

webix. ready ( function ( ) {

        webix. ui ( {

        /* we need a chart */

        view : "chart" ,

        /* within this container */

        container : "my_chart" ,

        /* of this type */

        type : "bar" ,

        /* here's the data for our chart */

        data : sales ,

        /* more properties*/

        } ) ;

        } ) ;

要在页面上添加多个小部件，您必须创建一个布局。我将在本文的实际部分中讨论它。

`创建电子邮件客户端`

为了更好地了解Webix的工作原理以及可以使用它的功能，您将为电子邮件客户端创建一个用户界面。它是这样的：

因为Webix是可以与任何后端集成的完全客户端框架，所以您将只专注于用户界面。

`步骤1：版面建立`

在您的应用程序中添加任何组件之前，您必须定义其布局。布局组件允许将页面分为行和列。您可以创建嵌套的行和列，设置它们的相对或绝对大小，或者使您的用户可以手动更改创建的单元格的大小。

关于Layout组件的最好的事情是，创建的页面布局是一堆DIV容器，因此您可以在Webix小部件旁边使用任何第三方组件。

让我们来看看一切如何工作。如果要创建一个由三行组成的应用程序，则可以使用以下代码：

webix. ui ( {

        rows : [

        { /* 1st row components */ } ,

        { /* 2nd row components */ } ,

        { /* 3rd row components */ }

        ]

        } ) ;

要创建三列布局，您可以使用几乎相同的代码。您需要做的就是用列替换行：

webix. ui ( {

        cols : [

        { /* 1st column components */ } ,

        { /* 2nd column components */ } ,

        { /* 3rd column components */ }

        ]

        } ) ;

看起来很简单，对吧？让我们继续一个更复杂的示例：嵌套单元格。您可以通过以下方式获得它们：

webix. ui ( {

        rows : [

        { /* 1st row components */ } ,

        { /* 2nd row components */ } ,

        /* 3rd row consists of two columns */

        { cols : [

        { /* 1st column components */ } ,

        { /* 2nd column components */ } ,

        ] }

        ]

        } ) ;

结果如下所示：

使用嵌套行和列的不同组合，您可以根据项目需要创建复杂的布局。使用Resizer，您可以拖动单元格边框之一，因此用户将能够手动调整其大小。

结合到目前为止所学的知识，您可以为电子邮件客户端创建布局。您将使用Template组件向每个单元格添加标签，这样您就不会忘记最近要放置在哪个组件上。该模板允许呈现纯文本或单个数据记录。

这是必需的代码：

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" }

        ] }

        ]  

        }

        ]

        } ) ;

如您所见，您已经使用height和width属性来定义所需的大小。这里的新属性是type 。它定义了布局边框。

如果使用clean值，则将获得无边界的单元格。使用宽值，您将获得带有边框和兄弟姐妹之间较大空格的单元格。

让我们检查一下结果：

这看起来很有希望。现在，您的任务是用实际组件替换模板。

`步骤2：添加工具栏`

让我们从工具栏组件开始。它可以包含各种元素，例如按钮或下拉菜单。

您还记得，要使用Webix创建组件，必须使用以下视图：“ component_name”代码行。 elements属性允许选择工具栏的内容。

让我们为您的应用添加标签，以便每个用户都知道自己正在处理的内容：

{

        view : "toolbar" ,

        height : 45 ,

        elements : [

        { view : "label" ,

        label : "My Email Manager" }

        ]

        } ,

现在，您必须将此代码添加到应用程序。您必须用代码替换以前创建的模板。

之前：

webix. ui ( {

        rows : [

        /* 1st row. Tollbar */

        {

        template : "Toolbar" ,

        height : 45 ,

        } ,

        /* 2nd row. The rest of application */

        {

        type : "wide" , cols : [

        < ... >

        } ) ;

之后：

webix. ui ( {

        rows : [

        /* 1st row. Tollbar */

        {

        view : "toolbar" ,

        height : 45 ,

        elements : [

        { view : "label" ,

        label : "My Email Manager" }

        ]

        } ;

        /* 2nd row. The rest of application */

        {

        type : "wide" , cols : [

        < ... >

        } ) ;

让我们检查一下结果：

这看起来更好，所以让我们继续前进。如果要在工具栏上添加更多元素，可以查看以下文档页面。

`步骤3：添加文件夹树`

您将使用Tree小部件完成此任务。 data属性定义文件夹树的结构。

这是代码：

{

        view : "tree" ,

        id : "my_tree" ,

        select : true ,

        width : 280 ,

        data : [

        { id : "1" , value : "Inbox" } ,

        { id : "2" , value : "Sent" } ,

        { id : "3" , value : "Drafts" } ,

        { id : "4" , value : "Trash" } ,

        { id : "5" , value : "Contact Groups" , open : true , data : [

        { id : "5-1" , value : "Friends" } ,

        { id : "5-2" , value : "Family" }

        ]

        }

        ]

        } ;

每个树节点都有一个唯一的ID和一个将在屏幕上显示的值。联系人组节点有两个子节点。

open：true属性将打开此分支。除了描述的属性外，请注意以下代码行： select：true 。它允许选择树项。现在，您可以使用以下代码替换模板：“ Tree”。

让我们检查一下结果：

一切正常。

`步骤4：添加日历`

现在，您可以将带有时间选择器的日历添加到您的应用中。当您要填写表格或创建新事件时，此便捷的交互式小部件可以选择必要的时间和日期。此小部件用于创建GanttPRO应用，该应用允许用户使用在线甘特图：

这将不是一个艰巨的任务：

{

        view : "calendar" ,

        timepicker : true

        }

使用此代码替换模板“ Calendar”后，您将获得以下结果：

`步骤5：使用DataTable组件显示电子邮件列表`

现在，您已经准备好将非常简单的组件添加到应用程序中，从而可以进行一些更复杂的操作。

您将使用DataTable组件显示电子邮件列表。它是一个高级数据组件，支持许多功能，例如过滤，排序，分页等。它支持不同的格式，例如XML，JSON和CSV。作为此高度可配置组件如何在实际Web应用程序中工作的示例，请查看XL Reporting ，该工具可简化财务报告：

对于此示例，您将使用JSON对象作为数据源：

var data = [

        { id : 1 , folder : 1 , name : "Alex Stern" ,

        email : "alex@spam.com" , subject : "Invitation" ,

        date : "25/07/2016 12:30:20" } ,

{ id : 2 , folder : 1 , name : "Sofia O'Neal" , email : "sofia@spam.com" , subject : "Report" , date : "25/07/2016 16:10:07" } ,

/* more info here */ { id : 11 , folder : 2 , name : "Alex Stern" , email : "alex@spam.com" , subject : "Re: Forecast" , date : "25/07/2016 14:10:45" } ,

{ id : 12 , folder : 2 , name : "Sofia O'Neal" , email : "sofia@spam.com" , subject : "Party invitation" , date : "25/07/2016 17:05:10" } ] ;

如您所见，电子邮件列表将包含名称，电子邮件地址，主题和日期等信息。

请注意，您还使用了folder属性。其值确定特定电子邮件存储在哪个文件夹中。在您的情况文件夹中：1表示电子邮件存储在“ 收件箱”文件夹中。文件夹：2属性告诉Webix电子邮件已存储在“已发送”文件夹中。稍后，您将学习如何使您的应用程序仅显示与所选文件夹相关的那些电子邮件。

现在，您可以创建一个新的DataTable组件：

{

        view : "datatable" ,

        data : data ,

        scrollX : false ,

        columns : [

        /* checkboxes with the master checkbox in the header */

        { id : "checked" , header : { content : "masterCheckbox" } ,

        template : "{common.checkbox()}" , width : 40 } ,

        { id : "name" , width : 250 , header : "From" } ,

        { id : "subject" , header : "Subject" , fillspace : true } ,

        { id : "date" , header : "Date" , width : 150 }

        ]

        } ,

scrollX：false代码行禁用水平滚动条。 columns属性定义表将具有的列。第一列仅包含复选框。标头：{content：“ masterCheckbox”}用主复选框定义标头，可用于选择所有可用电子邮件。使用模板： “ {common.checkbox（）}”，您可以向此列的每个单元格添加一个复选框。

其他列仅显示来自数据源的信息。 id属性的值定义将在列中显示哪些数据（名称，主题和日期）。 header属性将文本添加到标题。注意fillspace：true属性。您已使用它来迫使列变宽以填充未使用的空间。

现在，将模板：“电子邮件列表”替换为上面的代码，您将获得如下内容：

`步骤6：使用数据绑定`

现在，您必须编写一些代码来帮助Tree和DataTable一起工作。

您还记得，在DataTable创建期间使用的数据数组包含来自两个不同文件夹的电子邮件： Inbox和Sent 。您的任务是使DataTable组件根据所选文件夹显示正确的电子邮件。为此，可以使用称为数据绑定的机制。

数据绑定是通过bind（）函数实现的。应该从属组件调用is，并将主组件作为参数。由于您希望DataTable根据Tree的选定节点更改其内容，因此第一个组件将是从属组件，第二个组件将成为主组件。

除了绑定数据之外，您还必须告诉您的应用程序，应在应用程序加载后选择树的第一个节点。为了达到目标，您应该将相应的代码放入ready方法中，如下所示：

webix. ready ( function ( ) {

        webix. ui ( {

        /* UI Definition */

        } ) ;

/* data binding */ $$ ( "my_datatable" ) . bind ( $$ ( "my_tree" ) , function ( obj , filter ) { return obj. folder == filter. id ; } ) ; /* making the first node of the tree selected */ $$ ( "my_tree" ) . select ( 1 ) ;

} ) ;

现在，电子邮件列表的内容将根据所选文件夹进行更改：

`步骤7：添加按钮`

这并不是一件艰巨的任务，因为您已经了解了创建组件所需的属性。您必须创建三个按钮： Reply ， Create和Delete 。

这是您应该使用的代码：

{

        view : "button" ,

        label : "Reply" ,

        width : 95

        } ;

{ view : "button" , label : "Create" , width : 95 } ;

{ view : "button" , label : "Delete" , width : 95 } ;

用实际的代码替换模板后，您将获得以下信息：

用户可能很难在其他按钮中找到右键。为了简化此任务，您可以在按钮上添加图标。

Webix使用Font Awesome集合中的图标。这些图标已获得MIT许可，并且有很多可供选择。

要将常规按钮变成带有图标的按钮，必须添加两个属性：

类型将定义您将使用哪种按钮
图标允许从集合中选择适当的按钮

例如，如果要将信封的图标添加到“ 创建”按钮，则可以使用以下属性组合：

type : "iconButton" ,

        icon : "envelope"

使用相同的方法，可以向所有按钮添加图标：

`步骤8：显示电子邮件内容`

因为电子邮件的正文是由HTML代码显示的，所以可以使用模板组件来显示它。用以下内容替换模板：“消息”代码：

id : "details" ,

        template : "No message selected"

如果没有选择的电子邮件，则用户将看到以下消息：未选择消息。您可以使用其id属性的值来操纵该组件。例如，您有一个包含消息的变量：


var message = "Lorem ipsum dolor sit amet" ;

要在屏幕上呈现此消息，可以使用以下代码：

$$ ( "details" ) . define ( "template" , message ) ;

        $$ ( "details" ) . render ( ) ;

`步骤9.使用Windows`

最后一步是提供创建新消息的可能性。您将使用Window组件执行此任务。

您已经具有“ 创建”按钮，但不执行任何操作。让我们更改它：

view : "button" ,

        label : "Create" ,

        type : "iconButton" ,

        icon : "envelope" ,

        width : 95 ,

        /* event listener */

        click : function ( ) {

        $$ ( "my_win" ) . getBody ( ) . clear ( ) ;

        $$ ( "my_win" ) . show ( ) ;

        }

接下来，用户单击此按钮后，Webix将在屏幕上显示一个具有id：“ my_win”属性的窗口。该窗口将包含用于发送新电子邮件的表格。在显示之前，您必须从中删除以前插入的数据。这就是为什么您使用clear（）方法的原因。

现在，您将定义此窗口的外观。对于此任务，您必须使用新的webix.ui（）构造函数：

webix. ui ( {

        view : "window" ,

        /* movable window */

        move : true ,

        id : "my_win" ,

        width : 400 ,

        /* window title */

        head : "New Message" ,

        position : "center" ,

        body : {

        /* there will be a form here */

        }

        } ) ;

move属性允许启用移动窗口的可能性。使用head属性，可以定义窗口的标题。位置：“中心”代码行告诉Webix新窗口应出现在页面中心。主体部分可以包含任何视图。在您的情况下，它将是一种形式。

`步骤10：将窗体添加到窗口`

表单小部件可帮助您轻松创建Web表单。

让我们检查以下示例：

view : "form" ,

        /* hide the borders */

        borderless : true ,

        /* form controls */

        elements : [

        { view : "text" , label : 'To:' , name : "address" } ,

        { view : "text" , label : 'Subject:' , name : "subject" } ,

        { view : "textarea" , height : 200 , label : "Message:" ,

        name : "message" } ,

        { cols : [

        { view : "button" , value : "Send" } ,

        { view : "button" , value : "Close" ,

        click : ( "$$('my_win').hide();" ) }

        ] } ,

        ] ,

无边界属性允许隐藏表单的边框。表单最重要的部分是elements属性。它定义了垂直排列的控件和控件组的数组。

在您的情况下，表单将包含两个文本字段，一个文本区域和两个按钮： Send和Close 。请注意，“ 关闭”按钮使用hide（）方法关闭窗口。 “ 发送”按钮没有任何作用，因为您的示例没有后端部分。在使用click属性的实际应用程序中，您可以添加将发送消息的代码。

将创建表单的代码添加到窗口代码后，可以测试结果。单击创建按钮，一个新窗口将出现在屏幕上：

`结语`

使用Webix，您可以轻松创建Web应用程序的用户界面。使用布局组件，您可以快速构建复杂的布局。易用性使您可以尝试创建不同的样机变体，以确定哪个组件放置将保证更好的用户体验。

在页面上添加可用数据组件之一所需要做的就是定义要使用的组件并为其设置数据源。之后，您可以继续进行配置过程，直到获得理想的结果。

翻译自: https://opensource.com/article/17/5/10-step-guide-webix-framework

webix框架中文版