📚 课程目录第4章 Designer 开发环境

4. Designer 开发环境

Ignition Perspective 的 Designer 是开发 HMI 与 SCADA 画面的核心工作台。它并不是一个“画图工具”，而是一个把项目结构、组件实例、属性数据、绑定表达式与脚本逻辑统一组织起来的开发环境。理解 Designer 中几个关键面板的职责边界与协作方式，是后续所有画面开发、数据绑定和交互逻辑的基础。

本节的核心目标：能说清项目浏览器、组件面板、属性面板、绑定编辑器、脚本编辑器各自“管什么”，并能在实际开发中按正确顺序使用它们。

一、Designer 五大核心面板的职责划分

Designer 的界面看似复杂，但真正高频使用的核心区域只有五个。它们分别对应开发过程中的不同阶段：找资源、放组件、调属性、连数据、写逻辑。

面板	核心职责	典型操作	使用阶段
项目浏览器 Project Browser	管理项目资源树	新建视图、打开窗口、查看脚本库、模板、命名查询	开发起点与资源定位
组件面板 Component Palette	提供可拖拽的组件库	拖入按钮、标签、表格、图表、容器	画面搭建
属性面板 Property Editor	查看与修改选中对象的属性	改文本、颜色、尺寸、位置、样式、props	外观与行为调整
绑定编辑器 Binding Editor	把属性连接到数据源或表达式	Tag 绑定、表达式绑定、查询绑定、属性绑定	数据驱动
脚本编辑器 Script Editor	编写事件脚本与转换逻辑	onClick、onStartup、消息处理、值转换	交互与逻辑控制

这五个面板不是孤立的。一个典型的数据驱动画面，开发顺序通常是：在项目浏览器中创建视图 → 从组件面板拖入组件 → 在属性面板调整外观 → 通过绑定编辑器连接数据 → 在脚本编辑器中补充交互逻辑。

二、项目浏览器：项目资源的“总入口”

项目浏览器以树形结构展示整个 Gateway 项目中的资源。Perspective 开发中最常接触的节点包括：

Views：所有 Perspective 视图，按文件夹组织，是画面开发的主战场。
Page Configuration：页面配置，定义导航、页头、页脚和权限。
Scripting：项目脚本库，包括 Gateway 事件脚本、消息处理器、会话脚本等。
Named Queries：命名查询，供绑定和脚本复用。
Templates：可复用视图模板，用于统一风格和批量维护。

建议在项目浏览器中按“功能模块 + 视图类型”建立文件夹，例如 Overview/、Alarms/、Trends/、Popup/。视图命名使用英文驼峰或下划线，避免中文路径导致脚本引用困难。

三、组件面板与属性面板：从“搭出来”到“调准确”

组件面板按类别组织 Perspective 组件，常见分类包括 Display、Input、Table、Chart、Container、Navigation 等。拖拽组件到视图画布后，组件会出现在视图的组件树中，并自动成为当前选中对象。

属性面板此时显示该组件的全部属性。Perspective 的属性体系分为几个重要层次：

props：组件对外暴露的属性，如 text、value、data、style。
position：位置与尺寸，包括 x、y、width、height、basis。
meta：元信息，如 name、visible、enabled。
custom：开发者自定义属性，用于存放中间变量或配置参数。
events：事件配置入口，如 onClick、onStartup、onChange。

属性面板支持直接输入、下拉选择、颜色选择器、表达式输入等多种编辑方式。对于需要动态计算的属性，可以点击属性右侧的绑定图标进入绑定编辑器。

四、绑定编辑器：让属性“活”起来

绑定编辑器是 Perspective 数据驱动的核心。它把组件属性与外部数据源建立连接，使画面不再依赖手工赋值。常见绑定类型包括：

Tag 绑定：直接读取或写入 Ignition Tag，适合实时值、报警状态、设备参数。
Expression 绑定：使用表达式语言计算，如 {[default]Tank/Level} * 100。
Query 绑定：执行命名查询或 SQL 查询，返回数据集，适合表格、图表。
Property 绑定：引用同一视图内其他组件的属性，实现联动。
Session 绑定：读取当前会话信息，如用户名、角色、语言。

绑定编辑器通常提供“绑定类型选择 → 参数配置 → 预览结果”的流程。对于复杂绑定，还可以设置轮询速率、启用双向写入、配置回退值。

// Expression 绑定示例：根据液位返回颜色
if({[default]Tank/Level} > 80, '#E74C3C',
   if({[default]Tank/Level} > 50, '#F39C12', '#2ECC71'))

五、脚本编辑器：处理绑定无法表达的交互逻辑

脚本编辑器用于编写事件驱动逻辑。Perspective 中常见的脚本入口包括组件事件、视图事件、页面事件和会话事件。脚本语言为 Jython，可以调用系统函数、Tag 读写、消息处理、数据库访问等。

# 按钮 onClick 事件示例
def runAction(self, event):
    tagPath = "[default]Line1/StartCmd"
    system.tag.writeBlocking([tagPath], [True])
    system.perspective.sendMessage("lineStarted", payload={"line": "Line1"})

脚本编辑器通常与绑定编辑器配合使用：能用绑定表达的，优先用绑定；绑定无法表达的复杂判断、循环、消息通信、数据库写入，再放入脚本。这样可维护性最好，也便于后续排障。

常见误区：把所有逻辑都塞进脚本，导致属性面板中看不到数据来源，后期维护困难。正确做法是“绑定优先、脚本补充”，并给自定义属性和脚本加上清晰注释。

六、面板协作关系图解

下图展示五个核心面板在一次典型开发流程中的协作关系：项目浏览器提供资源入口，组件面板提供画面元素，属性面板负责外观与行为，绑定编辑器连接数据，脚本编辑器补充交互逻辑。

七、实操建议与常见排障

在实际项目中，建议遵循以下操作习惯：

先在项目浏览器中规划好视图目录，再开始拖组件，避免后期大量移动。
组件命名使用有意义的名称，如 btnStartLine1，不要保留 Button_0。
优先使用绑定而不是脚本赋值，让数据来源在属性面板中可见。
脚本中读写 Tag 时使用完整路径，并处理写入失败的情况。
复杂表达式拆分为自定义属性，便于调试和复用。

排障小技巧：如果画面数据不刷新，先检查绑定编辑器的预览值是否正常；如果绑定正常但界面无变化，检查属性是否被脚本覆盖；如果脚本未执行，检查事件是否绑定到正确的组件和事件类型。

掌握这五个面板的职责与协作方式后，Perspective 开发就从“凭感觉拖控件”转变为“有结构、有数据、有逻辑”的工程化过程。后续的视图设计、参数传递、页面导航和报警管理，都会建立在这一套开发环境的使用习惯之上。