DokumentationAEM 6.4Användarhandbok om utveckling

Skapa en fullfjädrad webbplats (JSP) create-a-fully-featured-website-jsp

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Developer
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.
CAUTION
I den här artikeln beskrivs hur du skapar en webbplats med JSP och baserat på det klassiska användargränssnittet. Adobe rekommenderar att du utnyttjar den senaste AEM tekniken för dina webbplatser enligt den detaljerade beskrivningen i artikeln Komma igång med att utveckla AEM Sites.

Med den här självstudiekursen kan du skapa en komplett webbplats med Adobe Experience Manager (AEM). Webbplatsen kommer att vara baserad på en allmän webbplats och riktar sig främst till webbutvecklare. All utveckling sker i en författarmiljö.

I den här självstudien beskrivs hur du:

  1. Installera AEM.

  2. Öppna CRXDE Lite (utvecklingsmiljön).

  3. Ställ in projektstrukturen i CRXDE Lite.

  4. Skapa mallen, komponenten och skripten som används som bas för att skapa innehållssidor.

  5. Skapa webbplatsens rotsida och sedan innehållssidorna.

  6. Skapa följande komponenter som ska användas på sidorna:

    • Top Navigation
    • List Children
    • Logo
    • Image
    • Text-Image
    • Search

  7. Inkludera olika grundkomponenter.

När du har utfört alla steg ser sidorna ut så här:

chlimage_1-99

Ladda ned slutresultatet

Ladda ned webbplatsen-1.0.zip om du vill följa med i självstudiekursen i stället för att genomföra övningarna. Den här filen är ett AEM innehållspaket som innehåller resultatet av den här självstudiekursen. Använd Pakethanteraren för att installera paketet på författarinstansen.

NOTE
Om du installerar det här paketet skrivs alla resurser på din redigeringsinstans som du har skapat med den här självstudiekursen över.

Webbplatsinnehållspaket

Hämta fil

Installera Adobe Experience Manager installing-adobe-experience-manager

Om du vill installera en AEM för att utveckla webbplatsen följer du instruktionerna för att konfigurera en distributionsmiljö med författare och publiceringsinstanser, eller utföra en allmän installation. Den generiska installationen innefattar att hämta den AEM QuickStart JAR-filen, placera filen license.properties i samma katalog som JAR-filen och dubbelklicka på JAR-filen.

När du har installerat AEM kommer du åt utvecklingsmiljön i CRXDE Lite genom att klicka på länken CRXDE Lite på välkomstsidan:

chlimage_1-100

NOTE
URL:en för CRXDE Lite för en AEM som installeras lokalt med standardporten är http://localhost:4502/crx/de/.

Konfigurera projektstrukturen i CRXDE Lite setting-up-the-project-structure-in-crxde-lite

Använd CRXDE Lite för att skapa programstrukturen för mywebsite i databasen:

  1. Högerklicka i trädet till vänster om CRXDE Lite på /apps mapp och klicka på Create > Create Folder. I Skapa mapp dialogruta, typ mywebsite som mappnamn och klicka på OK.

  2. Högerklicka på /apps/mywebsite mapp och klicka på Create > Create Folder. I Create Folder dialogruta, typ components som mappnamn och klicka på OK.

  3. Högerklicka på /apps/mywebsite mapp och klicka på Create > Create Folder. I Create Folder dialogruta, typ templates som mappnamn och klicka på OK.

    Strukturen i trädet bör nu se ut ungefär så här:

    chlimage_1-101

  4. Klicka på Save All.

Konfigurera designen setting-up-the-design

I det här avsnittet skapar du designen för programmet med verktyget Designer. Designen innehåller CSS och bildresurser för din webbplats.

NOTE
Klicka på följande länk för att hämta mywebsite.zip. Arkivet innehåller filerna static.css och image för din design.

Exempel på static.css-fil och bilder

Hämta fil

  1. På AEM välkomstsida klickar du på Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1-102

  2. I mappträdet väljer du Designs mapp och klicka sedan på New > New Page. Typ mywebsite som titel och klicka Create.

  3. Om mywebsite-objektet inte visas i tabellen uppdaterar du trädet eller tabellen.

  4. Använda WebDAV åtkomst till URL:en på http://localhost:4502, kopiera exemplet static.css och images mappen från den nedladdade filen minwebsite.zip till /etc/designs/mywebsite mapp.

    chlimage_1-103

Skapa innehållsidesmallen, komponenten och skriptet creating-the-contentpage-template-component-and-script

I det här avsnittet skapar du följande:

  • Den innehållsidesmall som ska användas för att skapa innehållssidor på exempelwebbplatsen
  • Den innehållsideskomponent som ska användas för att återge sidor med innehåll
  • Innehållssidans skript

Skapa innehållsidesmallen creating-the-contentpage-template

Skapa en mall som du kan använda som bas för webbplatsens webbsidor.

En mall definierar standardinnehållet för en ny sida. Komplexa webbplatser kan använda flera mallar för att skapa olika typer av sidor på webbplatsen. I den här övningen är alla sidor baserade på en enkel mall.

  1. Högerklicka i mappträdet i CRXDE Lite /apps/mywebsite/templates och klicka Create > Create Template.

  2. I dialogrutan Skapa mall skriver du följande värden och klickar sedan på Next:

    • Label: innehållsida
    • Title: Min mall för webbplatsinnehållssida
    • Description: Det här är min mall för webbplatsens innehållssida
    • Resource Type: mywebsite/components/contentpage

    Använd standardvärdet för egenskapen Ranking.

    chlimage_1-104

    Resurstypen identifierar komponenten som återger sidan. I det här fallet återges alla sidor som skapats med innehållsidesmallen av mywebsite/components/contentpage -komponenten.

  3. Om du vill ange sökvägarna för sidorna som kan använda den här mallen klickar du på plusknappen och skriver /content(/.*)? i textrutan som visas. Klicka sedan på Next.

    chlimage_1-105

    Värdet för den tillåtna sökvägsegenskapen är en reguljärt uttryck. Sidor som har en sökväg som matchar uttrycket kan använda mallen. I det här fallet matchar det reguljära uttrycket sökvägen till /content och alla undersidor.

    När en författare skapar en sida nedan /content, contentpage -mallen visas i en lista med tillgängliga mallar som ska användas.

  4. Klicka Next i Allowed Parents och Allowed Children paneler och klicka OK. Klicka på CRXDE Lite Save All.

    chlimage_1-106

Skapa komponenten ContentPage creating-the-contentpage-component

Skapa komponent som definierar innehållet och återger sidorna som använder innehållsidesmallen. Platsen för komponenten måste motsvara värdet för egenskapen Resurstyp i innehållsidesmallen.

  1. Högerklicka i CRXDE Lite /apps/mywebsite/components och klicka Create > Component.

  2. I Create Component skriver du följande egenskapsvärden:

    • Label: innehållsida
    • Title: Min webbsidkomponent
    • Description: Det här är min innehållskomponent för webbplats

    chlimage_1-107

    Platsen för den nya komponenten är /apps/mywebsite/components/contentpage. Den här sökvägen motsvarar innehållsmallens resurstyp (minus den ursprungliga /apps/ del av banan).

    Denna korrespondens kopplar mallen till komponenten och är avgörande för att webbplatsen ska fungera korrekt.

  3. Klicka Next tills Allowed Children panelen i dialogrutan visas och klicka sedan på OK. Klicka på CRXDE Lite Save All.

    Strukturen ser nu ut så här:

    chlimage_1-108

Utveckla skript för komponenten ContentPage developing-the-contentpage-component-script

Lägg till kod i skriptet contentpage.jsp för att definiera sidinnehållet.

  1. Öppna filen i CRXDE Lite contentpage.jsp in /apps/mywebsite/components/contentpage. Filen innehåller följande kod som standard:

    code language-java 
    <%--

  My Website Content Page Component component.

  This is My Website Content Page Component.

--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    /* TODO add you code here */
%>

  2. Kopiera följande kod och klistra in den i contentpage.jsp efter standardkoden:

    code language-java 
    <%@ 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. Klicka Save All för att spara ändringarna.

Skapa webbsidor och innehållssidor creating-your-website-page-and-content-pages

I det här avsnittet skapar du följande sidor som alla använder innehållsidesmallen: Min webbplats, engelska, produkter, tjänster och kunder.

  1. På AEM välkomstsida (http://localhost:4502/libs/cq/core/content/welcome.html) klickar du på Webbplatser.

    chlimage_1-109

  2. I mappträdet väljer du Websites mapp och klicka sedan på New > New Page.

  3. I Create Page anger du följande:

    • Title: My Website
    • Name: mywebsite
    • Välj My Website Content Page Template

    chlimage_1-110

  4. Klicka på Create. I mappträdet väljer du /Websites/My Website sida och klicka New > New Page.

  5. I Create Page anger du följande egenskapsvärden och klickar sedan på Skapa:

    • Title: Engelska
    • Name: en
    • Välj My Website Content Page Template

  6. I mappträdet väljer du /Websites/My Website/English sida och klicka New > New Page.

  7. I Create Page anger du följande egenskapsvärden och klickar sedan på Create:

    • Title: Produkter
    • Välj My Website Content Page Template

  8. I mappträdet väljer du /Websites/My Website/English sida och klicka New > New Page.

  9. I Create Page anger du följande egenskapsvärden och klickar sedan på Create:

    • Titel: Tjänster
    • Välj My Website Content Page Template

  10. I mappträdet väljer du /Websites/My Website/English sida och klicka New > New Page.

  11. I Create Page anger du följande egenskapsvärden och klickar sedan på Create:

    • Titel: Kunder
    • Välj My Website Content Page Template

    Din struktur ser ut så här:

    chlimage_1-111

  12. Om du vill länka dina sidor till min webbplatsdesign väljer du i CRXDE Lite /content/mywebsite/en/jcr:content nod. På Properties skriver du följande värden för en ny egenskap och klickar sedan på Lägg till:

    • Name: cq:designPath
    • Type: Sträng
    • Value: /etc/designs/mywebsite

    chlimage_1-112

  13. Öppna på en ny webbläsarflik eller i ett nytt fönster http://localhost:4502/content/mywebsite/en/products.html för att se sidan Produkter:

    chlimage_1-113

Förbättra innehållssidans skript enhancing-the-contentpage-script

I det här avsnittet beskrivs hur du förbättrar innehållsidesskriptet med AEM Foundation-komponentskript och genom att skriva egna skript.

The Products ser sidan ut så här:

chlimage_1-4

Använda skript för startsidan using-the-foundation-page-scripts

I den här övningen konfigurerar du sidinnehållskomponenten så att dess överordnade typ är AEM sidkomponent. Eftersom komponenter ärver funktionerna i sin supertyp ärver sidinnehållet skripten och egenskaperna för sidkomponenten.

I en komponent-JSP-kod kan du till exempel referera till de skript som supertypskomponenten tillhandahåller som om de är inkluderade i komponenten.

  1. I CRXDE Lite lägger du till en egenskap i /apps/mywebsite/components/contentpage nod.

    1. Välj /apps/mywebsite/components/contentpage nod.

    2. Ange följande egenskapsvärden längst ned på fliken Egenskaper och klicka sedan på Lägg till:

      • Name: sling:resourceSuperType
      • Type: Sträng
      • Value: grund/komponenter/sida

    3. Klicka på Save All.

  2. Öppna contentpage.jsp fil under /apps/mywebsite/components/contentpage och ersätt den befintliga koden med följande kod:

    code language-xml 
    <%@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>

  3. Spara ändringarna.

  4. Läs in Products sida. Den ser ut så här:

    chlimage_1-5

    Öppna sidans källa för att se de javascript- och HTML-element som skripten head.jsp och body.jsp genererade. Följande skriptutdrag öppnar Sidekick när du öppnar sidan:

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

Använda egna skript using-your-own-scripts

I det här avsnittet skapar du flera skript som varje skript skapar en del av sidans brödtext. Sedan skapar du filen body.jsp i pagcontent-komponenten för att åsidosätta body.jsp i AEM Page-komponenten. I filen body.jsp tar du med skript som genererar olika delar av sidans brödtext.

Tips: När en komponent innehåller en fil som har samma namn och relativa plats som en fil i komponentens supertyp, anropas den överläggning.

  1. Skapa filen i CRXDE Lite left.jsp under /apps/mywebsite/components/contentpage:

    1. Högerklicka på noden /apps/mywebsite/components/contentpageväljer Create sedan Create File.
    2. I fönstret skriver du left.jsp som ​ Name och klicka OK.

  2. Redigera filen left.jsp för att ta bort befintligt innehåll och ersätta med följande kod:

    code language-java 
    <%@include file="/libs/foundation/global.jsp"%><%
%><div class="left">
<div>logo</div>
<div>newslist</div>
<div>search</div>
</div>

  3. Spara ändringarna.

  4. Skapa filen i CRXDE Lite center.jsp under /apps/mywebsite/components/contentpage:

    1. Högerklicka på noden /apps/mywebsite/components/contentpage, markera Create sedan Create File.
    2. I dialogrutan skriver du center.jsp as Name och klicka OK.

  5. Redigera filen center.jsp om du vill ta bort det befintliga innehållet och ersätta det med följande kod:

    code language-java 
    <%@include file="/libs/foundation/global.jsp"%><%
%><div class="center">
<div>trail</div>
<div>title</div>
<div>parsys</div>
</div>

  6. Spara ändringarna.

  7. Skapa filen i CRXDE Lite right.jsp under /apps/mywebsite/components/contentpage:

    1. Högerklicka på noden /apps/mywebsite/components/contentpage, markera Create sedan Create File.
    2. Skriv i dialogrutan right.jsp as Name och klicka OK.

  8. Redigera filen right.jsp för att ta bort befintligt innehåll och ersätta med följande kod:

    code language-java 
    <%@include file="/libs/foundation/global.jsp"%><%
%><div class="right">
<div>iparsys</div>
</div>

  9. Spara ändringarna.

  10. Skapa filen i CRXDE Lite body.jsp under /apps/mywebsite/components/contentpage:

  11. Redigera filen body.jsp för att ta bort befintligt innehåll och ersätta med följande kod:

    code language-java 
    <%@include file="/libs/foundation/global.jsp"%><%
%><body>
<div id="CQ">
<div class="topnav">topnav</div>
<div class="content">
<cq:include script="left.jsp" />
<cq:include script="center.jsp" />
<cq:include script="right.jsp" />
</div>
<div class="footer">
<div class="toolbar">toolbar</div>
</div>
</div>
</body>

  12. Spara ändringarna.

  13. Läs in Products sida. Den ser ut så här:

    chlimage_1-6

Skapa den övre navigeringskomponenten creating-the-top-navigation-component

I det här avsnittet skapar du en komponent som visar länkar till alla sidor på den översta nivån på webbplatsen för att underlätta navigeringen. Det här komponentinnehållet visas överst på alla sidor som skapas med innehållsidesmallen.

I den första versionen av den översta navigeringskomponenten (överst) är navigeringsobjekten endast textlänkar. I den andra versionen implementerar du topnav med bildnavigeringslänkar.

Den övre navigeringen ser ut så här:

chlimage_1-114

Skapa den övre navigeringskomponenten creating-the-top-navigation-component-1

  1. Högerklicka i CRXDE Lite /apps/mywebsite/components, markera Create sedan Create Component.

  2. I Create Component anger du följande:

    • Label: topnav
    • Title: My Top Navigation Component
    • Description: This is My Top Navigation Component

  3. Klicka Next tills du kommer till det sista fönstret där du klickar OK. Spara ändringarna.

Lägg till återgivningsskriptet längst upp för att generera textlänkar till underordnade sidor:

  1. Öppna filen i CRXDE Lite topnav.jsp under /apps/mywebsite/components/topnav.

  2. Ersätt koden som finns där genom att kopiera och klistra in följande kod:

    code language-xml 
    <%@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><%
        }
    }
%>

Inkludera översta navigering i innehållsideskomponenten including-top-navigation-in-the-contentpage-component

Så här inkluderar du topnav i innehållsideskomponenten:

  1. Öppna CRXDE Lite i body.jsp under /apps/mywebsite/components/contentpageoch ersätt:

    code language-xml 
    <div class="topnav">topnav</div>

    med:

    code language-xml 
    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />

  2. Spara ändringarna.

  3. Läs in Products Sida. Den översta navigeringen ser ut så här:

    chlimage_1-115

Förbättra sidor med undertexter enhancing-pages-with-subtitles

The Page -komponenten definierar egenskaper som gör att du kan ange underrubriker för sidor. Lägg till undertexter med information om sidinnehållet.

  1. Öppna Products sida.

  2. På Sidekick Page flik, klicka Page Properties.

  3. På Basic flik i dialogrutan, expandera More Titles and Description och Subtitle egenskap, typ what we do. Klicka på OK.

  4. Upprepa föregående steg för att lägga till underrubriken om våra tjänster till Services sida.

  5. Upprepa föregående steg för att lägga till underrubriken det förtroende vi får till Customers sida.

    Tips: I CRXDE Lite väljer du noden /content/mywebsite/en/products/jcr:content för att se att undertextegenskapen har lagts till.

Förbättra återgivningsskriptet för den övre komponenten så att bildlänkar används i stället för hypertext för navigeringskontrollerna. Bilden innehåller länkmålets titel och underrubrik.

Denna övning visar Behandling av säljförfrågningar. Skriptet topnav.jsp ändras för att anropa ett skript som dynamiskt genererar bilder som ska användas för sidnavigeringslänkarna. I den här övningen tolkar Sling URL:en för bildkällfiler för att avgöra vilket skript som ska användas för att återge bilderna.

Till exempel kan bildlänken till sidan Produkter vara http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling tolkar denna URL för att fastställa resurstypen och skriptet som ska användas för att återge resursen:

  1. Sling avgör sökvägen till resursen som ska /content/mwebysite/en/products.png.

  2. Sling matchar den här sökvägen med /content/mywebsite/en/products nod.

  3. Sling avgör sling:resourceType för den här noden som ska mywebsite/components/contentpage.

  4. Sling hittar det skript i den här komponenten som bäst matchar URL-väljaren ( navimage) och filnamnstillägg ( png).

I den här övningen matchar Sling dessa URL:er med det /apps/mywebsite/components/contentpage/navimage.png.java-skript som du skapar.

  1. Öppna CRXDE Lite i topnav.jsp under /apps/mywebsite/components/topnav.Leta reda på innehållet i ankarelementet (rad 14):

    code language-xml 
    <%=child.getTitle() %>

  2. Ersätt ankarinnehållet med följande kod:

    code language-xml 
    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">

  3. Spara ändringarna.

  4. Högerklicka på /apps/mywebsite/components/contentpage nod och klicka Create > Create File.

  5. I Create File fönster, som Name, typ navimage.png.java.

    Filnamnstillägget .java anger för Sling att stödet för Apache Sling Scripting Java ska användas för att kompilera skriptet och skapa en serverlet.

  6. Kopiera följande kod till navimage.png.java.Koden utökar klassen AbstractImageServlet:

    • AbstraktImageServlet skapar ett ImageContext-objekt som lagrar den aktuella resursens egenskaper.
    • Resursens överordnade sida extraheras från ImageContext-objektet. Därefter hämtas sidans titel och underrubrik.
    • ImageHelper används för att generera bilden från filen navimage_bg.jpg för webbplatsdesignen, sidrubriken och sidans underrubrik.
    code language-java 
    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. Spara ändringarna.

  8. Läs in Products sida. Den övre navigeringen visas nu på följande sätt:

    screen_shot_2012-03-07at10047pm

Skapa komponenten List Children creating-the-list-children-component

Skapa komponenten listchild som genererar en lista med sidlänkar som innehåller sidans titel, beskrivning och datum (till exempel produktsidor). Länkarna är avsedda för den aktuella sidans underordnade sidor, eller för en rotsida som anges i komponentdialogrutan.

chlimage_1-116

Skapa produktsidor creating-product-pages

Skapa två sidor under Products sida. För varje sida, som beskriver två specifika produkter, anger du en titel, en beskrivning och ett datum.

  1. I mappträdet i Websites väljer du Websites/My Website/English/Products objekt och klicka på New > New Page.

  2. Ange följande egenskapsvärden i dialogrutan och klicka sedan på Create:

    • Title: Produkt 1.
    • Name: product1.
    • Välj My Website Content Page Template

  3. Skapa en till sida under Produkter med följande egenskapsvärden:

    • Title: Produkt 2
    • Name: product2
    • Välj My Website Content Page Template

  4. I CRXDE Lite anger du en beskrivning och ett datum för sidan Product 1:

    1. Välj /content/mywebsite/en/products/product1/jcr:content nod.

    2. I Properties anger du följande värden:

      • Name: jcr:description
      • Type: String
      • Value: This is a description of the Product 1!.

    3. Klicka på Add.

    4. I Properties skapar du en annan egenskap med följande värden:

      • Name: datum
      • Type: Sträng
      • Value: 02/14/2008
      • Klicka på Add.

    5. Klicka på Save All.

  5. I CRXDE Lite anger du en beskrivning och ett datum för sidan Product 2:

    1. Välj /content/mywebsite/en/products/product2/jcr:content nod.

    2. I Properties anger du följande värden:

      • Name: jcr:description
      • Type: Sträng
      • Value: Detta är en beskrivning av produkt 2!.

    3. Klicka på Add.

    4. Ersätt de tidigare värdena i samma textrutor med följande värden:

      • Name: datum
      • Type: Sträng
      • Value: 05/11/2012
      • Klicka på Add.

    5. Klicka på Save All.

Skapa komponenten List Children creating-the-list-children-component-1

Så här skapar du komponenten listchildren:

  1. Högerklicka i CRXDE Lite /apps/mywebsite/components, markera Create sedan Create Component.

  2. Ange följande egenskapsvärden i dialogrutan och klicka sedan på Next:

    • Label: listchildren.
    • Title: Min ListChildren-komponent.
    • Description: Det här är min ListChildren-komponent.

  3. Fortsätt klicka Next tills Allowed Children visas och klickar sedan på OK.

Skapa skriptet List Children creating-the-list-children-script

Utveckla skriptet för komponenten listchildren.

  1. Öppna filen i CRXDE Lite listchildren.jsp under /apps/mywebsite/components/listchildren.

  2. Ersätt standardkoden med följande kod:

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

  3. Spara ändringarna.

Skapa dialogrutan Lista underordnade creating-the-list-children-dialog

Skapa den dialogruta som används för att konfigurera komponentegenskaperna listchildren.

  1. Skapa dialognoden under komponenten listchildren:

    1. I CRXDE Lite högerklickar du på /apps/mywebsite/components/listchildrennod och klicka Create > Create Dialog.

    2. Ange följande egenskapsvärden i dialogrutan och klicka på OK

      • Label: dialog
      • Title: Edit Component och klicka OK.

    screen_shot_2012-03-07at45818pm

    Med följande egenskaper:

    screen_shot_2012-03-07at50415pm

  2. Välj /apps/mywebsite/components/listchildren/dialog/items/items/tab1 nod.

  3. I Properties ändrar du värdet på title egenskap till List Children

    chlimage_1-117

  4. Välj tab1 nod och klicka Create > Create Node, ange följande egenskapsvärden och klicka på OK:

    • Name: objekt
    • Type: cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. Skapa en nod under noden items med följande egenskapsvärden:

    • Name: listroot
    • Type: cq:Widget

    screen_shot_2012-03-07at51031pm

  6. Lägg till egenskaper för listrotnoden för att konfigurera den som ett textfält. Varje rad i följande tabell representerar en egenskap. När du är klar klickar du på Save All.

    table 0-row-3 1-row-3 2-row-3 3-row-3
    Namn Typ Värde
    fieldLabel Sträng Sökväg till listroten
    name Sträng ./listroot
    xtype Sträng textfält

    screen_shot_2012-03-07at51433pm

Ta med listunderordnade i komponenten ContentPage including-list-children-in-the-contentpage-component

Så här tar du med komponenten listchild i innehållsideskomponenten:

  1. Öppna filen i CRXDE Lite left.jsp under /apps/mywebsite/components/contentpage och hitta följande kod (rad 4):

    code language-xml 
    <div>newslist</div>

  2. Ersätt koden med följande kod:

    code language-xml 
    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />

  3. Spara ändringarna.

Visa listans underordnade på en sida viewing-list-children-in-a-page

Om du vill se den här komponentens fullständiga funktion kan du visa sidan Produkter:

  • när den överordnade sidan ("Sökväg till listrot") inte har definierats.
  • när den överordnade sidan ("Sökväg till listrot") har definierats.

  1. Läs in Products sida. Komponenten listchildren visas så här:

    chlimage_1-118

  2. chlimage_1-119

  3. Som sökväg till listroten anger du: /content/mywebsite/en. Klicka på OK. Komponenten listchildren på sidan ser nu ut så här:

    chlimage_1-120

Skapa logokomponenten creating-the-logo-component

Skapa en komponent som visar företagets logotyp och tillhandahåller en länk till webbplatsens hemsida. Komponenten innehåller en dialogruta för designläge så att egenskapsvärden lagras i webbplatsdesignen (https://experienceleague.adobe.com/etc/designs/mywebsite?lang=sv):

  • Egenskapsvärdena gäller för alla instanser av komponenten som läggs till på sidor som använder designen.
  • Egenskaperna kan konfigureras med valfri instans av komponenten som finns på en sida som använder designen.

Dialogrutan för designläge innehåller egenskaper för att ange bilden och länksökvägen. Logotypkomponenten placeras på den övre vänstra sidan på alla sidor på webbplatsen.

Den kommer att se ut så här:

chlimage_1-121

NOTE
Adobe Experience Manager har en komplett logotypkomponent ( /libs/foundation/components/logo).

Skapa logokomponentnoden creating-the-logo-component-node

Så här skapar du logotypkomponenten:

  1. I CRXDE Lite högerklickar du på /apps/mywebsite/components och väljer Create sedan Create Component.

  2. I dialogrutan Skapa komponent anger du följande egenskapsvärden och klickar sedan på Nästa:

    • Label: logo.
    • Title: My Logo Component.
    • Description: This is My Logo Component.

  3. Klicka på Nästa tills du kommer till den sista panelen i dialogrutan och klicka sedan på OK.

Skapa logotypskript creating-the-logo-script

I det här avsnittet beskrivs hur du skapar skriptet för att visa logotypbilden med en länk till hemsidan.

  1. Öppna filen i CRXDE Lite logo.jsp under /apps/mywebsite/components/logo.

  2. Följande kod skapar länken till webbplatsens hemsida och lägger till en referens till logotypbilden. Kopiera koden till logo.jsp:

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

  3. Spara ändringarna.

Skapa dialogrutan Logotypdesign creating-the-logo-design-dialog

Skapa en dialogruta där du kan konfigurera logotypkomponenten i designläge. Dialogrutans noder i designläge måste namnges design_dialog.

  1. Skapa dialognoden under logokomponenten:

    1. Högerklicka på /apps/mywebsite/components/logo nod och klicka Create > Create Dialog.

    2. Ange följande egenskapsvärden och klicka sedan på OK:

      • Label design_dialog
      • Title Logo (Design)

  2. Högerklicka på noden tab1 i grenen design_dialog och klicka på Ta bort. Klicka på Save All.

  3. Under design_dialog/items/itemsnod, skapa en ny nod med namnet img av typen cq:Widget. Lägg till följande egenskaper och klicka sedan på Save All:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3
    Namn Typ Värde
    fileNameParameter Sträng ./imageName
    fileReferenceParameter Sträng ./imageReference
    name Sträng ./bild
    title Sträng Bild
    xtype Sträng html5smartimage

    chlimage_1-122

Skapa logotypåtergivningsskript creating-the-logo-render-script

Skapa skriptet som hämtar logotypbilden och skriver det på sidan.

  1. Högerklicka på logotypkomponentnoden och klicka på Create > Create File för att skapa skriptfilen img.GET.java.
  2. Öppna filen, kopiera följande kod till filen och klicka sedan på 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();
    }
}

Lägga till Logo-komponenten i ContentPage-komponenten adding-the-logo-component-to-the-contentpage-component

  1. Öppna CRXDE Lite i left.jsp under /apps/mywebsite/components/contentpage file och hitta följande kodrad:

    code language-xml 
    <div>logo</div>

  2. Ersätt koden med följande kodrad:

    code language-xml 
    <cq:include path="logo" resourceType="mywebsite/components/logo" />

  3. Spara ändringarna.

  4. Läs in Products sida. Logotypen ser ut så här, men för närvarande visas bara den underliggande länken:

    chlimage_1-123

Ställa in logotypbilden på en sida setting-the-logo-image-in-a-page

I det här avsnittet beskrivs hur du anger en bild som logotyp i dialogrutan för designläge.

  1. Med Products sidan öppnas i webbläsaren, klicka på Design längst ned på Sidekick för att komma in Design läge.

  2. Klicka på Edit om du vill använda dialogrutan för att redigera inställningarna för logotypkomponenten.

  3. Klicka på panelen i dialogrutan Image bläddra efter logo.png bilden som du extraherade från mywebsite.zip och klicka på OK.

    chlimage_1-124

  4. Klicka på triangeln i namnlisten Sidekick för att gå tillbaka till Edit läge.

    chlimage_1-7

  5. Gå till följande nod i CRXDE Lite för att se de lagrade egenskapsvärdena:

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

Inkludera komponenten Breadcrumb including-the-breadcrumb-component

I det här avsnittet inkluderar du komponenten breadcrumb (trail), som är en av grundkomponenterna.

  1. I CRXDE Lite går du till /apps/mywebsite/components/contentpageöppnar du filen center.jsp och ersätt:

    code language-java 
    <div>trail</div>

    med:

    code language-xml 
    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />

  2. Spara ändringarna.

  3. Läs in Products 1 sida. Spåra komponenten ser ut så här:

    chlimage_1-125

Inkludera titelkomponenten including-the-title-component

I det här avsnittet inkluderar du titelkomponenten, som är en av grundkomponenterna.

  1. I CRXDE Lite går du till /apps/mywebsite/components/contentpageöppnar du filen center.jsp och ersätt:

    code language-xml 
    <div>title</div>

    med:

    code language-xml 
    <cq:include path="title" resourceType="foundation/components/title" />

  2. Spara ändringarna.

  3. Läs in Products sida. Titelkomponenten ser ut så här:

    chlimage_1-126

NOTE
Du kan ange en annan rubrik och typ/storlek i Edit läge.

Inkludera styckesystemkomponenten including-the-paragraph-system-component

Styckesystemet (parsys) är en viktig del av en webbplats när det hanterar en lista med stycken. Det gör att författare kan lägga till styckekomponenter på sidan och ge struktur.

Lägg till den överordnade komponenten (en av grundkomponenterna) i innehållsideskomponenten.

  1. I CRXDE Lite går du till /apps/mywebsite/components/contentpageöppnar du filen center.jsp och hitta följande kodrad:

    code language-xml 
    <div>parsys</div>

  2. Ersätt kodraden med följande kod och spara sedan ändringarna:

    code language-xml 
    <cq:include path="par" resourceType="foundation/components/parsys" />

  3. Uppdatera Products sida. Den har nu komponenten parsys, som ser ut så här:

    chlimage_1-127

Skapa bildkomponenten creating-the-image-component

Skapa en komponent som visar en bild i styckesystemet. För att spara tid skapas bildkomponenten som en kopia av logotypkomponenten med vissa egenskapsändringar.

NOTE
Adobe Experience Manager har en mer komplett bildkomponent ( /libs/foundation/components/image).

Skapa bildkomponenten creating-the-image-component-1

  1. Högerklicka på /apps/mywebsite/components/logo nod och klicka Copy.

  2. Högerklicka på /apps/mywebsite/components nod och klicka Paste.

  3. Högerklicka på Copy of logo nod, klicka Rename, tar bort befintlig text och skriver image.

  4. Välj image och ändra följande egenskapsvärden:

    • jcr:title: Min bildkomponent.
    • jcr:description: Det här är min bildkomponent.

  5. Lägg till en egenskap i image nod med följande egenskapsvärden:

    • Name: componentGroup
    • Type: Sträng
    • Value: MinWebbplats

  6. Under image nod, ändra namn på design_dialog nod till dialog.

  7. Byt namn logo.jsp till image.jsp.

  8. Öppna img.GET.java och ändra paketet till apps.mywebsite.components.image.

chlimage_1-128

Skapa bildskriptet creating-the-image-script

I det här avsnittet beskrivs hur du skapar bildskriptet.

  1. Öppna /apps/mywebsite/components/image/ image.jsp

  2. Ersätt den befintliga koden med följande kod och spara sedan ändringarna:

    code language-xml 
    <%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="com.day.cq.commons.Doctype,
                    com.day.cq.wcm.foundation.Image,
                    com.day.cq.wcm.api.components.DropTarget,
                    com.day.cq.wcm.api.components.EditConfig,
                    com.day.cq.wcm.commons.WCMUtils" %><%
 /* global.jsp provides access to the current resource through the resource object */
        Image img = new Image(resource);
        img.setItemName(Image.NN_FILE, "image");
        img.setItemName(Image.PN_REFERENCE, "imageReference");
        img.setSelector("img");
        img.setDoctype(Doctype.fromRequest(request));
        img.setAlt("Home");
        img.draw(out); %>

  3. Spara ändringarna.

Skapa Image cq:editConfig-noden creating-the-image-cq-editconfig-node

The cq:editConfig Med nodtypen kan du konfigurera vissa beteenden för komponenter när du redigerar deras egenskaper.

I det här avsnittet använder du en cq:editConfig-nod för att dra resurser från Content Finder till bildkomponenten.

  1. I CRXDE Lite, under noden /apps/mywebsite/components/image, skapar du en ny nod enligt följande:

    • Name: cq:editConfig.
    • Type: cq:EditConfig.

  2. Skapa en ny nod under noden cq:editConfig enligt följande:

    • Name: cq:dropTargets.
    • Type: cq:DropTargetConfig.

  3. Skapa en ny nod under noden cq:dropTargets enligt följande:

    • Name: bild.
    • Type: nt:ostrukturerad.

  4. I CRXDE anger du egenskaperna enligt följande:

Namn
Typ
Värde
acceptera
Sträng
image/(gif
grupper
Sträng
media
propertyName
Sträng
./imageReference

chlimage_1-129

Lägga till ikonen adding-the-icon

I det här avsnittet lägger du till ikonen som ska visas bredvid bildkomponenten när den visas i Spark:

  1. Högerklicka på filen i CRXDE Lite /libs/foundation/components/image/icon.png och markera Copy.
  2. Högerklicka på noden /apps/mywebsite/components/image och klicka Paste och sedan klicka Save All.

Använda bildkomponenten using-the-image-component

I det här avsnittet visas Products och lägg till bildkomponenten i styckesystemet.

  1. Läs in Products sida.

  2. Klicka på Design mode ikon.

  3. Klicka på Edit om du vill redigera designdialogrutan för par.

  4. I dialogrutan visas en lista med Allowed Components visas, navigera till MyWebsite väljer du My Image Component och klicka OK.

  5. Återgå till Edit mode.

  6. Dubbelklicka på den parsys-bildrutan (på Drag components or assets here). The Insert New Component och Sidekick väljarna ser ut så här:

    chlimage_1-8

Inkludera verktygsfältskomponenten including-the-toolbar-component

I det här avsnittet inkluderar du verktygsfältskomponenten, som är en av grundkomponenterna.

Det finns flera alternativ, både i redigeringsläge och designläge.

  1. I CRXDE Lite går du till /apps/mywebsite/components/contentpageöppnar du body.jsp och leta reda på följande kod:

    code language-java 
    <div class="toolbar">toolbar</div>

  2. Ersätt koden med följande kod och spara sedan ändringarna.

    code language-java 
    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>

  3. I mappträdet på sidan AEM webbplatser väljer du Websites/My Website/Englishoch sedan klicka New > New Page. Ange följande egenskapsvärden och klicka på Skapa:

    • Title: Verktygsfält
    • Välj My Website Content Page Template

  4. Högerklicka på Toolbar sida och klicka Properties. Markera Hide In Navigation och klicka på OK.

    The Hide in Navigation förhindrar att sidan visas i navigeringskomponenter som topnav och listchild.

  5. Under Toolbar, skapa följande sidor:

    • Kontakter
    • Feedback
    • Inloggning
    • Sökning

  6. Läs in Products sida. Den ser ut så här:

    chlimage_1-130

Skapa sökkomponenten creating-the-search-component

I det här avsnittet skapar du komponenten som du vill söka efter innehåll på webbplatsen. Den här sökkomponenten kan placeras i styckesystemet på vilken sida som helst (till exempel på en specialiserad sökresultatsida).

Din sökruta ser ut så här på English sida:

chlimage_1-131

Skapa sökkomponenten creating-the-search-component-1

  1. Högerklicka i CRXDE Lite /apps/mywebsite/components, markera Create sedan Create Component.

  2. Använd dialogrutan för att konfigurera komponenten:

    1. Ange följande egenskapsvärden på den första panelen:

      • Label: sök
      • Title: Min sökkomponent
      • Description: Det här är min sökkomponent
      • Group: MinWebbplats

    2. Klicka Next och sedan klicka Next igen.

    3. På Allowed Parents klickar du på + knapp och typ */parsys.

    4. Klicka Next och sedan klicka OK.

  3. Klicka på Save All.

  4. Kopiera följande noder och klistra in dem i apps/mywebsite/components/search nod:

    • /libs/foundation/components/search/dialog
    • `` /libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png

  5. Klicka på Save All.

Skapa sökskriptet creating-the-search-script

I det här avsnittet beskrivs hur du skapar sökskriptet:

  1. Öppna /apps/mywebsite/components/search/search.jsp -fil.

  2. Kopiera följande kod till search.jsp:

    code language-java 
    <%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
<%@include file="/libs/foundation/global.jsp" %><%
%><cq:setContentBundle/><%
    Search search = new Search(slingRequest);

    String searchIn = (String) properties.get("searchIn");
    String requestSearchPath = request.getParameter("path");
    if (searchIn != null) {
        /* only allow the "path" request parameter to be used if it
         is within the searchIn path configured */
        if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
            search.setSearchIn(requestSearchPath);
        } else {
            search.setSearchIn(searchIn);
        }
    } else if (requestSearchPath != null) {
        search.setSearchIn(requestSearchPath);
    }

    pageContext.setAttribute("search", search);
    TagManager tm = resourceResolver.adaptTo(TagManager.class);
%><c:set var="trends" value="${search.trends}"/><%
%><center>
  <form action="${currentPage.path}.html">
    <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
    <input value="<fmt:message key="searchButtonText"/>" type="submit" />
  </form>
</center>
<br/>
<c:set var="result" value="${search.result}"/>
<c:choose>
  <c:when test="${empty result && empty search.query}">
  </c:when>
  <c:when test="${empty result.hits}">
    <c:if test="${result.spellcheck != null}">
      <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
    </c:if>
    <fmt:message key="noResultsText">
      <fmt:param value="${fn:escapeXml(search.query)}"/>
    </fmt:message>
  </c:when>
  <c:otherwise>
    <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
   <br/>

  <div class="searchresults">
    <div class="results">
      <c:forEach var="hit" items="${result.hits}" varStatus="status">
        <div class="hit">
        <a href="${hit.URL}">${hit.title}</a>
        <div class="excerpt">${hit.excerpt}</div>
       <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
        </div></div>
      </c:forEach>
    </div>
      <br/>

     <div class="searchRight">
          <c:if test="${fn:length(trends.queries) > 0}">
              <p><fmt:message key="searchTrendsText"/></p>
              <div class="searchTrends">
                  <c:forEach var="query" items="${trends.queries}">
                      <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></span></a>
                  </c:forEach>
              </div>
          </c:if>
          <c:if test="${result.facets.languages.containsHit}">
              <p>Languages</p>
              <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                  <c:choose>
                      <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.tags.containsHit}">
              <p>Tags</p>
              <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                  <c:if test="${tag != null}">
                      <c:set var="label" value="${tag.title}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:if>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.mimeTypes.containsHit}">
              <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
              <p>File types</p>
              <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value="${fileTypes[bucket.value]}"/>
                  <c:choose>
                      <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.lastModified.containsHit}">
              <p>Last Modified</p>
              <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                  <c:choose>
                      <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>

      <c:if test="${fn:length(search.relatedQueries) > 0}">

       <br/><br/><div class="related">
        <fmt:message key="relatedSearchesText"/>
        <c:forEach var="rq" items="${search.relatedQueries}">
            <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
        </c:forEach></div>
      </c:if>
      </div>

      <c:if test="${fn:length(result.resultPages) > 1}">
        <div class="pagination">
            <fmt:message key="resultPagesText"/>
        <c:if test="${result.previousPage != null}">
          <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
        </c:if>
        <c:forEach var="page" items="${result.resultPages}">
          <c:choose>
            <c:when test="${page.currentPage}">${page.index + 1}</c:when>
            <c:otherwise>
              <a href="${page.URL}">${page.index + 1}</a>
            </c:otherwise>
          </c:choose>
        </c:forEach>
        <c:if test="${result.nextPage != null}">
          <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
        </c:if>
        </div>
      </c:if>
      </div>

  </c:otherwise>
</c:choose>

  3. Spara ändringarna.

Inkludera en sökruta i innehållsideskomponenten including-a-search-box-in-the-contentpage-component

Om du vill ta med en sökruta i det vänstra avsnittet av innehållssidan gör du så här:

  1. Öppna filen i CRXDE Lite left.jsp under /apps/mywebsite/components/contentpage och hitta följande kod (rad 2):

    code language-xml 
    %><div class="left">

  2. Infoga följande kod före den raden:

    code language-java 
    %><%@ page import="com.day.text.Text"%><%
%><% String docroot = currentDesign.getPath();
String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%

  3. Leta reda på följande kodrad:

    code language-xml 
    <div>search</div>

  4. Ersätt koden med följande kod och spara sedan ändringarna.

    code language-java 
    <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. Läs in Products sida. Sökkomponenten ser ut så här:

    chlimage_1-132

Inkludera sökkomponenten på söksidan including-the-search-component-in-the-search-page

I det här avsnittet lägger du till sökkomponenten i styckesystemet.

  1. Öppna Sök sida.

  2. Klicka på Design lägesikon.

  3. Klicka på knappen Design av paragraf (under rubriken Sök) Edit.

  4. Bläddra nedåt till dialogrutan My Websites grupp, markera My Search Component och klicka OK.

  5. On Sidekick, click the triangle to return to Edit läge.

  6. Dra My Search från Sidekick in i den parsys-bildrutan. Den ser ut så här:

    chlimage_1-133

  7. Navigera till Products sida. Sök efter kunder i inmatningsrutan och tryck Enter. Du omdirigeras till Search sida. Växla till Preview läge: Utdata har ett liknande format som följande:

    chlimage_1-134

Inkludera Iparsys-komponenten including-the-iparsys-component

I det här avsnittet inkluderar du komponenten Inheritance Paragraph System (iparsys), som är en av grundkomponenterna. Med den här komponenten kan du skapa en styckestruktur på en överordnad sida och låta underordnade sidor ärva styckena.

För den här komponenten kan du ange flera parametrar i både redigeringsläge och designläge.

  1. I CRXDE Lite går du till /apps/mywebsite/components/contentpageöppnar du filen right.jsp och ersätt:

    code language-java 
    <div>iparsys</div>

    med:

    code language-java 
    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />

  2. Spara ändringarna.

  3. Läs in Products sida. Hela sidan ser ut så här:

    chlimage_1-9

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e