Erstellen von Websites mit vollem Funktionsumfang (JSP)

ACHTUNG

In diesem Artikel wird erläutert, wie Sie über die klassische Benutzeroberfläche mithilfe von JSP Websites erstellen. Adobe empfiehlt, die neuesten AEM-Technologien für Ihre Websites zu nutzen, wie ausführlich im Artikel Erste Schritte bei der Entwicklung von AEM Sites beschrieben.

In diesem Tutorial erfahren Sie, wie Sie mit Adobe Experience Manager (AEM) Websites mit vollem Funktionsumfang erstellen. Eine so erstellte Website basiert auf einer generischen Website und ist vor allem auf Webentwickler ausgerichtet. Die gesamte Entwicklung erfolgt in einer Autorenumgebung.

In diesem Tutorial wird erläutert, wie Sie die folgenden Aktionen durchführen:

  1. Installieren von AEM

  2. Zugreifen auf CRXDE Lite (die Entwicklungsumgebung)

  3. Einrichten der Projektstruktur in CRXDE Lite

  4. Erstellen der Vorlagen, Komponenten und Skripte, die als Grundlage für die Erstellung von Inhaltsseiten dienen

  5. Erstellen der Stammseite für die Website sowie der Inhaltsseiten

  6. Erstellen der folgenden Komponenten zur Verwendung auf den Seiten

    • topnav (Navigation oben)
    • listchildren (Untergeordnete Elemente auflisten)
    • -Logo
    • Bild
    • textimage (Textbild)
    • Suchen
  7. Einbinden unterschiedlicher Foundation-Komponenten

Nachdem Sie alle Schritte ausgeführt haben, sehen Ihre Seiten wie folgt aus:

chlimage_1-99

Herunterladen der fertiggestellten Website

Wenn Sie es vorziehen, dem Tutorial zu folgen, anstatt die Übungen durchzuführen, laden Sie die Datei website-1.0.zip herunter. Diese Datei ist ein AEM-Inhaltspaket, das die Ergebnisse dieses Tutorials enthält. Installieren Sie das Paket mithilfe von Package Manager auf Ihrer Autoreninstanz.

Hinweis

Durch die Installation dieses Pakets werden alle Ressourcen Ihrer Authoring-Instanz, die Sie mit diesem Lernprogramm erstellt haben, überschrieben.

Website-Inhaltspaket

Datei laden

Installieren von Adobe Experience Manager

To install an AEM instance for developing your website, follow the instructions for setting up a deployment environment with author and publish instances, or perform a generic installation. Bei der allgemeinen Installation wird die AEM Quickstart-JAR-Datei heruntergeladen, die Datei "license.properties"in demselben Ordner wie die JAR-Datei abgelegt und die JAR-Datei durch Klicken auf die Dublette aufgerufen.

Nachdem Sie AEM installiert haben, greifen Sie auf die CRXDE Lite-Entwicklungsumgebung zu, indem Sie auf der Begrüßungsseite auf den Link für CRXDE Lite klicken:

chlimage_1-100

Hinweis

The URL of CRXDE Lite for an AEM authoring instance that is installed locally using the default port is http://localhost:4502/crx/de/.

Einrichten von Projektstrukturen in CRXDE Lite

Verwenden Sie CRXDE Lite, um die mywebsite-Anwendungsstruktur im Repository zu erstellen:

  1. In the tree on the left side of CRXDE Lite, right-click the /apps folder and click Create > Create Folder. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen mywebsite ein und klicken Sie auf OK.

  2. Right-click the /apps/mywebsite folder and click Create > Create Folder. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen components ein und klicken Sie auf OK.

  3. Right-click the /apps/mywebsite folder and click Create > Create Folder. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen templates ein und klicken Sie auf OK.

    Die Struktur im Baum sollte nun in etwa so aussehen:

    chlimage_1-101

  4. Klicken Sie auf Alle speichern.

Einrichten von Designs

In diesem Abschnitt erstellen Sie das Design für Ihre Anwendung mithilfe des Designer-Tools. Das Design stellt CSS- und Bildressourcen für Ihre Website bereit.

Hinweis

Click the following link to download mywebsite.zip. Das Archiv enthält die static.css- und Bilddateien für Ihr Design.

Beispieldatei "static.css"und Bilder

Datei laden

  1. Klicken Sie auf der AEM-Begrüßungsseite auf Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1-102

  2. In the folder tree, select the Designs folder and then click New > New Page. Type mywebsite as the title and click Create.

  3. Wenn das Element „mywebsite“ nicht in der Tabelle aufgeführt wird, aktualisieren Sie die Baumansicht bzw. die Tabelle.

  4. Kopieren Sie mithilfe von WebDAV -Zugriff auf die URL unter http://localhost:4502 die Beispieldatei static.css und den images -Ordner aus der heruntergeladenen Datei "mywebsite.zip"in den /etc/designs/mywebsite Ordner.

    chlimage_1-103

Creating the Contentpage Template, Component, and Script

In diesem Abschnitt wird die Erstellung der folgenden Elemente beschrieben:

  • Die contentpage-Vorlage, die zur Erstellung von Inhaltsseiten in der Beispielwebsite verwendet wird
  • Die contentpage-Komponente, die zum Rendern von Inhaltsseiten verwendet werden soll
  • Das contentpage-Skript

Erstellen von contentpage-Vorlagen

Erstellen Sie eine Vorlage, die als Basis für die Webseiten Ihrer Website dient.

Eine Vorlage definiert den Standardinhalt einer neuen Seite. Bei komplexen Websites werden ggf. auch mehrere Vorlagen für die Erstellung der verschiedenen Seitentypen der Website verwendet. Bei dieser Übung basieren jedoch alle Seiten auf einer einfachen Vorlage.

  1. In the folder tree of CRXDE Lite, right-click /apps/mywebsite/templates and click Create > Create Template.

  2. Geben Sie im Dialogfeld „Vorlage erstellen“ die folgenden Werte ein und klicken Sie anschließend auf Weiter:

    • Bezeichnung: contentpage
    • Titel: My Website Content Page Template
    • Beschreibung: This is my Website Content Page Template
    • Ressourcentyp: mywebsite/components/contentpage

    Verwenden Sie den Standardwert für die Eigenschaft „Rangfolge“.

    chlimage_1-104

    Der Ressourcentyp identifiziert die Komponente, die die Seite rendert. In this case, all pages created using the contentpage template are rendered by the mywebsite/components/contentpage component.

  3. To specify the paths of the pages that can use this template, click the plus button and type /content(/.*)? in the text box that appears. Klicken Sie dann auf Weiter.

    chlimage_1-105

    The value of the allowed path property is a regular expression. Seiten mit einem Pfad, der dem Ausdruck entspricht, können die Vorlage verwenden. In this is case the regular expression matches the path of the /content folder and all subpages.

    When an author creates a page below /content, the contentpage template appears in a list of available templates to use.

  4. Klicken Sie in den Bedienfeldern Zugelassene übergeordnete Elemente und Zugelassene untergeordnete Elemente auf Weiter und dann auf OK. Klicken Sie in CRXDE Lite auf Alle speichern.

    chlimage_1-106

Erstellen von contentpage-Komponenten

Erstellen Sie die Komponente, die den Inhalt definiert und die Seiten rendert, die die contentpage-Vorlage verwenden. Der Speicherort der Komponente muss dem Wert der Eigenschaft „Ressourcentyp“ der contentpage-Vorlage entsprechen.

  1. In CRXDE Lite, right-click /apps/mywebsite/components and click Create > Component.

  2. Geben Sie im Dialogfeld Komponente erstellen die folgenden Eigenschaftswerte ein:

    • Bezeichnung: contentpage
    • Titel: My Website Content Page Component
    • Beschreibung: This is My Website Content Page Component

    chlimage_1-107

    The location of the new component is /apps/mywebsite/components/contentpage. This path corresponds with the resource type of the contentpage template (minus the initial /apps/ part of the path).

    Diese Entsprechung verbindet die Vorlage mit der Komponente und ist entscheidend für die ordnungsgemäße Funktionsweise der Website.

  3. Click Next until the Allowed Children panel of the dialog appears, and then click OK. Klicken Sie in CRXDE Lite auf Alle speichern.

    Die Struktur sieht nun wie folgt aus:

    chlimage_1-108

Entwickeln von Skripten für contentpage-Komponenten

Fügen Sie dem Skript contentpage.jsp Code hinzu, um den Seiteninhalt zu definieren.

  1. In CRXDE Lite, open the file contentpage.jsp in /apps/mywebsite/components/contentpage. Die Datei enthält standardmäßig den folgenden Code:

    <%--
    
      My Website Content Page Component component.
    
      This is My Website Content Page Component.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><%@page session="false" %><%
    %><%
        /* TODO add you code here */
    %>
    
  2. Kopieren Sie den folgenden Code und fügen Sie ihn in contentpage.jsp nach dem Standardcode ein:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "https://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. Klicken Sie auf Alle speichern, um Ihre Änderungen zu speichern.

Erstellen von Website-Seiten und Inhaltsseiten

In diesem Abschnitt erstellen Sie die folgenden Seiten, die alle die contentpage-Vorlage verwenden: Meine Website, Englisch, Produkte, Services und Kunden.

  1. Klicken Sie auf der AEM-Begrüßungsseite (http://localhost:4502/libs/cq/core/content/welcome.html) auf „Websites“.

    chlimage_1-109

  2. In the folder tree, select the Websites folder and then click New > New Page.

  3. Geben Sie im Fenster Seite erstellen Folgendes ein:

    • Titel: My Website
    • Name: mywebsite
    • Wählen Sie My Website Content Page Template aus.

    chlimage_1-110

  4. Klicken Sie auf Erstellen. In the folder tree, select the /Websites/My Website page and click New > New Page.

  5. Geben Sie im Dialogfeld Seite erstellen die folgenden Eigenschaftswerte ein und klicken Sie dann auf Erstellen:

    • Titel: englisch
    • Name: en
    • Wählen Sie My Website Content Page Template aus.
  6. In the folder tree, select the /Websites/My Website/English page and click New > New Page.

  7. Geben Sie im Dialogfeld Seite erstellen die folgenden Eigenschaftswerte ein und klicken Sie dann auf Erstellen:

    • Titel: Produkte
    • Wählen Sie My Website Content Page Template aus.
  8. In the folder tree, select the /Websites/My Website/English page and click New > New Page.

  9. Geben Sie im Dialogfeld Seite erstellen die folgenden Eigenschaftswerte ein und klicken Sie dann auf Erstellen:

    • Titel: Dienste
    • Wählen Sie My Website Content Page Template aus.
  10. In the folder tree, select the /Websites/My Website/English page and click New > New Page.

  11. Geben Sie im Dialogfeld Seite erstellen die folgenden Eigenschaftswerte ein und klicken Sie dann auf Erstellen:

    • Titel: Kunden
    • Wählen Sie My Website Content Page Template aus.

    Ihre Struktur sieht nun wie folgt aus:

    chlimage_1-111

  12. To link your pages to the mywebsite design, in CRXDE Lite, select the /content/mywebsite/en/jcr:content node. On the Properties tab, type the following values for a new property and then click Add:

    • Name: cq:designPath
    • Typ: String
    • Wert: /etc/designs/mywebsite

    chlimage_1-112

  13. In a new web browser tab or window, open http://localhost:4502/content/mywebsite/en/products.html to see the Products page:

    chlimage_1-113

Erweitern des contentpage-Skripts

In diesem Abschnitt wird beschrieben, wie das contentpage-Skript mit Skripten für AEM-Foundation-Komponenten sowie mit eigenen Skripten erweitert werden kann.

Die Seite Products sieht nun wie folgt aus:

chlimage_1-4

Verwenden von Skripten für Foundation-Seitenkomponenten

Im Rahmen dieser Übung konfigurieren Sie Ihre pagecontent-Komponente so, dass ihr Supertyp die AEM-Seitenkomponente ist. Da Komponenten die Funktionen ihres Supertyps übernehmen, übernimmt Ihr Seiteninhalt die Skripte und Eigenschaften der Seitenkomponente.

Beispielsweise können Sie im JSP-Code der Komponente so auf die Skripte verweisen, die den Supertyp der Komponente bereitstellen, als wären sie in Ihrer Komponente enthalten.

  1. In CRXDE Lite, add a property to the /apps/mywebsite/components/contentpage node.

    1. Select the /apps/mywebsite/components/contentpage node.

    2. Geben Sie unten auf der Registerkarte Eigenschaften die folgenden Eigenschaftswerte ein und klicken Sie auf Hinzufügen:

      • Name: sling:resourceSuperType
      • Typ: String
      • Wert: foundation/components/page
    3. Klicken Sie auf Alle speichern.

  2. Open the contentpage.jsp file under /apps/mywebsite/components/contentpage and replace the existing code with the following code:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><%@page session="false" contentType="text/html; charset=utf-8" %><%
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
    <html>
    <cq:include script="head.jsp"/>
    <cq:include script="body.jsp"/>
    </html>
    
  3. Speichern Sie Ihre Änderungen.

  4. Laden Sie in Ihrem Browser die Seite Products neu. Diese sieht nun wie folgt aus:

    chlimage_1-5

    Öffnen Sie die Seitenquelle, um die JavaScript- und HTML-Elemente anzuzeigen, die die Skripte head.jsp und body.jsp generiert haben. Das folgende Skript-Snippet öffnet den Sidekick, wenn Sie die Seite öffnen:

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

Verwenden eigener Skripte

In diesem Abschnitt wird beschrieben, wie Sie mehrere Skripte erstellen, die jeweils einen Teil des Seitentextes generieren. Erstellen Sie anschließend in der pagecontent-Komponente die Datei body.jsp, um die Datei body.jsp der AEM-Seitenkomponente zu überschreiben. Binden Sie in Ihre Datei body.jsp Ihre Skripte ein, die die verschiedenen Teile des Seitentextes generieren.

Tipp: Wenn eine Komponente eine Datei enthält, die denselben Namen und denselben relativen Speicherort wie eine Datei im Supertyp der Komponente aufweist, wird dies als Überlagerung bezeichnet.

  1. In CRXDE Lite, create the file left.jsp under /apps/mywebsite/components/contentpage:

    1. Right-click the node /apps/mywebsite/components/contentpage, then select Create then Create File.
    2. In the window, type left.jsp as the Name and click OK.
  2. Bearbeiten Sie die Datei left.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
    
  3. Speichern Sie die Änderungen.

  4. In CRXDE Lite, create the file center.jsp under /apps/mywebsite/components/contentpage:

    1. Right-click the node /apps/mywebsite/components/contentpage, select Create, then Create File.
    2. In the dialog, type center.jsp as Name and click OK.
  5. Edit the file center.jsp to remove the existing content and replace it with the following code:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
    
  6. Speichern Sie die Änderungen.

  7. In CRXDE Lite, create the file right.jsp under /apps/mywebsite/components/contentpage:

    1. Right-click the node /apps/mywebsite/components/contentpage, select Create, then Create File.
    2. Geben Sie im Dialogfeld in das Feld right.jspName den Dateinamen ​ein und klicken Sie auf OK.
  8. Bearbeiten Sie die Datei right.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
    
  9. Speichern Sie die Änderungen.

  10. In CRXDE Lite, create the file body.jsp under /apps/mywebsite/components/contentpage:

  11. Bearbeiten Sie die Datei body.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><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. Speichern Sie die Änderungen.

  13. Laden Sie in Ihrem Browser die Seite Products neu. Diese sieht nun wie folgt aus:

    chlimage_1-6

Erstellen von topnav-Komponenten

In diesem Abschnitt wird beschrieben, wie Sie eine Komponente erstellen, die Links zu allen Seiten der obersten Ebene der Website anzeigt, um die Navigation zu vereinfachen. Dieser Komponenteninhalt erscheint oben auf allen Seiten, die mit der contentpage-Vorlage erstellt wurden.

In der ersten Version der topnav-Komponente handelt es sich bei den Navigationselementen ausschließlich um Textlinks. In der zweiten Version implementieren Sie „topnav“ mit Bildnavigationslinks.

Die Navigation oben sieht nun wie folgt aus:

chlimage_1-114

Erstellen von topnav-Komponenten

  1. In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

  2. Geben Sie im Fenster Komponente erstellen Folgendes ein:

    • Beschriftung: topnav
    • Titel: My Top Navigation Component
    • Beschreibung: This is My Top Navigation Component
  3. Klicken Sie auf Weiter, bis Sie das letzte Fenster erreicht haben. Klicken Sie dort auf OK. Speichern Sie Ihre Änderungen.

Fügen Sie das Rendering-Skript zu „topnav“ hinzu, um Textlinks zu untergeordneten Seiten zu generieren:

  1. In CRXDE Lite, open the file topnav.jsp under /apps/mywebsite/components/topnav.

  2. Ersetzen Sie den vorhandenen Code, indem Sie den folgenden Code kopieren und einfügen:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><% 
    %><%@ 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><% 
            } 
        } 
    %> 
    

Einbinden von „topnav“ in contentpage-Komponenten

Gehen Sie wie folgt vor, um „topnav“ in Ihre contentpage-Komponente einzubinden:

  1. In CRXDE Lite, open the body.jsp under /apps/mywebsite/components/contentpageand replace:

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

    durch:

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
    
  2. Speichern Sie die Änderungen.

  3. In your browser, reload the Products Page. Die Navigation oben wird nun wie folgt angezeigt:

    chlimage_1-115

Erweitern von Seiten mit Untertiteln

The Page component defines properties that enable you to provide subtitles for pages. Fügen Sie Untertitel hinzu, die Informationen über den Seiteninhalt bereitstellen.

  1. In your browser, open the Products page.

  2. On the Sidekick Page tab, click Page Properties.

  3. On the Basic tab of the dialog, expand More Titles and Description and for the Subtitle property, type what we do. Klicken Sie auf OK.

  4. Repeat the previous steps to add the subtitle about our services to the Services page.

  5. Repeat the previous steps to add the subtitle the trust we earn to the Customers page.

    Tipp: Wählen Sie in CRXDE Lite den Knoten /content/mywebsite/en/products/jcr:content aus, um zu überprüfen, ob die Eigenschaft „Untertitel“ hinzugefügt wurde.

Erweitern Sie das Rendering-Skript der topnav-Komponente, um für die Navigationssteuerung Bildlinks anstelle von Hypertext zu verwenden. Das Bild enthält den Titel und Untertitel des Linkziels.

Diese Übung veranschaulicht die Sling-Anforderungsverarbeitung. Das Skript topnav.jsp wurde so geändert, dass es ein Skript aufruft, das dynamisch Bilder für die Seitennavigationslinks generiert. In dieser Übung analysiert Sling die URL der Bildquelldateien, um das Skript zu bestimmen, das zum Rendern der Bilder verwendet werden soll.

Die Quelle für den Bildlink zur Seite „Products“ könnte beispielsweise http://localhost:4502/content/mywebsite/en/products.navimage.png lauten. Sling analysiert diese URL, um den Ressourcentyp und das Skript zum Rendern der Ressource zu bestimmen:

  1. Sling determines the path of the resource to be /content/mwebysite/en/products.png.

  2. Sling matches this path with the /content/mywebsite/en/products node.

  3. Sling determines the sling:resourceType of this node to be mywebsite/components/contentpage.

  4. Sling findet das Skript in dieser Komponente, das die größte Übereinstimmung mit der URL-Auswahl (navimage) und der Dateinamenerweiterung (png) aufweist.

Im Rahmen dieser Übung ordnet Sling diese URLs dem Skript /apps/mywebsite/components/contentpage/navimage.png.java zu, das Sie erstellen.

  1. Öffnen Sie in CRXDE Lite das topnav.jsp unter "Inhalt des Ankerelements /apps/mywebsite/components/topnav.suchen"(Zeile 14):

    <%=child.getTitle() %>
    
  2. Ersetzen Sie den Ankerinhalt durch den folgenden Code:

    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
    
  3. Speichern Sie die Änderungen.

  4. Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage und klicken Sie auf Erstellen > Datei erstellen.

  5. In the Create File window, as Name, type navimage.png.java.

    Die Dateierweiterung .java gibt Sling an, dass die Java-Unterstützung für Apache Sling Scripting zum Kompilieren des Skripts und zum Erstellen eines Servlets verwendet werden sollte.

  6. Kopieren Sie den folgenden Code in navimage.png.java.Der Code erweitert die Klasse AbstractImageServlet:

    • AbstractImageServlet erstellt ein ImageContext-Objekt, das die Eigenschaften der aktuellen Ressource speichert.
    • Die übergeordnete Seite der Ressource wird aus dem ImageContext-Objekt extrahiert. Dann werden der Seitentitel und der Untertitel abgerufen.
    • ImageHelper wird verwendet, um das Bild aus der Datei navimage_bg.jpg des Site-Designs, des Seitentitels und des Seitenuntertitels zu generieren.
    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. Speichern Sie die Änderungen.

  8. Laden Sie in Ihrem Browser die Seite Products neu. Die Navigation oben wird nun wie folgt angezeigt:

    screen_shot_2012-03-07at10047pm

Erstellen von listchildren-Komponenten

Erstellen Sie die listchildren-Komponente, die eine Liste von Seitenlinks mit Titel, Beschreibung und Datum der Seiten (z. B. Produktseiten) generiert. Die Links führen zu den untergeordneten Seiten der aktuellen Seite oder einer Stammseite, die im Komponenten-Dialogfeld angegeben ist.

chlimage_1-116

Erstellen von Produktseiten

Create two pages located below the Products page. Legen Sie für die beiden Seiten, die jeweils ein bestimmtes Produkt beschreiben, einen Titel, eine Beschreibung und ein Datum fest.

  1. In the folder tree of the Websites page, select the Websites/My Website/English/Products item and click New > New Page.

  2. In the dialog enter the following property values and then click Create:

    • Titel: Produkt 1.
    • Name: product1.
    • Select My Website Content Page Template
  3. Erstellen Sie eine weitere Seite unter „Products“ mit den folgenden Eigenschaftswerten:

    • Titel: Produkt 2
    • Name: product2
    • Select My Website Content Page Template
  4. Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 1“ fest:

    1. Select the /content/mywebsite/en/products/product1/jcr:content node.

    2. Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:

      • Name: jcr:description
      • Typ: String
      • Wert: This is a description of the Product 1!.
    3. Klicken Sie auf Hinzufügen.

    4. Erstellen Sie auf der Registerkarte Eigenschaften eine weitere Eigenschaft mit den folgenden Werten:

      • Name: date
      • Typ: String
      • Wert: 14.02.2008
      • Klicken Sie auf Hinzufügen.
    5. Klicken Sie auf Alle speichern.

  5. Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 2“ fest:

    1. Select the /content/mywebsite/en/products/product2/jcr:content node.

    2. Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:

      • Name: jcr:description
      • Typ: String
      • Wert: Dies ist eine Beschreibung des Produkts 2!..
    3. Klicken Sie auf Hinzufügen.

    4. Ersetzen Sie in denselben Textfeldern die vorherigen Werte durch die folgenden Werte:

      • Name: date
      • Typ: String
      • Wert: 11.05.2012
      • Klicken Sie auf Hinzufügen.
    5. Klicken Sie auf Alle speichern.

Erstellen von listchildren-Komponenten

Gehen Sie wie folgt vor, um die listchildren-Komponente zu erstellen:

  1. In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

  2. In the dialog enter the following property values and then click Next:

    • Beschriftung: ListChildren.
    • Titel: Meine ListChildren-Komponente.
    • Beschreibung: Dies ist die Komponente Meine ListChildren.
  3. Continue clicking Next until the Allowed Children panel appears, and then click OK.

Erstellen von listchildren-Skripten

Entwickeln Sie das Skript für die listchildren-Komponente.

  1. In CRXDE Lite, open the file listchildren.jsp under /apps/mywebsite/components/listchildren.

  2. Ersetzen Sie den Standardcode durch den folgenden Code:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><%@ 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. Speichern Sie die Änderungen.

Erstellen von listchildren-Dialogfeldern

Erstellen Sie das Dialogfeld zum Konfigurieren der Eigenschaften der listchildren-Komponente.

  1. Erstellen Sie den Dialogknoten unter der listchildren-Komponente:

    1. In CRXDE Lite, right-click the /apps/mywebsite/components/listchildrennode and click Create > Create Dialog.

    2. Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie dann auf „OK“:

      • Beschriftung: dialog
      • Titel: Edit Component und klicken Sie auf OK.

    screen_shot_2012-03-07at45818pm

    Mit den folgenden Eigenschaften:

    screen_shot_2012-03-07at50415pm

  2. Select the /apps/mywebsite/components/listchildren/dialog/items/items/tab1 node.

  3. In the Properties tab, change the value of the title property to List Children

    chlimage_1-117

  4. Select the tab1 node and click Create > Create Node, enter the following property values, and click OK:

    • Name: items
    • Typ: cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. Erstellen Sie einen Knoten unterhalb des Knotens „items“ mit den folgenden Eigenschaftswerten:

    • Name: listroot
    • Typ: cq:Widget

    screen_shot_2012-03-07at51031pm

  6. hinzufügen Eigenschaften für den Listroot-Knoten, um ihn als Textfeld zu konfigurieren. Jede Zeile der folgenden Tabelle stellt eine Eigenschaft dar. When finished, click Save All.

    Name Typ Wert
    fieldLabel Zeichenfolge Pfad des Listenstammverzeichnisses
    name Zeichenfolge ./listroot
    xtype Zeichenfolge textfield

    screen_shot_2012-03-07at51433pm

Einbinden von „listchildren“ in contentpage-Komponenten

Gehen Sie wie folgt vor, um die listchildren-Komponente in Ihre contentpage-Komponente einzubinden:

  1. In CRXDE Lite, open the file left.jsp under /apps/mywebsite/components/contentpage and locate the following code (line 4):

    <div>newslist</div>
    
  2. Ersetzen Sie diesen Code durch den folgenden Code:

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
    
  3. Speichern Sie die Änderungen.

Anzeigen von „listchildren“ auf einer Seite

Um sämtliche Vorgänge im Zusammenhang mit dieser Komponente einzusehen, können Sie die Seite „Products“ anzeigen:

  • wenn die übergeordnete Seite („Pfad des Listenstammverzeichnisses“) nicht definiert ist.
  • wenn die übergeordnete Seite („Pfad des Listenstammverzeichnisses“) definiert ist.
  1. Laden Sie in Ihrem Browser die Seite Products neu. Die listchildren-Komponente wird nun wie folgt angezeigt:

    chlimage_1-118

  2. chlimage_1-119

  3. As Path of list root, enter: /content/mywebsite/en. Klicken Sie auf OK. Die listchildren-Komponente auf Ihrer Seite sieht nun wie folgt aus:

    chlimage_1-120

Erstellen von logo-Komponenten

Erstellen Sie eine Komponente, die das Firmenlogo anzeigt und einen Link zur Homepage der Website bereitstellt. Die Komponente enthält ein Designmodus-Dialogfeld, sodass Eigenschaftswerte im Site-Design gespeichert werden (/etc/designs/mywebsite?lang=de):

  • Die Eigenschaftswerte gelten für alle Instanzen der Komponente, die zu Seiten hinzugefügt werden, die das Design verwenden.
  • Die Eigenschaften können über jede Instanz der Komponente konfiguriert werden, die sich auf einer Seite befindet, die das Design verwendet.

Ihr Designmodus-Dialogfeld umfasst Eigenschaften zum Festlegen des Bilds und des Linkpfads. Die logo-Komponente wird oben links auf allen Seiten der Website platziert.

Es sieht wie nun folgt aus:

chlimage_1-121

Hinweis

Adobe Experience Manager provides a more full-featured logo component ( /libs/foundation/components/logo).

Erstellen von Knoten für logo-Komponenten

Gehen Sie wie folgt vor, um die logo-Komponente zu erstellen:

  1. Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components, wählen Sie dann die Option Erstellen und anschließend die Option Komponente erstellen aus.

  2. Geben Sie im Dialogfeld „Komponente erstellen“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf „Weiter“:

    • Beschriftung: logo.
    • Titel: My Logo Component.
    • Beschreibung: This is My Logo Component.
  3. Klicken Sie auf „Weiter“, bis Sie das letzte Bedienfeld des Dialogfelds erreicht haben, und klicken Sie dann auf OK.

Erstellen von logo-Skripten

In diesem Abschnitt wird beschrieben, wie Sie das Skript zum Anzeigen des Logobilds mit einem Link zur Homepage erstellen.

  1. In CRXDE Lite, open the file logo.jsp under /apps/mywebsite/components/logo.

  2. Mit dem folgenden Code wird ein Link zur Homepage der Website erstellt und einen Verweis auf das Logobild hinzufügt. Copy the code to logo.jsp:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><%@ 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. Speichern Sie die Änderungen.

Erstellen des Logodesign-Dialogfelds

Erstellen Sie das Dialogfeld zum Konfigurieren Ihrer logo-Komponente im Designmodus. Design-mode dialog nodes must be named design_dialog.

  1. Erstellen Sie den Knoten „dialog“ unter der logo-Komponente:

    1. Right-click the /apps/mywebsite/components/logo node and click Create > Create Dialog.

    2. Type the following property values and then click OK:

      • Beschriftung design_dialog
      • Titel Logo (Design)
  2. Klicken Sie mit der rechten Maustaste im Zweig „design_dialog“ auf den Knoten „tab1“ und klicken Sie dann auf „Löschen“. Klicken Sie auf Alle speichern.

  3. Under the design_dialog/items/itemsnode, create a new node named img of type cq:Widget. Add the following properties and then click Save All:

    Name Typ Wert
    fileNameParameter Zeichenfolge ./imageName
    fileReferenceParameter Zeichenfolge ./imageReference
    name Zeichenfolge ./image
    title Zeichenfolge Bild
    xtype Zeichenfolge html5smartimage

    chlimage_1-122

Erstellen von Rendering-Skripten für Logos

Erstellen Sie das Skript, das das Logobild abruft und es in die Seite schreibt.

  1. Right-click the logo component node and click Create > Create File to create the script file named img.GET.java.
  2. Open the file, copy the following code into the file, and then click Save All:
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();
    }
}

Hinzufügen von logo-Komponenten zu contentpage-Komponenten

  1. Öffnen Sie in CRXDE Lite die left.jsp Unterstreichung /apps/mywebsite/components/contentpage file und suchen Sie die folgende Codezeile:

    <div>logo</div>
    
  2. Ersetzen Sie diesen Code durch die folgende Codezeile:

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
    
  3. Speichern Sie die Änderungen.

  4. Laden Sie in Ihrem Browser die Seite Products neu. Das Logo sieht nun wie folgt aus, zeigt aber zurzeit nur den zugrundeliegenden Link:

    chlimage_1-123

Festlegen von Logobildern auf Seiten

In diesem Abschnitt wird beschrieben, wie Sie mithilfe des Designmodus-Dialogfelds ein Bild als Logo festlegen.

  1. With the Products page open in your browser, click the Design button at the bottom of Sidekick to enter Design mode.

  2. In the Design of logo bar, click Edit to use the dialog to edit the settings for the logo component.

  3. In the dialog, click in the panel of the Image tab, browse for the logo.png image that you extracted from the mywebsite.zip file, and click OK.

    chlimage_1-124

  4. Click the triangle on the Sidekick title bar to return to Edit mode.

    chlimage_1-7

  5. Wechseln Sie in CRXDE Lite zum folgenden Knoten, um die gespeicherten Eigenschaftswerte anzuzeigen:

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

Einbinden von trail-Komponenten

In diesem Abschnitt wird beschrieben, wie Sie die trail-Komponente (Breadcrumb) einbinden, die zu den Foundation-Komponenten gehört.

  1. In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp and replace:

    <div>trail</div>
    

    durch:

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
    
  2. Speichern Sie die Änderungen.

  3. Laden Sie in Ihrem Browser die Seite Products 1 neu. Die trail-Komponente sieht nun wie folgt aus:

    chlimage_1-125

Einbinden von title-Komponenten

In diesem Abschnitt wird beschrieben, wie Sie die title-Komponente einbinden, die zu den Foundation-Komponenten gehört.

  1. In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp and replace:

    <div>title</div>
    

    durch:

    <cq:include path="title" resourceType="foundation/components/title" />
    
  2. Speichern Sie die Änderungen.

  3. Laden Sie in Ihrem Browser die Seite Products neu. Die title-Komponente sieht nun wie folgt aus:

    chlimage_1-126

Hinweis

You can set a different Title and the Type/Size in Edit mode.

Einbinden von parsys-Komponenten

Das Absatzsystem („parsys“) ist ein wesentlicher Teil einer Website, da es eine Liste von Absätzen verwaltet. Es ermöglicht den Autoren das Hinzufügen von Absatzkomponenten zur Seite und schafft Struktur.

Fügen Sie die parsys-Komponente (eine der Foundation-Komponenten) zu Ihrer contentpage-Komponente hinzu.

  1. In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp and locate the following line of code:

    <div>parsys</div>
    
  2. Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:

    <cq:include path="par" resourceType="foundation/components/parsys" />
    
  3. In your browser, refresh the Products page. Sie weist nun die parsys-Komponente auf, die wie folgt aussieht:

    chlimage_1-127

Erstellen von image-Komponenten

Erstellen Sie eine Komponente, die ein Bild im Absatzsystem anzeigt. Um Zeit zu sparen, wird die image-Komponente als Kopie der logo-Komponente erstellt, bei der einige Eigenschaften geändert wurden.

Hinweis

Adobe Experience Manager provides a more full-featured image component ( /libs/foundation/components/image).

Erstellen von image-Komponenten

  1. Right click the /apps/mywebsite/components/logo node and click Copy.

  2. Right-click the /apps/mywebsite/components node and click Paste.

  3. Right-click the Copy of logo node, click Rename, delete the existing text and type image.

  4. Wählen Sie den Komponentenknoten image aus und ändern Sie die folgenden Eigenschaftswerte:

    • jcr:title: Meine Bildkomponente.
    • jcr:description: Dies ist meine Bildkomponente.
  5. Fügen Sie zum Knoten image eine Eigenschaft mit den folgenden Eigenschaftswerten hinzu:

    • Name: componentGroup
    • Typ: String
    • Wert: MyWebsite
  6. Below the image node, rename the design_dialog node to dialog.

  7. Rename logo.jsp to image.jsp.

  8. Öffnen Sie img.GET.java und ändern Sie das Paket in apps.mywebsite.components.image.

chlimage_1-128

Erstellen von image-Skripten

In diesem Abschnitt wird beschrieben, wie Sie das image-Skript erstellen.

  1. Öffnen Sie /apps/mywebsite/components/image/ image.jsp

  2. Ersetzen Sie den vorhandenen Code durch den folgenden Code und speichern Sie dann die Änderungen:

    <%@include file="/libs/foundation/global.jsp?lang=de"%><%
    %><%@ 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. Speichern Sie die Änderungen.

Erstellen des Knotens „Image cq:editConfig“

Über den Knoten cq:editConfig können Sie bestimmte Verhaltensweisen von Komponenten konfigurieren, indem Sie ihre Eigenschaften bearbeiten.

In diesem Abschnitt verwenden Sie den Knoten „cq:editConfig“, um Assets aus dem Content Finder in Ihre image-Komponente zu ziehen.

  1. Erstellen Sie in CRXDE Lite unter dem Knoten /apps/mywebsite/components/image wie folgt einen neuen Knoten:

    • Name: cq:editConfig.
    • Typ: cq:EditConfig.
  2. Erstellen Sie unter dem Knoten „cq:editConfig“ wie folgt einen neuen Knoten:

    • Name: cq:dropTargets.
    • Typ: cq:DropTargetConfig.
  3. Erstellen Sie unter dem Knoten „cq:dropTargets“ wie folgt einen neuen Knoten:

    • Name: Bild.
    • Typ: nt:unstructured.
  4. Legen Sie in CRXDE die Eigenschaften wie folgt fest:

Name Typ Wert
Akzeptieren der Bedingungen Zeichenfolge image/(gif
Gruppen Zeichenfolge media
propertyName Zeichenfolge ./imageReference

chlimage_1-129

Hinzufügen des Symbols

In diesem Abschnitt fügen Sie das Symbol hinzu, das neben der image-Komponente angezeigt wird, wenn diese im Sidekick aufgeführt ist:

  1. In CRXDE Lite, right-click the file /libs/foundation/components/image/icon.png and select Copy.
  2. Right-click the node /apps/mywebsite/components/image and click Paste, then click Save All.

Verwenden von image-Komponenten

In diesem Abschnitt zeigen Sie die Seite Products an und fügen Ihre image-Komponente zum Absatzsystem hinzu.

  1. Laden Sie in Ihrem Browser die Seite Products neu.

  2. In the Sidekick, click the Design mode icon.

  3. Click the Edit button to edit the design dialog of par.

  4. Im Dialogfeld wird die Liste Zugelassene Komponenten angezeigt. Navigieren Sie zu MyWebsite, wählen Sie die Komponente My Image aus und klicken Sie auf OK.

  5. Return to Edit mode.

  6. Doppelklicken Sie auf den parsys-Rahmen (im Bereich Komponenten oder Assets hierhin ziehen). Die Auswahlen Neue Komponente einfügen und Sidekick sehen wie folgt aus:

    chlimage_1-8

Einbinden von toolbar-Komponenten

In diesem Abschnitt wird beschrieben, wie Sie die toolbar-Komponente einbinden, die zu den Foundation-Komponenten gehört.

Ihnen stehen dazu mehrere Optionen im Bearbeitungsmodus und im Designmodus zur Auswahl.

  1. In CRXDE Lite, navigate to /apps/mywebsite/components/contentpage, open the body.jsp file and locate the following code:

    <div class="toolbar">toolbar</div>
    
  2. Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
    
  3. In the folder tree of the AEM Websites page, select Websites/My Website/English, then click New > New Page. Geben Sie die folgenden Eigenschaftswerte an und klicken Sie auf „Erstellen“:

    • Titel: Symbolleiste
    • Select My Website Content Page Template
  4. In the list of pages, right-click the Toolbar page and click Properties. Select Hide In Navigation, and click OK.

    The Hide in Navigation option prevents the page from appearing in navigation components, such as topnav and listchildren.

  5. Under Toolbar, create following pages:

    • Contacts
    • Feedback
    • Anmeldung
    • Suchen
  6. Laden Sie in Ihrem Browser die Seite Products neu. Diese sieht nun wie folgt aus:

    chlimage_1-130

Erstellen von search-Komponenten

In diesem Abschnitt erstellen Sie die Komponente zum Suchen nach Inhalten auf der Website. Diese search-Komponente kann im Absatzsystem einer beliebigen Seite (z. B. auf einer spezialisierten Suchergebnisseite) platziert werden.

Das Eingabefeld für die Suche auf der Seite Englisch sieht nun wie folgt aus:

chlimage_1-131

Erstellen von search-Komponenten

  1. In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

  2. Konfigurieren Sie die Komponente über das Dialogfeld:

    1. Geben Sie im ersten Bedienfeld die folgenden Eigenschaftswerte an:

      • Beschriftung: search
      • Titel: Meine Suchkomponente
      • Beschreibung: Dies ist die Komponente Meine Suche
      • Gruppe: MyWebsite
    2. Click Next, then click Next again.

    3. On the Allowed Parents panel, click the + button and type */parsys.

    4. Click Next and then click OK.

  3. Klicken Sie auf Alle speichern.

  4. Copy the following nodes and paste them to the apps/mywebsite/components/search node:

    • /libs/foundation/components/search/dialog
    • `` /libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png
  5. Klicken Sie auf Alle speichern.

Erstellen von search-Skripten

In diesem Abschnitt wird das Erstellen des Suchskripts beschrieben:

  1. Open the /apps/mywebsite/components/search/search.jsp file.

  2. Kopieren Sie den folgenden Code und fügen Sie ihn in search.jsp ein:

    <%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
    <%@include file="/libs/foundation/global.jsp?lang=de" %><%
    %><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}"/%3E%3C%%20%20%20%%3E%3Ccenter%3E%20%20%20%20%20%3Cform%20action=?lang=de"${currentPage.path}.html">
        <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/%3E%20%20%20%20%20%20%20%3Cinput%20value=?lang=de"<fmt:message key="searchButtonText"/%3E?lang=de" type="submit" />
      </form>
    </center>
    <br/>
    <c:set var="result" value="${search.result}"/%3E%20%20%20%3Cc:choose%3E%20%20%20%20%20%3Cc:when%20test=?lang=de"${empty result && empty search.query}">
      </c:when>
      <c:when test="${empty result.hits}">
        <c:if test="${result.spellcheck != null}">
          <p><fmt:message key="spellcheckText"/%3E%20%3Ca%20href=?lang=de"<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/%3E%3C/c:url%3E?lang=de"><b><c:out value="${result.spellcheck}"/%3E%3C/b%3E%3C/a%3E%3C/p%3E%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%3Cfmt:message%20key=?lang=de"noResultsText">
          <fmt:param value="${fn:escapeXml(search.query)}"/%3E%20%20%20%20%20%20%20%3C/fmt:message%3E%20%20%20%20%20%3C/c:when%3E%20%20%20%20%20%3Cc:otherwise%3E%20%20%20%20%20%20%20%3Cp%20class=?lang=de"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"/%3E%3C/c:catch%3E%3C/c:if%3E%20-%20%3Ca%20href=?lang=de"${hit.similarURL}"><fmt:message key="similarPagesText"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/div%3E%3C/div%3E%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%3Cbr/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=?lang=de"searchRight">
              <c:if test="${fn:length(trends.queries) > 0}">
                  <p><fmt:message key="searchTrendsText"/%3E%3C/p%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=?lang=de"searchTrends">
                      <c:forEach var="query" items="${trends.queries}">
                          <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/%3E%3C/c:url%3E?lang=de"><span style="font-size:${query.size}px"><c:out value="${query.query}"/%3E%3C/span%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=de"${result.facets.languages.containsHit}">
                  <p>Languages</p>
                  <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=de"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"/%3E%3C/cq:requestURL%3E?lang=de">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=de">${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}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=de"tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=de"${tag != null}">
                          <c:set var="label" value="${tag.title}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:choose%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:when%20test=?lang=de"<%= 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}"/%3E%3C/cq:requestURL%3E?lang=de">remove filter</a></c:when>
                              <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=de">${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"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EFile%20types%3C/p%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=de"bucket" items="${result.facets.mimeTypes.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=de"label" value="${fileTypes[bucket.value]}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:choose%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:when%20test=?lang=de"<%= 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}"/%3E%3C/cq:requestURL%3E?lang=de">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=de">${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"/%3E%3Ccq:removeParam%20name=?lang=de"to"/%3E%3C/cq:requestURL%3E?lang=de">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/%3E%3Ccq:removeParam%20name=?lang=de"to"/%3E%3Cc:if%20test=?lang=de"${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/%3E%3C/c:if%3E%3Cc:if%20test=?lang=de"${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/%3E%3C/c:if%3E%3C/cq:requestURL%3E?lang=de">${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"/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=de"rq" items="${search.relatedQueries}">
                <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%3C/div%3E%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=de"${fn:length(result.resultPages) > 1}">
            <div class="pagination"> 
                <fmt:message key="resultPagesText"/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=de"${result.previousPage != null}">
              <a href="${result.previousPage.URL}"><fmt:message key="previousText"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=de"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. Speichern Sie die Änderungen.

Einbinden von Suchfeldern in contentpage-Komponenten

Gehen Sie wie folgt vor, um ein Eingabefeld für die Suche in den linken Bereich Ihrer Inhaltsseite einzufügen:

  1. In CRXDE Lite, open the file left.jsp under /apps/mywebsite/components/contentpage and locate the following code (line 2):

    %><div class="left">
    
  2. Fügen Sie den folgenden Code vor dieser Zeile ein:

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath(); 
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
    
  3. Suchen Sie die folgende Codezeile:

    <div>search</div>
    
  4. Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:

    <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. Laden Sie in Ihrem Browser die Seite Products neu. Die search-Komponente sieht nun wie folgt aus:

    chlimage_1-132

Einbinden vom search-Komponenten in die Seite „Search“

In diesem Abschnitt fügen Sie die search-Komponente zum Absatzsystem hinzu.

  1. In your browser, open the Search page.

  2. In the Sidekick, click the Design mode icon.

  3. In the Design of par block (below the Search title), click Edit.

  4. In the dialog, scroll down to the My Websites group, select My Search Component and click OK.

  5. On Sidekick, click the triangle to return to Edit mode.

  6. Drag the My Search component from the Sidekick into the parsys frame. Diese sieht nun wie folgt aus:

    chlimage_1-133

  7. Navigate to your Products page. Search for customers in the input box and press Enter. You are redirected to the Search page. Switch to Preview mode: the output is in a similar format as the following:

    chlimage_1-134

Einbinden von iparsys-Komponenten

In diesem Abschnitt wird beschrieben, wie Sie die iparsys-Komponente (Inheritance Paragraph System) einbinden, die zu den Foundation-Komponenten gehört. Mit dieser Komponente können Sie eine Struktur von Absätzen auf einer übergeordneten Seite erstellen und die Absätze von den untergeordneten Seiten erben lassen.

Für diese Komponente können Sie verschiedene Parameter im Bearbeitungs- und Designmodus festlegen.

  1. In CRXDE Lite, navigate to /apps/mywebsite/components/contentpage, open the file right.jsp and replace:

    <div>iparsys</div>
    

    durch:

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
    
  2. Speichern Sie die Änderungen.

  3. Laden Sie in Ihrem Browser die Seite Products neu. Die Seite sieht nun insgesamt wie folgt aus:

    chlimage_1-9

Auf dieser Seite