フォームのスタイル設定
ビジネス要件に合わせてフォームのスタイルを設定できます。CSS を使用してすべてのコントロールのスタイルを設定するか、フォーム上でコントロールごとにスタイルを設定できます。
たとえば、ボタンへのホバー カラーの設定、テーブル ヘッダーのバックグラウンドの色の変更、ラジオ ボタン内の小さなドットの色の変更、ドロップダウン リストと日付ピッカーのバックグラウンドの色の変更を行えます。
フォームのスタイル変更
最初にテーマのベースとして使用する CSS ファイルをアップロードし、スタイル シートを使用するようにテーマを構成してから、フォームのデフォルトのフォント スタイルとバックグラウンド スタイルを設定することにより、フォームのスタイルを変更します。
CSS ファイルのアップロード
テーマのベースとして使用する CSS ファイルをアップロードします。
- TotalAgility Designer で、 に移動します。
-
アップロードした CSS ファイルから CSS ファイルを選択します。
デスクトップおよびタッチ対応フォームに使用する基本テーマを設定できます。
-
デフォルトでは、TotalAgility Workspace のテーマはすべてのフォームに適用されます。ただし、組み込みの Sencha ExtJS テーマの 1 つをカスタム テーマとして選択できます。
-
TotalAgility Workspace は、デフォルトのテーマで最適に動作するように設計されています。別のテーマに変更する場合は、構成が必要になる場合があります。
-
フォームのテーマの構成
TotalAgility Workspace は、デフォルトのテーマで最適に動作するように設計されています。別のテーマに変更する場合は、構成が必要になる場合があります。
TotalAgility Designer で、[新規] をクリックします。
に移動し、- デフォルトでは、TotalAgility Workspace のテーマはすべてのフォームに適用されます。ただし、組み込みの Sencha ExtJS テーマの 1 つを選択して、デスクトップ フォームおよびタッチ対応フォームのカスタム テーマにすることができます。
-
フォームのデフォルトのフォントとバックグラウンド スタイルを設定します。
- [フォント/背景の無効化] を選択します。
- [バックグラウンド] と [フォント スタイル] を設定します。
- [スタイルシート] リストで、フォームに使用するスタイル シートを選択します。
- テーマを保存します。
基本的なコントロールのスタイルの変更
フォーム内のタイプのすべてのコントロールのデフォルト スタイルを設定します。
スタイル シートへのスタイルの追加
スタイル シートにスタイルを追加します。たとえば、TotalAgility Workspace.css でボタン コントロールに次のスタイルを追加します。
.BlueButtonStyle {
color: white;
background-color: #007ACC;
}
優先スタイル シートにスタイルが追加されたら、スタイル シートを TotalAgility にアップロードできます。
スタイル シートの TotalAgility へのアップロード
- TotalAgility Designer で、[新規] をクリックします。 に移動し、
- [スタイル シート] の [参照] をクリックし、新しいスタイルを追加したスタイル シートを選択します。
- 既存のスタイル シートを上書きするには、[現在のファイルの上書き] を選択します。
- この項目は任意です。スタイル シートの説明を追加します。
-
[保存] をクリックして、このファイルを TotalAgility に追加します。
スタイル シートを TotalAgility に追加すると、テーマで使用できるようになります。
スタイル シートの使用
- に移動します。
- テーマのリストで、更新されたスタイル シートを使用するテーマを選択します。
- テーマの [全般] タブの [スタイルシート] リストで、フォーム用のスタイル シートを選択します。
-
テーマの [CSS] タブの [コントロール] リストで、[ボタン] を選択し、[標準] 設定で、新しく追加された [CSS クラス] を選択します。
標準設定の CSS クラス リストには、フォームで使用できる選択したスタイル シートのすべてのスタイル クラスが含まれています。
スタイルが選択されると、すべてのボタンがこの新しい CSS クラスをデフォルトのテーマ スタイルとして使用します。
- 同じ方法を使用して、[CSS] タブで他のコントロールのデフォルト スタイルを設定します。
基本的なコントロールのスタイルの上書き
クラスをコントロールに割り当てることにより、テーマのデフォルトを変更せずに、フォーム上のコントロールのスタイルを上書きできます。クラスをボタン コントロールに割り当てるには、次の例を参照してください。
-
スタイル シートにクラスを追加します。
.BlueButtonStyle { color: white; background-color: #007ACC; }
.RedButtonStyle { color: white; background-color: #a31000; }
- スタイル シートを TotalAgility にアップロードします。
-
ボタン プロパティの [設計] タブで、[スタイル] の [クラス] を選択します。
ボタン コントロールは、新しく追加されたクラスを使用するように更新されます。
-
フォームを保存してリリースします。
ランタイムに、ボタンに新しいスタイルが反映されます。
古いスタイル 新しいスタイル
基本コントロールへのインライン スタイルの設定
コントロールのテキストのスタイルを上書きする必要がある場合は、インライン スタイル オプションを使用します。
インライン スタイルは、設定対象のコントロールにのみ影響し、フォーム上の他のコントロールには影響しません。インライン スタイルは、コントロールの基本的なプロパティを設定するのに役立ちます。
- コントロール プロパティの [設計] タブで、[スタイル] に [インライン] を選択します。
- 必要に応じて、テキストのスタイルを変更します。
- フォームを保存してリリースします。
高度なコントロールのスタイルの変更
基本コントロールと同じ方法で、フォーム上の高度なコントロールのスタイルを設定できます。
この例では、テーブル コントロールのスタイル設定について説明します。
-
次のスタイルをスタイル シートに追加します。
.LargeTableRow { height: 33px; line-height: 33px; color: #6a737d; }
.WhiteTableRow { background-color: white; }
.GreayTableFrame { border: 1px solid #DFE2E5; }
.WhiteTableHeader { background-color: white; font-weight: bold; height: 40px; line-height: 40px; }
- スタイル シートを TotalAgility にアップロードします。
- テーマでスタイル シートを使用します。
-
テーブル コントロールのプロパティを構成します。
-
複雑なコントロールには、Themes Designer に個別のセクションがあり、カスタム クラスをコントロール プロパティにマップできます。
これらのクラスは、アップロードされた CSS ファイルから取得されます。スタイルが適用されると、ランタイムにテーブルにカスタム スタイルが表示されます。