在运用程序中不须要利用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组件，您可以快速构建繁芜的布局。易用性许可程序员考试测验创建不同变体的模型，以确定哪些组件将担保更好的用户体验。
前端开拓程序员须要做的便是在页面上添加可用的数据组件，定义要利用的数据组件，并为其设置数据源。之后，程序员可以连续进行配置过程，直到达到空想的结果。
