基本的なカスタマイズ > ユーザーインタフェースのカスタマイズ > Windchill JSP フレームワークを使用した HTML クライアントのカスタマイズ > 分割枠 / 2 枠 > ソリューション
  
ソリューション
2 枠共通コンポーネントタグ renderTwoPanes を使います。これは JCA 共通コンポーネントライブラリ (http://www.ptc.com/windchill/taglib/components) にあります。
前提となる知識
2 枠コンポーネントを使うには、次のことを理解している必要があります。
JSP、タグライブラリ、JSTL
Windchill における JSP ベースのクライアントアーキテクチャフレームワーク
ソリューション要素
このコンポーネントを使うとき、開発者は左右の枠の JSP を設定する必要がありますが、ページのレイアウトは renderTwoPanes taglib によって提供されます。
要素
タイプ
説明
RenderTwoPanesTag.java
Java クラス
JSP で 2 枠コンポーネントをレンダリングするタグ。
navigation.jsfrag
JavaScript フラグメント
コンポーネントを DOM にレンダリングします。
<左側の枠>.jsp
JSP
方向の値 (horizontal | vertical) に応じて、左または上の枠に表示される JSP。
<右側の枠>.jsp
JSP
方向の値 (horizontal | vertical) に応じて、右または下の枠に表示される JSP。
<上の枠>.jsp
JSP
方向が horizontal に設定されているときに上枠に表示する JSP。
<JavaScript_ファイル>.js
JavaScript ファイル
クリックハンドラ関数を含みます (指定されている場合)。クリックハンドラは、どちらかの枠 (左/右または上/下) でクリックイベントが発生するたびに呼び出される JavaScript 関数です。クリックハンドラは多くの場合、AJAX 呼び出しを作成してデータを表示します。一般に、片方の枠で何かをクリックすると、もう片方の枠で何かが起こることが期待されます。
ウィザードステップでの 2 枠
このコンポーネントはウィザードステップでも使用できますが、次のような作業が必要です。2 枠コンポーネントを使用するウィザードステップ JSP に次のフラグメントを配置します。
1. 空の DIV エレメントを作成します。2 枠コンポーネントはこの DIV (<div id="twoPaneExample"></div>) に自身をレンダリングします。
2. ビューポートオブジェクトをオーバーライドします。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 関数を呼び出して、ポップアップシェルをロードします。
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 に置き換えます。方向 (この例では "vertical") と同様に、left と right のパラメータは、renderTwoPanes タグを使って設定した leftPaneSizerightPaneSize に相当します。
ウィザードについては、ウィザードの作成を参照してください。