In diesem Artikel wird erläutert, wie Sie Websites mithilfe von JSP und basierend auf der klassischen Benutzeroberfläche erstellen. Adobe empfiehlt die Verwendung der neuesten Adobe Experience Manager (AEM)-Technologien für Ihre Websites, wie im Artikel ausführlich beschrieben Erste Schritte bei der Entwicklung von AEM Sites.
In diesem Tutorial können Sie eine Website mit vollständigen Funktionen mit AEM erstellen. Die Website basiert auf einer generischen Website und ist in erster Linie auf Web-Entwicklerinnen und -Entwickler ausgerichtet. Die gesamte Entwicklung erfolgt in einer Authoring-Umgebung.
In diesem Tutorial wird Folgendes beschrieben:
Installieren Sie AEM.
Zugreifen auf CRXDE Lite (die Entwicklungsumgebung)
Einrichten der Projektstruktur in CRXDE Lite
Erstellen der Vorlage, der Komponente und der Skripte, die als Grundlage für die Erstellung von Inhaltsseiten verwendet werden.
Erstellen der Stammseite für Ihre Website und dann der Inhaltsseiten.
Erstellen der folgenden Komponenten zur Verwendung auf den Seiten
Fügen Sie verschiedene Foundation-Komponenten ein.
Nachdem Sie alle Schritte ausgeführt haben, sollten Ihre Seiten wie folgt aussehen:
Endergebnis herunterladen
Laden Sie website-1.0.zip herunter, um dem Tutorial zu folgen, anstatt die Übungen durchzuführen. Diese Datei ist ein AEM-Inhaltspaket, das die Ergebnisse dieses Tutorials enthält. Verwenden Sie den Package Manager, um das Paket in Ihrer Authoring-Instanz zu installieren.
NOTE: Bei der Installation dieses Pakets werden alle Ressourcen in Ihrer Authoring-Instanz überschrieben, die Sie mithilfe dieses Tutorials erstellt haben.
Website-Inhaltspaket
Um eine AEM-Instanz für die Entwicklung Ihrer Website zu installieren, folgen Sie den Anweisungen zum Einrichten einer Bereitstellungsumgebung mit Erstellungs- und Veröffentlichungsinstanzen oder nehmen Sie eine allgemeine Installation vor. Im Zuge einer allgemeinen Installation laden Sie die Quickstart-JAR-Datei von AEM herunter und speichern die Datei license.properties im selben Verzeichnis wie die JAR-Datei. Anschließend doppelklicken Sie auf die JAR-Datei.
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:
Die URL von CRXDE Lite für eine AEM-Autoreninstanz, die lokal unter Verwendung des Standard-Ports installiert wird, lautet https://localhost:4502/crx/de/.
Verwenden Sie CRXDE Lite, um die Anwendungsstruktur von „mywebsite“ im Repository zu erstellen:
Klicken Sie in der Baumstruktur links in CRXDE Lite mit der rechten Maustaste auf den Ordner /apps
und klicken Sie dann auf Erstellen > Ordner erstellen. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen mywebsite
ein und klicken Sie auf OK.
Klicken Sie mit der rechten Maustaste auf den Ordner /apps/mywebsite
und klicken Sie dann auf Erstellen > Ordner erstellen. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen components
ein und klicken Sie auf OK.
Klicken Sie mit der rechten Maustaste auf den Ordner /apps/mywebsite
und klicken Sie dann auf Erstellen > Ordner erstellen. 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:
Klicken Sie auf Alle speichern.
In diesem Abschnitt erstellen Sie das Design für Ihre Anwendung mit dem Designer-Tool. Das Design stellt CSS- und Bildressourcen für Ihre Website bereit.
Klicken Sie auf den folgenden Link, um mywebsite.zip herunterzuladen. Das Archiv enthält die static.css- und Bilddateien für Ihr Design.
Beispieldatei static.css und Bilder
Klicken Sie auf der AEM-Begrüßungsseite auf Tools. (https://localhost:4502/libs/cq/core/content/welcome.html)
Wählen Sie in der Ordnerbaumstruktur den Ordner Designs aus und klicken Sie dann auf Neu > Neue Seite. Geben Sie mywebsite
als Titel ein und klicken Sie auf Erstellen.
Wenn das Element „mywebsite“ nicht in der Tabelle aufgeführt wird, aktualisieren Sie die Baumansicht bzw. die Tabelle.
Greifen Sie über WebDAV auf die URL unter https://localhost:4502 zu und kopieren Sie die Beispieldatei static.css
und den Ordner images
aus der zuvor heruntergeladenen Datei mywebsite.zip in den Ordner /etc/designs/mywebsite
.
In diesem Abschnitt erstellen Sie Folgendes:
Erstellen Sie eine Vorlage, die als Grundlage für die Webseiten Ihrer Site verwendet werden soll.
Eine Vorlage definiert den Standardinhalt einer neuen Seite. Komplexe Websites können mehrere Vorlagen verwenden, um die verschiedenen Seitentypen auf der Site zu erstellen. In dieser Übung basieren alle Seiten auf einer einfachen Vorlage.
Klicken Sie in der Ordnerbaumstruktur von CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/templates
. Klicken Sie dann auf Erstellen > Vorlage erstellen.
Geben Sie im Dialogfeld „Komponente erstellen“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf Weiter:
Verwenden Sie den Standardwert für die Eigenschaft „Rangfolge“.
Der Ressourcentyp identifiziert die Komponente, die die Seite rendert. In diesem Fall werden alle Seiten, die mithilfe der contentpage-Vorlage erstellt wurden, von der Komponente mywebsite/components/contentpage
gerendert.
Um die Pfade der Seiten anzugeben, die diese Vorlage verwenden können, klicken Sie auf die Schaltfläche mit dem Pluszeichen und geben Sie in das daraufhin angezeigte Textfeld /content(/.*)?
ein. Klicken Sie dann auf Weiter.
Beim Wert der Eigenschaft „Zugelassene Pfade“ handelt es sich um einen regulären Ausdruck. Seiten mit einem Pfad, der dem Ausdruck entspricht, können die Vorlage verwenden. In diesem Fall stimmt der reguläre Ausdruck mit dem Pfad der /content Ordner und alle Unterseiten.
Wenn ein Autor eine Seite unter /content erstellt, erscheint die contentpage-Vorlage in einer Liste mit verfügbaren Vorlagen.
Klicken Sie auf Weiter in den Bedienfeldern Zulässige übergeordnete Elemente und Zulässige untergeordnete Elemente und klicken Sie auf OK. Klicken Sie in CRXDE Lite auf Alle speichern.
Erstellen Sie die Komponente, die den Inhalt definiert und die Seiten rendert, die die Contentpage-Vorlage verwenden. Der Speicherort der Komponente muss mit dem Wert der Eigenschaft „Ressourcentyp“ der Contentpage-Vorlage übereinstimmen.
Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components
und klicken Sie auf Erstellen > Komponente.
Geben Sie im Dialogfeld Komponente erstellen die folgenden Eigenschaftswerte ein:
Der Speicherort der neuen Komponente ist /apps/mywebsite/components/contentpage
. Dieser Pfad entspricht dem Ressourcentyp der contentpage-Vorlage (ohne den ersten Teil /apps/
des Pfads).
Diese Entsprechung verbindet die Vorlage mit der Komponente und ist entscheidend für die ordnungsgemäße Funktionsweise der Website.
Klicken Sie auf Weiter, bis das Bedienfeld „Zugelassene untergeordnete Elemente“ angezeigt wird. Klicken Sie dann auf OK. Klicken Sie in CRXDE Lite auf Alle speichern.
Die Struktur sieht nun wie folgt aus:
Fügen Sie dem Skript contentpage.jsp Code hinzu, um den Seiteninhalt zu definieren.
Öffnen Sie in CRXDE Lite die Datei contentpage.jsp
unter /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"%><%
%><%@page session="false" %><%
%><%
/* TODO add you code here */
%>
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>
Klicken Sie auf Alle speichern, um Ihre Änderungen zu speichern.
In diesem Abschnitt wird erläutert, wie Sie die folgenden Seiten erstellen, die alle die contentpage-Vorlage verwenden: „Meine Website“, „Englisch“, „Produkte“, „Services“ und „Kunden“.
Klicken Sie auf der AEM-Begrüßungsseite (https://localhost:4502/libs/cq/core/content/welcome.html) auf „Websites“.
Wählen Sie in der Ordnerbaumstruktur den Ordner Websites aus und klicken Sie dann auf Neu > Neue Seite.
Geben Sie im Fenster Seite erstellen Folgendes ein:
My Website
mywebsite
My Website Content Page Template
Klicken Sie auf Erstellen. Wählen Sie in der Ordnerbaumstruktur die Seite unter /Websites/Meine Website/ aus und klicken Sie dann auf Neu > Neue Seite.
Geben Sie im Dialogfeld Seite erstellen die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:
Wählen Sie in der Ordnerbaumstruktur die Seite unter /Websites/Meine Website/Englisch aus und klicken Sie dann auf Neu > Neue Seite.
Im Seite erstellen Geben Sie die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:
Wählen Sie in der Ordnerbaumstruktur die Seite unter /Websites/Meine Website/Englisch aus und klicken Sie dann auf Neu > Neue Seite.
Im Seite erstellen Geben Sie die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:
Wählen Sie in der Ordnerbaumstruktur die Seite unter /Websites/Meine Website/Englisch aus und klicken Sie dann auf Neu > Neue Seite.
Im Seite erstellen Geben Sie die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:
Ihre Struktur sieht nun wie folgt aus:
Um Ihre Seiten mit dem mywebsite-Design zu verknüpfen, wählen Sie in CRXDE Lite den Knoten /content/mywebsite/en/jcr:content
aus. Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte für eine neue Eigenschaft ein und klicken Sie auf „Hinzufügen“:
Öffnen Sie in einer neuen Registerkarte bzw. in einem neuen Fenster Ihres Webbrowsers https://localhost:4502/content/mywebsite/en/products.html, um die Seite „Produkteׅ“ anzuzeigen:
In diesem Abschnitt wird beschrieben, wie Sie das Contentpage-Skript mithilfe der AEM Foundation-Komponentenskripte verbessern und eigene Skripte schreiben können.
Wenn Sie fertig sind, wird die Produkte -Seite sollte wie folgt aussehen:
In dieser Übung konfigurieren Sie Ihre Komponente „Pagecontent“ so, dass ihr Supertyp die AEM-Seitenkomponente ist. Da Komponenten die Eigenschaften ihres Supertyps erben, erbt Ihre pagecontent-Komponente 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.
Fügen Sie in CRXDE Lite eine Eigenschaft zum Knoten /apps/mywebsite/components/contentpage
hinzu.
Wählen Sie den Knoten /apps/mywebsite/components/contentpage
aus.
Geben Sie unten auf der Registerkarte „Eigenschaften“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf „Hinzufügen“:
Klicken Sie auf „Alle speichern“.
Öffnen Sie die Datei contentpage.jsp
unter /apps/mywebsite/components/contentpage
und ersetzen Sie den vorhandenen Code durch den folgenden Code:
<%@include file="/libs/foundation/global.jsp"%><%
%><%@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>
Speichern Sie Ihre Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Dies sieht wie folgt aus:
Öffnen Sie die Seitenquelle, um die JavaScript- und HTML-Elemente anzuzeigen, die von den Skripten head.jsp und body.jsp generiert wurden. Das folgende Skriptfragment öffnet den Sidekick beim Öffnen der Seite:
CQ.WCM.launchSidekick("/content/mywebsite/en/products",
{propsDialog: "/libs/foundation/components/page/dialog",
locked: false locked: false
});
In diesem Abschnitt erstellen Sie mehrere Skripte, die jeweils einen Teil des Seitentextes generieren. Anschließend erstellen Sie die Datei body.jsp in der Komponente „Pagecontent“, um die Datei body.jsp der AEM-Seitenkomponente zu überschreiben. In der Datei body.jsp fügen Sie 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.
Erstellen Sie in CRXDE Lite die Datei left.jsp
unter /apps/mywebsite/components/contentpage
:
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage
, wählen Sie dann die Option Erstellen und anschließend die Option Datei erstellen aus.
Geben Sie im Fenster left.jsp
als Name ein und klicken Sie auf OK.
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"%><%
%><div class="left">
<div>logo</div>
<div>newslist</div>
<div>search</div>
</div>
Speichern Sie die Änderungen.
Erstellen Sie in CRXDE Lite die Datei center.jsp
unter /apps/mywebsite/components/contentpage
:
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage
, wählen Sie dann die Option Erstellen und anschließend die Option Datei erstellen aus.
Geben Sie im Dialogfeld in das Feld center.jsp
Name den Dateinamen ein und klicken Sie auf OK.
Bearbeiten Sie die Datei center.jsp
, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:
<%@include file="/libs/foundation/global.jsp"%><%
%><div class="center">
<div>trail</div>
<div>title</div>
<div>parsys</div>
</div>
Speichern Sie die Änderungen.
Erstellen Sie in CRXDE Lite die Datei right.jsp
unter /apps/mywebsite/components/contentpage
:
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage
, wählen Sie dann die Option Erstellen und anschließend die Option Datei erstellen aus.
Geben Sie im Dialogfeld in das Feld right.jsp
Name den Dateinamen ein und klicken Sie auf OK.
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"%><%
%><div class="right">
<div>iparsys</div>
</div>
Speichern Sie die Änderungen.
Erstellen Sie in CRXDE Lite die Datei body.jsp
unter /apps/mywebsite/components/contentpage
:
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"%><%
%><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>
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Dies sieht wie folgt aus:
In diesem Abschnitt erstellen Sie eine Komponente, die Links zu allen Seiten der obersten Ebene der Website anzeigt, um die Navigation zu vereinfachen. Dieser Komponenteninhalt wird oben auf allen Seiten angezeigt, die mit der Contentpage-Vorlage erstellt wurden.
In der ersten Version der oberen Navigationskomponente (topnav) sind die Navigationselemente nur Textlinks. In der zweiten Version implementieren Sie topnav mit Links zur Bildnavigation.
Wenn Sie fertig sind, sollte Ihre obere Navigation wie folgt aussehen:
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.
Geben Sie im Fenster Komponente erstellen Folgendes ein:
Bezeichnung: topnav
Titel: My Top Navigation Component
Beschreibung: This is My Top Navigation Component
Klicken Sie auf Weiter, bis Sie zum letzten Fenster kommen, in dem Sie auf OK klicken. Speichern Sie Ihre Änderungen.
Fügen Sie das Rendering-Skript zu topnav hinzu, um Textlinks zu untergeordneten Seiten zu generieren:
Öffnen Sie in CRXDE Lite die Datei topnav.jsp
unter /apps/mywebsite/components/topnav
.
Ersetzen Sie den vorhandenen Code durch Kopieren und Einfügen des folgenden Codes:
<%@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><%
}
}
%>
So fügen Sie topnav in Ihre Contentpage-Komponente ein:
Öffnen Sie in CRXDE Lite die Datei body.jsp
unter /apps/mywebsite/components/contentpage
und ersetzen Sie:
<div class="topnav">topnav</div>
durch:
<cq:include path="topnav" resourceType="mywebsite/components/topnav" />
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Die obere Navigation wird wie folgt angezeigt:
Die Komponente „Seite“ definiert Eigenschaften, mit denen Sie Untertitel für Seiten bereitstellen können. Fügen Sie Untertitel hinzu, die Informationen zum Seiteninhalt bereitstellen.
Öffnen Sie in Ihrem Browser die Seite Produkte.
Klicken Sie im Sidekick auf der Registerkarte Seite auf Seiteneigenschaften.
Erweitern Sie im Dialogfeld auf der Registerkarte „Allgemein“ den Eintrag Weitere Titel und Beschreibungen und geben Sie Was wir tun im Feld für die Eigenschaft Untertitel ein. Klicken Sie auf OK.
Wiederholen Sie die vorherigen Schritte, um den Untertitel Über unsere Services zur Seite Services hinzuzufügen.
Wiederholen Sie die vorherigen Schritte, um den Untertitel Warum Sie uns vertrauen können zur Seite Kunden hinzuzufügen.
Tipp: Wählen Sie in CRXDE Lite den Knoten /content/mywebsite/en/products/jcr:content aus, um zu sehen, dass die Eigenschaft „Untertitel“ hinzugefügt ist.
Verbessern Sie das Rendering-Skript der topnav-Komponente, sodass für die Navigationssteuerelemente Bild-Links anstelle von Hypertext verwendet werden. Das Bild enthält den Titel und den Untertitel des Link-Ziels.
Diese Übung zeigt die Verarbeitung von Sling-Anfragen. Das Skript topnav.jsp wird geändert, um ein Skript aufzurufen, das dynamisch Bilder generiert, die für die Seitennavigations-Links verwendet werden. 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 Bild-Link zur Seite „Produkte“ könnte beispielsweise https://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:
Sling bestimmt /content/mwebysite/en/products.png.
als Pfad der Ressource.
Sling ordnet diesen Pfad dem Knoten /content/mywebsite/en/products
zu.
Sling bestimmt sling:resourceType
als mywebsite/components/contentpage
dieses Knotens.
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.
Öffnen Sie in CRXDE Lite die Datei topnav.jsp
unter /apps/mywebsite/components/topnav.
. Suchen Sie den Inhalt des Ankerelements (Zeile 14):
<%=child.getTitle() %>
Ersetzen Sie den Ankerinhalt durch den folgenden Code:
<img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
Speichern Sie die Änderungen.
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage
und klicken Sie auf Erstellen > Datei erstellen.
Geben Sie im Fenster Datei erstellen in das Feld Name navimage.png.java
ein.
Die Dateinamenerweiterung .java gibt Sling an, dass die Java™-Unterstützung für Apache Sling Scripting verwendet werden sollte, um das Skript zu kompilieren und ein Servlet zu erstellen.
Kopieren Sie den folgenden Code nach navimage.png.java.
. Der Code erweitert die Klasse „AbstractImageServlet“:
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;
}
}
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Die obere Navigation wird jetzt wie folgt angezeigt:
Erstellen Sie die Listchildren-Komponente, die eine Liste von Seiten-Links generiert, die den Titel, die Beschreibung und das Datum der Seiten enthalten (z. B. Produktseiten). Die Links zielen auf die untergeordneten Seiten der aktuellen Seite oder einer Stammseite ab, die im Komponentendialogfeld angegeben ist.
Erstellen Sie zwei Seiten unter der Seite „Produkte“. Für jede Seite, die zwei spezifische Produkte beschreibt, legen Sie einen Titel, eine Beschreibung und ein Datum fest.
Wählen Sie im Ordnerbaum der Seite „Websites“ das Element Websites/My Website/English/Products aus und klicken Sie auf „Neu“ > „Neue Seite“.
Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:
Erstellen Sie eine weitere Seite unter „Produkte“ mit den folgenden Eigenschaftswerten:
Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 1“ fest:
Wählen Sie den Knoten /content/mywebsite/en/products/product1/jcr:content
aus.
Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:
jcr:description
String
This is a description of the Product 1!.
Klicken Sie auf Hinzufügen.
Erstellen Sie auf der Registerkarte Eigenschaften eine weitere Eigenschaft mit den folgenden Werten:
Klicken Sie auf Alle speichern.
Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 2“ fest:
Wählen Sie den Knoten /content/mywebsite/en/products/product2/jcr:content aus.
Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:
Klicken Sie auf Hinzufügen.
Ersetzen Sie in denselben Textfeldern die vorherigen Werte durch die folgenden Werte:
Klicken Sie auf Alle speichern.
Gehen Sie wie folgt vor, um die listchildren-Komponente zu erstellen:
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.
Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie auf "Next":
Klicken Sie mehrfach auf „Weiter“, bis das Bedienfeld „Zugelassene untergeordnete Elemente“ angezeigt wird. Klicken Sie dann auf „OK“.
Entwickeln Sie das Skript für die listchildren-Komponente.
Öffnen Sie in CRXDE Lite die Datei listchildren.jsp
unter /apps/mywebsite/components/listchildren
.
Ersetzen Sie den Standard-Code durch den folgenden Code:
<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
com.day.cq.wcm.api.PageFilter"%><%
/* Create a 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 %></code><br>
<%= child.getProperties().get("jcr:description","") %><br>
</div><%
}
}
%>
Speichern Sie die Änderungen.
Erstellen Sie das Dialogfeld zum Konfigurieren der Eigenschaften der listchildren-Komponente.
Erstellen Sie den Dialogknoten unter der listchildren-Komponente:
Klicken Sie in CRXDE Lite mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/listchildren
und klicken Sie dann auf Erstellen > Dialogfeld erstellen.
Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie dann auf „OK“:
Bezeichnung: dialog
Titel: Edit Component
und klicken Sie auf OK.
Mit den folgenden Eigenschaften:
Wählen Sie den Knoten /apps/mywebsite/components/listchildren/dialog/items/items/tab1
aus.
Ändern Sie auf der Registerkarte „Eigenschaften“ den Wert der Eigenschaft Titel in List Children
.
Wählen Sie den Knoten „tab1“ und klicken Sie auf „Erstellen“ > „Knoten erstellen“, geben Sie die folgenden Eigenschaftswerte ein und klicken Sie dann auf „OK“:
Erstellen Sie einen Knoten unterhalb des Knotens „items“ mit den folgenden Eigenschaftswerten:
Fügen Sie Eigenschaften für den Knoten „listroot“ hinzu, um ihn als Textfeld zu konfigurieren. Jede Zeile in der folgenden Tabelle stellt eine Eigenschaft dar. Wenn Sie fertig sind, klicken Sie auf „Alle speichern“.
Name | Typ | Wert |
---|---|---|
fieldLabel | Zeichenfolge | Pfad des Listenstammverzeichnisses |
name | Zeichenfolge | ./listroot |
xtype | Zeichenfolge | textfield |
Gehen Sie wie folgt vor, um die listchildren-Komponente in Ihre contentpage-Komponente einzubeziehen:
Öffnen Sie in CRXDE Lite die Datei left.jsp
unter /apps/mywebsite/components/contentpage
und suchen Sie den folgenden Code (Zeile 4):
<div>newslist</div>
Ersetzen Sie diesen Code durch den folgenden Code:
<cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
Speichern Sie die Änderungen.
Um den vollständigen Betrieb dieser Komponente anzuzeigen, können Sie die Seite Produkte anzeigen:
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Die listchildren-Komponente wird nun wie folgt angezeigt:
Geben Sie im Feld „Pfad des Listenstammverzeichnisses“ /content/mywebsite/en
ein. Klicken Sie auf „OK“. Die listchildren-Komponente auf Ihrer Seite sieht nun wie folgt aus:
Erstellen Sie eine Komponente, die das Firmenlogo anzeigt und einen Link zur Homepage der Website bereitstellt. Die Komponente enthält ein Dialogfeld für den Design-Modus, sodass Eigenschaftswerte im Site-Design gespeichert werden (/etc/designs/mywebsite?lang=de):
Ihr Dialogfeld für den Design-Modus umfasst Eigenschaften zum Festlegen des Bilds und des Link-Pfads. Die logo-Komponente wird auf der linken oberen Seite aller Seiten der Website platziert.
Wenn Sie fertig sind, sollte dies wie folgt aussehen:
Adobe Experience Manager bietet eine logo-Komponente mit umfassenderem Funktionsumfang ( /libs/foundation/components/logo
).
Gehen Sie wie folgt vor, um die Logo-Komponente zu erstellen:
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.
Geben Sie im Dialogfeld „Komponente erstellen“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf „Weiter“:
logo
.My Logo Component
.This is My Logo Component
.Klicken Sie auf „Weiter“, bis Sie das letzte Bedienfeld des Dialogs erreicht haben, und klicken Sie dann auf OK.
In diesem Abschnitt wird beschrieben, wie Sie das Skript erstellen, um das Logo-Bild mit einem Link zur Homepage anzuzeigen.
Öffnen Sie in CRXDE Lite die Datei logo.jsp
unter /apps/mywebsite/components/logo
.
Mit dem folgenden Code wird ein Link zur Homepage der Website erstellt und einen Verweis auf das Logobild hinzufügt. Kopieren Sie den Code und fügen Sie ihn in logo.jsp
ein:
<%@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>
Speichern Sie die Änderungen.
Erstellen Sie das Dialogfeld zum Konfigurieren Ihrer Logo-Komponente im Design-Modus. Knoten für Designmodus-Dialogfelder müssen design_dialog
benannt werden.
Erstellen Sie den Knoten „dialog“ unter der logo-Komponente:
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/logo
und klicken Sie dann auf Erstellen > Dialogfeld erstellen.
Geben Sie die folgenden Eigenschaftswerte ein und klicken Sie dann auf „OK“:
Bezeichnung: design_dialog
Titel: Logo (Design)
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“.
Unter dem design_dialog/items/items
Knoten erstellen Sie einen Knoten namens img
des Typs cq:Widget
. Fügen Sie die folgenden Eigenschaften hinzu und klicken Sie dann auf „Alle speichern“:
Name | Typ | Wert |
---|---|---|
fileNameParameter | Zeichenfolge | ./imageName |
fileReferenceParameter | Zeichenfolge | ./imageReference |
name | Zeichenfolge | ./image |
title | Zeichenfolge | Bild |
xtype | Zeichenfolge | html5smartimage |
Erstellen Sie das Skript, das das Logo-Bild abruft und auf die Seite schreibt.
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();
}
}
Öffnen Sie in CRXDE Lite die Datei left.jsp
unter /apps/mywebsite/components/contentpage file
und suchen Sie die folgende Codezeile:
<div>logo</div>
Ersetzen Sie diesen Code durch die folgende Code-Zeile:
<cq:include path="logo" resourceType="mywebsite/components/logo" />
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Das Logo sieht nun wie folgt aus, zeigt aber zurzeit nur den zugrundeliegenden Link:
In diesem Abschnitt wird beschrieben, wie Sie mithilfe des Dialogfelds „Design-Modus“ ein Bild als Logo festlegen.
Klicken Sie, während die Seite „Produkte“ im Browser geöffnet ist, unten im Sidekick auf die Schaltfläche „Design“, um in den Designmodus zu wechseln.
Klicken Sie in der Leiste für das Design des Logos auf „Bearbeiten“. Bearbeiten Sie im daraufhin angezeigten Dialogfeld die Einstellungen für die Logo-Komponente.
Wechseln Sie im Dialogfeld zur Registerkarte „Bild“, suchen Sie nach dem Bild „logo.png“, das Sie aus der Datei „mywebsite.zip“ extrahiert haben, und klicken Sie auf „OK“.
Klicken Sie auf das Dreieck in der Titelleiste des Sidekicks, um zum Bearbeitungsmodus zurückzukehren.
Wechseln Sie in CRXDE Lite zum folgenden Knoten, um die gespeicherten Eigenschaftswerte anzuzeigen:
/etc/designs/mywebsite/jcr:content/contentpage/logo
In diesem Abschnitt schließen Sie die Breadcrumb-Komponente (Trail) ein, die eine der Foundation-Komponenten ist.
Navigieren Sie unter CRXDE Lite zu /apps/mywebsite/components/contentpage
, öffnen Sie die Datei center.jsp
und ersetzen Sie:
<div>trail</div>
durch:
<cq:include path="trail" resourceType="foundation/components/breadcrumb" />
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite Produkte 1 neu. Die Trail-Komponente sieht wie folgt aus:
In diesem Abschnitt wird beschrieben, wie Sie die Titelkomponente einbinden, die zu den Foundation-Komponenten gehört.
Navigieren Sie unter CRXDE Lite zu /apps/mywebsite/components/contentpage
, öffnen Sie die Datei center.jsp
und ersetzen Sie:
<div>title</div>
durch:
<cq:include path="title" resourceType="foundation/components/title" />
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Die title-Komponente sieht nun wie folgt aus:
Hinweis: Im Bearbeitungsmodus können Sie einen anderen Titel festlegen und den Typ und die Größe ändern.
Das Absatzsystem (parsys) ist ein wichtiger Teil einer Website, da es eine Liste von Absätzen verwaltet. Es ermöglicht Autorinnen und Autoren, Absatzkomponenten zur Seite hinzuzufügen, und schafft eine Struktur.
Fügen Sie die Parsys-Komponente (eine der Foundation-Komponenten) zu Ihrer Contentpage-Komponente hinzu.
Navigieren Sie unter CRXDE Lite zu /apps/mywebsite/components/contentpage
, öffnen Sie die Datei center.jsp
und suchen Sie die folgende Codezeile:
<div>parsys</div>
Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:
<cq:include path="par" resourceType="foundation/components/parsys" />
Aktualisieren Sie in Ihrem Browser die Seite „Produkte“. Sie verfügt jetzt über die Parsys-Komponente, die wie folgt aussieht:
Erstellen Sie eine Komponente, die ein Bild im Absatzsystem anzeigt. Um Zeit zu sparen, wird die Bildkomponente als Kopie der Logo-Komponente mit einigen Eigenschaftsänderungen erstellt.
Adobe Experience Manager bietet eine image-Komponente mit umfassenderen Funktionsumfang (/libs/foundation/components/image
).
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/logo
und dann auf „Kopieren“.
Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components
und klicken Sie dann auf „Einfügen“.
Klicken Sie mit der rechten Maustaste auf den Knoten Copy of logo
, klicken Sie auf „Umbenennen“, löschen Sie den vorhandenen Text und geben Sie image
ein.
Wählen Sie den Komponentenknoten image
aus und ändern Sie die folgenden Eigenschaftswerte:
jcr:title:
Meine image-Komponente.jcr:description
: Dies ist meine image-Komponente.Fügen Sie zum Knoten image
eine Eigenschaft mit den folgenden Eigenschaftswerten hinzu:
Benennen Sie den Knoten image
unter dem Knoten design_dialog
in dialog
um.
Umbenennen von logo.jsp
in image.jsp.
Öffnen Sie img.GET.java und ändern Sie das Paket in apps.mywebsite.components.image
.
In diesem Abschnitt wird beschrieben, wie Sie das Image-Skript erstellen.
Öffnen Sie /apps/mywebsite/components/image/
image.jsp
Ersetzen Sie den vorhandenen Code durch den folgenden Code und speichern Sie dann die Änderungen:
<%@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); %>
Speichern Sie die Änderungen.
Ü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 der Inhaltssuche in Ihre Bildkomponente zu ziehen.
Erstellen Sie unter CRXDE Lite unter dem Knoten /apps/mywebsite/components/image einen Knoten wie folgt:
Erstellen Sie unter dem Knoten cq:editConfig einen Knoten wie folgt:
Erstellen Sie unter dem Knoten cq:dropTargets einen Knoten wie folgt:
Legen Sie in CRXDE die Eigenschaften wie folgt fest:
Name | Typ | Wert |
---|---|---|
Akzeptieren der Bedingungen | Zeichenfolge | image/(gif |
Gruppen | Zeichenfolge | media |
propertyName | Zeichenfolge | ./imageReference |
In diesem Abschnitt fügen Sie das Symbol hinzu, das neben der Bildkomponente angezeigt werden soll, wenn es im Sidekick aufgeführt wird:
/libs/foundation/components/image/icon.png
und wählen Sie die Option Kopieren aus./apps/mywebsite/components/image
und klicken Sie dann auf Einfügen und anschließend auf Alle speichern.In diesem Abschnitt sehen Sie die Produkte und fügen Sie Ihre Bildkomponente zum Absatzsystem hinzu.
Laden Sie in Ihrem Browser die Seite Produkte neu.
Klicken Sie im Sidekick auf das Symbol Design-Modus.
Klicken Sie auf die Schaltfläche „Bearbeiten“, um das Design-Dialogfeld von „par“ zu bearbeiten.
Im Dialogfeld wird eine Liste von Zugelassene Komponenten angezeigt wird; navigieren Sie zu MyWebsite, wählen Sie die My Image Component und klicken Sie auf OK.
Kehren Sie zum Bearbeitungsmodus zurück.
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:
In diesem Abschnitt wird beschrieben, wie Sie die Toolbar-Komponente einbinden, die zu den Foundation-Komponenten gehört.
Im Bearbeitungsmodus und im Designmodus stehen Ihnen verschiedene Optionen zur Verfügung.
Navigieren Sie unter CRXDE Lite zu /apps/mywebsite/components/contentpage
, öffnen Sie die body.jsp
und suchen Sie den folgenden Code:
<div class="toolbar">toolbar</div>
Ersetzen Sie diesen Code durch den folgenden Code und speichern Sie die Änderungen:
<cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
Wählen Sie im Ordnerbaum der Seite „AEM Websites“ den Eintrag „Websites/My Website/English“ aus und klicken Sie dann auf „Neu“ > „Neue Seite“. Geben Sie die folgenden Eigenschaftswerte an und klicken Sie auf „Erstellen“:
Klicken Sie in der Liste der Seiten mit der rechten Maustaste auf die Seite „Toolbar“ und klicken Sie auf „Eigenschaften“. Wählen Sie „In Navigation ausblenden“ und klicken Sie auf „OK“.
Mit der Option „In Navigation ausblenden“ wird verhindert, dass die Seite in Navigationskomponenten erscheint, beispielsweise „topnav“ und „listchildren“.
Erstellen Sie unter „Toolbar“ die folgenden Seiten:
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Dies sieht wie folgt aus:
In diesem Abschnitt erstellen Sie die Komponente, um auf der Website nach Inhalten zu suchen. Diese Suchkomponente kann im Absatzsystem einer beliebigen Seite platziert werden (z. B. auf einer speziellen Suchergebnisseite).
Wenn Sie fertig sind, sollte Ihr Sucheingabefeld wie folgt aussehen: englisch Seite:
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.
Verwenden Sie das Dialogfeld, um die Komponente zu konfigurieren:
Geben Sie in einem ersten Bereich die folgenden Eigenschaftswerte an:
Klicken Sie auf „Weiter“ und dann erneut auf „Weiter“.
Klicken Sie im Bedienfeld „Zugelassene übergeordnete Elemente“ auf die Schaltfläche mit dem Pluszeichen und geben Sie */parsys
ein.
Klicken Sie auf „Weiter“ und dann auf „OK“.
Klicken Sie auf „Alle speichern“.
Kopieren Sie die folgenden Knoten und fügen Sie sie in den Knoten „apps/mywebsite/components/search“ ein:
/libs/foundation/components/search/dialog
`` /libs/foundation/components/search/i18n
/libs/foundation/components/search/icon.png
Klicken Sie auf „Alle speichern“.
In diesem Abschnitt wird beschrieben, wie Sie das search-Skript erstellen.
Öffnen Sie die Datei /apps/mywebsite/components/search/search.jsp
.
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" %><%
%><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}"/></code></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>
Speichern Sie die Änderungen.
Gehen Sie wie folgt vor, um ein Sucheingabefeld in den linken Bereich Ihrer Inhaltsseite einzuschließen:
Öffnen Sie in CRXDE Lite die Datei left.jsp
unter /apps/mywebsite/components/contentpage
und suchen Sie den folgenden Code (Zeile 2):
%><div class="left">
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);%><%
Suchen Sie die folgende Code-Zeile:
<div>search</div>
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>
Laden Sie in Ihrem Browser die Seite „Produkte“ neu. Die Suchkomponente sieht nun wie folgt aus:
In diesem Abschnitt fügen Sie Ihre Suchkomponente zum Absatzsystem hinzu.
Öffnen Sie in Ihrem Browser die Seite „Produkte“.
Klicken Sie im Sidekick auf das Symbol „Design-Modus“.
Klicken Sie im Block „Design von par“ (unterhalb des Titels „Search“), auf „Bearbeiten“.
Scrollen Sie im Dialogfeld nach unten zum Meine Websites Gruppe, auswählen Meine Suchkomponente und klicken Sie auf OK.
Klicken Sie im Sidekick auf das Dreieck, um zum Bearbeitungsmodus zurückzukehren.
Ziehen Sie die Suchkomponente aus dem Sidekick in den Parsys-Rahmen. Dies sieht wie folgt aus:
Navigieren Sie zur Seite „Produkte“. Suchen Sie im Eingabefeld nach Kunden bzw. Kundinnen und drücken Sie die Eingabetaste. Daraufhin werden Sie zur Suchseite geleitet. Wechseln Sie in den Vorschaumodus: Die Ausgabe weist folgendes Format auf:
In diesem Abschnitt schließen Sie die Komponente „Vererbungs-Absatzsystem“ (iparsys) ein, die eine der Foundation-Komponenten ist. Mit dieser Komponente können Sie eine Struktur von Absätzen auf einer übergeordneten Seite erstellen und die Absätze von untergeordneten Seiten übernehmen lassen.
Für diese Komponente können Sie mehrere Parameter sowohl im Bearbeitungs- als auch im Designmodus festlegen.
Navigieren Sie unter CRXDE Lite zu /apps/mywebsite/components/contentpage
, öffnen Sie die Datei right.jsp
und ersetzen Sie:
<div>iparsys</div>
durch:
<cq:include path="rightpar" resourceType="foundation/components/iparsys" />
Speichern Sie die Änderungen.
Laden Sie in Ihrem Browser die Seite Produkte neu. Die Seite sieht nun insgesamt wie folgt aus: