基本自定义 > 用户界面自定义 > 使用 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 标记配置的 leftPaneSizerightPaneSize,方向也是如此 (本示例中为 "vertical")。
有关向导参考,请参阅构造向导