Creeer een volledig-gekenmerkte Website (JSP)

LET OP

In dit artikel wordt beschreven hoe u een website maakt met JSP en op basis van de klassieke gebruikersinterface. Adobe raadt u aan de nieuwste AEM technologieën voor uw websites te gebruiken, zoals gedetailleerd wordt beschreven in het artikel Getting Started Developing AEM Sites.

Met deze zelfstudie kunt u een volledig uitgeruste website maken met Adobe Experience Manager (AEM). De website is gebaseerd op een algemene website en is vooral gericht op webontwikkelaars. Alle ontwikkeling vindt plaats in een auteur-omgeving.

In deze zelfstudie wordt beschreven hoe u:

  1. AEM installeren.

  2. Access CRXDE Lite (de ontwikkelomgeving).

  3. Stel de projectstructuur in CRXDE Lite in.

  4. Maak de sjabloon, component en scripts die worden gebruikt als basis voor het maken van inhoudspagina's.

  5. Maak de basispagina voor uw website en stel vervolgens de inhoudspagina's in.

  6. Maak de volgende componenten voor gebruik op uw pagina's:

    • Top Navigation
    • List Children
    • Logo
    • Image
    • Text-Image
    • Search
  7. Verschillende basiscomponenten opnemen.

Nadat u alle stappen hebt uitgevoerd, zien de pagina's er als volgt uit:

chlimage_1-99

Het uiteindelijke resultaat downloaden

Download website-1.0.zip om de zelfstudie te volgen en niet de oefeningen uit te voeren. Dit bestand is een AEM inhoudspakket dat de resultaten van deze zelfstudie bevat. Gebruik Pakketbeheer om het pakket te installeren naar de auteurinstantie.

OPMERKING

Als u dit pakket installeert, worden alle bronnen op de ontwerpinstantie die u met deze zelfstudie hebt gemaakt, overschreven.

Inhoud van website

Bestand ophalen

Adobe Experience Manager installeren

Als u een AEM voor het ontwikkelen van uw website wilt installeren, volgt u de instructies voor het instellen van een implementatieomgeving met auteur en het publiceren van instanties, of voert u een algemene installatie uit. De algemene installatie omvat het downloaden van het AEM QuickStart JAR-bestand, het plaatsen van het bestand license.properties in dezelfde map als het JAR-bestand en het dubbelklikken op het JAR-bestand.

Nadat u AEM hebt geïnstalleerd, toegang tot de ontwikkelomgeving van de CRXDE Lite door de verbinding van de CRXDE Lite op de Welkome pagina te klikken:

chlimage_1-100

OPMERKING

De URL van CRXDE Lite voor een AEM ontwerpinstantie die lokaal wordt geïnstalleerd met de standaardpoort, is http://localhost:4502/crx/de/.

De projectstructuur instellen in CRXDE Lite

Gebruik CRXDE Lite om de structuur van de mywebsite-toepassing in de opslagplaats te maken:

  1. Klik in de structuur links van CRXDE Lite met de rechtermuisknop op de map /apps en klik op Create > Create Folder. Typ mywebsite als mapnaam in het dialoogvenster Map maken en klik op OK.

  2. Klik met de rechtermuisknop op de map /apps/mywebsite en klik op Create > Create Folder. Typ components als mapnaam in het dialoogvenster Create Folder en klik op OK.

  3. Klik met de rechtermuisknop op de map /apps/mywebsite en klik op Create > Create Folder. Typ templates als mapnaam in het dialoogvenster Create Folder en klik op OK.

    De structuur in de boom moet er nu ongeveer als volgt uitzien:

    chlimage_1-101

  4. Klik op Save All.

Het ontwerp instellen

In deze sectie maakt u het ontwerp voor uw toepassing met het gereedschap Designer. Het ontwerp biedt CSS- en afbeeldingsbronnen voor uw website.

OPMERKING

Klik op de volgende koppeling om mywebsite.zip te downloaden. Het archief bevat de bestanden static.css en image voor uw ontwerp.

Voorbeeld van bestand static.css en afbeeldingen

Bestand ophalen

  1. Voor de AEM Welkome pagina, klik Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1-102

  2. Selecteer in de mappenstructuur de map Designs en klik op New > New Page. Typ mywebsite als de titel en klik Create.

  3. Als het mijnwebsite-item niet in de tabel wordt weergegeven, vernieuwt u de structuur of de tabel.

  4. Kopieer het voorbeeldbestand en de map vanuit het gedownloade bestand mywebsite.zip naar de static.css images /etc/designs/mywebsite map met WebDAV-toegang naar de URL op http://localhost:4502.

    chlimage_1-103

Sjabloon, component en script voor inhoudspagina maken

In deze sectie maakt u het volgende:

  • De sjabloon voor de inhoudspagina die wordt gebruikt om inhoudspagina's te maken in de voorbeeldwebsite
  • De component contentPage die wordt gebruikt om pagina's met inhoud te renderen
  • Het script contentPage

Sjabloon voor inhoudspagina maken

Maak een sjabloon die u als basis voor de webpagina's van uw site wilt gebruiken.

Een sjabloon definieert de standaardinhoud van een nieuwe pagina. Complexe websites kunnen verschillende sjablonen gebruiken om de verschillende typen pagina's op de site te maken. In deze exercitie, zijn alle pagina's gebaseerd op één eenvoudig malplaatje.

  1. Klik in de mappenstructuur van CRXDE Lite met de rechtermuisknop op /apps/mywebsite/templates en klik op Create > Create Template.

  2. Typ de volgende waarden in het dialoogvenster Sjabloon maken en klik op Next:

    • Label: contentpagina
    • Title: Sjabloon voor pagina met inhoud van mijn website
    • Description: Dit is mijn pagina-sjabloon voor website-inhoud
    • Resource Type: mywebsite/componenten/contentPage

    Gebruik de standaardwaarde voor het Rangschikken bezit.

    chlimage_1-104

    Het middeltype identificeert de component die de pagina teruggeeft. In dit geval worden alle pagina's die zijn gemaakt met de sjabloon contentPage weergegeven door de component mywebsite/components/contentpage.

  3. Als u de paden wilt opgeven van de pagina's waarop deze sjabloon kan worden gebruikt, klikt u op de plusknop en typt u /content(/.*)? in het tekstvak dat wordt weergegeven. Klik vervolgens op Next.

    chlimage_1-106

    De waarde van de toegestane padeigenschap is een reguliere expressie. Pagina's die een pad hebben dat overeenkomt met de expressie, kunnen de sjabloon gebruiken. In dit geval komt de reguliere expressie overeen met het pad van de map /content en alle subpagina's.

    Wanneer een auteur een pagina onder /content creeert, verschijnt contentpage malplaatje in een lijst van beschikbare malplaatjes aan gebruik.

  4. Klik Next in Allowed Parents en Allowed Children panelen en klik OK. Klik in CRXDE Lite op Save All.

    chlimage_1-106

De component ContentPage maken

Creeer component die de inhoud bepaalt en de pagina's teruggeeft die het malplaatje van de inhoudspagina gebruiken. De plaats van de component moet met de waarde van het bezit van het Type van Middel van het contentpage malplaatje beantwoorden.

  1. Klik in CRXDE Lite met de rechtermuisknop op /apps/mywebsite/components en klik op Create > Component.

  2. Typ in het dialoogvenster Create Component de volgende eigenschapswaarden:

    • Label: contentpagina
    • Title: Inhoud pagina Mijn website
    • Description: Dit is de inhoud van mijn website

    chlimage_1-107

    De locatie van de nieuwe component is /apps/mywebsite/components/contentpage. Dit pad komt overeen met het middeltype van de sjabloon voor de inhoudspagina (min het oorspronkelijke /apps/-gedeelte van het pad).

    Deze correspondentie verbindt het malplaatje met de component en is kritiek aan het correcte functioneren van de website.

  3. Klik Next tot het Allowed Children paneel van de dialoog verschijnt, en dan OK klikken. Klik in CRXDE Lite op Save All.

    De structuur ziet er nu als volgt uit:

    chlimage_1-108

Het script voor de component ContentPage ontwikkelen

Voeg code toe aan het script contentPage.jsp om de pagina-inhoud te definiëren.

  1. Open in CRXDE Lite het bestand contentpage.jsp in /apps/mywebsite/components/contentpage. Het bestand bevat standaard de volgende 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 */
    %>
    
  2. Kopieer de volgende code en plak deze in contentPage.jsp na de standaardcode:

    <%@ 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. Klik Save All om uw veranderingen te bewaren.

Websitepagina's en inhoudspagina's maken

In deze sectie maakt u de volgende pagina's die allemaal de sjabloon voor de inhoudspagina gebruiken: Mijn Website, Engels, Producten, de Diensten, en Klanten.

  1. Voor de AEM Welkome pagina (http://localhost:4502/libs/cq/core/content/welcome.html), klik Websites.

    chlimage_1-109

  2. Selecteer in de mappenstructuur de map Websites en klik op New > New Page.

  3. Voer in het venster Create Page het volgende in:

    • Title: My Website
    • Name: mywebsite
    • Selecteer My Website Content Page Template

    chlimage_1-110

  4. Klik op Create. Selecteer de pagina /Websites/My Website in de mappenstructuur en klik op New > New Page.

  5. Voer in het dialoogvenster Create Page de volgende eigenschapswaarden in en klik op Maken:

    • Title: Engels
    • Name: en
    • Selecteer My Website Content Page Template
  6. Selecteer de pagina /Websites/My Website/English in de mappenstructuur en klik op New > New Page.

  7. Voer in het dialoogvenster Create Page de volgende eigenschapswaarden in en klik op Create:

    • Title: Producten
    • Selecteer My Website Content Page Template
  8. Selecteer de pagina /Websites/My Website/English in de mappenstructuur en klik op New > New Page.

  9. Voer in het dialoogvenster Create Page de volgende eigenschapswaarden in en klik op Create:

    • Titel: Services
    • Selecteer My Website Content Page Template
  10. Selecteer de pagina /Websites/My Website/English in de mappenstructuur en klik op New > New Page.

  11. Voer in het dialoogvenster Create Page de volgende eigenschapswaarden in en klik op Create:

    • Titel: Klanten
    • Selecteer My Website Content Page Template

    Uw structuur ziet er als volgt uit:

    chlimage_1-111

  12. Als u uw pagina's wilt koppelen aan het ontwerp van mijn website, selecteert u in CRXDE Lite het knooppunt /content/mywebsite/en/jcr:content. Typ op het tabblad Properties de volgende waarden voor een nieuwe eigenschap en klik vervolgens op Toevoegen:

    • Name: cq:designPath
    • Type: Tekenreeks
    • Value: /etc/designs/mywebsite

    chlimage_1-112

  13. Open http://localhost:4502/content/mywebsite/en/products.html in een nieuw webbrowsertabblad of -venster om de pagina Producten weer te geven:

    chlimage_1-113

Het script voor de inhoudspagina verbeteren

In deze sectie wordt beschreven hoe u het script voor de inhoudspagina kunt verbeteren met behulp van de scripts van de AEM basis en door uw eigen scripts te schrijven.

De pagina Products ziet er als volgt uit:

chlimage_1-4

Het gebruiken van de Manuscripten van de Pagina van de Stichting

In deze oefening, vormt u uw paginaContent component zodat zijn supertype de AEM component van de Pagina is. Omdat componenten de eigenschappen van hun supertype erven, erft uw pagina-inhoud de scripts en eigenschappen van de component Pagina.

In uw JSP-code van de component kunt u bijvoorbeeld naar de scripts verwijzen die de supertype-component biedt, alsof deze in de component zijn opgenomen.

  1. Voeg in CRXDE Lite een eigenschap toe aan het knooppunt /apps/mywebsite/components/contentpage.

    1. Selecteer de /apps/mywebsite/components/contentpage knoop.

    2. Typ onder aan het tabblad Eigenschappen de volgende eigenschapswaarden en klik op Toevoegen:

      • Name: sling:resourceSuperType
      • Type: Tekenreeks
      • Value: basis/componenten/pagina
    3. Klik op Save All.

  2. Open het contentpage.jsp-bestand onder /apps/mywebsite/components/contentpage en vervang de bestaande code door de volgende 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>
    
  3. Sla uw wijzigingen op.

  4. Laad de pagina Products in uw browser opnieuw. Het ziet er als volgt uit:

    chlimage_1-5

    Open de paginabron om de elementen javascript en HTML te zien die de manuscripten head.jsp en body.jsp produceerden. Het volgende scriptfragment opent Sidetrap wanneer u de pagina opent:

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

Uw eigen scripts gebruiken

In deze sectie maakt u verschillende scripts die elk een deel van de hoofdtekst van de pagina genereren. Vervolgens maakt u het bestand body.jsp in de component pageContent om het body.jsp van de component AEM Page te overschrijven. In uw body.jsp- dossier, omvat u uw manuscripten die de verschillende delen van de paginakleurtekst produceren.

Tip: Wanneer een component een bestand bevat dat dezelfde naam en relatieve locatie heeft als een bestand in het supertype van de component, wordt dit bedekken genoemd.

  1. Maak in CRXDE Lite het bestand left.jsp onder /apps/mywebsite/components/contentpage:

    1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage en selecteer Create en Create File.
    2. Typ left.jsp in het venster als de *** naam* en klik op ​OK.
  2. Bewerk het bestand left.jsp om de bestaande inhoud te verwijderen en te vervangen door de volgende code:

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
    
  3. Sla de wijzigingen op.

  4. Maak in CRXDE Lite het bestand center.jsp onder /apps/mywebsite/components/contentpage:

    1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage, selecteer Create en Create File.
    2. Typ center.jsp als Name in het dialoogvenster en klik op OK.
  5. Bewerk het bestand center.jsp om de bestaande inhoud te verwijderen en vervang het door de volgende code:

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
    
  6. Sla de wijzigingen op.

  7. Maak in CRXDE Lite het bestand right.jsp onder /apps/mywebsite/components/contentpage:

    1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage, selecteer Create en Create File.
    2. Typ right.jsp als Name in het dialoogvenster en klik op OK.
  8. Bewerk het bestand right.jsp om de bestaande inhoud te verwijderen en te vervangen door de volgende code:

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
    
  9. Sla de wijzigingen op.

  10. Maak in CRXDE Lite het bestand body.jsp onder /apps/mywebsite/components/contentpage:

  11. Bewerk het bestand body.jsp om de bestaande inhoud te verwijderen en te vervangen door de volgende code:

    <%@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. Sla de wijzigingen op.

  13. Laad de pagina Products in uw browser opnieuw. Het ziet er als volgt uit:

    chlimage_1-6

De bovenste navigatiecomponent maken

In deze sectie maakt u een component die koppelingen naar alle pagina's op hoofdniveau van de website weergeeft om de navigatie te vereenvoudigen. Deze componentinhoud wordt boven aan alle pagina's weergegeven die zijn gemaakt met de sjabloon voor de inhoudspagina.

In de eerste versie van de bovenste navigatiecomponent (boven) zijn de navigatie-items alleen tekstkoppelingen. In de tweede versie implementeert u bovenaan met koppelingen voor afbeeldingsnavigatie.

Uw topnavigatie ziet er als volgt uit:

chlimage_1-115

De bovenste navigatiecomponent maken

  1. Klik in CRXDE Lite met de rechtermuisknop op /apps/mywebsite/components, selecteer Create en Create Component.

  2. Voer in het venster Create Component het volgende in:

    • Label: topnav
    • Title: My Top Navigation Component
    • Description: This is My Top Navigation Component
  3. Klik Next tot u aan het laatste venster komt waar u OK klikt. Sla uw wijzigingen op.

Voeg het renderscript toe aan bovenliggend item om tekstkoppelingen naar onderliggende pagina's te genereren:

  1. Open in CRXDE Lite het bestand topnav.jsp onder /apps/mywebsite/components/topnav.

  2. Vervang de desbetreffende code door de volgende code te kopiëren en te plakken:

    <%@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><%
            }
        }
    %>
    

De bovenste navigatie opnemen in de component ContentPage

Het onderwerp opnemen in de component ContentPage:

  1. Open in CRXDE Lite de body.jsp onder /apps/mywebsite/components/contentpageen vervang:

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

    met:

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
    
  2. Sla de wijzigingen op.

  3. Laad de pagina Products in uw browser opnieuw. De bovenste navigatie ziet er als volgt uit:

    chlimage_1-115

Pagina's verbeteren met ondertitels

De component Page definieert eigenschappen waarmee u ondertitels voor pagina's kunt opgeven. Voeg ondertitels toe die informatie over de pagina-inhoud bevatten.

  1. Open de pagina Products in uw browser.

  2. Klik op Page Properties op het tabblad Sidetrap.Page

  3. Vouw op het tabblad Basic van het dialoogvenster More Titles and Description uit en typ what we do voor de eigenschap Subtitle. Klik op OK.

  4. Herhaal de vorige stappen om de ondertitel over onze services toe te voegen aan de pagina Services.

  5. Herhaal de vorige stappen om de ondertitel het vertrouwen toe te voegen wij aan Customers pagina verdienen.

    Tip: Selecteer in CRXDE Lite het knooppunt /content/mywebsite/nl/products/jcr:content om te controleren of de eigenschap subtitle is toegevoegd.

Verbeter het teruggevende manuscript van de hoogste component om beeldverbindingen in plaats van hypertext voor de navigatiecontroles te gebruiken. De afbeelding bevat de titel en de ondertitel van het doel van de koppeling.

Deze oefening toont Het verkopen verzoekverwerking aan. Het script topnav.jsp wordt gewijzigd om een script aan te roepen waarmee dynamisch afbeeldingen worden gegenereerd die voor de paginanavigatiekoppelingen kunnen worden gebruikt. Bij deze exercitie wordt met Sling de URL van afbeeldingsbronbestanden geparseerd om te bepalen welk script moet worden gebruikt om de afbeeldingen te renderen.

De bron voor de afbeeldingskoppeling naar de pagina Producten kan bijvoorbeeld http://localhost:4502/content/mywebsite/en/products.navimage.png zijn. Sling ontleedt dit URL om het middeltype en het manuscript te bepalen om het middel terug te geven:

  1. Sling bepaalt het pad van de bron die /content/mwebysite/en/products.png. moet worden

  2. De verkoop past dit weg met de /content/mywebsite/en/products knoop aan.

  3. Sling bepaalt sling:resourceType van deze knoop om mywebsite/components/contentpage te zijn.

  4. Bij Sling wordt het script in deze component gevonden dat het meest overeenkomt met de URL-kiezer ( navimage) en de bestandsextensie ( png).

In deze oefening, past het Sling deze URLs aan het manuscript /apps/mywebsite/components/contentpage/navimage.png.java aan dat u creeert.

  1. Open in CRXDE Lite de topnav.jsp onder /apps/mywebsite/components/topnav.De inhoud van het ankerelement zoeken (regel 14):

    <%=child.getTitle() %>
    
  2. Vervang de ankerinhoud door de volgende code:

    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
    
  3. Sla de wijzigingen op.

  4. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage en klik op Create > Create File.

  5. Typ navimage.png.java in het venster Create File als Name.

    De .java-bestandsnaamextensie geeft aan Sling aan dat de Apache Sling Scripting Java Support moet worden gebruikt om het script te compileren en een servlet te maken.

  6. Kopieer de volgende code naar navimage.png.java.De code breidt de klasse AbstractImageServlet uit:

    • 🔗 AbstractImageServletcreate een voorwerp ImageContext dat de eigenschappen van het huidige middel opslaat.
    • De bovenliggende pagina van de bron wordt geëxtraheerd uit het ImageContext-object. De paginatitel en -ondertitel worden vervolgens opgehaald.
    • Met ImageHelperis kunt u de afbeelding genereren op basis van het bestand navimage_bg.jpg van het siteontwerp, de paginatitel en de ondertitel van de pagina.
    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. Sla de wijzigingen op.

  8. Laad de pagina Products in uw browser opnieuw. De bovenste navigatie ziet er nu als volgt uit:

    screen_shot_2012-03-07at10047pm

De component List Children maken

Maak de component listchildren die een lijst met paginakoppelingen genereert die de titel, beschrijving en datum van pagina's bevatten (bijvoorbeeld productpagina's). De koppelingen zijn gericht op de onderliggende pagina's van de huidige pagina of van een basispagina die is opgegeven in het dialoogvenster van de component.

chlimage_1-116

Productpagina's maken

Maak twee pagina's onder de pagina Products. Voor elke pagina, die twee specifieke producten beschrijft, plaatst u een titel, een beschrijving, en een datum.

  1. Selecteer in de mappenstructuur van de pagina Websites het item Websites/My Website/English/Products en klik op New > New Page.

  2. Voer in het dialoogvenster de volgende eigenschapswaarden in en klik op Create:

    • Title: Product 1.
    • Name: product1.
    • Selecteer My Website Content Page Template
  3. Maak een andere pagina onder Producten met de volgende eigenschapswaarden:

    • Title: Product 2
    • Name: product2
    • Selecteer My Website Content Page Template
  4. Stel in CRXDE Lite een beschrijving en een datum in voor de pagina Product 1:

    1. Selecteer de /content/mywebsite/en/products/product1/jcr:content knoop.

    2. Voer op het tabblad Properties de volgende waarden in:

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

    4. Maak op het tabblad Properties een andere eigenschap met de volgende waarden:

      • Name: date
      • Type: Tekenreeks
      • Value: 14-02-2008
      • Klik op Add.
    5. Klik op Save All.

  5. Stel in CRXDE Lite een beschrijving en een datum in voor de pagina Product 2:

    1. Selecteer de /content/mywebsite/en/products/product2/jcr:content knoop.

    2. Voer op het tabblad Properties de volgende waarden in:

      • Name: jcr:beschrijving
      • Type: Tekenreeks
      • Value: Dit is een beschrijving van Product 2!
    3. Klik op Add.

    4. Vervang in dezelfde tekstvakken de vorige waarden door de volgende waarden:

      • Name: date
      • Type: Tekenreeks
      • Value: 11-05-2012
      • Klik op Add.
    5. Klik op Save All.

De component List Children maken

De component listchildren maken:

  1. Klik in CRXDE Lite met de rechtermuisknop op /apps/mywebsite/components, selecteer Create en Create Component.

  2. Voer in het dialoogvenster de volgende eigenschapswaarden in en klik op Next:

    • Label: listchildren.
    • Title: Mijn component Listchildren.
    • Description: Dit is de component My Listchildren.
  3. Klik op Next totdat het deelvenster Allowed Children wordt weergegeven en klik op OK.

Het creëren van het Manuscript van de Kinderen van de Lijst

Ontwikkel het manuscript voor de component listchildren.

  1. Open in CRXDE Lite het bestand listchildren.jsp onder /apps/mywebsite/components/listchildren.

  2. Vervang de standaardcode door de volgende code:

    <%@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. Sla de wijzigingen op.

Het creëren van de Dialoogvenster van de Kinderen van de Lijst

Creeer de dialoog die wordt gebruikt om de eigenschappen van de component listchildren te vormen.

  1. Maak het dialoogknooppunt onder de component listchildren:

    1. Klik in CRXDE Lite met de rechtermuisknop op het knooppunt /apps/mywebsite/components/listchildrenen klik op Create > Create Dialog.

    2. Voer in het dialoogvenster de volgende eigenschapswaarden in en klik op OK

      • Label: dialog
      • Title: Edit Component en klik OK.

    screen_shot_2012-03-07at45818pm

    Met de volgende eigenschappen:

    screen_shot_2012-03-07at50415pm

  2. Selecteer de /apps/mywebsite/components/listchildren/dialog/items/items/tab1 knoop.

  3. Wijzig op het tabblad Properties de waarde van de eigenschap title in List Children

    chlimage_1-117

  4. Selecteer de tab1 knoop en klik Create > Create Node, ga de volgende bezitswaarden in, en klik OK:

    • Name: items
    • Type: cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. Maak een knooppunt onder het knooppunt Items met de volgende eigenschapswaarden:

    • Name: listroot
    • Type: cq:Widget

    screen_shot_2012-03-07at51031pm

  6. Voeg eigenschappen voor de listrootknoop toe om het als tekstgebied te vormen. Elke rij in de volgende tabel vertegenwoordigt een eigenschap. Wanneer gebeëindigd, klik Save All.

    Naam Type Waarde
    fieldLabel Tekenreeks Pad van hoofdmap van lijst
    name Tekenreeks ./listroot
    xtype Tekenreeks textfield

    screen_shot_2012-03-07at51433pm

Onderliggende items weergeven in de component ContentPage

Ga als volgt te werk om de component listchildren in uw component contentPage op te nemen:

  1. Open in CRXDE Lite het bestand left.jsp onder /apps/mywebsite/components/contentpage en zoek de volgende code (regel 4):

    <div>newslist</div>
    
  2. Vervang die code door de volgende code:

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
    
  3. Sla de wijzigingen op.

Onderliggende items weergeven op een pagina

Als u de volledige werking van deze component wilt zien, kunt u de pagina Producten weergeven:

  • als de bovenliggende pagina ("Pad van hoofdmap van lijst") niet is gedefinieerd.
  • als de bovenliggende pagina ("Pad van hoofdmap van lijst") is gedefinieerd.
  1. Laad de pagina Products in uw browser opnieuw. De component listchildren ziet er als volgt uit:

    chlimage_1-118

  2. chlimage_1-119

  3. Als pad van hoofdmap van lijst voert u in: /content/mywebsite/en. Klik op OK. De component listchildren op de pagina ziet er nu als volgt uit:

    chlimage_1-120

De component Logo maken

Maak een component die het bedrijfslogo weergeeft en een koppeling naar de startpagina van de site bevat. De component bevat een dialoogvenster voor de ontwerpmodus, zodat de eigenschapswaarden worden opgeslagen in het siteontwerp (/etc/designs/mywebsite?lang=nl):

  • De eigenschapswaarden zijn van toepassing op alle instanties van de component die worden toegevoegd aan pagina's die het ontwerp gebruiken.
  • De eigenschappen kunnen worden gevormd gebruikend om het even welke instantie van de component die op een pagina is die het ontwerp gebruikt.

Het dialoogvenster voor de ontwerpmodus bevat eigenschappen voor het instellen van de afbeelding en het koppelingspad. De logocomponent wordt linksboven op alle pagina's op de website geplaatst.

Het ziet er als volgt uit:

chlimage_1-121

OPMERKING

Adobe Experience Manager biedt een logo met meer volledige functionaliteit ( /libs/foundation/components/logo).

Het creëren van de Node van de Component van het Logo

Voer de volgende stappen uit om het logo-onderdeel te maken:

  1. Klik in CRXDE Lite met de rechtermuisknop op /apps/mywebsite/components en selecteer Create en Create Component.

  2. Voer in het dialoogvenster Component maken de volgende eigenschapswaarden in en klik op Volgende:

    • Label: logo.
    • Title: My Logo Component.
    • Description: This is My Logo Component.
  3. Klik op Volgende totdat u het laatste deelvenster van het dialoogvenster bereikt en klik op OK.

Het creëren van het Manuscript van het Logo

In deze sectie wordt beschreven hoe u het script maakt om de logoafbeelding weer te geven met een koppeling naar de startpagina.

  1. Open in CRXDE Lite het bestand logo.jsp onder /apps/mywebsite/components/logo.

  2. De volgende code maakt de koppeling naar de homepage van de site en voegt een verwijzing naar de logoafbeelding toe. Kopieer de code naar logo.jsp:

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

Het maken van het Dialoogvenster van het Ontwerp van het Logo

Maak het dialoogvenster voor het configureren van de logocomponent in de ontwerpmodus. Dialoogvensterknooppunten in ontwerpmodus moeten de naam design_dialog hebben.

  1. Maak het dialoogvenster onder de logocomponent:

    1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/logo en klik op Create > Create Dialog.

    2. Typ de volgende eigenschapswaarden en klik op OK:

      • Label design_dialog
      • Title Logo (Design)
  2. Klik met de rechtermuisknop op het knooppunt tab1 in de vertakking design_dialog en klik op Verwijderen. Klik op Save All.

  3. Maak onder het knooppunt design_dialog/items/itemseen nieuw knooppunt met de naam img van het type cq:Widget. Voeg de volgende eigenschappen toe en klik vervolgens op Save All:

    Naam Type Waarde
    fileNameParameter Tekenreeks ./imageName
    fileReferenceParameter Tekenreeks ./imageReference
    name Tekenreeks ./afbeelding
    title Tekenreeks Afbeelding
    xtype Tekenreeks html5smartImage

    chlimage_1-122

Het logo-renderscript maken

Maak het script waarmee de logoafbeelding wordt opgehaald en naar de pagina wordt geschreven.

  1. Klik met de rechtermuisknop op het knooppunt voor de logocomponent en klik op Create > Create File om het scriptbestand img.GET.java te maken.
  2. Open het bestand, kopieer de volgende code naar het bestand en klik op 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();
    }
}

De component Logo toevoegen aan de component ContentPage

  1. Open in CRXDE Lite de left.jsp onder /apps/mywebsite/components/contentpage file en zoek de volgende coderegel:

    <div>logo</div>
    
  2. Vervang die code door de volgende coderegel:

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
    
  3. Sla de wijzigingen op.

  4. Laad de pagina Products in uw browser opnieuw. Het logo ziet er als volgt uit, hoewel momenteel alleen de onderliggende koppeling zichtbaar is:

    chlimage_1-123

Het plaatsen van het Beeld van het Logo in een Pagina

In deze sectie wordt beschreven hoe u een afbeelding instelt als uw logo in het dialoogvenster Ontwerpmodus.

  1. Open de pagina Products in uw browser en klik op de knop Design onder aan Sidetrap om de modus Design te activeren.

  2. Klik in het ontwerp van de logobalk op Edit om het dialoogvenster te gebruiken voor het bewerken van de instellingen voor de logocomponent.

  3. Klik in het dialoogvenster in het deelvenster op het tabblad Image, blader naar de logo.png-afbeelding die u uit het mywebsite.zip-bestand hebt geëxtraheerd en klik op OK.

    chlimage_1-124

  4. Klik op het driehoekje op de titelbalk van de sidetrap om terug te keren naar de modus Edit.

    chlimage_1-7

  5. In CRXDE Lite, ga naar de volgende knoop om de opgeslagen bezitswaarden te zien:

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

Inclusief de component Breadcrumb

In deze sectie neemt u de component breadcrumb (trail) op. Dit is een van de basiscomponenten.

  1. Blader in CRXDE Lite naar /apps/mywebsite/components/contentpage, open het bestand center.jsp en vervang:

    <div>trail</div>
    

    met:

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
    
  2. Sla de wijzigingen op.

  3. Laad de pagina Products 1 in uw browser opnieuw. De trailcomponent ziet er als volgt uit:

    chlimage_1-125

De component Titel opnemen

In deze sectie neemt u de component title op. Dit is een van de basiscomponenten.

  1. Blader in CRXDE Lite naar /apps/mywebsite/components/contentpage, open het bestand center.jsp en vervang:

    <div>title</div>
    

    met:

    <cq:include path="title" resourceType="foundation/components/title" />
    
  2. Sla de wijzigingen op.

  3. Laad de pagina Products in uw browser opnieuw. De component title ziet er als volgt uit:

    chlimage_1-126

OPMERKING

U kunt een verschillende Titel en Type/Grootte op Edit wijze plaatsen.

Inclusief de component Alineasysteem

Het alineasysteem (parsys) is een belangrijk onderdeel van een website omdat het een lijst met alinea's beheert. Auteurs kunnen hiermee alineacomponenten aan de pagina toevoegen en beschikken over een goede structuur.

Voeg de component parsys (één van de stichtingscomponenten) aan uw component van de inhoudspagina toe.

  1. Blader in CRXDE Lite naar /apps/mywebsite/components/contentpage, open het bestand center.jsp en zoek de volgende coderegel:

    <div>parsys</div>
    
  2. Vervang die coderegel door de volgende code en sla de wijzigingen op:

    <cq:include path="par" resourceType="foundation/components/parsys" />
    
  3. Vernieuw in uw browser de pagina Products. Het heeft nu de parsys component, die als volgt wordt gezien:

    chlimage_1-127

Afbeeldingscomponent maken

Maak een component die een afbeelding in het alineasysteem weergeeft. Om tijd te besparen, wordt de afbeeldingscomponent gemaakt als een kopie van de logocomponent met enkele eigenschapswijzigingen.

OPMERKING

Adobe Experience Manager biedt een imageonderdeel met meer volledige functionaliteit ( /libs/foundation/components/image).

Afbeeldingscomponent maken

  1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/logo en klik op Copy.

  2. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components en klik op Paste.

  3. Klik met de rechtermuisknop op het knooppunt Copy of logo, klik op Rename, verwijder de bestaande tekst en typ image.

  4. Selecteer het componentknooppunt image en wijzig de volgende eigenschapswaarden:

    • jcr:title: Mijn afbeeldingscomponent.
    • jcr:description: Dit is de component Mijn afbeelding.
  5. Voeg een bezit aan de image knoop met de volgende bezitswaarden toe:

    • Name: componentGroup
    • Type: Tekenreeks
    • Value: MyWebsite
  6. Wijzig onder het knooppunt image de naam van het knooppunt design_dialog in dialog.

  7. Naam van logo.jsp wijzigen in image.jsp.

  8. Open img.GET.java en verander het pakket in apps.mywebsite.components.image.

chlimage_1-128

Afbeeldingsscript maken

In deze sectie wordt beschreven hoe u het afbeeldingsscript maakt.

  1. Open /apps/mywebsite/components/image/ image.jsp

  2. Vervang de bestaande code door de volgende code en sla de wijzigingen vervolgens op:

    <%@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. Sla de wijzigingen op.

Image cq:editConfig Node maken

Met het knooppunttype cq:editConfig kunt u bepaalde gedragingen van componenten configureren tijdens het bewerken van hun eigenschappen.

In deze sectie gebruikt u het knooppunt cq:editConfig om u in staat te stellen elementen van de Inhoudszoeker naar de afbeeldingscomponent te slepen.

  1. Maak in CRXDE Lite onder het knooppunt /apps/mywebsite/components/image als volgt een nieuw knooppunt:

    • Name: cq:editConfig.
    • Type: cq:EditConfig.
  2. Maak onder het knooppunt cq:editConfig als volgt een nieuw knooppunt:

    • Name: cq:dropTargets.
    • Type: cq:DropTargetConfig.
  3. Onder het knooppunt cq:dropTargets maakt u als volgt een nieuw knooppunt:

    • Name: afbeelding.
    • Type: nt:ongestructureerd.
  4. In CRXDE stelt u de eigenschappen als volgt in:

Naam Type Waarde
accepteren Tekenreeks image/(gif)
groepen Tekenreeks media
propertyName Tekenreeks ./imageReference

chlimage_1-129

Het pictogram toevoegen

In deze sectie voegt u het pictogram toe dat naast de afbeeldingscomponent wordt weergegeven wanneer deze in Sidetrap wordt weergegeven:

  1. Klik in CRXDE Lite met de rechtermuisknop op het bestand /libs/foundation/components/image/icon.png en selecteer Copy.
  2. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/image en klik Paste en vervolgens op Save All.

Afbeeldingscomponent gebruiken

In deze sectie ziet u de pagina Products en voegt u de afbeeldingscomponent toe aan het alineasysteem.

  1. Laad de pagina Products in uw browser opnieuw.

  2. Klik in de Sidetrap op het pictogram Design mode.

  3. Klik op de knop Edit om het dialoogvenster voor het ontwerp van par te bewerken.

  4. In de dialoog, wordt een lijst van Allowed Components getoond; navigeer naar MyWebsite, selecteer My Image Component en klik OK.

  5. Terugkeren naar Edit mode.

  6. Dubbelklik op het frame parsys (op Drag components or assets here). De Insert New Component en Sidekick selecteurs kijken als volgt:

    chlimage_1-8

Inclusief de werkbalkcomponent

In deze sectie neemt u de werkbalkcomponent op. Dit is een van de basiscomponenten.

U hebt verschillende opties, zowel in de bewerkingsmodus als in de ontwerpmodus.

  1. Navigeer in CRXDE Lite naar /apps/mywebsite/components/contentpage, open het bestand body.jsp en zoek de volgende code:

    <div class="toolbar">toolbar</div>
    
  2. Vervang die code door de volgende code en sla de wijzigingen op.

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
    
  3. Selecteer Websites/My Website/English in de mappenstructuur van de pagina AEM Websites en klik vervolgens op New > New Page. Geef de volgende eigenschapswaarden op en klik op Maken:

    • Title: Werkbalk
    • Selecteer My Website Content Page Template
  4. Klik in de lijst met pagina's met de rechtermuisknop op de pagina Toolbar en klik op Properties. Selecteer Hide In Navigation en klik op OK.

    Met de optie Hide in Navigation voorkomt u dat de pagina wordt weergegeven in navigatiecomponenten, zoals boven- en listchildren.

  5. Maak onder Toolbar de volgende pagina's:

    • Contactpersonen
    • Feedback
    • Aanmelden
    • Zoeken
  6. Laad de pagina Products in uw browser opnieuw. Het ziet er als volgt uit:

    chlimage_1-130

De zoekcomponent maken

In deze sectie maakt u de component om te zoeken naar inhoud op de website. Deze zoekcomponent kan in het alineasysteem van elke pagina worden geplaatst (bijvoorbeeld op een gespecialiseerde pagina met zoekresultaten).

Uw zoekinvoervak ziet er op de pagina English als volgt uit:

chlimage_1-131

De zoekcomponent maken

  1. Klik in CRXDE Lite met de rechtermuisknop op /apps/mywebsite/components, selecteer Create en Create Component.

  2. Gebruik het dialoogvenster om de component te configureren:

    1. Geef in één eerste deelvenster de volgende eigenschapswaarden op:

      • Label: zoeken
      • Title: Mijn zoekcomponent
      • Description: Dit is mijn zoekcomponent
      • Group: MyWebsite
    2. Klik Next, dan klik Next opnieuw.

    3. Klik in het deelvenster Allowed Parents op de knop + en typ */parsys.

    4. Klik Next en klik dan OK.

  3. Klik op Save All.

  4. Kopieer de volgende knooppunten en plak deze naar het knooppunt apps/mywebsite/components/search:

    • /libs/foundation/components/search/dialog
    • `` /libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png
  5. Klik op Save All.

Zoekscript maken

In deze sectie wordt beschreven hoe u het zoekscript maakt:

  1. Open het /apps/mywebsite/components/search/search.jsp dossier.

  2. Kopieer de volgende code naar search.jsp:

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

Een zoekvak opnemen in de component ContentPage

Ga als volgt te werk om een invoervak voor zoekopdrachten op te nemen in de linkersectie van uw inhoudspagina:

  1. Open in CRXDE Lite het bestand left.jsp onder /apps/mywebsite/components/contentpage en zoek de volgende code (regel 2):

    %><div class="left">
    
  2. Voeg de volgende code voor die regel in:

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath();
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
    
  3. Zoek de volgende coderegel:

    <div>search</div>
    
  4. Vervang die code door de volgende code en sla de wijzigingen op.

    <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. Laad de pagina Products in uw browser opnieuw. De zoekcomponent ziet er als volgt uit:

    chlimage_1-132

De zoekcomponent opnemen in de zoekpagina

In deze sectie voegt u uw zoekcomponent toe aan het alineasysteem.

  1. Open in uw browser de pagina Zoeken.

  2. Klik in de Sidetrap op het moduspictogram Design.

  3. Klik in het ontwerpblok van pari (onder de zoektitel) op Edit.

  4. Blader in het dialoogvenster omlaag naar de groep My Websites, selecteer My Search Component en klik op OK.

  5. Klik op het driehoekje bij Sidetrap om terug te keren naar de modus Edit.

  6. Sleep de My Search component van Sidetrap in het parsys kader. Het ziet er als volgt uit:

    chlimage_1-135

  7. Navigeer naar uw Products pagina. Zoek naar klanten in de invoerdoos en druk Enter. U wordt omgeleid aan de Search pagina. Overschakelen naar modus Preview: de uitvoer heeft een vergelijkbare indeling als de volgende:

    chlimage_1-134

Met inbegrip van de component Iparsys

In deze sectie, omvat u de component van het Systeem van de Paragraaf van de Overerving (iparsys), die één van de stichtingscomponenten is. Met deze component kunt u een structuur van alinea's op een bovenliggende pagina maken en onderliggende pagina's de alinea's laten overnemen.

Voor deze component kunt u verschillende parameters instellen in zowel de bewerkingsmodus als de ontwerpmodus.

  1. Navigeer in CRXDE Lite naar /apps/mywebsite/components/contentpage, open het bestand right.jsp en vervang:

    <div>iparsys</div>
    

    met:

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
    
  2. Sla de wijzigingen op.

  3. Laad de pagina Products in uw browser opnieuw. De hele pagina ziet er als volgt uit:

    chlimage_1-9

Op deze pagina