Clientlibs toevoegen

Een ClientLibraryFolder (clientlibs) toevoegen

Maak een ClientLibraryFolder met de naam clientlibsdie de JS en CSS bevat die worden gebruikt om de pagina's van uw site weer te geven.

De categorieseigenschapswaarde die aan deze cliëntbibliotheek wordt gegeven is het herkenningsteken dat wordt gebruikt om deze cliënt van een inhoudspagina direct te omvatten of het in andere clientlibs in te bedden.

Vouw /etc/designs uit met CRXDE Lite
Klik met de rechtermuisknop op an-scf-sandbox en selecteer Create Node
- Naam: clientlibs
- Type: cq:ClientLibraryFolder
Klik op OK

chlimage_1-220

Voer op het tabblad Properties voor het nieuwe clientlibs-knooppunt de eigenschap categories in:

Naam: categories
Type: String
Waarde: apps.an-scf-sandbox
Klik op Add
Klik op Save All

Opmerking: De waarde voor categorieën wordt voorafgegaan door 'apps'. is een conventie om aan te geven dat de 'toepassing die eigenaar is' zich in de map /apps bevindt, niet /libs. BELANGRIJK: Voeg placeholder js.txt en css.txt dossiers toe. (Het is officieel geen cq:ClientLibraryFolder zonder hen.)

Klikken met rechtermuisknop op /etc/designs/an-scf-sandbox/clientlibs
Selecteer Create File…
Voer Name in: css.txt
Selecteer Create File…
Voer Name in: js.txt
Klik op Save All

chlimage_1-221

De eerste regel van css.txt en js.txt identificeert de basislocatie van waaruit de volgende lijsten met bestanden moeten worden gevonden.

Stel de inhoud van css.txt in op:

#base=.
 style.css

Maak vervolgens een bestand onder clientlibs met de naam style.css en stel de inhoud in op:

body {

background-color: #b0c4de;

}

SCF-clips insluiten

Voer op het tabblad Properties voor het knooppunt clientlibs de eigenschap tekenreeks met meerdere waarden embed in. Dit zal de noodzakelijke cliënt-zijbibliotheken (clientlibs) voor SCF componenten inbedden. Voor deze zelfstudie zullen we veel clientlibs toevoegen die nodig zijn voor de onderdelen van de Gemeenschappen.

Merk op dat dit al dan niet de gewenste benadering voor een productiesite kan zijn aangezien er overwegingen van gemak tegenover grootte/snelheid van de clientlibs die voor elke pagina worden gedownload zijn.

Als u slechts één functie op één pagina gebruikt, kunt u de volledige clientlib van die functie rechtstreeks op de pagina opnemen, bijvoorbeeld <% ui:includeClientLib categorieën=cq.social.hbs.forum" %>

In dit geval, sluiten wij hen allen, en zo zouden de eenvoudigere SCF clientlibs verkiezen die de auteur clientlibs zijn:

Naam: embed
Type: String
Klik op Multi
Waarde: cq.social.scf

<enter> pop-up van dialoogvenster

Klik [+]na elke ingang om de volgende cliëntlib categorieën toe te voegen:
- cq.ckeditor
- cq.social.author.hbs.comments
- cq.social.author.hbs.forum
- cq.social.author.hbs.rating
- cq.social.author.hbs.reviews
- cq.social.author.hbs.voting
- Klik op OK
Klik op Save All

chlimage_1-222

Dit is hoe /etc/designs/an-scf-sandbox/clientlibs nu in de bewaarplaats moet verschijnen:

chlimage_1-223

Clientlibs opnemen in PlayPage-sjabloon

Zonder de categorie apps.an-scf-sandbox ClientLibraryFolder op de pagina te plaatsen, zijn de SCF-componenten niet functioneel en niet opgemaakt omdat de benodigde Javascript(s) en stijl(en) niet beschikbaar zijn.

Bijvoorbeeld, zonder de clientlibs op te nemen, lijkt de SCF commentaarcomponent ongestileerd:

chlimage_1-224

Zodra apps.an-scf-sandbox clientlibs is opgenomen, wordt de SCF-commentaarcomponent vormgegeven:

chlimage_1-225

De include-instructie behoort tot de sectie <head> van het <html>-script. De standaard foundation head.jsp bevat een script dat kan worden bedekt: headlibs.jsp.

Kopieer koplibs.jsp en neem clientlibs op:

Selecteer CRXDE Lite/libs/foundation/components/page/headlibs.jsp
Klik met de rechtermuisknop en selecteer Copy (of selecteer Kopiëren in de werkbalk)
Selecteer /apps/an-scf-sandbox/components/playpage
Klik met de rechtermuisknop en selecteer Paste (of selecteer Plakken in de werkbalk)
Dubbelklik op headlibs.jsp om deze te openen
De volgende regel toevoegen aan het einde van het bestand

<ui:includeClientLib categories="apps.an-scf-sandbox"/>
Klik op Save All

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

Laad uw website in de browser en controleer of de achtergrond geen blauwe tint heeft.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

Uw werk tot nu toe opslaan

Op dit moment bestaat er een minimalistische sandbox en het kan de moeite waard zijn om op te slaan als een pakket, zodat u tijdens het afspelen, als uw reactie beschadigd raakt en u opnieuw wilt beginnen, de server kunt uitschakelen, de naam van de map crx-quickstart/ wijzigen of verwijderen, de server in kunt schakelen, uploaden en installeren van dit opgeslagen pakket en deze basisstappen niet hoeft te herhalen.

Dit pakket bevindt zich op de zelfstudie Een voorbeeldpagina maken voor diegenen die niet kunnen wachten om gewoon binnen te springen en af te spelen!..

Een pakket maken:

Van CRXDE Lite, klik het pictogram van het Pakket
Klik op Create Package
- Pakketnaam: an-scf-sandbox-minimal-pkg
- Versie: 0.1
- Groep: <Als standaard verlaten>
- Klik op OK
Klik op Edit
- Tabblad Filters selecteren
  - Klik op Add filter
  - Hoofdpad: <blader aan /apps/an-scf-sandbox>
  - Klik op Done
  - Klik op Add filter
  - Hoofdpad: <blader aan /etc/designs/an-scf-sandbox>
  - Klik op Done
  - Klik op Add filter
  - Hoofdpad: <blader aan /content/an-scf-sandbox>
  - Klik op Done
- Klik op Save
Klik op Build

Nu kunt u Download selecteren om het op schijf en Upload Package elders te bewaren, evenals More > Replicate te selecteren om de zandbak aan een localhost te duwen publiceert instantie om het domein van uw zandbak uit te breiden.