技术文章

界面控制

控件是用于与用户交互的小界面元素。您可以将它们放入窗体或工具栏上，或者只是将它们用作独立的布局元素。

最明显的控件示例是按钮。按钮允许用户在 Web 应用程序中导航、提交表单和调用各种操作。

标准版控件

目前标准版提供以下控件：

• 按钮

• 复选框

• Colorpicker，带有用于选择特定颜色的颜色板的输入

• Combo，一个可编辑的输入字段，带有一个包含选择选项的弹出窗口

• 计数器，用于输入数值的旋转框

• Datepicker，带有用于选择日期的日历的输入

• Fieldset，用于对相同用途的控件进行分组的容器

• FormInput，一个用于在表单中以通用样式呈现 UI 小部件的容器

• 图标，带图标的可点击控件

• Label，纯文本标签

• Radio，用于从多个选项中选择单个项目的控件

• RichSelect，一个不可编辑的输入字段，带有一个包含选择选项的弹出窗口

• 搜索，带有“搜索”图标的输入

• Select，HTML select 的包装器

• Segmented，一个按钮分成几个部分

• Slider，带有可拖动标记的控件，用于输入数值

• Tabbar，一个在应用程序部分之间导航的切换控件

• 文本，一个简单的输入框

• Textarea，一个多行输入框

• Toggle，一个双态按钮

• RichText，用于输入和格式化文本的编辑器

• Uploader，一个文件上传的控件

专业版控件

Webix 专业版将以下控件添加到上述列表中：

• DateRangePicker，带有相关日历的输入，用于选择日期范围

• Multicombo，一个可编辑的输入字段，用于从相关弹出窗口中选择多个项目

• Multiselect，一个不可编辑的输入字段，用于从相关弹出窗口中选择多个项目

• 多文本，一组用于输入多个文本值的输入字段

• RangeSlider，用于输入值范围的 Slider 的高级版本

用户界面小部件

UI Widget 是用户界面不可或缺的一部分。与控件不同，它是一个具有特定用途的独立模块，例如：

• 数据可视化（JavaScript 图表、组织图）；

• 数据管理（JavaScript Table，JavaScript List）；

• 显示日期和时间（JavaScript 日历）；

• 组织其他小部件和控件（JavaScript 表单、JavaScript 布局）。

以 JavaScript 图表为例。它们的目的是以图形形式呈现数据。

现场演示 >>

另一个例子是 JavaScript 表单。它的主要目标是帮助用户与 Web 应用程序共享他们的信息：

现场演示 >>

标准版 UI 小部件

Webix JavaScript 库在标准版中包含许多小部件：

• 手风琴，可折叠面板列表

• Double List，两部分列表

• 显示日期和时间的日历

• 用于排列多个应用程序部分的旋转木马

• 数据可视化图表

• 用于显示调色板的调色板

• 上下文，通过鼠标右键单击打开的弹出窗口

• 上下文菜单，一个带有菜单的弹出窗口，通过单击鼠标右键打开

• 用于高级数据管理的数据表

• 用于数据管理的数据视图

• 用于排列输入控件的表单

• Grouplist，分组数据集的列表

• Htmlform，一个简单的 HTML 表单的容器

• iframe，iframe 的容器

• 布局，小部件和控件的容器

• 用于显示普通数据集的列表

• 用于在应用程序部分之间导航的菜单

• 用于排列应用程序部分的多视图和选项卡视图

• Pager，一个辅助组件，用于在数据管理小部件中启用分页

• Popup，一个简单的窗口

• 属性，用于管理简单数据

• 用于调整应用程序部件大小的 Resizer

• Scrollview，一个长的可滚动应用程序部分的容器

• 侧边菜单，导航面板

• Spacer，空应用程序部分的占位符

• 模板、文本或 HTML 包装器

• 用于排列按钮和类似控件的工具栏

• 工具提示，一个小的弹出提示

• 用于管理分层数据的树

• 用于分层数据高级管理的树表

• 单元列表，包含相关数据项部分的列表

• Video 用于播放视频文件

• 窗口，高级窗口

• 地图，具有数据管理逻辑的谷歌地图包装器

专业版用户界面小部件

专业版在上面的列表中添加了另外 10 个小部件：

• 用于显示代码的条形码

• 用于显示动态数据的子弹图

• 用于显示日期和时间段的 Daterange

• 用于在 Web 应用程序中呈现 Excel 数据的 Excel Viewer

• 显示某一参数动态的仪表

• 用于可视化层次结构的组织图

• 用于在 Web 应用程序中呈现 PDF 文件的 PDF 查看器

• Portlet，具有可拖动部分的布局

• RangeChart，带有可拖动框架的图表，用于详细数据可视化

• 用于可视化分层数据的 TreeMap

复杂的 UI 小部件

Webix 术语中的复杂小部件提供扩展功能。放在网页上，它们看起来就像完整的应用程序，并且以相同的方式执行。复杂的小部件由多个 Webix 小部件和控件组成，但无需在配置中调整它们，因为一切都开箱即用。

例如，使用 SpreadSheet UI 小部件，您可以创建一个以 Excel 方式处理表格数据的 Web 应用程序，但初始化代码非常简洁：

网盘。ui ( { view : "spreadsheet" , data : base_data } ) ;

你会在浏览器选项卡中获得精彩的应用程序：

现场演示 >>

另一个例子是看板。它的初始化代码更加扩展，因为您需要为单独的看板列表提供设置，但思想保持不变。

网盘。ui ( {
   view : "kanban" , type : "space" , cols : [
      { header : "Backlog" , body : { view : "kanbanlist" , status : "new" } } ,
      { header : "In Progress" ,正文：{视图：“看板列表” ，状态：“工作” } } ，
      标头：“完成” ，正文：{视图：“看板列表” ，状态：“完成” } }
   ] ，
   数据： base_task_set
} ）；

现场演示 >>

当然，复杂的小部件不是黑盒子。它们可以在一定程度上进行配置和定制，以满足开发人员的需求。

Complex Widgets 仅在专业版中可用。这是他们的名单：

• 电子表格

• 数据透视表

• 数据透视图

• 移动调度器

• 看板

• 文件管理器

成分

我想，“组件”可能是 Webix 文档的关键词 :)，但它如何与复杂和简单的小部件和控件相关联？简而言之，组件是一个通用概念，可以很容易地替代开发人员聚会中的“小部件”或“控件”。它是您使用的工具的抽象概念，而 UI 小部件是其实际实现。

长话短说……

这是一份包含主要发现的小备忘录：

• 控件总是以与用户的交互为前提。它们很小，可点击并且主要是视觉的。将操作附加到它们的是开发人员。

• 小部件是用户界面的组成部分。他们有一个特定的目标和许多特定的功能来实现它。

• 从开发人员的角度来看，组件充当小部件的别名

• 复杂的小部件是自给自足的应用程序，可以独立使用，也可以嵌入到 Webix 或 HTML 布局中。

从现在开始，可能的误解将不再使您感到困惑，您将在 Webix 的支持下自信地在 Web 应用程序世界中追求自己的目标。