スタイルテーマの操作
スタイルテーマは、ウィジェットおよびマッシュアップ内のその他のコンポーネントの外観を指定するスタイルプロパティのコレクションです。デフォルトでは、PTC 収束テーマは Composer で作成するすべての新規マッシュアップに適用されます。このテーマは、PTC 設計システムの原則を使用して作成されます。独自のスタイルテーマを作成および使用して、ルックアンドフィールに一貫性のあるマッシュアップおよびアプリケーションを作成できます。スタイルテーマには、マッシュアップ内のウィジェットの色、フォント、および線のスタイルを制御するグローバルスタイルが含まれています。さらに、Composer のスタイルテーマエンティティの「スタイル」タブにあるエディタを使用して、リンク、ボタン、メニューなどのより具体的なエレメントのスタイルを修正できます。
以下の方法でマッシュアップにスタイルを適用できます。
• スタイルテーマとスタイルプロパティ - マッシュアップ内のテーマ指定されたウィジェットのスタイル。
• スタイル定義 - テーマ指定されていないレガシーウィジェットのスタイル。
 |
スタイル定義は、状態定義エンティティがウィジェットに適用されるときに、テーマ指定されたウィジェットのスタイルを設定するために使用されます。
|
• カスタム CSS - 標準の CSS 構文。
スタイル定義とは異なり、テーマを使用すると以下を行うことができます。
• アプリケーションに関連付けられている複数のマッシュアップにテーマを適用することで、設計をすばやくスケール設定する。
• マッシュアップ内の個々のウィジェットに状態定義を適用することなく、共通スタイルを再使用する。
• スタイルテーマエンティティの「スタイル」タブでプレビューマッシュアップを使用してスタイルをプレビューする。
• ほかのユーザーとアプリケーション設計を共同作業するために、スタイルテーマをエクスポートまたは共有する。
スタイルテーマとスタイルプロパティの使用
スタイルテーマはマッシュアップレベルで適用され、スタイルプロパティはウィジェットレベルで適用されます。マッシュアップのスタイルテーマをオーバーライドするには、Mashup Builder の「スタイルプロパティ」パネルを使用して、特定のウィジェットのスタイルプロパティを編集します。スタイルプロパティを使用すると、アクティブ、押している、マウスポインタを合わせるなどのさまざまな状態でウィジェットの外観を設定できます。スタイルテーマを使用してアプリケーションの一般的な外観を定義してから、スタイルプロパティを使用し、必要に応じて個々のウィジェットのアドバンススタイルを設定できます。
カスタムテーマの作成
新規スタイルテーマを作成するとき、PTC 収束テーマなどの既存のスタイルテーマを複製して開始することをお勧めします。その後、スタイルテーマエディタを使用して、設計要件に合わせてテーマ内のグローバルスタイルとエレメントスタイルをカスタマイズできます。
レガシースタイルテーマの使用
デフォルトの収束テーマは、レガシーウィジェットに適用されているスタイル定義と比較してより新しいアクセス可能な設計を適用します。レガシーウィジェットの外観を維持するには、Legacy Styles Theme Composer エンティティをマッシュアップに適用します。レガシーウィジェットまたはレイアウトが含まれているマッシュアップを移行する際に、「マッシュアップ移行」ダイアログボックスを使用してこのタスクを実行することもできます。
カスタム CSS の使用
Web コンポーネントウィジェットでは、スタイルテーマおよびウィジェットスタイルプロパティを使用してスタイルをカスタマイズできます。PTC は、カスタム CSS を使用した Web コンポーネントスタイルのオーバーライドを推奨およびサポートしていません。コンポーネント DOM 構造および CSS クラスは、新しいバージョンの ThingWorx Foundation がリリースされるときに変更される可能性のある内部実装の詳細と見なされます。