カスタムアダプティブフォームテーマの作成 creating-custom-adaptive-form-themes

/appsノードの下に cq:ClientLibraryFolder タイプのノードを作成します。

例として、以下のノードを作成します：

/apps/myAfThemes/forestTheme

複数の値を持つ文字列プロパティ categoriesをノードに追加し、適切な値に設定します。

例えば、プロパティを af.theme.forest に設定します。

手順 1 で作成したノードに、 less と css の 2 つのフォルダーと css.txt のファイルを追加します：

• less フォルダー：less 変数と CSS スタイルの管理に使用される less mixins を定義する less 変数ファイルが含まれています。

  このフォルダーは、less 変数ファイル、less ミックスインファイル、ミックスインと変数を使用してスタイルを定義する less ファイルから構成されています。そして、これらすべての less ファイルは、styles.less にインポートされます。

• css フォルダー：テーマで使用される静的スタイルを定義する CSS ファイルが含まれています。

LESS 変数ファイル:これらはファイルで、CSS スタイルの定義で使用される変数を定義または上書きします。

アダプティブフォームは、以下の.less ファイルで定義された OOTB 変数を提供します。

• /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
• /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

アダプティブフォームは、次のファイルで定義されているサードパーティ変数も提供しています：

/apps/clientlibs/fd/af/third-party/less/variables.less

アダプティブフォームで提供される LESS 変数 を使用する、これらの変数を上書きする、または 新しく LESS 変数を作成することができます。

上書き変数の例：

@button-background-color: rgb(19, 102, 44);
@button-border-color: rgb(19, 102, 44);
@button-border-size: 0px;
@button-padding: 10px 15px;
@button-font-color: #ffffff;

less 変数を上書きするには：

1. デフォルトのアダプティブフォーム変数を読み込む：

   /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

2. 次に、上書きされた変数を含む LESS ファイルをインポートします。

新しい変数の定義の例：

@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);

LESS ミックスインファイル： ​変数を引数として受け入れる関数を定義することができます。これらの関数の出力は、結果のスタイルです。 CSS スタイルの繰り返しを避けるために、これらの mixin を異なるスタイルで使用します。

アダプティブフォームは、次のファイルで定義された OOTB mixin を提供します。

• /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

アダプティブフォームは、次のファイルで定義されているサードパーティミックスインも提供しています：

• /apps/clientlibs/fd/af/third-party/less/mixins.less

ミックスインの定義の例：

.rounded-corners (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.border(@color, @type, @size) {
   border: @color @size @type;
}

styles.less ファイル： ​このファイルは、クライアントライブラリに使わなくてはならないすべての LESS ファイル（変数、ミックスイン、スタイル）を含むために使用します。

次の styles.less ファイルのサンプルでは、インポートステートメントは任意の順序で配置することができます。

次の LESS ファイルをインポートするためのステートメントは必須です：

• globalvariables.less
• layoutvariables.less
• components.less
• layouts.less

@import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
@import "forestTheme-variables";
@import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";

/* custom styles */

.guidetoolbar {
  input[type="button"], button, .button {
    .rounded-corners (@button-radius);
    &:hover {
      background-color: @button-hover-bg-color;
    }
    &:focus {
      background-color: @button-focus-bg-color;
    }
  }
}

form {
    background-image: url(../images/forest.png);
 background-repeat: no-repeat;
 background-size: 100%;
}

css.txt には、ライブラリにダウンロードする CSS ファイルのパスが含まれています。

次に例を示します。

#base=/apps/clientlibs/fd/af/third-party/css
bootstrap.css

#base=less
styles.less

#base=/apps/clientlibs/fd/xfaforms/xfalib/css
datepicker.css
listboxwidget.css
scribble.css
dialog.css

「アダプティブフォームテーマを作成するには」のセクションで作成したテーマを含めるには、cq:Component タイプのカスタムページを作成します。

例：/apps/myAfCustomizations/myAfPages/forestPage

1. sling:resourceSuperType プロパティを追加し、その値を fd/af/components/page/base に設定します。

   

2. ページでテーマを使用するには、ノードに上書きファイル library.jsp を追加する必要があります。

   次に、この記事の「アダプティブフォームテーマを作成するには」の節で作成したテーマを読み込みます。

   以下のサンプルコードでは、af.theme.forest のテーマをインポートしています。

   code language-none
   <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>

3. オプション：カスタムページでは、header.jsp、footer.jsp、the body.jsp を必要に応じて上書きしてください。

jcr:content が前の手順で作成されたカスタムページ（例：myAfCustomizations/myAfPages/forestPage)）を指しているカスタムテンプレート（例：/apps/myAfCustomizations/myAfTemplates/forestTemplate）を作成します。

前の手順で作成したテンプレートを使用して、アダプティブフォームを作成します。 アダプティブフォームのルックアンドフィールは、この記事の「アダプティブフォームテーマを作成するには」の節で作成したテーマによって定義されます。