Een volledig functionele website (JSP) 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:

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

Verschillende basiscomponenten opnemen.

Klik in de boomstructuur links van CRXDE Lite met de rechtermuisknop op de knop /apps map en klik op Create > Create Folder. In de Map maken dialoogvenster, type mywebsite als mapnaam en klik op OK.

Klik met de rechtermuisknop op de knop /apps/mywebsite map en klik op Create > Create Folder. In de Create Folder dialoogvenster, type components als mapnaam en klik op OK.

Klik met de rechtermuisknop op de knop /apps/mywebsite map en klik op Create > Create Folder. In de Create Folder dialoogvenster, type templates als mapnaam en klik op OK.

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

Klik op Save All.

Klik op de AEM welkomstpagina op Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)

Selecteer in de mappenstructuur de optie Designs en klik vervolgens op New > New Page. Type mywebsite als de titel en klik op Create.

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

WebDAV gebruiken toegang tot de URL op http://localhost:4502, kopieer het voorbeeld static.css en images van het gedownloade bestand mywebsite.zip naar de /etc/designs/mywebsite map.

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

Typ in het dialoogvenster Sjabloon maken de volgende waarden en klik vervolgens 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.

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

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. Klik vervolgens op Next.

De waarde van de eigenschap allowed path is a 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 het /content en alle subpagina's.

Wanneer een auteur hieronder een pagina maakt /contentde contentpage De sjabloon wordt weergegeven in een lijst met beschikbare sjablonen.

Klikken Next in de Allowed Parents en Allowed Children deelvensters en klikken OK. Klik in CRXDE Lite op Save All.

In CRXDE Lite klikt u met de rechtermuisknop /apps/mywebsite/components en klik op Create > Component.

In de Create Component typt u de volgende eigenschapswaarden:

• Label: contentpagina
• Title: Inhoud pagina Mijn website
• Description: Dit is de inhoud van mijn 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/ deel van het pad).

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

Klikken Next tot de Allowed Children wordt weergegeven en klikt u op OK. Klik in CRXDE Lite op Save All.

De structuur ziet er nu als volgt uit:

Open het bestand in CRXDE Lite 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 */
%>

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>

Klikken Save All om uw wijzigingen op te slaan.

Op de AEM Welkomstpagina (http://localhost:4502/libs/cq/core/content/welcome.html), klikt u op Websites.

Selecteer in de mappenstructuur de optie Websites en klik vervolgens op New > New Page.

In de Create Page voert u het volgende in:

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

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

In de Create Page voert u de volgende eigenschapswaarden in en klikt u op Maken:

• Title: Engels
• Name: en
• Selecteer My Website Content Page Template

Selecteer in de mappenstructuur de optie /Websites/My Website/English pagina en klik op New > New Page.

In de Create Page voert u de volgende eigenschapwaarden in en klikt u op Create:

• Title: Producten
• Selecteer My Website Content Page Template

Selecteer in de mappenstructuur de optie /Websites/My Website/English pagina en klik op New > New Page.

In de Create Page voert u de volgende eigenschapwaarden in en klikt u op Create:

• Titel: Services
• Selecteer My Website Content Page Template

Selecteer in de mappenstructuur de optie /Websites/My Website/English pagina en klik op New > New Page.

In de Create Page voert u de volgende eigenschapwaarden in en klikt u op Create:

• Titel: Klanten
• Selecteer My Website Content Page Template

Uw structuur ziet er als volgt uit:

Als u uw pagina's wilt koppelen aan het mywebsite-ontwerp, selecteert u in CRXDE Lite de optie /content/mywebsite/en/jcr:content knooppunt. Op de Properties typt u de volgende waarden voor een nieuwe eigenschap en klikt u op Toevoegen:

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

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

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

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

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

   • Name: sling:resourceSuperType
   • Type: String
   • Value: basis/componenten/pagina

3. Klik op Save All.

Open de 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 in uw browser de Products pagina. Het ziet er als volgt uit:

Open de paginabron om de elementen javascript en HTML te zien die de scripts head.jsp en body.jsp genereerden. 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
             });

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

1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpageselecteert u vervolgens Create dan Create File.
2. Typ in het venster left.jsp als de ​ Naam en klik op OK.

Het bestand bewerken left.jsp om de bestaande inhoud te verwijderen en door de volgende code te vervangen:

<%@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 in CRXDE Lite center.jsp krachtens /apps/mywebsite/components/contentpage:

1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage, selecteert u Create vervolgens Create File.
2. Typ in het dialoogvenster center.jsp als Name en klik op OK.

Het bestand bewerken center.jsp om de bestaande inhoud te verwijderen en te vervangen 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 in CRXDE Lite right.jsp krachtens /apps/mywebsite/components/contentpage:

1. Klik met de rechtermuisknop op het knooppunt /apps/mywebsite/components/contentpage, selecteert u Create vervolgens Create File.
2. Typ in het dialoogvenster right.jsp als Name en klik op OK.

Het bestand bewerken right.jsp om de bestaande inhoud te verwijderen en door de volgende code te vervangen:

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

Sla de wijzigingen op.

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

Het bestand bewerken body.jsp om de bestaande inhoud te verwijderen en door de volgende code te vervangen:

<%@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 in uw browser de Products pagina. Het ziet er als volgt uit:

In CRXDE Lite klikt u met de rechtermuisknop /apps/mywebsite/components, selecteert u Create vervolgens Create Component.

In de Create Component voert u het volgende in:

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

Klikken Next totdat u naar het laatste venster komt waar u klikt OK. Sla uw wijzigingen op.

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

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 body.jsp krachtens /apps/mywebsite/components/contentpageen vervangen:

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

met:

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

Sla de wijzigingen op.

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

Open in uw browser de Products pagina.

Op de Sidetrap Page tabblad, klikt u op Page Properties.

Op de Basic tabblad van het dialoogvenster uitvouwen More Titles and Description en voor de Subtitle eigenschap, type what we do. Klik op OK.

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

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

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

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

De verkoop stemt met dit pad overeen met /content/mywebsite/en/products knooppunt.

De schuifregelaar bepaalt de sling:resourceType van dit knooppunt dat moet worden mywebsite/components/contentpage.

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

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

<%=child.getTitle() %>

Vervang de ankerinhoud door de volgende code:

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

Sla de wijzigingen op.

Klik met de rechtermuisknop op de knop /apps/mywebsite/components/contentpage knoop en klik Create > Create File.

In de Create File venster, als Name, type navimage.png.java.

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.

De volgende code kopiëren naar navimage.png.java.De code breidt de klasse AbstractImageServlet uit:

• AbstractImageServlet Maakt een ImageContext-object dat de eigenschappen van de huidige bron opslaat.
• De bovenliggende pagina van de bron wordt geëxtraheerd uit het ImageContext-object. De paginatitel en -ondertitel worden vervolgens opgehaald.
• ImageHelper wordt gebruikt om de afbeelding te genereren op basis van het bestand navimage_bg.jpg van het siteontwerp, de paginatitel en de subtitel 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;
     }
 }

Sla de wijzigingen op.

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

In de mapstructuur van het dialoogvenster Websites pagina, selecteert u de Websites/My Website/English/Products item en klik op New > New Page.

Voer in het dialoogvenster de volgende eigenschapwaarden in en klik op Create:

• Title: Product 1.
• Name: product1.
• Selecteer My Website Content Page Template

Maak een andere pagina onder Producten met de volgende eigenschapswaarden:

• Title: Product 2
• Name: product2
• Selecteer My Website Content Page Template

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

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

2. In de Properties voert u de volgende waarden in:

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

3. Klik op Add.

4. In de Properties kunt u een andere eigenschap maken met de volgende waarden:

   • Name: date
   • Type: String
   • Value: 02/14/2008
   • Klik op Add.

5. Klik op Save All.

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

1. Selecteer /content/mywebsite/en/products/product2/jcr:content knooppunt.

2. In de Properties voert u de volgende waarden in:

   • Name: jcr:beschrijving
   • Type: String
   • 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: String
   • Value: 05/11/2012
   • Klik op Add.

5. Klik op Save All.

In CRXDE Lite klikt u met de rechtermuisknop /apps/mywebsite/components, selecteert u Create vervolgens Create Component.

Voer in het dialoogvenster de volgende eigenschapwaarden in en klik op Next:

• Label: listchildren.
• Title: Mijn component Listchildren.
• Description: Dit is de component My Listchildren.

Doorgaan met klikken Next tot de Allowed Children wordt weergegeven en klikt u op OK.

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

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

Sla de wijzigingen op.

Maak het dialoogknooppunt onder de component listchildren:

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

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

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

Met de volgende eigenschappen:

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

In de Properties tabblad, wijzigt u de waarde van de optie title eigenschap aan List Children

Selecteer tab1 knoop en klik Create > Create Node voert u de volgende eigenschapwaarden in en klikt u op OK:

• Name: items
• Type: cq:WidgetCollection

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

• Name: 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. Als u klaar bent, klikt u op Save All.

Open het bestand in CRXDE Lite left.jsp krachtens /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 in uw browser de Products pagina. De component listchildren ziet er als volgt uit:

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:

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

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.

Klik op Volgende totdat u het laatste deelvenster van het dialoogvenster bereikt en klik vervolgens op OK.

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

De volgende code maakt de koppeling naar de homepage van de site en voegt een verwijzing naar de logoafbeelding toe. De code kopiëren 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 met de rechtermuisknop op de knop /apps/mywebsite/components/logo knoop en klik Create > Create Dialog.

2. Typ de volgende eigenschapwaarden en klik vervolgens op OK:

   • Label design_dialog
   • Title Logo (Design)

Klik met de rechtermuisknop op het knooppunt tab1 in de vertakking design_dialog en klik op Verwijderen. Klik op Save All.

Onder de design_dialog/items/itemsknooppunt, nieuw knooppunt maken met de naam img van het type cq:Widget. Voeg de volgende eigenschappen toe en klik vervolgens op Save All:

Open in CRXDE Lite de left.jsp krachtens /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 in uw browser de Products pagina. Het logo ziet er als volgt uit, hoewel momenteel alleen de onderliggende koppeling zichtbaar is:

Met de Products pagina geopend in uw browser, klik Design knop onder aan Sidetrap om in te voeren Design in.

Klik in de balk Ontwerpen van het logo op Edit om het dialoogvenster te gebruiken voor het bewerken van de instellingen voor de logocomponent.

Klik in het dialoogvenster in het deelvenster Image tabblad, bladeren naar de logo.png afbeelding die u uit het mywebsite.zip en klik op OK.

Klik op het driehoekje op de titelbalk van de schoppen om terug te keren naar Edit in.

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, opent u het bestand center.jsp en vervangen:

<div>trail</div>

met:

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

Sla de wijzigingen op.

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

Blader in CRXDE Lite naar /apps/mywebsite/components/contentpage, opent u het bestand center.jsp en vervangen:

<div>title</div>

met:

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

Sla de wijzigingen op.

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

Blader in CRXDE Lite naar /apps/mywebsite/components/contentpage, opent u 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 Products pagina. Het heeft nu de parsys component, die als volgt wordt gezien:

Klik met de rechtermuisknop op de knop /apps/mywebsite/components/logo knoop en klik Copy.

Klik met de rechtermuisknop op de knop /apps/mywebsite/components knoop en klik Paste.

Klik met de rechtermuisknop op de knop Copy of logo knooppunt, klikken Rename, bestaande tekst en tekst verwijderen image.

Selecteer image componentknooppunt en wijzig de volgende eigenschapswaarden:

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

Een eigenschap toevoegen aan de image knooppunt met de volgende eigenschapswaarden:

• Name: componentGroup
• Type: String
• Value: MyWebsite

Onder de image knooppunt, naam wijzigen design_dialog knooppunt naar dialog.

Naam wijzigen logo.jsp tot image.jsp.

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

Open /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 nieuw knooppunt:

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

Maak onder het knooppunt cq:editConfig als volgt een nieuw knooppunt:

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

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

• Name: afbeelding.
• Type: nt:ongestructureerd.

In CRXDE stelt u de eigenschappen als volgt in:

Laad in uw browser de Products pagina.

Klik op de knop Design mode pictogram.

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

In het dialoogvenster wordt een lijst met Allowed Components wordt getoond; navigeren naar MyWebsite, selecteert u de My Image Component en klik op OK.

Terug naar Edit mode.

Dubbelklik op het parsys-frame (ingeschakeld) Drag components or assets here). De Insert New Component en Sidekick kiezers zien er als volgt uit:

Navigeer in CRXDE Lite naar /apps/mywebsite/components/contentpage, opent u de body.jsp 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 in de mappenstructuur van de pagina AEM websites de optie Websites/My Website/Englishen klik vervolgens op New > New Page. Geef de volgende eigenschapswaarden op en klik op Maken:

• Title: Werkbalk
• Selecteer My Website Content Page Template

Klik in de lijst met pagina's met de rechtermuisknop op de knop Toolbar pagina en klik op Properties. Selecteer Hide In Navigation en klik op OK.

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

Onder Toolbar, maak de volgende pagina's:

• Contactpersonen
• Feedback
• Aanmelden
• Zoeken

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

In CRXDE Lite klikt u met de rechtermuisknop /apps/mywebsite/components, selecteert u Create vervolgens Create Component.

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. Klikken Next en klik vervolgens op Next opnieuw.

3. Op de Allowed Parents klikt u op de knop + knop en type */parsys.

4. Klikken Next en klik vervolgens op OK.

Klik op Save All.

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

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

Klik op Save All.

Open de /apps/mywebsite/components/search/search.jsp bestand.

De volgende code kopiëren 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>

Sla de wijzigingen op.

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

%><div class="left">

De volgende code invoegen voor die regel:

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

Open in uw browser de Zoeken pagina.

Klik op de knop Design moduspictogram.

Klik in het ontwerpblok van het par-blok (onder de zoektitel) op Edit.

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

Klik in Sidetrap op het driehoekje om terug te keren naar Edit in.

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

Ga naar uw Products pagina. Zoek klanten in het invoervak en druk op Enter. U wordt omgeleid naar de Search pagina. Overschakelen op Preview modus: de uitvoer heeft een vergelijkbare indeling als de volgende:

Navigeer in CRXDE Lite naar /apps/mywebsite/components/contentpage, opent u het bestand right.jsp en vervangen:

<div>iparsys</div>

met:

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

Sla de wijzigingen op.

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