カスタムアダプティブフォームテーマの作成

注意

AEM Formsは、アダプティブフォームテーマを作成および変更するためのテーマエディター機能を提供しています。 この記事に示す手順を実行するのは、Theme Editorを持たないバージョンからアップグレードした場合で、LESS/CSSファイルを使用して作成したテーマに対する既存の投資がある場合のみです(テーマ編集前の方法)。

前提条件

アダプティブフォームテーマ

アダプティブフォームテーマ​は、アダプティブフォームのスタイル(ルック&フィール)を定義するために使用する AEM クライアントライブラリのことです。

アダプティブテンプレート​を作成し、テンプレートにテーマを適用します。そしてこのカスタムテンプレートを使い、アダプティブフォーム​を作成します。

アダプティブフォームとクライアントライブラリ

アダプティブフォームテーマを作成するには

メモ

次の手順では、ノード、プロパティ、フォルダーなどのAEM オブジェクトに対し、サンプル名を使用して説明します。

この手順にしたがって同じ名前を使用すると、結果として次のスナップショットと同じようなテンプレートが出来上がるはずです:

フォレストテーマのアダプティブフォーム
のスナップショット図: フォレストテーマのサンプル

  1. /appsノードの下にcq:ClientLibraryFolder型のノードを作成します。

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

    /apps/myAfThemes/forestTheme

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

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

    CRX レポジトリのスナップショット

  3. 手順1で作成したノードに対する追加2つのフォルダーlesscss、ファイルcss.txtがあります。

    • less folder:変数を定義する less 変数ファイルが含まれます。この less 変数は、.cssスタイル less mixins の管理に使用されます。

      このフォルダーは、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 変数を作成することができます。

    メモ

    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 スタイルの繰り返しを避けることができます。

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

    • /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
    
    メモ

    styles.less ファイルは必須ではありません。これはつまり、カスタムスタイル、変数、ミックスインを定義していない場合には、このファイルを作成する必要はないということです。

    しかし、styles.less ファイルを作成しない場合には、css.txt ファイル内の次の行をアンコメントする必要があります:

    #base=less

    さらに、次の行をコメントアウトします:

    styles.less

アダプティブフォームでテーマを使用するには

アダプティブフォームテーマを作成した後、このテーマをアダプティブフォームで使用するには、次の手順を行ないます:

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

    例:/apps/myAfCustomizations/myAfPages/forestPage

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

      CRX レポジトリのスナップショット

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

      次に、本記事の「アダプティブフォームテーマを作成するには」のセクションで作成されたテーマをインポートします。

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

      <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=ja"%>
      <cq:includeClientLib categories="af.theme.forest"/>
      
    3. オプション:カスタムページでは、header.jsp、footer.jsp、the body.jsp を必要に応じて上書きしてください。

  2. カスタムテンプレートの作成(例:/apps/myAfCustomizations/myAfTemplates/forestTemplate)。jcr:contentは、前の手順で作成したカスタムページを指します(例:myAfCustomizations/myAfPages/forestPage).

    CRX レポジトリのスナップショット

  3. 前の手順で作成したテンプレートを使って、アダプティブフォームを作成します。アダプティブフォームのルック&フィールは、本記事の「アダプティブフォームテーマを作成するには」のセクションで作成されたテーマによって定義されています。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now