本文将为您介绍可视化搭建系统的新建工程、可视化搭建等基本操作。
新建工程
- 进入App Studio页面，单击工作空间页面的新建代码工程。
- 填写新建项目对话框中的工程名和工程描述，选择运行环境为appstudio。
- 配置完成后，单击提交。
- 打开santa/pages目录。
- 单击任意一个.santa文件进入可视化搭建。
您也可以右键单击pages，选择，基于模板进行开发。
可视化搭建
可视化搭建页面主要由组件列表和操作面板组成。
- 组件列表
组件列表为您展示可视化搭建系统中，所有的系统预设组件，包括布局、基础、表单、图表和高级等组件。
展开组件列表，拖拽某一个组件至可视化操作面板，单击该组件，即可在右侧进行组件配置。
- 操作面板
操作面板包括撤销、重做、预览、代码模式、全局样式、导航配置、全局数据流配置、发布为模板和保存等操作。
单击操作面板中的导航配置图标，即可打开导航配置页面进行配置，详情请参见导航配置。
配置全局数据流
配置全局数据流的详情请参见全局数据流。
- 配置组件属性
组件属性配置面板主要负责可视化的方式配置组件属性。
根据组件的属性配置规则，组件属性配置面板将会生成一个可视化表单，让您输入组件的属性配置。在组件属性配置表单中更改组件属性后，可视化操作区域将会根据接收到的组件属性，进行重新渲染。您可以实时查看组件不同属性的渲染结果。
- 配置组件样式
组件样式面板主要负责组件样式的相关设置。
组件样式配置面板将会生成一个通用的样式配置可视化页面，您可以基于该面板定制组件基本的外观样式，包括布局、文字、背景、边框、效果等常用样式配置。
在组件样式配置面板中添加、修改组件样式，可视化搭建系统将会收集所有的样式设置到组件上，可视化操作区域将会根据新的样式设置重新渲染对应组件，您可以实时查看配置后的组件效果。
- 配置组件联动高级
组件联动高级设置面板主要负责组件之间的联动设置。
单击可视化操作区域中的某一个组件，选中高级面板。高级设置面板中，将会在左侧列出当前选中组件对应的组件属性，单击右侧的放大镜按钮选择需要关联的另一个组件。
选中需要关联的另一个组件后，高级设置面板右侧将会出现对应的组件属性。
- 单击左侧属性列表中的某一个属性，连线至右侧属性列表中的另一个属性。
该操作将会实现两个组件之间的属性联动，左侧组件的searchParams参数变更将会及时传递到右侧组件的requestParams参数，从而实现两个组件基于属性之间的联动配置。
代码模式
代码模式提供了一种更高级的方式来满足更复杂的交互场景的需求，详情请参见代码模式。
保存、预览、运行和热部署
详情请参见保存、预览、运行和热部署。