解决方案

基本自定义 > 用户界面自定义 > 使用 Windchill JSP 框架自定义 HTML 客户端 > 拆分窗格/双窗格 > 解决方案

解决方案

使用双窗格公用组件标记 renderTwoPanes。此标记包括在 JCA 公用组件库 (http://www.ptc.com/windchill/taglib/components) 中。

必备知识

要使用双窗格组件，需要了解以下内容：

• JSP、标记存储库和 JSTL

• Windchill 中基于 JSP 的客户端体系结构框架

解决方案元素

使用此组件时，开发人员需要配置左侧和右侧窗格 JSP，而页面布局则由 renderTwoPanes taglib 提供。

元素	类型	说明
RenderTwoPanesTag.java	Java 类	在 JSP 中呈现双窗格组件的标记
navigation.jsfrag	JavaScript 片段	将组件呈现到 DOM 中
<您的_左侧_窗格>.jsp	JSP	根据方向值 (horizontal\|vertical)，在左侧或顶部窗格中显示的 JSP。
<您的_右侧_窗格>.jsp	JSP	根据方向值 (horizontal\|vertical)，在右侧或底部窗格中显示的 JSP。
<您的_标题_窗格>.jsp	JSP	当方向设置为 horizontal 时，在顶部窗格中显示的 JSP。
<您的_javascript_文件>.js	JavaScript 文件	包含您的单击处理程序函数 (如果已指定)。“单击处理程序”是一种 JavaScript 函数，将为从任一窗格 (左侧/右侧或顶部/底部) 触发的每个单击事件调用此函数。“单击处理程序”很可能会使 AJAX 调用获取要显示的数据。通常，在一个窗格中单击某项时，您希望另一个窗格中也能有所反应。

向导步骤中的双窗格

此组件也可在向导步骤中使用，但需要以下各部分内容。将以下片段放置在向导步骤 JSP 中，其中将使用双窗格组件：

1. 创建一个空 DIV 元素。此双窗格组件会将自身呈现给此 DIV：<div id="twoPaneExample"></div>

2. 覆盖视区对象。双窗格组件会被添加到视区中。默认情况下，向导不会创建视区对象，因此我们需要定义 PTC.navigation.loadViewPort JavaScript 函数。

确保 "renderTo" 属性的值与上一步中为 DIV 元素提供的 id 相匹配。

PTC.navigation.loadViewPort = function(pageItems){
var verticalPanel = new PTC.Panel({
layout:'fit',
id: 'jca_viewport',
renderTo: 'twoPaneExample',
width : 800,
height: 600,
items: pageItems
});
}

3. 通过调用以下 JavaScript 函数来加载弹出式 shell：

PTC.navigation.loadShell (PTC.navigation.POPUP_SHELL);

4. 如果向导步骤不是第一步，则可能需要添加此 JavaScript 代码段，以便在呈现步骤时使您的拆分窗格组件保持可见：

PTC.wizard.on(‘wizardStepReady’, function(stepId) {
if (stepId === “thisWizardStepId”) {
PTC.wizard.showSplitPaneOnWizardStep(“jca_viewport”,
{left:20, right: 80}, “vertical”);
}
});

在上述代码示例中，您可以用 "thisWizardStepId" 替代向导步骤中的实际 Id。左侧和右侧的参数对应于使用 renderTwoPanes 标记配置的 leftPaneSize 和 rightPaneSize，方向也是如此 (本示例中为 "vertical")。

有关向导参考，请参阅构造向导。