現在表示中:

前提条件

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

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

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

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

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

注意:

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

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

森をテーマにしたアダプティブフォームのスナップショット

あるいは、添付の forest.zip で提供されているテンプレートを試用することもできます。

ダウンロード

森のテーマのサンプル

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

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

    /etc/myAfThemes/forestTheme

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

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

    CRX レポジトリのスナップショット
  3. 手順 1 で作成したノードに、LESSCSS の 2 つのフォルダーおよび css.txt のファイルを追加します:

    • LESS フォルダー:CSS スタイルを管理するために使用される LESS 変数および LESS ミックスインを定義する LESS 変数ファイルが含まれています。
      このフォルダーは、LESS 変数ファイル、LESS ミックスインファイル、ミックスインと変数を使用してスタイルを定義する LESS ファイルから構成されています。そして、これらすべての less ファイルは、styles.less にインポートされます。
    • CSS フォルダー:テーマで使用される静的スタイルを定義する CSS ファイルが含まれています。

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

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

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

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

    /etc/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. デフォルトのアダプティブフォーム変数をインポートします:
      /etc/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/etc/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 ミックスインを提供します:

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

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

    • /etc/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=/etc/clientlibs/fd/af/third-party/css
    bootstrap.css
    
    #base=less
    styles.less
    
    #base=/etc/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"%>
      <cq:includeClientLib categories="af.theme.forest"/>
    3. オプション:カスタムページでは、header.jsp、footer.jsp、the body.jsp を必要に応じて上書きしてください。

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー