Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象: 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を示すものであり、優れたユーザーエクスペリエンスを実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成するより従来的な方法について説明します。
CSS および LESS フレームワークに関する知識。
この記事では、アダプティブフォームで公開されている css クラスの一覧を示します。 これらのクラスを使用して、アダプティブフォームの様々なコンポーネントのスタイルを設定できます。 警告を表示するダイアログやステータスバーなど、オーサリングコンポーネントのスタイル設定については、ここでは説明しません。テーマエディターを使用してコンポーネントのスタイル設定ができない場合にのみ、これらのスタイル構造を使用してスタイル(CSS または Less)を作成してください。
LESS フレームワークは、アダプティブフォームのスタイルをカスタマイズするユースケースを簡素化します。 フレームワークでは、変数や関数のセット(Mixin)を使用したスタイルの定義が可能です。LESS フレームワークにより、バンドルされているコードのサイズを減らし、コードの再利用率を高めることができます。
アダプティブフォームのスタイルは、次の方法でカスタマイズできます。
アダプティブフォームのテーマは、アダプティブフォームが埋め込まれている web ページと外観が一致するように変更することができます。
テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームのルック&フィールへの大幅な変更は、テーマの変更とは見なされません。
Web ページのテーマは、ブートストラップに基づき、以下の CSS プロパティによって定義されます。
現在、LESS 変数は、アダプティブフォーム内の様々な要素のこれらのプロパティに対してのみ定義されています。
要素の外観、レイアウト、配置、表示設定を変更できます。 そのためには、カスタムの .css ファイルを作成または更新し、この記事で説明するスタイル構成をそのファイルに含める必要があります。
アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。
この記事で説明されているコンポーネントには、CSS クラスが事前に定義されています。変数を編集して、CSS クラスでスタイルを変更できます。または、クラス全体を書き換えることもできます。 このセクションでは、変数を使用して変更できるコンポーネントとスタイル内のクラスを説明します。
コンテナは、最上位のコンポーネントです。他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。
CSS クラス |
|
変数の説明 |
変数の説明 |
|
コンテナの背景色 |
|
コンテナのパディング |
|
コンテナの余白 |
|
コンテナのフォントカラー |
アダプティブフォームには、様々なタイプのフィールドが含まれています。 各フィールドには一意のクラス名があり、それがフィールドの名前となっています。また、フィールドには、guideFieldNode
という共通のクラス名もあります。
フィールドには、ラベル、ウィジェット、ヘルプの説明(詳細な説明と短い説明の両方)、フィールドヘルプアイコン(クエスチョンマーク)が含まれています。
CSS クラス |
|
変数 |
説明 |
|
フィールドのパディング |
|
フィールドのエラーメッセージのフォントカラー |
|
フィールドのエラーメッセージのフォントサイズ |
フィールドに使用される HTML 要素 label には、ラベルが上にあるか左にあるかによって、left または top のクラスが含まれます。
CSS クラス |
|
変数 |
説明 |
|
フィールドラベルのフォントカラー |
|
フィールドラベルのフォントサイズ |
|
フィールドラベルに対する CSS の行の高さのプロパティ |
|
フィールドラベルに対する CSS のフォントの太さのプロパティ |
|
フィールドラベルの余白 |
ラベルに対する CSS ルールは、guideFieldLabel ラベルを使用して適用されます。カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。
タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget
クラスが含まれています。HTML に付属のウィジェットは通常、標準の HTML 要素 input と select を使用しています。スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。
CSS クラス |
|
変数 |
説明 |
|
ウィジェットの背景色(チェックボックスとラジオボタンには適用されません) |
|
ウィジェットのボーダーのカラー |
|
ウィジェットのボーダーのサイズ |
|
ウィジェットのボーダーの半径 |
|
ウィジェットのボーダーのタイプ |
|
ウィジェットのボーダーのフォーカスタイプ |
|
ウィジェットのボーダーの統合されたスタイル |
|
ウィジェットの中のテキストの色 |
|
ウィジェットの中のテキストのサイズ |
|
ウィジェットに対する CSS の行の高さのプロパティ |
|
ウィジェットに対する CSS のパディングのプロパティ |
|
ウィジェットがフォーカスされたときのボーダーの色 |
|
必須フィールドのウィジェットのボーダーの色 |
|
必須フィールドのウィジェットの背景色 |
|
フィールドが無効になっているときのウィジェットの背景色 |
|
フィールドが無効になっているときのウィジェットのフォントカラー |
|
フィールドが無効になっているときのウィジェットのボーダーの色 |
|
ウィジェットの高さ(チェックボックスとラジオボタンには適用されません) |
|
チェックボックスおよびラジオボタンの高さ |
|
複数選択ドロップダウンの最大の高さ |
フォーカスされたフィールド、必須フィールド、および無効なフィールドのスタイル設定は、変数を使用して制限されます。ただし、スタイルを上書きすることで変更することができます。変数の使用における制限は、主に変数の数を抑えるために設けられています。制限は、フィールドの外観が大きく変更され、前述の状態のいずれかにある場合に緩和できます。
作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .guideHelpDescription
を持っており、説明のタイプによって、もう 1 つのクラス .long
/.short
を持っています。ヘルプコンテンツは、説明のスタイル設定を上書きする段落要素で囲まれています。ヘルプの説明(詳細な説明と短い説明の両方)は、以下の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。
変数 |
説明 |
|
ウィジェットの詳細なヘルプの背景色 |
|
ウィジェットの詳細なヘルプのボーダーの色 |
|
ウィジェットの詳細なヘルプの左のインジケーターのボーダーの色 |
|
ウィジェットの短いヘルプの背景色 |
|
ウィジェットの短いヘルプのフォントカラー |
|
ウィジェットの短いツールヒントのヘルプの背景色 |
|
ウィジェットの短いツールヒントのヘルプのフォントカラー |
利用条件(TnC
)ウィジェットでは、利用条件を指定できます。このウィジェットは、以下の表で説明する変数を使用してカスタマイズできます。
変数 |
説明 |
tnc-unvisited |
未訪問の TnC リンクのフォントカラー |
tnc-visited |
訪問済みの TnC リンクのフォントカラー |
ボタンもウィジェットの 1 つです。ただし、スタイル設定はウィジェットとは多少異なります。アダプティブフォームでは、以下のいずれかがボタンを構成します。
ボタンの HTML コード:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS クラス |
説明 |
|
ボタンのアイコンを指定します |
|
ボタンのラベルまたはキャプションのスタイルを設定します |
変数 |
説明 |
|
ボタンのボーダーのサイズ |
|
ボーダーのタイプ |
|
ボタンに対する CSS のパディングのプロパティ |
|
ボタンのフォントサイズ |
|
ボタンの背景色 |
|
ボタンのフォントカラー |
|
ボタンのボーダーの色 |
|
大きいボタン(.buttonlarge クラスを持つボタン)のパディング |
|
大きいボタンのフォントサイズ |
|
小さいボタン(.buttonsmall クラスを持つボタン)のパディング |
|
小さいボタンのフォントサイズ |
|
情報ボタン(.buttoninformative クラスを持つボタン)の背景色 |
|
情報ボタンのフォントカラー |
|
情報ボタンのボーダーの色 |
|
警告スタイルのボタン(.buttonwarning クラスを持つボタン)の背景色 |
|
警告スタイルのボタンのフォントカラー |
|
警告スタイルのボタンのボーダーの色 |
|
アラートボタン(.buttonalert クラスを持つボタン)の背景色 |
|
アラートボタンのフォントカラー |
|
アラートボタンのボーダーの色 |
ウィジェットでは、作成者がヘルプ コンテンツに長い説明を追加すると、疑問符が表示されます。ブートストラップで提供されるデフォルトのアイコンが使用されます。カスタムアイコンを使用するには、ブートストラップアイコンをカスタマイズします。
CSS クラス |
|
変数 |
説明 |
|
アイコンの色 |
|
カーソルをアイコンの上に移動させたときのアイコンの色 |
テーブル内のヘッダーおよびボディ行のカラーテーマは、以下の変数を使用して変更できます。
変数 |
説明 |
|
ヘッダー行の背景色デフォルト値は |
|
奇数のボディ行の背景色デフォルト値は |
|
偶数のボディ行の背景色デフォルト値は |
アダプティブフォームのファイル添付ウィジェットを使用して、ファイルをアップロードできます。 変数を使用してウィジェットをカスタマイズすることもできます。
変数 |
説明 |
|
ウィジェットに表示されるファイルのパディング |
|
ファイルアイテムの背景色 |
|
上のボーダーの色 |
|
ファイルアイテムのフォントカラー |
|
ウィジェットのプレビューアイコン(ブートストラップのアイコン)の色 |
|
ファイルアイテムのコメントの高さ |
ナビゲータータブは 4 種類あります。これらには、左側、上部、ウィザード、アコーディオンのタブがあります。各ナビゲーターには、異なるクラスが割り当てられています。
ナビゲーター |
CSS クラス |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.wizard-navigators |
以下に示すのは、タブナビゲーター要素(ブートストラップタブに類似する)の HTML コードです。
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
descendant セレクターで要素を選択する CSS ルールを使用して、ナビゲーターのスタイル設定を変更できます。例えば、アンカータグにテキスト装飾スタイルを追加するには、以下のようにします。
上部のタブナビゲーター:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
さらに、入れ子のナビゲーターの有無に基づいて、タブナビゲーター(左側と上部の両方)のスタイル設定を行うためのクラスがあります。
CSS クラス |
説明 |
|
入れ子ナビゲーターを持つタブナビゲーター(左側と上部の両方) |
|
入れ子ナビゲーターを持たないタブナビゲーター(左と上) |
guideNavIcon クラスには、タブナビゲーター(左側と上部の両方)およびウィザードナビゲーターにデフォルトのアイコンがあります。
CSS クラス |
|
オーサリング中にパネルに CSS クラス(例:<CLASS_NAME>)を指定することで、特定のナビゲーターのアイコンを変更できます。ナビゲーターのアイコンに <CLASS_NAME>_nav を追加します。
変数 |
説明 |
タブナビゲーター |
|
|
タブナビゲーター全体の背景色 |
|
タブの背景色 |
|
タブのフォントカラー |
|
カーソルが置かれたときのタブの背景色 |
|
カーソルが置かれたときのタブのフォントカラー |
|
パネルがフォーカスされた(アクティブな)ときの背景色 |
|
パネルがフォーカスされたときのフォントカラー |
|
パネルの完了式が true を返したときの背景色 |
|
パネルの完了式が true を返したときのフォントカラー |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときの背景色 |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときのフォントカラー |
|
タブのボーダーのカラー |
|
タブのフォントサイズ |
|
タブのパディング |
|
タブの余白 |
|
垂直タブの余白 |
|
タブのボーダーのサイズ |
|
タブの最小の高さ |
|
入れ子タブのインデント |
ウィザードナビゲーター |
|
|
ウィザードナビゲーター全体の背景色 |
|
ウィザードの背景色 |
|
ウィザードのフォントカラー |
|
パネルがフォーカスされた(アクティブな)ときの背景色 |
|
パネルがフォーカスされたときのフォントカラー |
|
パネルの完了式が true を返したときの背景色 |
|
パネルの完了式が true を返したときのフォントカラー |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときの背景色 |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときのフォントカラー |
|
ウィザードの色 |
|
ウィザードのフォントサイズ |
|
ウィザードのパディング |
|
ウィザードのボーダーのサイズ |
|
ウィザードナビゲーターの行頭文字(キャプション/ラベルの前に付ける)のボーダーの色 |
|
ウィザードナビゲーターのプログレスバーの背景色 |
|
プログレスバーの塗りつぶしの色 |
アコーディオンナビゲーター |
|
|
アコーディオンのパディング |
パネルには、オプションのツールバーとそのコンテンツが含まれます。
CSS クラス |
|
変数 |
説明 |
|
パネルの背景色 |
|
パネルテキストのフォントサイズ |
|
パネルテキストのフォントカラー |
|
パネル内のパディング |
|
パネルの説明のフォントサイズ |
|
パネルの説明のパディング |
|
パネルのヘルプの背景色 |
|
パネルのヘルプのインジケーターのボーダーの色 |
パネルノードは、ナビゲーターとコンテンツに分かれています。コンテンツ用の別のスタイル設定コンポーネントはありません。
説明した変数は、ナビゲーターとコンテンツに適用されます。
最上部のパネル(RootPanel)にはこのクラスは割り当てられていません。
これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ/前へのナビゲーターを含むバーのことです。
CSS クラス |
|
変数 |
説明 |
|
ヘッダーバーの背景色 |
|
ヘッダーバーの中のテキストのフォントカラー |
|
ヘッダーバーのパディング |
これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターは、モバイルデバイスまたは小さな画面のデバイスに表示されるオレンジ色の矢印です。スクロールインジケーターは、画面の表示されている部分を超えたコンテンツがあることを示します。下にスクロールして表示できます。矢印は、コンテンツの最後に到達すると消えます。
CSS クラス |
|
変数 |
説明 |
|
スクロールインジケーターの下からの固定位置 |
|
スクロールインジケーターの右からの固定位置 |
|
スクロールインジケーターの幅 |
|
スクロールインジケーターの高さ |
以下の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。
CSS クラス |
|
変数 |
説明 |
|
モバイルデバイス上でのツールバーの下からの固定位置 |
|
モバイルデバイス上でのツールバーの上からの固定位置 |
|
モバイルデバイス上でのツールバーの左からの固定位置 |
|
モバイルデバイス上でのツールバーの右からの固定位置 |
|
モバイルデバイス上でのツールバーのボタンアイコンの上からの固定位置 |
|
モバイルデバイス上でのツールバーのボタンアイコンの幅 |
|
モバイルデバイス上でのツールバーのボタンアイコンの高さ |
|
モバイルデバイス上のツールバーの背景色 |
/etc/clientlibs/fd/af/guidetheme/simpleEnrollment のシンプルな登録のテーマおよびカテゴリ guide.theme.simpleEnrollment
でも、いくつかの変数が導入されています。シンプルな登録を強化するテーマを作成したい場合は、以下の追加変数を利用できます。
変数 |
説明 |
|
ボタンがフォーカスされたときの背景色 |
|
ボタンにカーソルが置かれたときの背景色 |
|
ボタンの半径 |
|
ナビゲーションボタン(前へ/次へ)の背景色 |
|
カーソルが置かれたときのナビゲーションボタン(前へ/次へ)の背景色 |
|
ウィザードナビゲーターと対応するプログレスバーが最初にレンダリングされたときの背景色 |
|
現在アクティブなウィザードナビゲーターと対応するプログレスバーの背景色 |
|
訪問済みのウィザードナビゲーターと対応するプログレスバーの背景色 |
|
ナビゲーターとパネルにコンテナを分岐するボーダーの色 |
|
タブと左側にあるタブ(タブナビゲーター)を分ける下のボーダーの色 |
|
ナビゲーターの入れ子ナビゲーターの背景色 |