フォームのスタイル設定

ビジネス要件に合わせてフォームのスタイルを設定できます。CSS を使用してすべてのコントロールのスタイルを設定するか、フォーム上でコントロールごとにスタイルを設定できます。

たとえば、ボタンへのホバー カラーの設定、テーブル ヘッダーのバックグラウンドの色の変更、ラジオ ボタン内の小さなドットの色の変更、ドロップダウン リストと日付ピッカーのバックグラウンドの色の変更を行えます。

フォームのスタイル変更

最初にテーマのベースとして使用する CSS ファイルをアップロードし、スタイル シートを使用するようにテーマを構成してから、フォームのデフォルトのフォント スタイルとバックグラウンド スタイルを設定することにより、フォームのスタイルを変更します。

CSS ファイルのアップロード

テーマのベースとして使用する CSS ファイルをアップロードします。

  1. TotalAgility Designer で、[ユーザー インターフェイス] > [スタイル シート] に移動します。
  2. アップロードした CSS ファイルから CSS ファイルを選択します。

    デスクトップおよびタッチ対応フォームに使用する基本テーマを設定できます。

    • デフォルトでは、TotalAgility Workspace のテーマはすべてのフォームに適用されます。ただし、組み込みの Sencha ExtJS テーマの 1 つをカスタム テーマとして選択できます。

    • TotalAgility Workspace は、デフォルトのテーマで最適に動作するように設計されています。別のテーマに変更する場合は、構成が必要になる場合があります。

フォームのテーマの構成

TotalAgility Workspace は、デフォルトのテーマで最適に動作するように設計されています。別のテーマに変更する場合は、構成が必要になる場合があります。

TotalAgility Designer で、[ユーザー インターフェイス] > [テーマ] に移動し、[新規] をクリックします。


テーマ

  1. デフォルトでは、TotalAgility Workspace のテーマはすべてのフォームに適用されます。ただし、組み込みの Sencha ExtJS テーマの 1 つを選択して、デスクトップ フォームおよびタッチ対応フォームのカスタム テーマにすることができます。
  2. フォームのデフォルトのフォントとバックグラウンド スタイルを設定します。
    1. [フォント/背景の無効化] を選択します。
    2. [バックグラウンド][フォント スタイル] を設定します。
  3. [スタイルシート] リストで、フォームに使用するスタイル シートを選択します。
  4. テーマを保存します。

基本的なコントロールのスタイルの変更

フォーム内のタイプのすべてのコントロールのデフォルト スタイルを設定します。

スタイル シートへのスタイルの追加

スタイル シートにスタイルを追加します。たとえば、TotalAgility Workspace.css でボタン コントロールに次のスタイルを追加します。

.BlueButtonStyle {
color: white;
background-color: #007ACC;
}

優先スタイル シートにスタイルが追加されたら、スタイル シートを TotalAgility にアップロードできます。

スタイル シートの TotalAgility へのアップロード

  1. TotalAgility Designer で、[ユーザー インターフェイス] > [スタイル シート] に移動し、[新規] をクリックします。
  2. [スタイル シート][参照] をクリックし、新しいスタイルを追加したスタイル シートを選択します。
  3. 既存のスタイル シートを上書きするには、[現在のファイルの上書き] を選択します。
  4. この項目は任意です。スタイル シートの説明を追加します。
  5. [保存] をクリックして、このファイルを TotalAgility に追加します。

    スタイル シートを TotalAgility に追加すると、テーマで使用できるようになります。

スタイル シートの使用

  1. [ユーザー インターフェイス] > [テーマ] に移動します。
  2. テーマのリストで、更新されたスタイル シートを使用するテーマを選択します。
  3. テーマの [全般] タブの [スタイルシート] リストで、フォーム用のスタイル シートを選択します。
  4. テーマの [CSS] タブの [コントロール] リストで、[ボタン] を選択し、[標準] 設定で、新しく追加された [CSS クラス] を選択します。

    標準設定の CSS クラス リストには、フォームで使用できる選択したスタイル シートのすべてのスタイル クラスが含まれています。

    スタイル - フォーム コントロール

    スタイルが選択されると、すべてのボタンがこの新しい CSS クラスをデフォルトのテーマ スタイルとして使用します。

    スタイル - 青いボタン

  5. 同じ方法を使用して、[CSS] タブで他のコントロールのデフォルト スタイルを設定します。

基本的なコントロールのスタイルの上書き

クラスをコントロールに割り当てることにより、テーマのデフォルトを変更せずに、フォーム上のコントロールのスタイルを上書きできます。クラスをボタン コントロールに割り当てるには、次の例を参照してください。

  1. スタイル シートにクラスを追加します。
    .BlueButtonStyle {
    color: white;
    background-color: #007ACC;
    }
    .RedButtonStyle {
    color: white;
    background-color: #a31000;
    }
  2. スタイル シートを TotalAgility にアップロードします。
  3. ボタン プロパティの [設計] タブで、[スタイル][クラス] を選択します。

    ボタン コントロールは、新しく追加されたクラスを使用するように更新されます。

  4. フォームを保存してリリースします。

    ランタイムに、ボタンに新しいスタイルが反映されます。

    古いスタイル 新しいスタイル

    スタイル - 青いボタン


    スタイル - 赤いボタン

基本コントロールへのインライン スタイルの設定

コントロールのテキストのスタイルを上書きする必要がある場合は、インライン スタイル オプションを使用します。

インライン スタイルは、設定対象のコントロールにのみ影響し、フォーム上の他のコントロールには影響しません。インライン スタイルは、コントロールの基本的なプロパティを設定するのに役立ちます。

  1. コントロール プロパティの [設計] タブで、[スタイル][インライン] を選択します。
  2. 必要に応じて、テキストのスタイルを変更します。
  3. フォームを保存してリリースします。

高度なコントロールのスタイルの変更

基本コントロールと同じ方法で、フォーム上の高度なコントロールのスタイルを設定できます。

この例では、テーブル コントロールのスタイル設定について説明します。

  1. 次のスタイルをスタイル シートに追加します。
    .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;
    }
  2. スタイル シートを TotalAgility にアップロードします。
  3. テーマでスタイル シートを使用します。
  4. テーブル コントロールのプロパティを構成します。


    スタイル フォーム - テーブル プロパティ

  5. 複雑なコントロールには、Themes Designer に個別のセクションがあり、カスタム クラスをコントロール プロパティにマップできます。


    スタイル フォーム - テーブル クラス

    これらのクラスは、アップロードされた CSS ファイルから取得されます。

    スタイルが適用されると、ランタイムにテーブルにカスタム スタイルが表示されます。


    スタイル フォーム - ランタイム テーブル