DirectSurface UIDirectSurface UI
开始使用
文档/开始使用

开始使用总览

本节面向第一次接触 DirectSurface UI 的开发者,目标是先建立正确的入口概念,再进入组件、布局、上下文、命令和性能文档。

你需要先理解什么

DirectSurface UI 不是 DOM 组件库。它通过 Canvas 绘制 UI,并用自己的 RenderObject、布局、命中测试、焦点、输入和弹窗体系管理交互。

一个典型业务应用由几部分组成:

  • 应用入口:创建应用、宿主和根窗口。
  • 页面或工作区:承载业务功能。
  • 布局组件:组织页面结构。
  • 控件组件:输入、表格、树、弹窗、工具栏等。
  • 上下文和命令:传递登录态、页面态、权限和按钮行为。
  • 运行时诊断:观察布局、绘制、性能和对象状态。

推荐阅读顺序

  1. 快速开始
  2. 应用挂载与生命周期
  3. 创建第一个页面
  4. 布局系统总览
  5. 组件清单
  6. 表单开发查询表格页
  7. 应用导航与工作区
  8. 应用上下文命令权限
  9. Vue、React 与现有应用集成
  10. 业务应用测试与调试
  11. RenderObject 基础布局约束
  12. 性能总览公共 API

开发方式

业务开发通常不需要直接继承底层 RenderObject。优先使用框架提供的组件和布局组合页面:

  • 页面结构使用 RenderStackPanelRenderDockPanelRenderGridPanel
  • 表单输入使用 RenderTextBoxRenderComboBoxRenderDatePicker
  • 大数据展示使用 RenderDataGridRenderTreeViewRenderTreeGrid
  • 多页面工作台使用 RenderTabbedWorkspaceRenderDockWorkspace

业务项目需要复用页面片段时,优先在自己的业务模块中组合公共组件;不要依赖包内未导出的实现。

文档约定

  • 所有正式文档只以 ds-ui 包入口导出的公共 API 为准。
  • 文档中的完整示例会明确列出所需的 ds-ui 导入;标为“片段”或使用 text 代码块的内容只用于解释概念。
  • 示例站中的页面封装、mock 服务和局部工具不是框架 API。
  • 业务代码不要从框架内部路径导入能力。

下一步

如果只是想跑起来,先读快速开始;如果应用由 Vue 或 React 承载,再读宿主框架集成。随后可按业务任务进入表单开发查询表格页应用导航与工作区