Solution
Use the two pane common component tag, renderTwoPanes. This is included in the JCA common components library (http://www.ptc.com/windchill/taglib/components).
Prerequisite knowledge
To use the two pane component, you need to have an understanding of the following:
• JSPs, tag libraries, and JSTL
• The JSP-based client architecture framework in Windchill
Solution Elements
Using this component, a developer needs to configure the left and right pane JSP, while the layout of the page is provided by the renderTwoPanes taglib.
|
Element
|
Type
|
Description
|
|---|---|---|
|
RenderTwoPanesTag.java
|
Java class
|
The tag that renders out the two pane component in a JSP
|
|
navigation.jsfrag
|
JavaScript Fragment
|
Renders the component to the DOM
|
|
<your_left_pane>.jsp
|
JSP
|
The JSP to have displayed in the left or top pane, depending on the orientation value (horizontal|vertical).
|
|
<your_right_pane>.jsp
|
JSP
|
The JSP to have displayed in the right or bottom pane, depending on the orientation value (horizontal|vertical).
|
|
<your_header_pane>.jsp
|
JSP
|
The JSP to have displayed in the top pane when orientation is set to horizontal.
|
|
<your_javascript_file>.js
|
JavaScript file
|
Contains your click handler function (if specified). The click handler is a Javascript function that will be called for every click event fired from either pane (left/right or top/bottom). The click handle will most likely make an AJAX call to get the data to display. Typically, when something is clicked in one pane you’ll want to have something happen in the other pane.
|
Two pane in wizard step
This component can also be used in wizard step but the following pieces are required. Place the following fragments in the wizard step JSP where the two pane component will be used:
1. Create an empty DIV element. The two pane component will render itself to this DIV: <div id="twoPaneExample"></div>
2. Override the viewport object. The two pane component will be added to the viewport. By default, the wizard does not create a viewport object, thus we need to define the PTC.navigation.loadViewPort JavaScript function.
 |
Ensure the value for the “renderTo” attribute matches the id given to the DIV element in previous step.
|
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. Load the pop-up shell by calling the following JavaScript function:
PTC.navigation.loadShell (PTC.navigation.POPUP_SHELL);
4. If the wizard step is not the first step, then you may need to add this JavaScript code snippet so that your split pane component will be visible when the step is rendered:
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”);
}
});
In the above code example, you would substitute “thisWizardStepId” for the actual Id of your wizard step. The left and right parameters correspond to the leftPaneSize and rightPaneSize that you configured using the renderTwoPanes tag, as does the orientation (“vertical” in this example).
For wizard references, please see Constructing Wizards.
Parent topic