現在表示中:

このチュートリアルでは、Adobe Experience Manager(AEM)を使用して完全な機能を持つ Web サイトを作成できます。Web サイトは汎用の Web サイトをベースとし、主に Web 開発者をターゲットとしています。開発はすべて、作成者環境内で行われます。

このチュートリアルでは、次の方法を説明します。

  1. AEM をインストールします。
  2. CRXDE Lite(開発環境)にアクセスします。
  3. CRXDE Lite でプロジェクトの構造を設定します。
  4. コンテンツページ作成の基礎として使用するテンプレート、コンポーネントおよびスクリプトを作成します。
  5. Web サイトのルートページを作成し、次にコンテンツページを作成します。
  6. ページで使用する以下のコンポーネントを作成します。
    • 上部ナビゲーション
    • リストの子
    • ロゴ
    • 画像
    • テキスト画像
    • 検索
  7. 様々な基盤コンポーネントを含めます。

すべての手順を実行後、ページは次のようになります。

最終結果のダウンロード

演習を行わずにチュートリアルに従う場合は、website-1.0.zip をダウンロードします。このファイルは、このチュートリアルの結果を含む AEM コンテンツパッケージです。パッケージマネージャーを使用して、作成者インスタンスにパッケージをインストールします。

注意:このパッケージをインストールすると、このチュートリアルを使用して作成した作成者インスタンス上のリソースがすべて上書きされます。

 

ダウンロード

Adobe Experience Manager のインストール

Web サイトを開発するための AEM インスタンスをインストールするには、作成者インスタンスと発行インスタンスを含むデプロイメント環境の設定手順に従うか、または汎用インストールを実行します。汎用インストールでは、AEM クイックスタート JAR ファイルをダウンロードし、license.properties ファイルを JAR ファイルと同じディレクトリに配置して、JAR ファイルをダブルクリックします。

AEM をインストールしたら、ようこそページで CRXDE Lite のリンクをクリックして CRXDE Lite 開発環境にアクセスします。

注意:

デフォルトポートを使用してローカルにインストールされた AEM 作成者インスタンスの CRXDE Lite の URL は http://localhost:4502/crx/de/ です。

CRXDE Lite でのプロジェクト構造の設定

CRXDE Lite を使用して、リポジトリ内に mywebsite アプリケーション構造を作成します。

  1. CRXDE Lite の左側にあるツリーで、/apps フォルダーを右クリックして、作成フォルダーを作成をクリックします。フォルダーを作成ダイアログで、フォルダー名として "mywebsite" と入力し、「OK」をクリックします。

  2. /apps/mywebsite フォルダーを右クリックして、作成フォルダーを作成をクリックします。フォルダーを作成ダイアログで、フォルダー名として "components" と入力し、「OK」をクリックします。

  3. /apps/mywebsite フォルダーを右クリックして、作成フォルダーを作成をクリックします。フォルダーを作成ダイアログで、フォルダー名として "templates" と入力し、「OK」をクリックします。

    ツリー内の構造は次のようになります。

  4. すべて保存」をクリックします。

デザインの設定

ここでは、デザイナーツールを使用してアプリケーションのデザインを作成します。デザインによって、Web サイトに CSS リソースおよび画像リソースが提供されます。

注意:

以下のリンクをクリックして mywebsite.zip をダウンロードします。アーカイブには、デザイン用の static.css および画像ファイルが含まれています。

ダウンロード

  1. AEM のようこそページで、「ツール」をクリックします(http://localhost:4502/libs/cq/core/content/welcome.html)。

  2. フォルダーツリーで、designs フォルダーを選択して、新規新しいページをクリックします。タイトルとして "mywebsite" と入力し、「作成」をクリックします。

  3. mywebsite という項目がテーブルに表示されない場合は、ツリーまたはテーブルを更新します。

  4. http://localhost:4502 への WebDAV アクセスを使用して、サンプルの static.css ファイルと images フォルダーを、ダウンロードした mywebsite.zip ファイルから /etc/designs/mywebsite フォルダーにコピーします。

contentpage テンプレート、コンポーネントおよびスクリプトの作成

ここでは、以下を作成します。

  • サンプル Web サイトのコンテンツページを作成する際に使用する contentpage テンプレート
  • コンテンツのページをレンダリングする際に使用する contentpage コンポーネント
  • contentpage スクリプト

contentpage テンプレートの作成

サイトの Web ページの基礎として使用するテンプレートを作成します。

テンプレートは、新しいページのデフォルトのコンテンツを定義するものです。複雑な Web サイトでは、複数のテンプレートを使用して様々なタイプのページを作成する場合があります。この演習では、すべてのページが 1 つの単純なテンプレートをベースとしています。

  1. CRXDE Lite のフォルダーツリーで、/apps/mywebsite/templates を右クリックして、作成テンプレートを作成をクリックします。

  2. テンプレートを作成ダイアログで、以下の値を入力して「次へ」をクリックします。

    • ラベル:contentpage
    • タイトル:My Website Content Page Template
    • 説明:This is my Website Content Page Template
    • リソースタイプ:mywebsite/components/contentpage

    「ランキング」プロパティにはデフォルト値を使用します。

    リソースタイプは、ページをレンダリングするコンポーネントを特定します。この場合は、contentpage テンプレートを使用して作成されたページはすべて、mywebsite/components/contentpage コンポーネントによってレンダリングされます。

  3. このテンプレートを使用できるページのパスを指定するには、プラス記号のボタンをクリックして、表示されるテキストボックスに "/content(/.*)?" と入力します。その後、「次へ」をクリックします。

    許可されているパスプロパティの値は正規表現です。この正規表現に一致するパスを含むページがテンプレートを使用できます。この場合、正規表現は、/content フォルダーおよびすべてのサブページのパスと一致します。

    作成者が /content の下にページを作成すると、使用可能なテンプレートのリストに contentpage テンプレートが表示されます。

  4. 許可された親パネルおよび許可されている子パネルで「次へ」をクリックして、「OK」をクリックします。CRXDE Lite で、「すべて保存」をクリックします。

contentpage コンポーネントの作成

コンテンツを定義し、contentpage テンプレートを使用するコンポーネントを作成します。コンポーネントの場所は、contentpage テンプレートの「リソースタイプ」プロパティの値と一致する必要があります。

  1. CRXDE Lite で、/apps/mywebsite/components を右クリックして、作成コンポーネントをクリックします。

  2. コンポーネントを作成ダイアログで、以下のプロパティ値を入力します。

    • ラベル:contentpage
    • タイトル:My Website Content Page Component
    • 説明:This is My Website Content Page Component

    新しいコンポーネントの場所は /apps/mywebsite/components/contentpage です。このパスは、contentpage テンプレートのリソースタイプと一致します(パスの最初の /apps/ 部分を除く)。

    この一致は、テンプレートをコンポーネントと結び付けるものなので、Web サイトを正常に機能させるために重要です。

  3. 次へ」を数回クリックしてダイアログの許可されている子パネルを表示し、「OK」をクリックします。CRXDE Lite で、「すべて保存」をクリックします。

    この時点で構造は次のようになります。

contentpage コンポーネントスクリプトの開発

contentpage.jsp スクリプトにコードを追加してページコンテンツを定義します。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage 内の contentpage.jsp ファイルを開きます。このファイルには、デフォルトで以下のコードが含まれています。

    <%--
    
      My Website Content Page Component component.
    
      This is My Website Content Page Component.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %><%
    %><%
        /* TODO add you code here */
    %>
  2. 以下のコードをコピーして、contentpage.jsp のデフォルトコードの後に貼り付けます。

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>My title</title>
    </head>
    <body>
    <div>My body</div>
    </body>
    </html>
  3. すべて保存」をクリックして変更を保存します。

Web サイトページおよびコンテンツページの作成

ここでは、すべて contentpage テンプレートを使用する、My Website、English、Products、Services、Customers の各ページを作成します。

  1. AEM のようこそページ(http://localhost:4502/libs/cq/core/content/welcome.html)で、「Web サイト」をクリックします。

  2. フォルダーツリーで、Websites フォルダーを選択して、新規新しいページをクリックします。

  3. ページを作成ウィンドウで、以下を入力します。

    • タイトル:My Website
    • 名前:mywebsite
    • My Website Content Page Template」を選択します。
  4. 作成」をクリックします。フォルダーツリーで、/Websites/My Website ページを選択して、新規新しいページをクリックします。

  5. ページを作成ダイアログで、以下のプロパティ値を入力して「作成」をクリックします。

    • タイトル:English
    • 名前:en
    • 「My Website Content Page Template」を選択します。
  6. フォルダーツリーで、/Websites/My Website/English ページを選択して、新規新しいページをクリックします。

  7. ページを作成ダイアログで、以下のプロパティ値を入力して「作成」をクリックします。

    • タイトル:Products
    • 「My Website Content Page Template」を選択します。

  8. フォルダーツリーで、/Websites/My Website/English ページを選択して、新規新しいページをクリックします。

  9. ページを作成ダイアログで、以下のプロパティ値を入力して「作成」をクリックします。

    • タイトル:Services
    • 「My Website Content Page Template」を選択します。
  10. フォルダーツリーで、/Websites/My Website/English ページを選択して、新規新しいページをクリックします。

  11. ページを作成ダイアログで、以下のプロパティ値を入力して「作成」をクリックします。

    • タイトル:Customers
    • 「My Website Content Page Template」を選択します。

    構造は次のようになります。

  12. ページを mywebsite デザインにリンクさせるには、CRXDE Lite で、/content/mywebsite/en/jcr:content ノードを選択します。「プロパティ」タブで、新しいプロパティ用に以下の値を入力して「追加」をクリックします。

    • 名前:cq:designPath
    • タイプ:String
    • 値:/etc/designs/mywebsite
  13. Web ブラウザーの新しいタブまたはウィンドウで、http://localhost:4502/content/mywebsite/en/products.html を開いて Products ページを確認します。

contentpage スクリプトの機能強化

ここでは、AEM 基盤コンポーネントのスクリプトを使用し、独自のスクリプトを作成することによって contentpage スクリプトの機能を強化する方法について説明します。

Products ページは次のようになります。

基盤ページスクリプトの使用

この演習では、スーパータイプが AEM のページコンポーネントとなるように pagecontent コンポーネントを設定します。コンポーネントはスーパータイプの機能を継承するので、pagecontent はページコンポーネントのスクリプトとプロパティを継承します。

例えば、自分のコンポーネントの JSP コード内で、スーパータイプコンポーネントによって提供されているスクリプトを、自分のコンポーネントに含まれているかのように参照できます。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage ノードにプロパティを追加します。

    1. /apps/mywebsite/components/contentpage ノードを選択します。
    2. 「プロパティ」タブの下部で、以下のプロパティ値を入力して「追加」をクリックします。
      • 名前:sling:resourceSuperType
      • タイプ:String
      • 値:foundation/components/page
    3. 「すべて保存」をクリックします。
  2. /apps/mywebsite/components/contentpage の下の contentpage.jsp ファイルを開いて、既存のコードを以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" contentType="text/html; charset=utf-8" %><%
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <cq:include script="head.jsp"/>
    <cq:include script="body.jsp"/>
    </html>
  3. 変更を保存します。

  4. ブラウザーで、Products ページを再読み込みします。次のように表示されます。

    ページソースを開いて、head.jsp スクリプトと body.jsp スクリプトによって生成された JavaScript および HTML の要素を確認します。以下のスクリプトスニペットを指定すると、ページを開いたときにサイドキックが開きます。

    CQ.WCM.launchSidekick("/content/mywebsite/en/products",
                {propsDialog: "/libs/foundation/components/page/dialog",
                   locked: false locked: false
                 }); 

独自のスクリプトの使用

ここでは、それぞれページ本体の一部を生成する複数のスクリプトを作成します。次に、pagecontent コンポーネントで body.jsp ファイルを作成して、AEM のページコンポーネントの body.jsp を上書きします。作成する body.jsp ファイルには、ページ本体の様々な部分を生成するスクリプトを含めます。

ヒント:コンポーネントのスーパータイプ内のファイルと同じ名前で相対的な場所も同じファイルがコンポーネントに含まれている場合、これをオーバーレイと呼びます。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage の下に left.jsp ファイルを作成します。

    1. /apps/mywebsite/components/contentpage ノードを右クリックして、作成ファイルを作成を選択します。
    2. ウィンドウで、「名前」に "left.jsp" と入力して、「OK」をクリックします。
  2. left.jsp ファイルを編集して、既存のコンテンツを削除し、以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
  3. 変更内容を保存します。

  4. CRXDE Lite で、/apps/mywebsite/components/contentpage の下に center.jsp ファイルを作成します。

    1. /apps/mywebsite/components/contentpage ノードを右クリックして、作成ファイルを作成を選択します。
    2. ダイアログボックスで、「名前」に "center.jsp" と入力して、「OK」をクリックします。
  5. center.jsp ファイルを編集して、既存のコンテンツを削除し、以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
  6. 変更内容を保存します。

  7. CRXDE Lite で、/apps/mywebsite/components/contentpage の下に right.jsp ファイルを作成します。

    1. /apps/mywebsite/components/contentpage ノードを右クリックして、作成ファイルを作成を選択します。
    2. ダイアログボックスで、「名前」に "right.jsp" と入力して、「OK」をクリックします。
  8. right.jsp ファイルを編集して、既存のコンテンツを削除し、以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
  9. 変更内容を保存します。

  10. CRXDE Lite で、/apps/mywebsite/components/contentpage の下に body.jsp ファイルを作成します。

  11. body.jsp ファイルを編集して、既存のコンテンツを削除し、以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><body>
    <div id="CQ">
    <div class="topnav">topnav</div>
    <div class="content">
    <cq:include script="left.jsp" />
    <cq:include script="center.jsp" />
    <cq:include script="right.jsp" />
    </div>
    <div class="footer">
    <div class="toolbar">toolbar</div>
    </div>
    </div>
    </body>
  12. 変更内容を保存します。

  13. ブラウザーで、Products ページを再読み込みします。次のように表示されます。

上部ナビゲーションコンポーネントの作成

ここでは、ナビゲーションを簡単にするために、Web サイトのすべての最上位ページへのリンクを表示するコンポーネントを作成します。このコンポーネントのコンテンツは、contentpage テンプレートを使用して作成されたすべてのページの上部に表示されます。

上部ナビゲーションコンポーネント(topnav)の最初のバージョンでは、ナビゲーション項目はテキストリンクのみです。2 番目のバージョンでは、画像ナビゲーションリンクと共に topnav を実装します。

上部ナビゲーションは次のようになります。

上部ナビゲーションコンポーネントの作成

  1. CRXDE Lite で、/apps/mywebsite/components を右クリックして、作成コンポーネントを作成をクリックします。

  2. コンポーネントを作成ウィンドウで、以下を入力します。

    • ラベルtopnav
    • タイトルMy Top Navigation Component
    • 説明This is My Top Navigation Component

  3. 次へ」を数回クリックして最後のウィンドウに移動し、「OK」をクリックします。変更内容を保存します。

テキストリンクを含む上部ナビゲーションスクリプトの作成

topnav にレンダリングスクリプトを追加して、子ページへのテキストリンクを生成します。

  1. CRXDE Lite で、/apps/mywebsite/components/topnav の下の topnav.jsp ファイルを開きます。

  2. 以下のコードをコピー&ペーストして、ファイル内のコードを置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><% 
    %><%@ page import="java.util.Iterator,
            com.day.text.Text, 
            com.day.cq.wcm.api.PageFilter, com.day.cq.wcm.api.Page" %><% 
        /* get starting point of navigation */
        Page navRootPage = currentPage.getAbsoluteParent(2); 
        if (navRootPage == null && currentPage != null) { 
        navRootPage = currentPage; 
        }
        if (navRootPage != null) { 
            Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));
            while (children.hasNext()) { 
                Page child = children.next(); 
                %><a href="<%= child.getPath() %>.html"><%=child.getTitle() %></a><% 
            } 
        } 
    %> 

contentpage コンポーネントに上部ナビゲーションを含める

contentpage コンポーネントに topnav を含めるには:

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage の下の body.jsp ファイルを開いて、

    <div class="topnav">topnav</div>

    を次のように置き換えます。

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
  2. 変更内容を保存します。

  3. ブラウザーで、Products ページを再読み込みします。上部ナビゲーションは次のように表示されます。

サブタイトルを含めたページの強化

ページコンポーネントで定義されるプロパティを使用すると、ページにサブタイトルを指定できます。ページコンテンツに関する情報を提供するサブタイトルを追加します。

  1. ブラウザーで、Products ページを開きます。

  2. サイドキックの「ページ」タブで、「ページのプロパティ」をクリックします。

  3. ダイアログの「基本」タブで、「他のタイトルと説明」を展開して、「サブタイトル」プロパティに "what we do" と入力します。「OK」をクリックします。

  4. ここまでの手順を繰り返して、「about our services」というサブタイトルを Services ページに追加します。

  5. ここまでの手順を繰り返して、「the trust we earn」というサブタイトルを Customers ページに追加します。

    ヒント:CRXDE Lite で、/content/mywebsite/en/products/jcr:content ノードを選択して、サブタイトルプロパティが追加されていることを確認します。

画像リンクを使用した上部ナビゲーションの強化

ハイパーテキストの代わりに画像リンクを使用してナビゲーションを制御するように、topnav コンポーネントのレンダリングスクリプトを強化します。画像には、リンクターゲットのタイトルとサブタイトルが含まれます。

この演習では、Sling の要求処理を実証します。ページナビゲーションリンクに使用する画像を動的に生成するスクリプトを呼び出すように topnav.jsp スクリプトを変更します。この演習では、Sling で画像ソースファイルの URL を解析し、画像のレンダリングに使用するスクリプトを特定します。

例えば、Products ページへの画像リンクのソースは、http://localhost:4502/content/mywebsite/en/products.navimage.png などになります。Sling では、この URL を解析して、リソースタイプおよびリソースのレンダリングに使用するスクリプトを特定します。

  1. Sling がリソースのパスを /content/mwebysite/en/products.png と特定します。
  2. Sling がこのパスを /content/mywebsite/en/products ノードと照合します。
  3. Sling がこのノードの sling:resourceTypemywebsite/components/contentpage と特定します。
  4. Sling が、このコンポーネント内で、URL セレクター(navimage)およびファイル名拡張子(png)に最も一致するスクリプトを見つけます。

この演習では、Sling はこれらの URL を、ユーザーが作成する /apps/mywebsite/components/contentpage/navimage.png.java スクリプトと照合します。

  1. CRXDE Lite で、/apps/mywebsite/components/topnav の下の topnav.jsp を開きます。アンカー要素(14 行目)のコンテンツを見つけます。

    <%=child.getTitle() %>
  2. アンカーのコンテンツを以下のコードに置き換えます。

    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
  3. 変更内容を保存します。

  4. /apps/mywebsite/components/contentpage ノードを右クリックして、作成ファイルを作成をクリックします。

  5. ファイルを作成ウィンドウで、「名前」に "navimage.png.java" と入力します。

    .java というファイル名拡張子は、Apache Sling Scripting Java Support  を使用してスクリプトをコンパイルし、サーブレットを作成する必要があることを Sling に示します。

  6. 以下のコードを navimage.png.java にコピーします。このコードによって、AbstractImageServlet クラスが拡張されます。

    • AbstractImageServlet は、現在のリソースのプロパティを格納する ImageContext オブジェクトを作成します。
    • リソースの親ページは、ImageContext オブジェクトから抽出されます。その後、ページのタイトルとサブタイトルが取得されます。
    • ImageHelper は、サイトデザイン、ページタイトルおよびページサブタイトルの navimage_bg.jpg ファイルから画像を生成するために使用します。
    package apps.mywebsite.components.contentpage;
    
    import java.awt.Color; 
    import java.awt.Paint; 
    import java.awt.geom.Rectangle2D; 
    
    import java.io.IOException;  
    import javax.jcr.RepositoryException; 
     
    import com.day.cq.wcm.api.Page; 
    import com.day.cq.wcm.api.PageManager; 
    import com.day.cq.wcm.api.components.Component; 
    import com.day.cq.wcm.api.designer.Designer;
    
    import com.day.cq.commons.SlingRepositoryException; 
    import com.day.cq.wcm.commons.WCMUtils; 
    import com.day.cq.wcm.commons.AbstractImageServlet; 
    import com.day.cq.commons.ImageHelper; 
    
    import com.day.image.Font; 
    import com.day.image.Layer; 
    
    import org.apache.sling.api.SlingHttpServletRequest; 
    import org.apache.sling.api.SlingHttpServletResponse; 
    import org.apache.sling.api.resource.Resource; 
    import org.apache.sling.api.servlets.SlingSafeMethodsServlet; 
    
    /**
      * Renders the navigation image
      */ 
    public class navimage_png extends AbstractImageServlet {
    
          protected Layer createLayer(ImageContext ctx)
                 throws RepositoryException, IOException {
             PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);
             Page currentPage = pageManager.getContainingPage(ctx.resource);
    
             /* constants for image appearance */
             int scale = 6;
             int paddingX = 24;
             int paddingY = 24;
             Color bgColor = new Color(0x004a565c, true);
             
             /* obtain the page title */
             String title = currentPage.getTitle();
             if (title == null) {
                 title = currentPage.getName();
             }
             
             /* format the title text */
             title = title.toUpperCase();
             Paint titleColor = Color.WHITE;
             Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);
             int titleBase = 10 * scale;
    
             /* obtain and format the page subtitle */
             String subtitle = currentPage.getProperties().get("subtitle", "");
             Paint subtitleColor = new Color(0xffa9afb1, true);
             Font subTitleFont = new Font("Tahoma", 7);
             int subTitleBase = 20;
    
             /* create a layer that contains the background image from the mywebsite design */
             Designer dg = ctx.resolver.adaptTo(Designer.class);
             String imgPath = new String(dg.getDesignPath(currentPage)+"/images/navimage_bg.jpg");
             Layer bg = ImageHelper.createLayer(ctx.resolver.resolve(imgPath));
    
             /* draw the title text (4 times bigger) */
             Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_LEFT, 0, 0);
             Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
    
             /* ensure subtitleExtent is wide enough */
             if ( subtitle.length() > 0 ) {
                 int titleWidth = (int)titleExtent.getWidth() / scale;
                 if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2 * paddingX >
     bg.getWidth() ) {
                     int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();
                     int maxWidth = (bg.getWidth() > titleWidth + 2  * paddingX ? bg.getWidth() - 2 * paddingX : titleWidth);
                     int len = (maxWidth - ( 2 * charWidth) ) / charWidth;
                     subtitle = subtitle.substring(0, len) + "...";
                     subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
                 }
             }
             int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth());
            /* create the text layer */
             Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01ffffff, true));
             text.setPaint(titleColor);
             text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
             text.resize(text.getWidth() / scale, text.getHeight() / scale);
             text.setX(0);
             text.setY(0);
    
             if (subtitle.length() > 0) {
                 /* draw the subtitle normal sized */
                 text.setPaint(subtitleColor);
                 text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0); 
             }
    
             /* merge the image and text layers */
             text.setY(paddingY);
             text.setX(paddingX);
             text.setBackgroundColor(bgColor);
    
             int bgWidth = bg.getWidth();
             if ( text.getWidth() + 2 * paddingX > bgWidth ) {
                 bgWidth = text.getWidth() + 2 * paddingX;
                 bg.resize(bgWidth, bg.getHeight());
             }
             bg.merge(text);
    
             return bg;
         }
     }
  7. 変更内容を保存します。

  8. ブラウザーで、Products ページを再読み込みします。この時点で上部ナビゲーションは次のように表示されます。

リストの子コンポーネントの作成

ページ(製品ページなど)のタイトル、説明、日付を含むページリンクのリストを生成するリストの子(listchildren)コンポーネントを作成します。このリンクのターゲットは、現在のページの、またはコンポーネントのダイアログで指定されているルートページの子ページです。

製品ページの作成

Products ページの下に 2 つのページを作成します。特定の 2 つの製品を説明するページごとに、タイトル、説明および日付を設定します。

  1. Web サイトページのフォルダーツリーで、Websites/My Website/English/Products 項目を選択して、新規/新しいページをクリックします。

  2. ダイアログで、以下のプロパティ値を入力して「作成」をクリックします。

    • タイトル:Product 1
    • 名前:product1
    • 「My Website Content Page Template」を選択します。
  3. 以下のプロパティ値を使用して、Products の下にもう 1 つのページを作成します。

    • タイトル:Product 2
    • 名前:product2
    • 「My Website Content Page Template」を選択します。
  4.  

    CRXDE Lite で、Product 1 ページの説明と日付を設定します。

     

    1. /content/mywebsite/en/products/product1/jcr:content ノードを選択します。
    2. プロパティ」タブで、以下の値を入力します。
      • 名前:jcr:description
      • タイプ:String
      • 値:This is a description of the Product 1!
    3. 追加」をクリックします。
    4. プロパティ」タブで、以下の値を使用してもう 1 つのプロパティを作成します。
      • 名前:date
      • タイプ:String
      • 値:02/14/2008
      • 「追加」をクリックします。
    5. 「すべて保存」をクリックします。
  5. CRXDE Lite で、Product 2 ページの説明と日付を設定します。

    1. /content/mywebsite/en/products/product2/jcr:content ノードを選択します。
    2. プロパティ」タブで、以下の値を入力します。
      • 名前:jcr:description
      • タイプ:String
      • 値:This is a description of the Product 2!
    3. 追加」をクリックします。
    4. 同じテキストボックスで、前の値を以下の値に置き換えます。
      • 名前:date
      • タイプ:String
      • 値:05/11/2012
      • 「追加」をクリックします。
    5. 「すべて保存」をクリックします。

リストの子コンポーネントの作成

listchildren コンポーネントを作成するには:

  1. CRXDE Lite で、/apps/mywebsite/components を右クリックして、作成コンポーネントを作成をクリックします。

  2. ダイアログで、以下のプロパティ値を入力して「次へ」をクリックします。

    • ラベル:listchildren
    • タイトル:My Listchildren Component
    • 説明:This is My Listchildren Component
  3. 「次へ」を数回クリックして許可されている子パネルを表示し、「OK」をクリックします。

リストの子スクリプトの作成

listchildren コンポーネントのスクリプトを開発します。

  1. CRXDE Lite で、/apps/mywebsite/components/listchildren の下の listchildren.jsp ファイルを開きます。

  2. デフォルトのコードを以下のコードに置き換えます。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="java.util.Iterator,
             com.day.cq.wcm.api.PageFilter"%><%
         /* Create a new Page object using the path of the current page */    
          String listroot = properties.get("listroot", currentPage.getPath());
         Page rootPage = pageManager.getPage(listroot);
         /* iterate through the child pages and gather properties */
         if (rootPage != null) {
             Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
             while (children.hasNext()) {
                 Page child = children.next();
                 String title = child.getTitle() == null ? child.getName() : child.getTitle();
                 String date = child.getProperties().get("date","");
                 %><div class="item">
                 <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
                 <span><%= date %></span><br>
                 <%= child.getProperties().get("jcr:description","") %><br>
                 </div><%
             }
         }
     %>
  3. 変更内容を保存します。

リストの子ダイアログの作成

listchildren コンポーネントのプロパティを設定する際に使用するダイアログを作成します。

 

  1. listchildren コンポーネントの下に dialog ノードを作成します。

    1. CRXDE Lite で、/apps/mywebsite/components/listchildren ノードを右クリックして、作成ダイアログを作成をクリックします。
    2. ダイアログで、以下のプロパティ値を入力して「OK」をクリックします。
      • ラベルdialog
      • タイトルEdit Component

    以下のプロパティを使用します。

  2. /apps/mywebsite/components/listchildren/dialog/items/items/tab1 ノードを選択します。

  3. 「プロパティ」タブで、「title」プロパティの値を "List Children" に変更します。

  4. tab1 ノードを選択し、作成/ノードを作成をクリックし、以下のプロパティ値を入力して、「OK」をクリックします。

    • 名前:items
    • タイプ:cq:WidgetCollection
  5. 以下のプロパティ値を使用して、items ノードの下にノードを作成します。

    • 名前:listroot
    • タイプ:cq:Widget
  6. listroot ノードのプロパティを追加して、テキストフィールドとして設定します。以下の表の行は、それぞれプロパティを表します。完了したら、「すべて保存」をクリックします。

    名前 種類
    fieldLabel String リストルートのパス
    name String ./listroot
    xtype String textfield

contentpage コンポーネントにリストの子を含める

contentpage コンポーネントに listchildren コンポーネントを含めるには、次の手順を実行します。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage の下の left.jsp ファイルを開いて、以下のコードを見つけます(4 行目)。

    <div>newslist</div>
  2. このコードを以下のコードに置き換えます。

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
  3. 変更内容を保存します。

ページでのリストの子の表示

このコンポーネントの完全な動作は、Products ページを表示して確認できます。

  • 親ページ(「リストルートのパス」)が定義されていないとき。
  • 親ページ(「リストルートのパス」)が定義されているとき。
  1. ブラウザーで、Products ページを再読み込みします。listchildren コンポーネントは次のように表示されます。

  2. 「リストルートのパス」に、"/content/mywebsite/en" と入力します。「OK」をクリックします。ページ上の listchildren コンポーネントは以下のようになります。

ロゴコンポーネントの作成

会社のロゴを表示し、サイトのホームページへのリンクを提供するコンポーネントを作成します。このコンポーネントにはデザインモードのダイアログが含まれており、プロパティ値はサイトデザイン(/etc/designs/mywebsite)に格納されます。

  • このデザインを使用するページに追加されるコンポーネントのすべてのインスタンスにプロパティ値が適用されます。
  • プロパティの設定には、このデザインを使用するページ上にあるコンポーネントのどのインスタンスでも使用できます。

デザインモードのダイアログには、画像とリンクパスを設定するためのプロパティが含まれています。ロゴコンポーネントは、Web サイトのすべてのページの左上に配置されます。

次のようになります。

注意:

Adobe Experience Manager は、より充実した機能を持つロゴコンポーネント(/libs/foundation/components/logo)を提供します。

ロゴコンポーネントノードの作成

ロゴコンポーネントを作成するには、次の手順を実行します。。

  1. CRXDE Lite で、/apps/mywebsite/components を右クリックして、作成コンポーネントを作成をクリックします。

  2. コンポーネントを作成ダイアログで、以下のプロパティ値を入力して「次へ」をクリックします。

    • ラベル:logo
    • タイトル:My Logo Component
    • 説明:This is My Logo Component
  3. 「次へ」を数回クリックしてダイアログの最後のパネルを表示し、「OK」をクリックします。

ロゴスクリプトの作成

ここでは、ホームページへのリンクを含むロゴイメージを表示するスクリプトの作成方法について説明します。

  1. CRXDE Lite で、/apps/mywebsite/components/logo の下の logo.jsp ファイルを開きます。

  2. 以下のコードでは、サイトのホームページへのリンクが作成され、ロゴイメージへの参照が追加されます。このコードを logo.jsp にコピーします。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="com.day.text.Text,
                       com.day.cq.wcm.foundation.Image,
                       com.day.cq.commons.Doctype" %><%
        /* obtain the path for home */
        long absParent = currentStyle.get("absParent", 2L);
        String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);
        /* obtain the image */
        Resource res = currentStyle.getDefiningResource("imageReference");
        if (res == null) {
            res = currentStyle.getDefiningResource("image");
        }
        /* if no image use text link, otherwise draw the image */
        %>
    <a href="<%= home %>.html"><%
        if (res == null) {
            %>Home<%
        } else {
            Image img = new Image(res);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out);
        }
        %></a>
  3. 変更内容を保存します。

ロゴデザインダイアログの作成

デザインモードでロゴコンポーネントを設定するためのダイアログを作成します。デザインモードのダイアログには、design_dialog という名前を付ける必要があります。

  1. logo コンポーネントの下に dialog ノードを作成します。

    1. /apps/mywebsite/components/logo ノードを右クリックして、作成ダイアログを作成をクリックします。
    2. 以下のプロパティ値を入力して「OK」をクリックします。
      • ラベル:design_dialog 
      • タイトル:Logo (Design)
  2. design_dialog ブランチの tab1 ノードを右クリックして「削除」をクリックします。「すべて保存」をクリックします。

  3. design_dialog/items/items ノードの下に、新しいノードを、img という名前、cq:Widget タイプで作成します。以下のプロパティを追加して「すべて保存」をクリックします。

    名前 種類
    fileNameParameter String ./imageName
    fileReferenceParameter String ./imageReference
    name String ./image
    title String 画像
    xtype String html5smartimage

ロゴレンダリングスクリプトの作成

ロゴイメージを取得してページに書き込むスクリプトを作成します。

  1. logo コンポーネントノードを右クリックし、作成/ファイルを作成をクリックして、img.GET.java という名前のスクリプトファイルを作成します。
  2. ファイルを開き、以下のコードをファイルにコピーして、「すべて保存」をクリックします。

package apps.mywebsite.components.logo;

import java.io.IOException;
import java.io.InputStream;

import javax.jcr.RepositoryException;
import javax.jcr.Property;
import javax.servlet.http.HttpServletResponse;

import com.day.cq.wcm.foundation.Image;
import com.day.cq.wcm.commons.RequestHelper;
import com.day.cq.wcm.commons.WCMUtils;
import com.day.cq.wcm.commons.AbstractImageServlet;
import com.day.cq.commons.SlingRepositoryException;
import com.day.image.Layer;
import org.apache.commons.io.IOUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**
 * Renders an image
 */
public class img_GET extends AbstractImageServlet {

    protected Layer createLayer(ImageContext c)
            throws RepositoryException, IOException {
        /* don't create the layer yet. handle everything later */
        return null;
    }

    protected void writeLayer(SlingHttpServletRequest req,
                              SlingHttpServletResponse resp,
                              ImageContext c, Layer layer)
            throws IOException, RepositoryException {

        Image image = new Image(c.resource);
        image.setItemName(Image.NN_FILE, "image");
        image.setItemName(Image.PN_REFERENCE, "imageReference");
        if (!image.hasContent()) {
            resp.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        /* get pure layer */
        layer = image.getLayer(false, false, false);

        /* do not re-encode layer, just spool */
        Property data = image.getData();
        InputStream in = data.getStream();
        resp.setContentLength((int) data.getLength());
        String contentType = image.getMimeType();
        if (contentType.equals("application/octet-stream")) {
            contentType=c.requestImageType;
        }
        resp.setContentType(contentType);
        IOUtils.copy(in, resp.getOutputStream());
        in.close();
      
        resp.flushBuffer();
    }
}

contentpage コンポーネントへのロゴコンポーネントの追加

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage の下の left.jsp ファイルを開いて、以下のコード行を見つけます。

    <div>logo</div>
  2. このコードを以下のコード行に置き換えます。

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
  3. 変更内容を保存します。

  4. ブラウザーで、Products ページを再読み込みします。ロゴは以下のようになりますが、現時点では基になるリンクのみが表示されます。

ページでのロゴイメージの設定

ここでは、デザインモードのダイアログを使用して画像をロゴとして設定する方法について説明します。

  1. ブラウザーで Products ページを開いた状態で、サイドキックの下部にある「デザイン」ボタンをクリックしてデザインモードに切り替えます。

  2. ロゴのデザインバーで、「編集」をクリックして、ロゴコンポーネントの設定を編集するダイアログを使用します。

  3. ダイアログで、「画像」タブのパネル内をクリックし、mywebsite.zip ファイルから抽出した logo.png 画像を参照して、「OK」をクリックします。

  4. サイドキックタイトルバーの三角形をクリックして編集モードに戻ります。

  5. CRXDE Lite で、以下のノードに移動して、格納されているプロパティ値を確認します。

    /etc/designs/mywebsite/jcr:content/contentpage/logo

パンくずコンポーネントを含める

ここでは、基盤コンポーネントの 1 つであるパンくず(trail)コンポーネントを含めます。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage を参照し、center.jsp ファイルを開いて、

    <div>trail</div>

    を次のように置き換えます。

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
  2. 変更内容を保存します。

  3. ブラウザーで、Products 1 ページを再読み込みします。trail コンポーネントは次のようになります。

タイトルコンポーネントを含める

ここでは、基盤コンポーネントの 1 つであるタイトルコンポーネントを含めます。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage を参照し、center.jsp ファイルを開いて、

    <div>title</div>

    を次のように置き換えます。

    <cq:include path="title" resourceType="foundation/components/title" />
  2. 変更内容を保存します。

  3.  

    ブラウザーで、Products ページを再読み込みします。タイトルコンポーネントは次のようになります。

     

     

    注意:編集モードで別のタイトルおよびタイプ/サイズを設定できます。

     

段落システムコンポーネントを含める

段落システム(parsys)は、段落のリストを管理するので、Web サイトの重要部分です。これを使用すると、作成者は段落コンポーネントをページに追加し、構造を指定できます。

parsys コンポーネント(基盤コンポーネントの 1 つ)を、contentpage コンポーネントに追加します。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage を参照し、center.jsp ファイルを開いて、以下のコード行を見つけます。

    <div>parsys</div>
  2. このコード行を以下のコードに置き換えて、変更内容を保存します。

    <cq:include path="par" resourceType="foundation/components/parsys" />
  3.  

    ブラウザーで、Products ページを更新します。parsys コンポーネントが以下のように表示されます。

     

画像コンポーネントの作成

段落システムに画像を表示するコンポーネントを作成します。時間を節約するために、この画像コンポーネントは、ロゴコンポーネントをコピーし、一部のプロパティを変更して作成します。

注意:

Adobe Experience Manager は、より充実した機能を持つ画像コンポーネント(/libs/foundation/components/image)を提供します。

画像コンポーネントの作成

  1. /apps/mywebsite/components/logo ノードを右クリックして、「コピー」をクリックします。
  2. /apps/mywebsite/components ノードを右クリックして、「貼り付け」をクリックします。
  3. Copy of logo ノードを右クリックし、「名前を変更」をクリックし、既存のテキストを削除して、"image" と入力します。
  4. image コンポーネントノードを選択して、以下のプロパティ値を変更します。
    • jcr:title:My Image Component
    • jcr:description:This is My Image Component
  5. 以下のプロパティ値を使用して、image ノードにプロパティを追加します。
    • 名前:componentGroup
    • タイプ:String
    • 値:MyWebsite
  6. image ノードの下で、design_dialog ノードの名前を "dialog" に変更します。
  7. logo.jsp の名前を "image.jsp" に変更します。
  8. img.GET.java を開いて、パッケージを "apps.mywebsite.components.image" に変更します。

画像スクリプトの作成

ここでは、画像スクリプトを作成する方法について説明します。

  1. /apps/mywebsite/components/image/image.jsp を開きます。

  2. 既存のコードを以下のコードに置き換えて、変更内容を保存します。

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="com.day.cq.commons.Doctype,
                        com.day.cq.wcm.foundation.Image,
                        com.day.cq.wcm.api.components.DropTarget,
                        com.day.cq.wcm.api.components.EditConfig,
                        com.day.cq.wcm.commons.WCMUtils" %><%
     /* global.jsp provides access to the current resource through the resource object */
            Image img = new Image(resource);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out); %>
  3. 変更内容を保存します。

画像の cq:editConfig ノードの作成

cq:editConfig ノードタイプを使用すると、プロパティを編集するときに、コンポーネントの一定の動作を設定できます。

ここでは、cq:editConfig ノードを使用して、コンテンツファインダーから画像コンポーネントへ、アセットをドラッグできるようにします。

  1. CRXDE Lite で、/apps/mywebsite/components/image ノードの下に、以下のように新しいノードを作成します。

    • 名前:cq:editConfig

    • タイプ:cq:EditConfig

  2. cq:editConfig ノードの下に、以下のように新しいノードを作成します。

    • 名前:cq:dropTargets

    • タイプ:cq:DropTargetConfig

  3. cq:dropTargets ノードの下に、以下のように新しいノードを作成します。

    • 名前:image

    • タイプ:nt:unstructured

  4. CRXDE で、プロパティを以下のように設定します。
名前 種類
accept String image/(gif|jpeg|png)
groups String media
propertyName String ./imageReference

アイコンの追加

ここでは、画像コンポーネントをサイドキックに表示したときに横に表示されるアイコンを追加します。

  1. CRXDE Lite で、/libs/foundation/components/image/icon.png ファイルを右クリックして「コピー」を選択します。

  2. /apps/mywebsite/components/image ノードを右クリックして「貼り付け」をクリックし、「すべて保存」をクリックします。

画像コンポーネントの使用

ここでは、Products ページを表示して、段落システムに画像コンポーネントを追加します。

  1. ブラウザーで、Products ページを再読み込みします。

  2. サイドキックで、デザインモードアイコンをクリックします。

  3. 「編集」ボタンをクリックして、段落のデザインダイアログを編集します。

  4. ダイアログには、許可されたコンポーネントのリストが表示されます。MyWebsite に移動し、「My Image Component」を選択して、「OK」をクリックします。

  5. 編集モードに戻ります。

  6. parsys フレーム(コンポーネントまたはアセットをここにドラッグします)をダブルクリックします。新規コンポーネントを挿入およびサイドキックのセレクターは以下のように表示されます。

ツールバーコンポーネントを含める

ここでは、基盤コンポーネントの 1 つであるツールバーコンポーネントを含めます。

編集モードとデザインモードで、複数のオプションがあります。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage に移動し、body.jsp ファイルを開いて、以下のコードを見つけます。

    <div class="toolbar">toolbar</div>
  2. このコードを以下のコードに置き換えて、変更内容を保存します。

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
  3. AEM Web サイトページのフォルダーツリーで、Websites/My Website/English を選択して、新規/新しいページをクリックします。以下のプロパティ値を指定して「作成」をクリックします。

    • タイトル:Toolbar
    • 「My Website Content Page Template」を選択します。
  4. ページのリストで、Toolbar ページを右クリックして「プロパティ」をクリックします。「ナビゲーション内で非表示にする」を選択して「OK」をクリックします。

    「ナビゲーション内で非表示にする」オプションを選択すると、topnav や listchildren などのナビゲーションコンポーネントにページが表示されなくなります。

  5. Toolbar の下に、以下のページを作成します。

    • 連絡先
    • フィードバック
    • ログイン
    • 検索
  6. ブラウザーで、Products ページを再読み込みします。次のように表示されます。

検索コンポーネントの作成

ここでは、Web サイトでコンテンツを検索するコンポーネントを作成します。この検索コンポーネントは、任意のページ(特殊な検索結果ページなど)の段落システムに配置できます。

検索入力ボックスは、English ページに以下のように表示されます。

検索コンポーネントの作成

  1. CRXDE Lite で、/apps/mywebsite/components を右クリックして、作成コンポーネントを作成をクリックします。

  2. ダイアログを使用してコンポーネントを設定します。

    1. 最初のパネルで、以下のプロパティ値を指定します。
      • ラベル:search
      • タイトル:My Search Component
      • 説明:This is My Search Component
      • グループ:MyWebsite
    2. 「次へ」をクリックしてから、再度「次へ」をクリックします。
    3. 許可された親パネルで、+ ボタンをクリックして "*/parsys" と入力します。
    4. 「次へ」をクリックして「OK」をクリックします。
  3. 「すべて保存」をクリックします。

  4. 以下のノードをコピーして、apps/mywebsite/components/search ノードに貼り付けます。

    •  /libs/foundation/components/search/dialog
    •  /libs/foundation/components/search/i18n 
    •  /libs/foundation/components/search/icon.png  
  5. 「すべて保存」をクリックします。

検索スクリプトの作成

 ここでは、検索スクリプトを作成する方法について説明します。

  1. /apps/mywebsite/components/search/search.jsp ファイルを開きます。

  2. 以下のコードを search.jsp にコピーします。

    <%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
    <%@include file="/libs/foundation/global.jsp" %><%
    %><cq:setContentBundle/><%
        Search search = new Search(slingRequest);
     
        String searchIn = (String) properties.get("searchIn");
        String requestSearchPath = request.getParameter("path");
        if (searchIn != null) {
            /* only allow the "path" request parameter to be used if it
             is within the searchIn path configured */
            if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
                search.setSearchIn(requestSearchPath);
            } else {
                search.setSearchIn(searchIn);
            }
        } else if (requestSearchPath != null) {
            search.setSearchIn(requestSearchPath);
        }
         
        pageContext.setAttribute("search", search);
        TagManager tm = resourceResolver.adaptTo(TagManager.class);
    %><c:set var="trends" value="${search.trends}"/><%
    %><center>
      <form action="${currentPage.path}.html">
        <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
        <input value="<fmt:message key="searchButtonText"/>" type="submit" />
      </form>
    </center>
    <br/>
    <c:set var="result" value="${search.result}"/>
    <c:choose>
      <c:when test="${empty result && empty search.query}">
      </c:when>
      <c:when test="${empty result.hits}">
        <c:if test="${result.spellcheck != null}">
          <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
        </c:if>
        <fmt:message key="noResultsText">
          <fmt:param value="${fn:escapeXml(search.query)}"/>
        </fmt:message>
      </c:when>
      <c:otherwise>
        <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
       <br/>
       
      <div class="searchresults">    
        <div class="results">
          <c:forEach var="hit" items="${result.hits}" varStatus="status">
            <div class="hit">
            <a href="${hit.URL}">${hit.title}</a>
            <div class="excerpt">${hit.excerpt}</div>
           <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
            </div></div>
          </c:forEach>
        </div>
          <br/>
          
         <div class="searchRight">
              <c:if test="${fn:length(trends.queries) > 0}">
                  <p><fmt:message key="searchTrendsText"/></p>
                  <div class="searchTrends">
                      <c:forEach var="query" items="${trends.queries}">
                          <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></span></a>
                      </c:forEach>
                  </div>
              </c:if> 
              <c:if test="${result.facets.languages.containsHit}">
                  <p>Languages</p>
                  <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                      <c:choose>
                          <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.tags.containsHit}">
                  <p>Tags</p>
                  <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                      <c:if test="${tag != null}">
                          <c:set var="label" value="${tag.title}"/>
                          <c:choose>
                              <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                              <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                          </c:choose><br/>
                      </c:if>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.mimeTypes.containsHit}">
                  <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
                  <p>File types</p>
                  <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value="${fileTypes[bucket.value]}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
              <c:if test="${result.facets.lastModified.containsHit}">
                  <p>Last Modified</p>
                  <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                      <c:choose>
                          <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
    
          <c:if test="${fn:length(search.relatedQueries) > 0}">
          
           <br/><br/><div class="related">
            <fmt:message key="relatedSearchesText"/>
            <c:forEach var="rq" items="${search.relatedQueries}">
                <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
            </c:forEach></div>
          </c:if>
          </div>     
          
          <c:if test="${fn:length(result.resultPages) > 1}">
            <div class="pagination">  
                <fmt:message key="resultPagesText"/>
            <c:if test="${result.previousPage != null}">
              <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
            </c:if>
            <c:forEach var="page" items="${result.resultPages}">
              <c:choose>
                <c:when test="${page.currentPage}">${page.index + 1}</c:when>
                <c:otherwise>
                  <a href="${page.URL}">${page.index + 1}</a>
                </c:otherwise>
              </c:choose>
            </c:forEach>
            <c:if test="${result.nextPage != null}">
              <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
            </c:if>
            </div>
          </c:if>
          </div>
          
      </c:otherwise>
    </c:choose>
  3. 変更内容を保存します。

contentpage コンポーネントに検索ボックスを含める

contentpage の左側のセクションに検索入力ボックスを含めるには、以下の手順を実行します。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage の下の left.jsp ファイルを開いて、以下のコードを見つけます(2 行目)。

    %><div class="left">
  2. この行の前に、以下のコードを挿入します。

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath(); 
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
  3. 以下のコード行を見つけます。

    <div>search</div>
  4. このコードを以下のコードに置き換えて、変更内容を保存します。

    <div class="form_1">
         <form class="geo" action="<%= home %>/toolbar/search.html" id="form" >
              <p>
                   <input class="geo" type="text" name="q"><br> 
                   <a href="<%= home %>/toolbar/search.html" class="link_1">advanced search</a> 
              </p>
         </form>
    </div>
  5.  

    ブラウザーで、Products ページを再読み込みします。検索コンポーネントは次のようになります。

     

Search ページに検索コンポーネントを含める

ここでは、検索コンポーネントを段落システムに含めます。

  1. ブラウザーで、Search ページを開きます。

  2. サイドキックで、デザインモードアイコンをクリックします。

  3. 段落のデザインブロック(Search タイトルの下)で、「編集」をクリックします。

  4. ダイアログで、下にスクロールして My Websites グループを表示し、「My Search Component」を選択して「OK」をクリックします。

  5. サイドキックで、三角形をクリックして編集モードに戻ります。

  6. 「My Search Component」をサイドキックから parsys フレームにドラッグします。次のように表示されます。

  7. Products ページに移動します。入力ボックスに "customers" と入力して Enter キーを押します。Search ページにリダイレクトされます。プレビューモードに切り替えます。出力は以下のような形式です。

iparsys コンポーネントを含める

ここでは、基盤コンポーネントの 1 つである継承の段落システム(iparsys)コンポーネントを含めます。このコンポーネントを使用すると、親ページで段落の構造を作成し、子ページに段落を継承させることができます。

このコンポーネントでは、編集モードとデザインモードの両方で複数のパラメーターを設定できます。

  1. CRXDE Lite で、/apps/mywebsite/components/contentpage に移動し、right.jsp ファイルを開いて、

    <div>iparsys</div>

    を次のように置き換えます。

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
  2. 変更内容を保存します。

  3. ブラウザーで、Products ページを再読み込みします。ページ全体は次のようになります。

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

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