Show Menu
ARGOMENTI×

Aggiungi Clientlibs

Aggiungere una ClientLibraryFolder (clientlibs)

Create una ClientLibraryFolder denominata clientlibs che conterrà i file JS e CSS utilizzati per il rendering delle pagine del sito.
Il valore della categories proprietà dato 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 , espandete /etc/designs
  2. Fare clic con il pulsante destro del mouse an-scf-sandbox e selezionare Create Node
    • Nome: clientlibs
    • Tipo: cq:ClientLibraryFolder
  3. Fai clic su OK
Nella scheda Proprietà del nuovo clientlibs nodo, immettere la categories proprietà:
  • Nome: categorie
  • Tipo: Stringa
  • Valore: apps.an-scf-sandbox
  • Fate clic su Aggiungi
  • Fate clic su Salva tutto
Nota: anteprima del valore delle categorie con 'app'. è una convenzione per identificare l'applicazione proprietaria come nella cartella /apps, non /libs. IMPORTANTE: Aggiungere segnaposto js.txt e css.txt file. (non è ufficialmente una cq:ClientLibraryFolder senza di esse.)
  1. Clic destro /etc/designs/an-scf-sandbox/clientlibs
  2. Seleziona Crea file...
  3. Enter Name : css.txt
  4. Seleziona Crea file...
  5. Enter Name : js.txt
  6. Fate clic su Salva tutto
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 clientlibs nodo, immettere la proprietà String embed con più valori. 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.
Notate che questo potrebbe essere l'approccio desiderato 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 della funzionalità, 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> apre 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
  • Fate clic su Salva tutto
Questo è il modo in cui /etc/designs/an-scf-sandbox/clientlibs dovrebbe essere visualizzato nella directory archivio:

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:
Una volta inclusi i clientlibs apps.an-scf-sandbox, il componente dei commenti SCF appare formattato:
L'istruzione include appartiene alla variabile della sezione script. L'impostazione predefinita foundation head.jsp 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. Fate clic con il pulsante destro del mouse e selezionate Copia (oppure selezionate Copia dalla barra degli strumenti)
  3. Seleziona /apps/an-scf-sandbox/components/playpage
  4. Fate clic con il pulsante destro del mouse e selezionate Incolla (oppure selezionate Incolla dalla barra degli strumenti)
  5. Fare doppio clic headlibs.jsp per aprirlo
  6. Aggiungi la riga seguente alla fine del file
    <ui:includeClientLib categories="apps.an-scf-sandbox"/>
  7. Fate 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.

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 Crea una pagina di esempio per coloro che non vedono l’ora di iniziare a riprodurre il pacchetto...
Per creare un pacchetto:
  • Da CRXDE Lite , fate clic sull'icona Pacchetto
  • Fate 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
    • Seleziona filtri , scheda
      • Fate clic su Aggiungi filtro
      • Percorso directory principale: <Browse to /apps/an-scf-sandbox >
      • Fate clic su Fine
      • Fate clic su Aggiungi filtro
      • Percorso directory principale: <Browse to /etc/designs/an-scf-sandbox >
      • Fate clic su Fine
      • Fate clic su Aggiungi filtro
      • Percorso directory principale: <Browse to /content/an-scf-sandbox >
      • Fate clic su Fine
    • Fai clic su Salva
  • Fate clic su Genera
Ora potete selezionare Scarica per salvarlo su disco e caricare il pacchetto altrove, nonché Altro > Replica per inviare la sandbox a un'istanza di pubblicazione localhost per espandere il realm della sandbox.