Matrix Editor セルのカスタマイズ

マトリックス領域に属性値を表示するとき、GWT レイアウトレンダラーが使用されます。Matrix Editor セルのレイアウトをカスタマイズして、属性を垂直または水平に表示できます。Matrix Editor セルのレイアウトをカスタマイズするには、次の手順を実行します。

1. com.ptc.windchill.enterprise.productfamily.pfb.client.renderer.CellLayoutRenderer を実装する新規クラスを作成します。

2. renderLayout (Map <String, Object>) メソッドをオーバーライドして、GWT コンポーネントを使用することによりカスタムレンダリングロジックを指定します。例 CustomHorizontalCellLayoutRenderer を参照してください。

3. wt.property ファイルで、このクラスのパスおよび名前を追加します。新規レイアウトレンダラーを使用して属性を垂直モードで表示する場合は、このファイルの DISPLAY_MODE_VERTICAL プロパティを変更し、属性を水平モードで表示する場合は、DISPLAY_MODE_HORIZONTAL プロパティを変更します。

renderLayout メソッドではレイアウトレンダラーごとに Map<String, Object> パラメータが必要です。renderLayout メソッドに用意されているマップには、属性の内部名であるキーがあり、その値はレンダー済み属性の値です。このマップは LinkedHashMap であり、これによってマップ内の属性の順序が Matrix Editor ビュー内の順序と同じになります。

このセクションで使用されている例のクラス CustomHorizontalCellLayoutRenderer は、属性の内部名に接続されている css クラスを持つ別の div タグに属性値を追加します。

"|" や "." などの文字は、サポートされている文字に置き換えなければなりません。

div タグは、CSS ファイルの規則によって管理できます。Matrix Editor にセルインジケータ、オブジェクト名、およびステータス属性を表示する方法の例を次に示します。

.pfb-matrix-cell-horizontal { height: 16px; }
pfb-cell-attribute-value {
float: left;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0px 3px;
}
.pfb-cell-cell-indicator { width: 20px; }
.pfb-cell-objName { width: 50px; }
.pfb-cell-status { width: 70px; }

Matrix Editor にセルインジケータ、オブジェクト名、およびステータスの CSS 規則を追加すると、セルが 20 px、50 px、および 70 px の固定幅になります。属性値がセル幅よりも長い場合、その値は省略記号 ("...") とともに表示されます。

上のイメージでは、「ステータス」属性に対して定義されている幅は 70 px です。属性値 "In Procurement" は、セルに対して定義されている幅よりも長いため、その表示は省略記号 ("...") で切り捨てられています。

Matrix Editor の垂直または水平レイアウトをカスタマイズして、マトリックス領域の属性の値が空 (null)であることを示すことができます。

1. 属性の値を含んでいる空の HTML タグを指す CSS 規則を作成します。

2. content プロパティを使用して、この規則のカスタムコンテンツを生成します。このプロパティには、文字列またはイメージの URL を指定できます。詳細については、https://www.w3.org/wiki/CSS/Properties/content を参照してください。

この機能をデフォルトの水平および垂直レンダラーで使用できるようにするには、Windchill の CSS ファイルに 2 つの CSS 規則を追加します。

.pfb-matrix-cell-horizontal > span:empty::before {
content: 'EMPTY VALUE';
.pfb-matrix-cell-vertical:not(.pfb-matrix-cell-empty)
div.x-component:empty::before
{
content: 'EMPTY VALUE';
}

これらの CSS 規則は、パスと一致する空の span および div に EMPTY VALUE というテキストを表示します。

デフォルトの水平または垂直レンダラーを変更すると、これらの規則が古くなって機能しなくなる可能性があります。HTML 構造で変更を行うたびに、これらの規則がまだ有効であることを確認しなければなりません。

NULL 属性を表示するための「セル情報を表示」パネルのカスタマイズ

Matrix Editor の「セル情報を表示」パネルをカスタマイズして、値が空 (null) であることをより明確に示すことができます。

1. 属性の値を含んでいる空の HTML タグを指す CSS 規則を作成します。

この規則は、パスと一致するすべての空の div タグに EMPTY VALUE というテキストを表示します。

複数の CSS 規則をまとめて、すべてのケースを一括処理する 1 つの CSS 規則を作成できます。たとえば、これまでに CSS を使用して 3 つの空の値の置換を定義しました。

.pfb-matrix-cell-horizontal > span:empty::before {
content: 'EMPTY VALUE';
}
.pfb-matrix-cell-vertical:not(.pfb-matrix-cell-empty)
div.x-component:empty::before {
content: 'EMPTY VALUE';
}
.view-attributes-panel > div.x-component:empty::before {
content: 'EMPTY VALUE';
}

各 CSS パスをコンマで結合して、1 つの CSS 規則に置き換えることができます。

.pfb-matrix-cell-horizontal > span:empty::before,
.pfb-matrix-cell-vertical:not(.pfb-matrix-cell-empty)
div.x-component:empty::before,
.view-attributes-panel > div.x-component:empty::before {
content: 'EMPTY VALUE';
}

ここで content プロパティを変更すると、すべての場所における null 値の処理が変更されます。この変更により、3 つすべての場所において null 値が同じ方法で処理されます。