组件体系

在 FlexUE 框架中，组件 是一种对界面样式、人机交互、数据和服务交互的封装形式，目的是在功能上达到高内聚性、可组合性。 FlexUE 组件的语义体系包含以下几种类型的组件：

• 基本控件
  • 输入控件（字段：文本、数值、时间日期、布尔等）
  • 显示控件（标签、图片等）
  • 修饰控件（分隔符、图标等）
• 交互组件
  • 容器组件（布局、对话框、视图、页面等）
  • 数据组件（表单、表单面板、表格、表格面板、卡表面板等）
  • 操作组件（操作按钮、操作栏、导航菜单）
  • 事件组件（事件源、事件监听）
• 服务组件
  • HTTP服务
  • 数据源

不同类型的组件被设计成有清晰逻辑边界、且可以相互组合的功能单元：

• 基本控件

  基本控件 是最基础的界面元素，提供最基础的功能，内部不能组合其它的组件，本身只能被其它的组件组合。

• 交互组件

  交互组件 是高级的界面元素，能够把一组 基本控件、交互组件、服务组件 组合到一起成为新的交互组件 。

  • 容器组件 用于对界面功能区域的划分和定位，能够将其它的组件组织起来形成完整应用。

  • 数据组件 用于实现对数据进行加载、呈现、交互和编辑等，这是实现功能逻辑的核心。

  • 操作组件 用于接受交互操作以触发界面状态改变或者数据处理。

• 服务组件

  服务组件 是进行数据交换和数据处理的组件，能够被 交互组件 组合到一起。

  • HTTP服务 用于与后端服务通过 HTTP 协议进行通讯，是数据源的一种数据提供者。
  • 数据源 用于封装可复用的数据模型与数据提供者，可以被 交互组件 进行组合装配。

组件化开发过程

FlexUE 的组件体系提供了一种装配式的组件化开发方式——从面向功能的视角出发进行组件装配，而不必关注对界面样式编码实现。这种开发方式彻底地分离了 功能逻辑关注点 和 界面样式关注点 ，使得在编码实现时 功能逻辑 部分与 界面样式 部分是松耦合的两个独立过程。

FlexUE的装配式组件化开发方式是对前端应用架构和工程化方面的重大改变，能够大大提升前端应用开发的效率和质量。在具体的开发实践中，FlexUE的装配式组件化开发包含以下内容：

• 功能逻辑 的开发过程

  主要以 交互组件 包含以下几个方面：

  • 在模板中组装 交互组件 （ 模板 是指 .vue 文件中的 <template> 或者引用的 html 文件）。
  • 定义 交互模型元数据 。
  • 关联 交互组件 和对应的 交互模型元数据 。
  • 定义 服务组件，包括 数据源 和 HTTP服务 。
  • 绑定 交互组件 与 服务组件 。

• 界面样式 的开发过程实际上是对界面的个性化定制——因为组件都有默认呈现的主题样式，因而对界面样式的开发并不是一个 FlexUE 应用开发必须的过程。如果需要定制 界面样式 ，可以有以下几种方式：

  • 在模板中设置交互组件中与样式相关的属性(Attribute)
  • 在样式文件(.css)修改默认的层叠样式表属性
  • 设置全局的主题(theme)
  • 通过组件预设的插槽（slot）定制组件

《开发向导》系列文档将以示例的方式介绍组件开发过程，而关于组件的更详细的文档请参考 API引用 。