Aggiungi Clientlibs

Aggiungere una ClientLibraryFolder (clientlibs)

Create una ClientLibraryFolder denominata clientlibsche conterrà i file JS e CSS utilizzati per il rendering delle pagine del sito.

Il valore della proprietà categoriesdata a questa libreria client è l'identificatore utilizzato per includere direttamente questa clientlib da una pagina di contenuto o per incorporarla in altri clientlibs.

  1. Utilizzando CRXDE Lite, espandere /etc/designs

  2. Fare clic con il pulsante destro del mouse su an-scf-sandbox e selezionare Create Node

    • Nome: clientlibs
    • Tipo: cq:ClientLibraryFolder

  3. Fai clic su OK

chlimage_1-220

Nella scheda Proprietà per il nuovo nodo clientlibs, immettere la proprietà categories:

  • Nome: categorie
  • Tipo: String
  • Valore: apps.an-scf-sandbox
  • Fate clic su Aggiungi
  • Fare clic su Salva tutto

Nota: visualizzazione in anteprima del valore delle categorie con 'app'. è una convenzione per identificare l'applicazione proprietaria come nella cartella /apps, non /libs. IMPORTANTE: Aggiungere file segnaposto js.txt e css.txt. (non è ufficialmente una cq:ClientLibraryFolder senza di esse.)

  1. Fare clic con il pulsante destro del mouse su /etc/designs/an-scf-sandbox/clientlibs

  2. Selezionare Crea file…

  3. Immettere Nome: css.txt

  4. Selezionare Crea file…

  5. Immettere Nome: js.txt

  6. Fare clic su Salva tutto

chlimage_1-221

La prima riga di css.txt e js.txt identifica la posizione di base dalla quale si trovano i seguenti elenchi di file.

Provate a impostare il contenuto di css.txt su:

#base=.
 style.css

Quindi create un file in clientlibs denominato style.css e impostate il contenuto su:

body {

background-color: #b0c4de;

}

Incorpora client SCF

Nella scheda Proprietà del nodo clientlibs, immettere la proprietà String multi-valore embed. In questo modo verranno incorporate le librerie lato client (clientlibs) necessarie per i componenti SCF. Per questa esercitazione verranno aggiunti molti dei clientlibs necessari per i componenti Community.

Si noti che questo potrebbe essere o meno l'approccio desiderato da utilizzare per un sito di produzione, in quanto vi sono considerazioni di convenienza rispetto alla dimensione/velocità dei clientlibs scaricati per ogni pagina.

Se si utilizza una sola funzione su una pagina, è possibile includere direttamente sulla pagina la clientlib completa di tale funzione, ad esempio, <% ui:includeClientLib category=cq.social.hbs.forum" %>

In questo caso, li includiamo tutti, e quindi preferiremmo i più basilari clientlibs SCF che sono gli autori clientlibs:

  • Nome: embed

  • Tipo: String

  • Clic Multi

  • Valore: cq.social.scf

    <enter> verrà visualizzata una finestra di dialogo

    Fate clic [+]​dopo ogni voce per aggiungere le seguenti categorie clientlib:

    • 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
    • Fai clic su OK

  • Fare clic su Salva tutto

chlimage_1-222

Questo è il modo in cui /etc/designs/an-scf-sandbox/clientlibs dovrebbe ora apparire nella directory archivio:

chlimage_1-223

Includi Clientlibs nel modello PlayPage

Senza includere la categoria apps.an-scf-sandbox ClientLibraryFolder nella pagina, i componenti SCF non funzioneranno né saranno formattati in quanto non saranno disponibili i JavaScript e gli stili necessari.

Ad esempio, senza includere i clientlibs, il componente Commenti SCF appare privo di stile:

chlimage_1-224

Una volta inclusi i clientlibs apps.an-scf-sandbox, il componente dei commenti SCF appare formattato:

chlimage_1-225

L'istruzione include appartiene alla sezione <head> dello script <html>. L'elemento foundation head.jsp predefinito include uno script che può essere sovrapposto: headlibs.jsp.

Copiate headlibs.jsp e includete clientlibs:

  1. Utilizzando CRXDE Lite, selezionare /libs/foundation/components/page/headlibs.jsp

  2. Fare clic con il pulsante destro del mouse e selezionare Copia (oppure selezionare Copia dalla barra degli strumenti)

  3. Seleziona /apps/an-scf-sandbox/components/playpage

  4. Fare clic con il pulsante destro del mouse e selezionare Incolla (oppure selezionare Incolla dalla barra degli strumenti)

  5. Fare doppio clic su headlibs.jsp per aprirlo

  6. Aggiungi la riga seguente alla fine del file

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

  7. Fare clic su Salva tutto

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

Caricate il sito Web nel browser e verificate se lo sfondo non è blu.

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

chlimage_1-226

Salvataggio del lavoro fino ad ora

A questo punto, esiste una sandbox minimalista, e potrebbe essere utile salvarla come pacchetto in modo che, durante la riproduzione, se il repository diventa danneggiato e si desidera ricominciare, è possibile spegnere il server, rinominare o eliminare la cartella crx-quickstart/, attivare il server, caricare e installare questo pacchetto salvato, e non dover ripetere questi passaggi fondamentali.

Questo pacchetto è disponibile nell'esercitazione Create a Sample Page per coloro che non possono aspettare di passare a un'azione e iniziare la riproduzione!..

Per creare un pacchetto:

  • Da CRXDE Lite, fare clic sull'icona Pacchetto

  • Fare clic su Crea pacchetto

    • Nome pacchetto: an-scf-sandbox-minimal-pkg
    • Versione: 0.1
    • Gruppo: <lasciare come predefinito>
    • Fai clic su OK

  • Fai clic su Modifica

    • Selezionare la scheda Filtri

      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /apps/an-scf-sandbox
      • Fare clic su Fine
      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /etc/designs/an-scf-sandbox
      • Fare clic su Fine
      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /content/an-scf-sandbox
      • Fare clic su Fine

    • Fai clic su Salva

  • Fare clic su Build

Ora potete selezionare Scarica per salvarlo su disco e Carica pacchetto altrove, nonché selezionare Altro > Replica per inviare la sandbox a un'istanza di pubblicazione localhost per espandere l'area di autenticazione della sandbox.

In questa pagina