新規ログイン画面の作成

AEM Forms ログイン画面を使用するすべての AEM Forms モジュールのログイン画面を変更することができます。例えば、変更すると Forms Manager および AEM Forms Workspace の両方のログイン画面に影響が及びます。

前提条件

1. /lc/crx/deに管理者権限でログインします。

2. 次のアクションを実行します。

   1. 階層構造を複製します。の/libs/livecycle/core/contentを/apps/livecycle/core/contentに配置します。 同じ（ノード/フォルダー）プロパティおよびアクセス制御を保持します。
   2. コンテンツフォルダーをコピーします。/libs/livecycle/coreから/apps/livecycle/coreまで。
   3. /apps/livecycle/coreフォルダーの内容を削除します。

3. 次の操作を実行します。

   1. 階層構造を複製します。の/libs/livecycle/core/components/loginを/apps/livecycle/core/components/loginに配置します。 同じ（ノード/フォルダー）プロパティおよびアクセス制御を保持します。
   2. componentsフォルダーをコピーします。/libs/livecycle/coreから/apps/livecycle/coreまで。
   3. フォルダーの内容を削除します。/apps/livecycle/core/components/login.

新しいロケールの追加

1. i18nフォルダーをコピーします。

   • コピー元：/libs/livecycle/core/components/login
   • コピー先：/apps/livecycle/core/components/login

2. i18n内のフォルダー（enを除く）をすべて削除します。

3. フォルダー en で、以下のアクションを実行します。

   1. フォルダーの名前をサポートするロケール名に変更します。（例：ar）。
   2. プロパティjcr:languageの値をar（arフォルダー用）に変更します。
   メモ

   ar-DZ のようにロケールが言語と国コードの組み合わせである場合は、フォルダー名とプロパティ値を ar-DZ に変更します。

4. コピー login.jsp:

   • コピー元：/libs/livecycle/core/components/login
   • コピー先：/apps/livecycle/core/components/login

5. /apps/livecycle/core/components/login/login.jspのコードの次のスニペットを変更します。

   ロケールが言語コードである場合

   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   
   To
   
   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("ar")) {
               browserLocale = "ar";
               break;
           }
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   

   ロケールが言語-国コードである場合

   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   
   To
   
   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().equalsIgnoreCase("ar-DZ")) {
               browserLocale = "ar-DZ";
               break;
           }
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   

   デフォルトのロケールを変更するには

   String browserLocale = "en";
   for(int i=0; i<locales.length; i++)
   
   To
   
   String browserLocale = "ar";
   for(int i=0; i<locales.length; i++)
   

新しいテキストの追加、または既存のテキストの変更

1. i18nフォルダーをコピーします。

   • コピー元：/libs/livecycle/core/components/login
   • コピー先：/apps/livecycle/core/components/login

2. ここで、テキストを変更するノード（該当するロケールコードフォルダの下）のプロパティ sling:message の値を変更します。翻訳は、ノードのプロパティ sling:key の値に示されているキーを介して行われます。

3. 新しいキーと値のペアを追加するには、次のアクションを実行します。次に続くスクリーンショットの例を確認してください。

   1. sling:MessageEntry タイプのノードを作成するか、またはすべてのロケールフォルダーの下で既存のノードをコピーして名前を変更します。

   2. コピー login.jsp :

      • コピー元：/libs/livecycle/core/components/login
      • コピー先：/apps/livecycle/core/components/login

   3. /apps/livecycle/core/components/login/login.jspを変更して、新しく追加したテキストを取り込みます。

   

   div class="loginContent">
                       <span class="loginFlow"></span>
                       <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                       <span class="loginTitle"><%= i18n.get("Login") %></span>
                       <% if (loginFailed) {%>
   
   To
   
   div class="loginContent">
                       <span class="loginFlow"></span>
                       <span class="loginVersion"><%= i18n.get("My Welcome Message") %></span>
                       <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                       <span class="loginTitle"><%= i18n.get("Login") %></span>
                       <% if (loginFailed) {%>
   

新しいスタイルの追加、または既存のスタイルの変更

1. loginノードをコピーします。

   • コピー元：/libs/livecycle/core/content
   • コピー先：/apps/livecycle/core/content

2. ノード/apps/livecycle/core/content/login.からlogin.jsとjquery-1.8.0.min.jsを削除します。

3. CSS ファイルのスタイルを変更します。

4. 新しいスタイルを追加するには：

   1. /apps/livecycle/core/content/login/login.cssに新しいスタイルを追加する

   2. コピー login.jsp

      • コピー元：/libs/livecycle/core/components/login
      • コピー先：/apps/livecycle/core/components/login

   3. /apps/livecycle/core/components/login/login.jspを変更して、新しく追加したスタイルを取り込みます。

5. 次に例を示します。

   • /apps/livecycle/core/content/login/login.cssに次を追加します。

   .newLoginContentArea {
    width: 700px;
    padding: 100px 0px 0px 100px;
   }
   

   • /apps/livecycle/core/components/login.jsp で次を変更します。

   <div class="loginContentArea">
   
   To
   
   <div class="newLoginContentArea">
   

新しい画像の追加

1. 新しいスタイルの追加または既存のスタイルの変更の手順に従います（前述）。

2. /apps/livecycle/core/content/loginに新しい画像を追加します。 画像を追加するには：

   1. WebDAV クライアントをインストールします。
   2. webDAVクライアントを使用して/apps/livecycle/core/content/loginフォルダーに移動します。 詳しくは、次を参照してください。https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
   3. 新しい画像を追加します。

3. /apps/livecycle/core/content/loginに追加された新しい画像に対応する新しいスタイルを/apps/livecycle/core/content/login/login.css,に追加します。

4. /apps/livecycle/core/componentsのlogin.jspで新しいスタイルを使用します。

5. 以下に例を示します。

   • 以下を/apps/livecycle/core/content/login/login.cssに追加します。

   .newLoginContainerBkg {
    background-image: url(my_Bg.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 727px;
   }
   

   • /apps/livecycle/core/components/login.jsp で次を変更します。

   <div class="loginContainerBkg">
   
   To
   
   <div class="newLginContainerBkg">