解决方案
使用双窗格公用组件标记 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
});
}
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”);
}
});
if (stepId === “thisWizardStepId”) {
PTC.wizard.showSplitPaneOnWizardStep(“jca_viewport”,
{left:20, right: 80}, “vertical”);
}
});
在上述代码示例中，您可以用 "thisWizardStepId" 替代向导步骤中的实际 Id。左侧和右侧的参数对应于使用 renderTwoPanes 标记配置的 leftPaneSize 和 rightPaneSize，方向也是如此 (本示例中为 "vertical")。
有关向导参考，请参阅构造向导。