ウィジェットのスタイルとカスタマイズ
ウィジェットのスタイルは 5 つのアスペクトで構成されています。
• スタイルテーマ
• スタイル定義
• カスタム CSS
スタイルテーマ
スタイルテーマを使用してマッシュアップの外観をカスタマイズできます。スタイルテーマは、より簡単にコンテナおよびサポートされているマッシュアップで作成、修正、インポート、エクスポートできます。スタイルテーマをトップレベルマッシュアップに適用した場合、そのスタイルテーマは使用されているすべてのウィジェットとマッシュアップにも適用されます。スタイルテーマとその適用方法の詳細については、スタイルテーマおよびマッシュアップへのスタイルテーマの適用を参照してください。
状態定義と状態フォーマット
状態定義を使用してビジュアリゼーション内の傾向とパターンをハイライトできます。これによって、ウィジェットのデータ値に基づいてさまざまなスタイル定義をウィジェットに適用できます。詳細については、ウィジェットへの状態フォーマットの適用を参照してください。
状態定義は、各スタイル定義をいつ適用するかについての規則を含むスタイル定義の集合です。状態定義を使用して、ウィジェットの外観を制御、カスタマイズ、およびレンダーできます。マッシュアップでは、スタイル定義を使用して、色、テキスト、および線フォーマットが管理およびレンダーされます。詳細については、状態定義の作成を参照してください。
フォーマットの条件を持つ状態定義エンティティを作成することで、状態フォーマットをウィジェットに追加できます。一度作成すると、「プロパティ」パネルの「レンダラーと状態」または「状態のフォーマット」ボタンをクリックすることで、状態フォーマットを編集したりウィジェットに適用したりできます。
詳細については、マッシュアップへのスタイルテーマの適用を参照してください。
スタイルプロパティ
デフォルトでは、マッシュアップ内のテーマをサポートするすべてのウィジェットが、適用されたスタイルテーマからスタイルプロパティを取得します。スタイルテーマは、すべてのマッシュアップとテーマ指定可能なウィジェットに適用されます。「スタイルプロパティ」パネルを使用して、マッシュアップ内の個々のウィジェットのスタイルを修正できます。テーマ指定されたすべてのウィジェットには、独自のスタイルプロパティのセットがあります。スタイルプロパティを修正してスタイルテーマをオーバーライドし、ウィジェットごとに異なる外観を作成できます。
詳細については、スタイルプロパティパネルの使用を参照してください。
スタイル定義
スタイル定義は、スタイルの作成時に定義できるプロパティの選択リストです。スタイル定義を作成することにより、一貫性のあるルックアンドフィールでマッシュアップを表示できます。
 |
スタイル定義は、テーマ指定できないウィジェットに適用されます。
|
スタイル定義では、「表示文字列」、「太字フォント」、「線の色」などのさまざまなスタイルアスペクトがサポートされています。
多くのスタイル定義が事前にインストールされています。スタイル定義とその使用方法の詳細については、状態定義の作成を参照してください。
カスタム CSS
カスタム CSS を使用して、定義されている特定の値に基づいてテーマの外観をカスタマイズできます。ウィジェットにカスタム CSS スタイルを適用することはお勧めしません。カスタム CSS コンポーネントが将来のバージョンの ThingWorx で変更された場合、機能しなくなることがあります。カスタム CSS の詳細については、以下を参照してください。