创建完全自定义的图形表示
创建完全自定义的图形表示的过程与上一节中的“雨天或晴天”示例非常类似。提供四个步骤：
1. 创建可扩展 AbstractGraphicalComponent 类的自定义组件。
2. 为新组件创建客户端 JavaScript 呈现器。
3. 将条目添加到图形表示的枚举中。
4. 添加将枚举值与组件类相连接的 xconf 条目。
与上述简单的“雨天或晴天”示例之间的差异以及完整图形表示处于完全实现状态，组件类必须扩展 AbstractGraphicalComponent 并实现 GraphicalComponent (而非 MultiStateIconComponent 组件)，组件也用于处理客户端呈现。
创建自定义组件
自定义组件需要实现 GraphicalAttRepresentationHandler 中的一个 API、GraphicalComponent 中的三个 API 以及 GuiComponent 类中的一个 API。
• public boolean isValidForDatatype(final Class datatype);
此 GraphicalAttRepresentationHandler API 由“类型和属性管理”实用程序调用，以确定图形表示是否可用于具有指定数据类型的属性。例如，如果表示仅适用于整数值属性 (例如红绿灯示例)，则在数据类型为 java.lang.Long 或 false 时，API 将返回 true。
• public GraphicalComponent newInstance(Object value, Map<String, Object> metaData) throws WTException;
调用此 GraphicalComponent API 以创建图形组件的新实例。参数包括要显示的计算属性的值，以及在相应图形表示参数属性中指定的值的映射。此方法应返回其本身使用指定参数初始化的新实例。
• public JSONObject toJSON() throws WTException;
调用此 GraphicalComponent API，以将图形组件转换为从服务器传递到客户端 (用于呈现对象) 的 JSON 对象。要传递的内容完全由您选择。基础结构会将名为 "comparable" 的附加项添加到此方法返回的任何内容中。
• public String getJSRendererName();
调用此 GraphicalComponent API 以确定客户端呈现器的名称。此方法应返回实现客户端呈现器的 JavaScript 方法的完整名称。在下面的示例中，此函数将返回 "XyzCorp.pieChart.renderer"。
• public Comparable getInternalValue()
调用此 GuiComponent API 以获取用于在客户端表格中排序和分组的值。在名为 "comparable" 字段中，返回值包含在传递给客户端的 JSON 值中。此可比较值用于排序。
创建客户端呈现器
自定义图形表示的客户端呈现器为 JavaScript 呈现器。此代码段使用上一步中组件生成的 JSON 值来生成最终 HTML 表示。
在 JavaScript 代码中避免名称冲突至关重要。因此，最佳做法是将所有 JavaScript 代码放在专用名称空间中。例如，假设您针对 Xyz 展开工作，并且想要实现新的饼图图形表示。JavaScript 名称空间可以是 "XyzCorp.pieChart"。
呈现器的基干应如下所示：
XyzCorp = {};
XyzCorp.pieChart = {};
XyzCorp.pieChart.renderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the html value as a string>”;
}
XyzCorp.pieChart.renderer.exportRenderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return <the export value>;
};
XyzCorp.pieChart.renderer.exportRendererForGWT = function(data) {
…
return <the export value>;
};
XyzCorp.pieChart.renderer.searchFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the search value as a string>”;
};
XyzCorp.pieChart.renderer.groupFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the group label as a string>”;
};
XyzCorp.pieChart = {};
XyzCorp.pieChart.renderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the html value as a string>”;
}
XyzCorp.pieChart.renderer.exportRenderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return <the export value>;
};
XyzCorp.pieChart.renderer.exportRendererForGWT = function(data) {
…
return <the export value>;
};
XyzCorp.pieChart.renderer.searchFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the search value as a string>”;
};
XyzCorp.pieChart.renderer.groupFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);
…
return “<the group label as a string>”;
};
 |
• 前两行可创建名称空格。下面的每个函数均可实现图形表示的一段客户端 UI。每个函数首先将在服务器上生成的 JSON 值加载到 "data" 中。该值在客户端上缓存，并且提取该值不会增大客户端-服务器流量。然后，每个函数均会计算返回值以反映其 UI 方面的情况。如果服务器出现严重问题，则数据的值可能是简单字符串，而不是预期的 JSON 值。因此，这些函数通常会首先检查值是否符合预期。例如：
if (data && data.myExpectedField1) {
… handle expected values … } else { … handle the server-generated error string … } • 第一个和主 "renderer()" 函数会生成在呈现的页面上表示此元素的 HTML。如果服务器发送了错误字符串，则该字符串应作为此函数的结果返回。否则，您可以使用数据中的 JSON 值来生成所需的任何 HTML。
• 第二个 "exportRenderer()" 函数可返回要为此元素导出的字符串值。此导出值可能会出现在 Windchill UI 中“导出列表至文件”操作所产生的任何文件中。
• 第三个 "exportRendererForGWT()" 函数可返回要在基于 GWT、Cadx 和 PSB 的 UI 中为此元素导出的字符串值。此导出值可能会出现在 Windchill 基于 GWT 的 UI 中的“导出列表至文件”操作所产生的任何文件中。
• 第四个 "searchFunc()" 函数可返回在执行表内搜索操作期间表示此元素的字符串值。如果搜索字符串与该函数的返回值的任何子串匹配，则相应的元素将包括在搜索结果中。
• 最后，第五个 "groupFunc()" 函数可返回用于标识包含此元素的组的标签。当用户使用表格列标题菜单“按此字段分组”时，系统将对表格进行排序，并且具有相同组标签的表格的任何连续行都将通过用于标识组的该标签聚集在一起。
• 请注意，exportRenderer、searchFunc 和 groupFunc 函数均针对呈现器函数 XyzCorp.pieChart.renderer 进行定义。要使这些函数生效，需要使用此命名约定。如果尝试以不同方式命名函数或使用不同的前缀，则忽略这些函数。
|
将条目添加到图形表示的枚举中
就像上面简单的“雨天或晴天”示例一样，使用“类型和属性管理”实用程序将条目添加到图形表示的枚举中。枚举名为“图形属性表示”，位于名为“PTC 枚举”的系统级组织器中。记住条目的内部名称。该名称将在下一步中使用。在本示例中，假定将 "pieChart" 作为新条目的内部名称。
为组件创建 xconf 映射
添加 xconf 条目，用于将图形表示枚举条目的内部名称映射到前面创建的自定义组件类。对于我们的饼图示例，新条目可能如下所示。请注意，选择器必须与上一节中枚举条目的内部名称匹配，并且 serviceClass 必须与自定义组件类的完全限定名称匹配。
<Service name=
"com.ptc.core.lwc.common.graphicalatts.GraphicalAttRepresentationHandler">
<Option serviceClass="com.XyzCorp.PieChartComponent" requestor="null"
selector="pieChart" />
</Service>
"com.ptc.core.lwc.common.graphicalatts.GraphicalAttRepresentationHandler">
<Option serviceClass="com.XyzCorp.PieChartComponent" requestor="null"
selector="pieChart" />
</Service>
同样，更新 xconf 文件后，需要将其传播到特性文件，方法为在 Windchill shell 中运行 XConfManager ("xconfmanager -pF")，然后重新启动方法服务器。