基本的なカスタマイズ > ユーザーインタフェースのカスタマイズ > UI の情報の表示 > カスタムグラフィック製品表現の作成 > フルカスタムグラフィック製品表現の作成
  
フルカスタムグラフィック製品表現の作成
フルカスタムグラフィック製品表現を作成するプロセスは、前のセクションの "雨または晴" の例によく似ています。以下の 4 つのステップがあります。
1. AbstractGraphicalComponent クラスを拡張するカスタムコンポーネントを作成します。
2. 新規コンポーネントのクライアント側 JavaScript レンダラーを作成します。
3. グラフィック製品表現の列挙にエントリを追加します。
4. 列挙値をコンポーネントクラスに接続する xconf エントリを追加します。
上の簡潔な "雨または晴" の例およびフルグラフィック製品表現と異なる点は、フル実装ではコンポーネントクラスによって MultiStateIconComponent ではなく AbstractGraphicalComponent を拡張し、GraphicalComponent を実装する必要があること、またコンポーネントクラスによってクライアント側レンダリングを処理する必要があることです。
カスタムコンポーネントの作成
カスタムコンポーネントによって、GraphicalAttRepresentationHandler の 1 つの API、GraphicalComponent の 3 つの API、および GuiComponent クラスの 1 つの API を実装する必要があります。
public boolean isValidForDatatype(final Class datatype);
この GraphicalAttRepresentationHandler API は、グラフィック製品表現が特定のデータタイプの属性に使用できるかどうかを決定するために、「タイプおよび属性の管理」ユーティリティによって呼び出されます。たとえば、信号機の例のように、製品表現が整数値の属性にのみ適用される場合、API はデータタイプが java.lang.Long であれば true を返し、そうでない場合は false を返します。
public GraphicalComponent newInstance(Object value, Map<String, Object> metaData) throws WTException;
この GraphicalComponent API は、グラフィックコンポーネントの新規インスタンスを作成するために呼び出されます。パラメータには、表示される計算属性の値と、対応するグラフィック製品表現のパラメータの属性で指定されている値のマップが含まれます。このメソッドは、指定されているパラメータで初期化された、このメソッド自体の新規インスタンスを返します。
public JSONObject toJSON() throws WTException;
この GraphicalComponent API は、グラフィックコンポーネントを JSON オブジェクトに変換するために呼び出されます。このオブジェクトは、サーバーからレンダリング場所であるクライアントに渡されます。何を渡すかはユーザーが決定します。インフラストラクチャによって、このメソッドが返すすべての値に "comparable" という名前の追加のアイテムが追加されます。
public String getJSRendererName();
この GraphicalComponent API は、クライアント側レンダラーの名前を決定するために呼び出されます。このメソッドは、クライアント側レンダラーを実装する JavaScript メソッドのフルネームを返します。下の例の場合、この関数は "XyzCorp.pieChart.renderer" を返します。
public Comparable getInternalValue()
この GuiComponent API は、クライアント側テーブルでの並べ替えとグループ化に使用される値を取得するために呼び出されます。戻り値は、クライアントに渡される JSON 値 の "comparable" という名前のフィールドに含められます。この comparable の値は、並べ替えに使用されます。
クライアント側レンダラーの作成
カスタムグラフィック製品表現のクライアント側レンダラーは、JavaScript レンダラーです。このコードでは、前のステップでコンポーネントによって生成された JSON 値が使用され、これによって最終的な HTML 表現が生成されます。
JavaScript コード内に名前のコンフリクトがあってはなりません。したがって、最良事例として、すべての JavaScript コードをプライベートの名前空間に配置することをお勧めします。たとえば、ユーザーは Xyz 社に勤めており、新しい円グラフのグラフィック製品表現を実装するとします。この場合、JavaScript の名前空間は "XyzCorp.pieChart" になります。
レンダラーのスケルトンは次のようになります。
XyzCorp = {};
XyzCorp.pieChart = {};
XyzCorp.pieChart.renderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);

return “<the html value as a string>”;
}
XyzCorp.pieChart.renderer.exportRenderer = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);

return <the export value>;
};
XyzCorp.pieChart.renderer.exportRendererForGWT = function(data) {

return <the export value>;
};
XyzCorp.pieChart.renderer.searchFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);

return “<the search value as a string>”;
};
XyzCorp.pieChart.renderer.groupFunc = function(table, column, row) {
var data = jsca.columns.getCellValue(column, row);

return “<the group label as a string>”;
};
* 
最初の 2 行によって名前空間が作成されます。以下の関数により、グラフィック製品表現のクライアント側 UI が実装されます。これらの関数は、まず、サーバーで生成された JSON 値を "data" に読み込みます。この値はクライアントでキャッシュされるため、これを呼び出してもクライアント-サーバートラフィックは発生しません。次に、各関数が戻り値を計算して、その UI の要素を反映させます。サーバーに重大な問題があれば、データの値が、必要とされる JSON 値ではなく、単純な文字列であることがあります。したがって、これらの関数は、一般的に、値が必要とされる値であるかどうかを最初にチェックします。例:
if (data && data.myExpectedField1) {
… handle expected values …
} else {
… handle the server-generated error string …
}
1 つ目の主要な "renderer()" 関数は、レンダリングされたページでこのエレメントを表す HTML を生成します。サーバーがエラー文字列を送信した場合、それはこの関数の結果として返されます。そうでない場合は、データ内の JSON 値を使用して、HTML が望まれるあらゆるものを生成できます。
2 つ目の "exportRenderer()" 関数は、エクスポートされるこのエレメントの文字列値を返します。このエクスポート値は、Windchill UI の「リストをファイルにエクスポート」操作によって生成されるどのファイルにも表示される可能性があります。
3 つ目の "exportRendererForGWT()" 関数は、GWT、Cadx、および PSB ベースの UI でエクスポートされるこのエレメント文字列値を返します。このエクスポート値は、Windchill GWT ベースの UI の「リストをファイルにエクスポート」操作によって生成されるどのファイルにも表示される可能性があります。
4 つ目の "searchFunc()" 関数は、テーブル内サーチオペレーション中に、このエレメントを表す文字列値を返します。サーチ文字列がこの関数の戻り値の部分文字列と一致すると、対応するエレメントがサーチ結果に含められます。
最後に、5 つ目の "groupFunc()" 関数は、このエレメントを含んでいるグループを識別するために使用されるラベルを返します。テーブルの列ヘッダーメニュー「このフィールドでグループ化」を使用すると、テーブルが並べ替えられ、テーブル内の同じグループラベルを持つ連続する行が、そのグループを識別するためのラベルを使用してグループ化されます。
exportRenderersearchFunc、および groupFunc 関数はすべて、レンダラー関数 XyzCorp.pieChart.renderer によって定義されることに注意してください。この命名規則は、これらの機能が有効になるために必要です。異なる方法でこれらの関数に名前を付けたり、別のプレフィックスを使用したりすると、これらは無視されます。
グラフィック製品表現の列挙へのエントリの追加
上の簡潔な "雨または晴" の例とまったく同じように、「タイプおよび属性の管理」ユーティリティを使用して、グラフィック製品表現の列挙にエントリを追加します。この列挙は "グラフィック属性の製品表現" という名前で、"PTC 列挙" という名前のシステムレベルのオーガナイザーにあります。エントリの内部名を覚えておいてください。次のステップで使用します。この例では、新規エントリの内部名は "pieChart" とします。
コンポーネントの xconf マッピングの作成
グラフィック製品表現の列挙エントリの内部名を、作成したカスタムコンポーネントクラスにマッピングする xconf エントリを追加します。この円グラフの例の場合、新規エントリは次のようになります。セレクタは前のセクションの列挙エントリの内部名と一致している必要があり、serviceClass はカスタムコンポーネントクラスの完全修飾名と一致している必要があります。
<Service name=
"com.ptc.core.lwc.common.graphicalatts.GraphicalAttRepresentationHandler">
<Option serviceClass="com.XyzCorp.PieChartComponent" requestor="null"
selector="pieChart" />
</Service>
ここでも、xconf ファイルを更新した後、Windchill シェルで XConfManager ("xconfmanager -pF") を実行して、このファイルをプロパティファイルに適用し、メソッドサーバーを再起動する必要があります。