スタイルと状態の定義
スタイル定義
マッシュアップ環境ではすべての色、テキストフォーマット、線フォーマットがスタイル定義エンティティを使用して管理およびレンダーされます。スタイル定義は HTML スタイル設定エレメントの集合であり、CSS (Cascading Style Sheet) 定義を HTML タグに適用するときと同様にスタイル定義をウィジェットに適用できます。
スタイル定義の定義と使用
スタイルを作成する際には、以下のプロパティを定義できます。
• 「表示文字列」 - 現在適用されているスタイル定義を示すために表示される説明文字列。
• 「背景色」 - チャート、ボタン、パネルなどの背景。
• 「セカンダリ背景色」 - グラデーションをサポートするウィジェットに使用されます。
• 「太字フォント」 - (true/false)
• 「斜体フォント」 - (true/false)
• 「下線フォント」 - (true/false)
• 「イメージ」 - ウィジェットスタイルがボタンなどのイメージ表示をサポートしている場合、イメージスタイルを表すイメージを選択できます。
• 「線の色」 - チャート内のペンのスタイル設定用。
• 「線の太さ」 - チャート内のペンのスタイル設定用。
• 「線のスタイル」 - 通常は境界を指します。ThingWorx では「実線」、「破線」、「点線」、「なし」の各オプションがあります。
• 「テキストサイズ」 - 9-72 px からフォントサイズを選択します。
多数のスタイル定義が事前にインストールされています。各マッシュアップコンポーネントのルックアンドフィールを一貫したものにするには、独自のスタイル定義を作成することをお勧めします。
状態定義
状態定義は、スタイル定義と、各スタイル定義をいつ適用するかについての規則の集合です。規則とスタイル定義が組み合わさったものが状態です。状態定義には複数の状態が必要です。これにより、たとえばグリッドにバインドされているデータサービスの列の値に基づくなど、グリッド内のセルをデータに基づいて書式設定できます。
状態定義をウィジェットに適用する際には、ウィジェットデータセットから規則の評価対象となるフィールドを選択する必要もあります。これにより、表示されているデータ列以外のフィールドを、状態を決定するフィールドとして使用できます。
状態定義の定義と使用
状態定義を作成するとき、状態タイプを「文字列/値」または「数値」タイプとして適用しなければなりません。「文字列/値」タイプを定義すると、完全一致にスタイル定義が適用されます。「数値」タイプを定義すると、定義されている範囲内の数値にスタイル定義が適用されます。
「文字列/値」状態定義を定義する場合、状態ごとに以下のフィールドを定義します。
• 「文字列/値」 - 一致させる文字列。
• 「表示名」 - 一致する値を使用するのではなく、ポンプのオン/オフなどを示すために使用します。状態の値を動的にバインドしている場合にもこの名前が表示されます (以下を参照)。
• 「スタイル」 - 一致に適用するスタイル定義。
「数値」状態定義を定義する場合、状態ごとに以下のフィールドを定義します。
• 「演算子」 - 「指定値以下」または「指定値より小さい」を選択します。
• 「値」 - 数値。
• 「表示名」 - ランタイムで状態へのラベル付けに使用する名前。状態の値を動的にバインドしている場合にもこの名前が表示されます (以下を参照)。
• 「スタイル」 - 一致に適用するスタイル定義。
状態定義のオーバーライド
状態定義はどちらかといえば包括的に定義し、その状態をオブジェクトに適用する際に一定のオーバーライドを使用できることを覚えておくことが重要です。たとえば、「低-低」状態、「低」状態、「正常」状態、「高」状態、「高-高」状態から成る一般的なシナリオがあるとします。この概念が当てはまる場合には必ず、以下のカラースキームを使用します。
• 低-低 - オレンジ色
• 低 - 黄色
• 正常 - 緑色
• 高 - 紫色
• 高-高 - 赤色
ただし、この 5 つの状態が同じであっても、実際の数値範囲はデータポイントによって異なる場合があります。データポイントごとに状態定義を定義する代わりに、同じ状態定義を適用し、状態定義をウィジェットに個別に適用する際に実際の数値範囲をオーバーライドできます。これはウィジェットのコンフィギュレーション内で行います。
状態定義をオーバーライドするには 2 つの方法があります。
• 特定のウィジェットに使用する状態定義を選択し、「レンダラーと状態」コンフィギュレーションダイアログにウィジェット固有の値を入力します。
• 状態の値をデータサービスにバインドします。ウィジェットに適用する状態定義を選択すると、状態定義内の状態ごとに 1 つずつ、追加のプロパティがウィジェットプロパティパネルに追加されます。追加のプロパティには ValueFormat_<Display Name> という名前が付き、ここでの表示名は元の状態定義で適用した名前です。この後、任意のデータサービスからの値をこれらのプロパティにバインドすることで、状態定義の範囲を動的に設定し、状態定義を完全なデータ駆動にできます。