Page Designer 总体介绍
翻訳準備中このガイドは現在、簡体字中国語版のみ提供しています。翻訳版は今後追加されます。
Page Designer 是 Spark Designer 中用于组装业务页面的可视化设计器。你可以将组件放入画布，再通过属性、数据源和交互将它们连接成可运行的业务页面。
本章先建立整体认识。容器类控件的完整属性和操作说明，请继续查看 Containers；可以直接参考的场景搭建过程会收录在 Samples。
Page Designer 适合做什么
Page Designer 适合搭建与业务对象、流程和应用数据紧密相关的页面，例如：
- 订单、客户、设备等业务数据列表
- 新建、查看和编辑记录的表单页
- 用指标、表格和图表组合的工作台
- 由按钮、行操作、Dialog 和 Drawer 串联的业务操作界面
先建模型，再做页面
数据驱动页面通常会用到 Business Object、Data Source、DQL、Form 和 Object Action。先在 Objects Designer 中准备这些资产，再进入 Page Designer，组件选项会更完整。
进入页面设计器
- 打开 Spark Console，进入目标应用。
- 进入 Spark Designer 工作台。
- 确认顶部选择了正确的开发版本。已发布版本可能是只读的。
- 打开 Page Designer，新建页面或选择已有页面进入设计模式。
images/page-designer-entry.webp认识设计工作区
进入设计模式后，主要会用到以下区域：
| 区域 | 作用 |
|---|---|
| 顶部工具栏 | 显示当前页面，并提供返回、预览和保存操作 |
| 左侧组件面板 | 按分组搜索组件，点击或拖放到画布 |
| 左侧大纲 | 按层级查看当前页面的组件树，适合选择深层容器中的组件 |
| 中间画布 | 组装页面布局，选择并调整组件层级 |
| 右侧属性面板 | 编辑所选组件的基本属性、样式、数据源、子槽位和交互 |
images/page-designer-workspace.webp搭建第一个页面
一个稳定的页面通常按以下顺序搭建：
- 建立页面结构：先放入布局或容器组件，再放入表单、列表和按钮。
- 设置稳定名称：为需要被 FX 或交互引用的组件设置清晰、唯一的名称。
- 绑定数据：为 DataList、ProTable、Select 或 DataForm 选择模型、DQL 或远程数据源。
- 配置交互：把点击、查询、提交、页面跳转或 Component API 动作绑定到对应事件。
- 预览验证：在运行态检查数据、分页、权限、弹窗和不同窗口尺寸。
- 保存并发布：保存当前开发版本，再从 Spark Designer 工作台推送到目标环境。
组件、数据与交互
Page Designer 的三个核心概念是：
- Component 决定页面展示什么，例如 Input、Button、DataList 或 ProTable。
- Data Source 决定数据从哪里来，例如 Business Object 模型查询、DQL 或 Custom URL。
- Interaction 决定用户操作后发生什么，例如刷新列表、调用动作、打开 Dialog 或跳转页面。
当一个值需要来自其他组件、URL 参数、Page Context 或当前行时，使用属性旁的 FX 进行绑定。为避免后续维护困难，不要让多个控件使用相同名称。
images/page-designer-properties-and-interactions.webp建议的阅读顺序
- 在本章熟悉 Page Designer 工作区。
- 在 Containers 中阅读 DataList 或 ProTable 的专项指南。
- 在 Objects Designer · Data Source 中准备页面要读取的连接。
- 按照 Samples 中的场景清单组合页面。