Een JSP (Full-Featured Website) maken create-a-fully-featured-website-jsp

AEM installeren.

Access CRXDE Lite (de ontwikkelomgeving).

Stel de projectstructuur in CRXDE Lite in.

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

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

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

• Bovenste navigatie
• Onderliggende items weergeven
• Logo
• Afbeelding
• Text-Image
• Zoeken

Verschillende basiscomponenten opnemen.

In de boom op de linkerkant van CRXDE Lite, klik de /apps omslag met de rechtermuisknop aan en klik creeer > creeer Omslag. In creeer de dialoog van de Omslag, type mywebsite als omslagnaam en klik O.K..

Klik met de rechtermuisknop op de /apps/mywebsite omslag en klik creeer > creeer Omslag. In creeer de dialoog van de Omslag, type components als omslagnaam en klik O.K..

Klik met de rechtermuisknop op de /apps/mywebsite omslag en klik creeer > creeer Omslag. In creeer de dialoog van de Omslag, type templates als omslagnaam en klik O.K..

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

Klik sparen allen.

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

In de omslagboom, selecteer de Ontwerpen omslag en klik dan Nieuw > Nieuwe Pagina. Het type mywebsite als titel en klikt creeert.

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

Gebruikend WebDAVtoegang tot URL in https://localhost:4502, kopieer het steekproef static.css dossier en images omslag van het gedownloade mywebsite.zip- dossier in de /etc/designs/mywebsite omslag.

In de omslagboom van CRXDE Lite, klik /apps/mywebsite/templates met de rechtermuisknop aan en klik creeer > creeer Malplaatje.

In de Create dialoog van het Malplaatje, typ de volgende waarden en klik dan daarna:

• Etiket: inhoudspagina
• Titel: Mijn Malplaatje van de Pagina van de Inhoud van de Website
• Beschrijving: Dit is mijn Malplaatje van de Pagina van de Inhoud van de Website
• Type van Middel: mywebsite/componenten/contentPage

Gebruik de standaardwaarde voor het Rangschikken bezit.

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 .

Als u de paden wilt opgeven van de pagina's die deze sjabloon kunnen gebruiken, klikt u op de plusknop en typt u /content(/.*)? in het tekstvak dat wordt weergegeven. Dan, klik daarna.

De waarde van het toegestane wegbezit is a regelmatige uitdrukking. 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 het inhoudspagina malplaatje in een lijst van beschikbare te gebruiken malplaatjes.

Klik Volgende in Toegestane Ouders en Toegestane Onderliggende panelen en klik O.K.. In CRXDE Lite, klik sparen allen.

In CRXDE Lite, klik /apps/mywebsite/components met de rechtermuisknop aan en klik creeer > Component.

In creeer de dialoog van de Component, typ de volgende bezitswaarden:

• Etiket: inhoudspagina
• Titel: Mijn Component van de Pagina van de Inhoud van de Website
• Beschrijving: Dit is Mijn Component van de Pagina van de Inhoud van de Website

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 eerste /apps/ gedeelte van het pad).

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

Klik daarna tot het Toegestane paneel van Kinderen van de dialoog verschijnt, en klik dan O.K. ​. In CRXDE Lite, klik sparen allen.

De structuur ziet er nu als volgt uit:

Open het bestand contentpage.jsp in /apps/mywebsite/components/contentpage in CRXDE Lite. 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 */
%>

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>

Klik sparen allen om uw veranderingen te bewaren.

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

In de omslagboom, selecteer de omslag Websites en klik dan Nieuw > Nieuwe Pagina.

In creeer het venster van de Pagina, ga het volgende in:

• Titel: My Website
• Naam: mywebsite
• Selecteer de My Website Content Page Template

Klik creëren. In de omslagboom, selecteer /Websites/Mijn pagina van de Website en klik Nieuw > Nieuwe Pagina.

Voer in het dialoogvenster Pagina maken de volgende eigenschapswaarden in en klik op Maken:

• Titel: Engels
• Naam: en
• Sjabloon voor de pagina Mijn website-inhoud selecteren

In de omslagboom, selecteer /Websites/Mijn Website/Engelse pagina en klik Nieuw > Nieuwe Pagina.

In creeer de dialoog van de Pagina, ga de volgende bezitswaarden in, en klik dan creeer:

• Titel: Producten
• Sjabloon voor de pagina Mijn website-inhoud selecteren

In de omslagboom, selecteer /Websites/Mijn Website/Engelse pagina en klik Nieuw > Nieuwe Pagina.

In creeer de dialoog van de Pagina, ga de volgende bezitswaarden in, en klik dan creeer:

• Titel: Services
• Sjabloon voor de pagina Mijn website-inhoud selecteren

In de omslagboom, selecteer /Websites/Mijn Website/Engelse pagina en klik Nieuw > Nieuwe Pagina.

In creeer de dialoog van de Pagina, ga de volgende bezitswaarden in, en klik dan creeer:

• Titel: Klanten
• Sjabloon voor de pagina Mijn website-inhoud selecteren

Uw structuur ziet er als volgt uit:

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 Eigenschappen de volgende waarden voor een nieuwe eigenschap en klik vervolgens op Toevoegen:

• Naam: cq:designPath
• Type: String
• Waarde: /etc/designs/mywebsite

In een nieuw Web browser lusje of venster, open https://localhost:4502/content/mywebsite/en/products.htmlom de pagina van Producten te zien:

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

1. Selecteer het knooppunt /apps/mywebsite/components/contentpage .

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

   • Naam: sling:resourceSuperType
   • Type: Koord
   • Waarde: stichting/componenten/pagina

3. Klik op Alles opslaan.

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>

Sla uw wijzigingen op.

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

Open de paginabron om de JavaScript- en HTML-elementen te zien die door de scripts head.jsp en body.jsp zijn gegenereerd. Het volgende scriptfragment opent Sidekick wanneer u de pagina opent:

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

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

1. Klik de knoop /apps/mywebsite/components/contentpage met de rechtermuisknop aan, dan uitgezocht creeer ​ dan creeer Dossier.

2. In het venster, type left.jsp als Naam en klik O.K..

Bewerk het bestand left.jsp om de bestaande inhoud te verwijderen en vervang het door de volgende code:

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

Sla de wijzigingen op.

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

1. Klik de knoop /apps/mywebsite/components/contentpage met de rechtermuisknop aan, uitgezocht creeer, dan creeer Dossier.

2. In de dialoogdoos, type center.jsp als Naam en klik O.K..

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>

Sla de wijzigingen op.

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

1. Klik de knoop /apps/mywebsite/components/contentpage met de rechtermuisknop aan, uitgezocht creeer, dan creeer Dossier.

2. In de dialoogdoos, type right.jsp als Naam en klik O.K..

Bewerk het bestand right.jsp om de bestaande inhoud te verwijderen en vervang het door de volgende code:

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

Sla de wijzigingen op.

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

Bewerk het bestand body.jsp om de bestaande inhoud te verwijderen en vervang het 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>

Sla de wijzigingen op.

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

In CRXDE Lite, klik /apps/mywebsite/components met de rechtermuisknop aan, creeer ​, dan creeer Component.

In creeer het venster van de Component, ga het volgende in:

• Etiket: topnav

• Titel: My Top Navigation Component

• Beschrijving: This is My Top Navigation Component

Klik daarna tot u aan het laatste venster komt waar u O.K. klikt. Sla uw wijzigingen op.

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

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

Open in CRXDE Lite de lus body.jsp under /apps/mywebsite/components/contentpage en vervang:

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

met:

<cq:include path="topnav" resourceType="mywebsite/components/topnav" />

Sla de wijzigingen op.

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

In uw browser, open de pagina van Producten.

Voor de Sidekick Pagina tabel, klik Eigenschappen van de Pagina.

Op het Basislusje van de dialoog, breid Meer Titels en Beschrijving uit, en voor het bezit van de Ondertitel, type wat wij doen. Klik OK.

Herhaal de vorige stappen om ondertitel over onze diensten aan de pagina van de Diensten toe te voegen.

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

Uiteinde: in CRXDE Lite, selecteer /content/mywebsite/nl/products/jcr:inhoudsknoop om te zien dat het ondertitelbezit wordt toegevoegd.

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

Verdelen komt overeen met dit pad met het knooppunt /content/mywebsite/en/products .

Sling bepaalt de sling:resourceType van dit knooppunt dat mywebsite/components/contentpage moet zijn.

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

In CRXDE Lite, open topnav.jsp onder /apps/mywebsite/components/topnav. bepaal de plaats van de inhoud van het ankerelement (lijn 14):

<%=child.getTitle() %>

Vervang de ankerinhoud door de volgende code:

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

Sla de wijzigingen op.

Klik de /apps/mywebsite/components/contentpage knoop met de rechtermuisknop aan en klik creeer > creeer Dossier.

In creeer het venster van het Dossier, zoals Naam, type navimage.png.java.

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

Kopieer de volgende code in navimage.png.java. de code breidt de klasse AbstractImageServlet uit:

• AbstractImageServletleidt tot 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.
• ImageHelperwordt gebruikt om het beeld van het navimage_bg.jpg- dossier van het plaatsontwerp, de paginatitel, en de paginasubtitle te produceren.

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;
     }
 }

Sla de wijzigingen op.

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

Selecteer in de mapstructuur van de pagina Websites het item Websites/Mijn website/Engels/Producten en klik op Nieuw > Nieuwe pagina.

Voer in het dialoogvenster de volgende eigenschapswaarden in en klik op Maken:

• Titel: Product 1.
• Naam: product1.
• Sjabloon voor pagina met inhoud van mijn website selecteren

Maak een andere pagina onder Producten met de volgende eigenschapswaarden:

• Titel: Product 2
• Naam: product2
• Sjabloon voor pagina met inhoud van mijn website selecteren

Stel in CRXDE Lite een beschrijving en een datum in voor de pagina Product 1:

1. Selecteer het knooppunt /content/mywebsite/en/products/product1/jcr:content .

2. In het lusje van Eigenschappen, ga de volgende waarden in:

   • Naam: jcr:description
   • Type: String
   • Waarde: This is a description of the Product 1!.

3. Klik toevoegen.

4. In het lusje van Eigenschappen, creeer een ander bezit gebruikend de volgende waarden:

   • Naam: datum
   • Type: String
   • Waarde: 14-02-2008
   • Klik toevoegen.

5. Klik op Alles opslaan.

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

1. Selecteer het knooppunt /content/mywebsite/nl/products/product2/jcr:content.

2. In het lusje van Eigenschappen, ga de volgende waarden in:

   • Naam: jcr:description
   • Type: String
   • Waarde: dit is een beschrijving van Product 2!.

3. Klik toevoegen.

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

   • Naam: datum
   • Type: String
   • Waarde: 11-05-2012
   • Klik toevoegen.

5. Klik op Alles opslaan.

In CRXDE Lite, klik /apps/mywebsite/components met de rechtermuisknop aan, creeer ​, dan creeer Component.

Voer in het dialoogvenster de volgende eigenschapswaarden in en klik op Volgende:

• Label: listchildren.
• Titel: component Mijn onderliggende objecten.
• Beschrijving: Dit is de component Mijn onderliggende objecten van het type Listener.

Ga door met klikken op Volgende totdat het deelvenster Toegestane onderliggende items wordt weergegeven en klik op OK.

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

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 Page object using the path of the current page */
      String listroot = properties.get("listroot", currentPage.getPath());
     Page rootPage = pageManager.getPage(listroot);
     /* iterate through the child pages and gather properties */
     if (rootPage != null) {
         Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
         while (children.hasNext()) {
             Page child = children.next();
             String title = child.getTitle() == null ? child.getName() : child.getTitle();
             String date = child.getProperties().get("date","");
             %><div class="item">
             <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
             <span><%= date %></code><br>
             <%= child.getProperties().get("jcr:description","") %><br>
             </div><%
         }
     }
 %>

Sla de wijzigingen op.

Maak het dialoogknooppunt onder de component listchildren:

1. In CRXDE Lite, klik de /apps/mywebsite/components/listchildren knoop met de rechtermuisknop aan en klik creeer > creeer Dialoog.

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

   • Etiket: dialog

   • Titel: Edit Component en klik OK.

Met de volgende eigenschappen:

Selecteer het knooppunt /apps/mywebsite/components/listchildren/dialog/items/items/tab1 .

In het lusje van Eigenschappen, verander de waarde van het titel bezit in List Children

Selecteer het knooppunt tab1 en klik op Maken > Knooppunt maken, voer de volgende eigenschapswaarden in en klik op OK:

• Naam: items
• Type: cq:WidgetCollection

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

• Naam: listroot
• Type: cq:Widget

Voeg eigenschappen voor de listrootknoop toe om het als tekstgebied te vormen. Elke rij in de volgende tabel vertegenwoordigt een eigenschap. Klik op Alles opslaan als u klaar bent.

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

<div>newslist</div>

Vervang die code door de volgende code:

<cq:include path="newslist" resourceType="mywebsite/components/listchildren" />

Sla de wijzigingen op.

Laad de pagina Producten in uw browser opnieuw. De component listchildren ziet er als volgt uit:

Voer het volgende in als pad van de hoofdmap van de lijst. /content/mywebsite/en Klik op OK. De component listchildren op de pagina ziet er nu als volgt uit:

In CRXDE Lite, klik /apps/mywebsite/componenten met de rechtermuisknop aan, uitgezocht creeer, dan creeer Component.

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

• Label: logo.
• Titel: My Logo Component.
• Beschrijving: This is My Logo Component.

Klik daarna tot u het definitieve paneel van de dialoog bereikt en dan klikken O.K. ​.

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

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>

Sla de wijzigingen op.

Maak het dialoogvenster onder de logocomponent:

1. Klik de /apps/mywebsite/components/logo knoop met de rechtermuisknop aan en klik creeer > creeer Dialoog.

2. Typ de volgende eigenschapswaarden en klik op OK:

   • Etiket: design_dialog

   • Titel: Logo (Design)

Klik met de rechtermuisknop op het knooppunt tab1 in de vertakking design_dialog en klik op Verwijderen. Klik op Alles opslaan.

Onder de design_dialog/items/items knoop, creeer een knoop genoemd img van type cq:Widget. Voeg de volgende eigenschappen toe en klik vervolgens op Alles opslaan:

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

<div>logo</div>

Vervang die code door de volgende coderegel:

<cq:include path="logo" resourceType="mywebsite/components/logo" />

Sla de wijzigingen op.

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

Open de pagina Producten in uw browser en klik op de knop Ontwerpen onder aan de Sidekick om de ontwerpmodus te activeren.

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

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

Klik op het driehoekje op de titelbalk van de Sidekick om terug te keren naar de modus Bewerken.

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

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

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" />

Sla de wijzigingen op.

In uw browser, herlaad Producten 1 pagina. De trailcomponent ziet er als volgt uit:

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" />

Sla de wijzigingen op.

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

Nota: U kunt een verschillende Titel en het Type/de Grootte op plaatsen geeft wijze uit.

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

<div>parsys</div>

Vervang die coderegel door de volgende code en sla de wijzigingen op:

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

Vernieuw in uw browser de pagina Producten. Het heeft nu de parsys component, die als volgt wordt gezien:

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

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

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

Selecteer het componentknooppunt image en wijzig de volgende eigenschapswaarden:

• jcr:title: Mijn afbeeldingscomponent.
• jcr:description: Dit is de component Mijn afbeelding.

Voeg een eigenschap toe aan het knooppunt image met de volgende eigenschapswaarden:

• Naam: componentGroup
• Type: String
• Waarde: MyWebsite

Wijzig onder het knooppunt image de naam van het knooppunt design_dialog in dialog .

Naam van logo.jsp wijzigen in image.jsp.

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

Openen /apps/mywebsite/components/image/ image.jsp

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); %>

Sla de wijzigingen op.

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

• Naam: cq:editConfig.
• Type: cq:EditConfig.

Onder de knoop cq:editConfig, creeer als volgt een knoop:

• Naam: cq:dropTargets.
• Type: cq:DropTargetConfig.

Onder het knooppunt cq:dropTargets maakt u als volgt een knooppunt:

• Naam: afbeelding.
• Type: nt:ongestructureerd.

In CRXDE stelt u de eigenschappen als volgt in:

In uw browser, herlaad de Produkten pagina.

In de Sidekick, klik het pictogram van de ontwerpwijze.

Klik op de knop Bewerken om het ontwerpdialoogvenster van par te bewerken.

In de dialoog, wordt een lijst van Toegestane Componenten getoond; navigeer aan MyWebsite, selecteer de Mijn Component van het Beeld, en klik O.K.

Terugkeer aan geef wijze uit.

Dubbelklik het parsys kader (op de componenten of activa van de Belemmering hier). De selecteurs van het Tussenvoegsel Nieuwe Component en Sidekick kijken als volgt:

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

<div class="toolbar">toolbar</div>

Vervang die code door de volgende code en sla de wijzigingen op.

<cq:include path="toolbar" resourceType="foundation/components/toolbar"/>

Selecteer Websites/Mijn website/Engels in de mappenstructuur van de pagina AEM Websites en klik vervolgens op Nieuw > Nieuwe pagina. Geef de volgende eigenschapswaarden op en klik op Maken:

• Titel: Werkbalk
• Sjabloon voor pagina met inhoud van mijn website selecteren

Klik in de lijst met pagina's met de rechtermuisknop op de werkbalkpagina en klik op Eigenschappen. Selecteer Verbergen in navigatie en klik op OK.

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

Maak onder Werkbalk de volgende pagina's:

• Contactpersonen
• Feedback
• Aanmelden
• Zoeken

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

In CRXDE Lite, klik /apps/mywebsite/components met de rechtermuisknop aan, creeer ​, dan creeer Component.

Gebruik het dialoogvenster om de component te configureren:

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

   • Label: zoeken
   • Titel: Mijn zoekcomponent
   • Beschrijving: Dit is mijn zoekcomponent
   • Groep: MijnWebsite

2. Klik op Volgende. Klik nogmaals op Volgende.

3. Klik in het deelvenster Toegestane bovenliggende elementen op de knop + en typ */parsys .

4. Klik op Volgende en vervolgens op OK.

Klik op Alles opslaan.

Kopieer de volgende knooppunten en plak deze naar apps/mywebsite/components/search node:

• /libs/foundation/components/search/dialog

• "/libs/foundation/components/search/i18n

• /libs/foundation/components/search/icon.png

Klik op Alles opslaan.

Open het /apps/mywebsite/components/search/search.jsp -bestand.

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}"/></code></a>
                  </c:forEach>
              </div>
          </c:if>
          <c:if test="${result.facets.languages.containsHit}">
              <p>Languages</p>
              <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                  <c:choose>
                      <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.tags.containsHit}">
              <p>Tags</p>
              <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                  <c:if test="${tag != null}">
                      <c:set var="label" value="${tag.title}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:if>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.mimeTypes.containsHit}">
              <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
              <p>File types</p>
              <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value="${fileTypes[bucket.value]}"/>
                  <c:choose>
                      <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.lastModified.containsHit}">
              <p>Last Modified</p>
              <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                  <c:choose>
                      <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>

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

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

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

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

Sla de wijzigingen op.

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

%><div class="left">

Neem de volgende code vóór op die lijn:

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

Zoek de volgende coderegel:

<div>search</div>

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>

Laad de pagina Producten in uw browser opnieuw. De zoekcomponent ziet er als volgt uit:

Open de zoekpagina in uw browser.

Klik in de Sidekick op het pictogram van de ontwerpmodus.

Klik op Bewerken in het ontwerpblok van het par-blok (onder de titel Zoeken).

In de dialoog, scrol neer aan de Mijn Groep van Websites, selecteer Mijn Component van het Onderzoek, en klik O.K..

Klik in de Sidekick op het driehoekje om terug te keren naar de bewerkingsmodus.

Sleep de Mijn Component van het Onderzoek van de Sidekick in het parsys kader. Het ziet er als volgt uit:

Navigeer naar de pagina Producten. Zoek naar klanten in de invoerdoos en druk binnengaan. U wordt omgeleid naar de zoekpagina. Overschakelen naar voorvertoningsmodus: de uitvoer heeft een indeling die vergelijkbaar is met de volgende:

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" />

Sla de wijzigingen op.

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