アダプティブフォームのスタイル構成 styling-constructs-for-adaptive-forms

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

前提条件 prerequisites

CSS および LESS フレームワークに関する知識。

カスタマイズの対象 what-can-be-customized

この記事では、公開されているアダプティブフォームの CSS クラスについて説明します。これらのクラスを使用して、アダプティブフォームの様々なコンポーネントのスタイルを設定できます。警告を表示するダイアログやステータスバーなど、オーサリングコンポーネントのスタイル設定については、ここでは説明しません。テーマエディターを使用してコンポーネントのスタイル設定ができない場合にのみ、これらのスタイル構造を使用してスタイル（CSS または Less）を作成してください。

アダプティブフォームのスタイルのカスタマイズ customizing-styles-in-adaptive-forms

LESS フレームワークはユースケースを簡素化することで、アダプティブフォームでスタイルをカスタマイズできます。フレームワークでは、変数や関数のセット（Mixin）を使用したスタイルの定義が可能です。LESS フレームワークにより、バンドルされているコードのサイズを減らし、コードの再利用率を高めることができます。

アダプティブフォームのスタイルは、次の方法でカスタマイズできます。

テーマを変更 changing-theme

アダプティブフォームのテーマは、アダプティブフォームが埋め込まれている web ページと外観が一致するように変更することができます。

テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームのルック＆フィールへの大幅な変更は、テーマの変更とは見なされません。

Web ページのテーマは、ブートストラップに基づき、以下の CSS プロパティによって定義されます。

現在、LESS 変数は、アダプティブフォームの様々な要素のこれらのプロパティに対してのみ定義されています。

コンポーネントスタイルの変更 changing-component-style

要素の外観、レイアウト、配置、可視性を変更できます。そのためには、カスタムの .css ファイルを作成または更新し、この記事で説明するスタイル構成をそのファイルに含めます。

アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。

コンポーネント components

この記事で説明されているコンポーネントには、CSS クラスが事前に定義されています。変数を編集して、CSS クラスでスタイルを変更できます。または、クラス全体を書き換えることもできます。 このセクションでは、変数を使用して変更できるコンポーネントとスタイル内のクラスを説明します。

コンテナのスタイル設定 container-styling

コンテナは、最上位のコンポーネントです。他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。

フィールドのスタイル設定 field-styling

アダプティブフォームには、様々なタイプのフィールドが含まれています。各フィールドには一意のクラス名があり、それがフィールドの名前となっています。また、フィールドには、guideFieldNode という共通のクラス名もあります。

フィールドには、ラベル、ウィジェット、ヘルプの説明（詳細な説明と短い説明の両方）、フィールドヘルプアイコン（クエスチョンマーク）が含まれています。

ラベルのスタイル設定 label-styling

フィールドに使用される HTML 要素 label には、ラベルが上にあるか左にあるかによって、left または top のクラスが含まれます。

ラベルに対する CSS ルールは、guideFieldLabel ラベルを使用して適用されます。カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。

ウィジェットのスタイル設定 widgets-styling

タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget クラスが含まれています。HTML に付属のウィジェットは通常、標準の HTML 要素 input と select を使用しています。スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。

ウィジェットのスタイル設定における制限事項 limitations-in-widget-styling

フォーカスされたフィールド、必須フィールド、および無効なフィールドのスタイル設定は、変数を使用して制限されます。ただし、スタイルを上書きすることで変更することができます。変数の使用における制限は、主に変数の数を抑えるために設けられています。制限は、フィールドの外観が大きく変更され、前述の状態のいずれかにある場合に緩和できます。

ヘルプの説明 help-description

作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .guideHelpDescription を持っており、説明のタイプによって、もう 1 つのクラス .long／.short を持っています。ヘルプコンテンツは、説明のスタイル設定を上書きする段落要素で囲まれています。ヘルプの説明（詳細な説明と短い説明の両方）は、以下の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。

利用条件 terms-and-conditions

利用条件（TnC ``）ウィジェットでは、利用条件を指定できます。このウィジェットは、以下の表で説明する変数を使用してカスタマイズできます。

ボタン button

ボタンもウィジェットの 1 つです。ただし、スタイル設定はウィジェットとは多少異なります。アダプティブフォームでは、次のいずれかを含んでいればボタンと見なされます。

ボタンの HTML コード：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

疑問符 question-mark

ウィジェットでは、作成者がヘルプ コンテンツに長い説明を追加すると、疑問符が表示されます。ブートストラップで提供されるデフォルトのアイコンが使用されます。カスタムアイコンを使用するには、ブートストラップアイコンをカスタマイズします。

テーブル table

テーブル内のヘッダーおよびボディ行のカラーテーマは、以下の変数を使用して変更できます。

ファイル添付 file-attachment

アダプティブフォームの添付ファイルウィジェットでは、ファイルをアップロードすることができます。変数を使用してウィジェットをカスタマイズすることもできます。

ナビゲーターのスタイル navigator-styles

ナビゲータータブは 4 種類あります。これらには、左側、上部、ウィザード、アコーディオンのタブがあります。各ナビゲーターには、異なるクラスが割り当てられています。

以下に示すのは、タブナビゲーター要素（ブートストラップタブに類似する）の 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;

}

さらに、入れ子のナビゲーターの有無に基づいて、タブナビゲーター（左側と上部の両方）のスタイル設定を行うためのクラスがあります。

guideNavIcon クラスには、タブナビゲーター（左側と上部の両方）およびウィザードナビゲーターにデフォルトのアイコンがあります。

パネルのスタイル設定 panel-styling

パネルには、オプションのツールバーとそのコンテンツが含まれます。

パネルノードは、ナビゲーターとコンテンツに分かれています。コンテンツ用の別のスタイル設定コンポーネントはありません。 説明した変数は、ナビゲーターとコンテンツに適用されます。

最上部のパネル（RootPanel）にはこのクラスはありません。

モバイルのスタイル設定 mobile-styling

ヘッダーバー header-bar

これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ／前へのナビゲーターを含むバーのことです。

スクロールインジケーター scroll-indicator

これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターは、モバイルデバイスまたは小さな画面のデバイスに表示されるオレンジ色の矢印です。スクロールインジケーターは、画面の表示されている部分を超えたコンテンツがあることを示します。下にスクロールして表示できます。矢印は、コンテンツの最後に到達すると消えます。

モバイル固定ツールバーのレイアウト固有の変数 mobile-fixed-toolbar-layout-specific-variables

以下の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。

テーマ固有の変数 theme-specific-variable

/etc/clientlibs/fd/af/guidetheme/simpleEnrollment の​ シンプルな登録 ​のテーマおよびカテゴリ guide.theme.simpleEnrollment でも、いくつかの変数が導入されています。シンプルな登録を強化するテーマを作成したい場合は、以下の追加変数を利用できます。