Le esperienze digitali si basano fortemente sull’elaborazione lato client basata su codice JavaScript e CSS complessi. AEM librerie lato client (clientlibs) consentono di organizzare e archiviare centralmente queste librerie lato client all’interno dell’archivio. Accoppiato con il processo di compilazione front-end nell’archetipo AEM progetto, la gestione del codice front-end per il progetto AEM diventa semplice.
I vantaggi dell'utilizzo di clientlibs in AEM includono:
Clientlibs è la soluzione incorporata per la distribuzione di CSS e Javascript da AEM.
Anche gli sviluppatori front-end che creano CSS e JavaScript per progetti AEM devono acquisire familiarità con i AEM Project Archetype e il relativo processo di creazione front-end automatizzato.
I siti richiedono JavaScript e CSS, nonché risorse statiche come icone e font web da elaborare lato client. Una clientlib è AEM meccanismo di riferimento (se necessario per categoria) e di distribuzione di tali risorse.
AEM raccoglie i CSS e JavaScript del sito in un singolo file, in una posizione centrale, per garantire che nell’output di HTML sia inclusa una sola copia di qualsiasi risorsa. Questo ottimizza l'efficienza della distribuzione e consente di mantenere tali risorse a livello centrale nell'archivio tramite proxy, mantenendo l'accesso sicuro.
Tutti i file JavaScript, CSS e altre risorse front-end devono essere mantenuti in modulo ui.frontend dell’Archetipo di progetto AEM. La flessibilità dell’archetipo ti consente di utilizzare i tuoi moderni strumenti web di scelta per creare e gestire queste risorse.
L’archetipo può quindi compilare le risorse in file CSS e JS singoli, incorporandole automaticamente in un cq:clientLibraryFolder
nel repository.
Una cartella libreria lato client è un nodo del repository di tipo cq:ClientLibraryFolder
. La sua definizione Notazione CND è
[cq:ClientLibraryFolder] > sling:Folder
- dependencies (string) multiple
- categories (string) multiple
- embed (string) multiple
- channels (string) multiple
cq:ClientLibraryFolder
i nodi possono essere posizionati in qualsiasi punto /apps
sottostruttura dell’archivio.categories
proprietà del nodo per identificare le categorie della libreria a cui appartiene.Ogni cq:ClientLibraryFolder
viene popolato con un set di file JS e/o CSS, insieme ad alcuni file di supporto (vedi di seguito). Proprietà importanti del cq:ClientLibraryFolder
sono configurati come segue:
allowProxy
: Poiché tutte le clientlib devono essere memorizzate in apps
, questa proprietà consente l'accesso alle clientlibrerie tramite il servlet proxy. Vedi Individuazione di una cartella della libreria client e utilizzo del servlet delle librerie client proxy sotto.categories
: Identifica le categorie in cui il set di file JS e/o CSS all’interno di questo cq:ClientLibraryFolder
cadere. La categories
, con più valori, consente a una cartella libreria di far parte di più di una categoria (consulta di seguito per informazioni su come ciò possa essere utile).Se la cartella della libreria client contiene uno o più file di origine che, in fase di runtime, vengono uniti in un singolo file JS e/o CSS. Il nome del file generato è il nome del nodo con il .js
o .css
estensione del nome file. Ad esempio, il nodo della libreria denominato cq.jquery
restituisce il file generato denominato cq.jquery.js
o cq.jquery.css
.
Le cartelle della libreria client contengono i seguenti elementi:
js.txt
file e/o uno css.txt
file che identificano i file di origine da unire nei file JS e/o CSS generatiLe librerie client devono trovarsi in /apps
. Questo per isolare meglio il codice dal contenuto e dalla configurazione.
Per le librerie client in /apps
per essere accessibile, viene utilizzato un servlet proxy. Le ACL sono ancora applicate nella cartella della libreria client, ma il servlet consente la lettura del contenuto tramite /etc.clientlibs/
se allowProxy
è impostata su true
.
https://<host>:<port>/crx/de
)./apps
e fai clic su Crea > Crea nodo.cq:ClientLibraryFolder
. Fai clic su OK quindi fai clic su Salva tutto.cq:ClientLibraryFolder
, aggiungi la seguente proprietà, quindi fai clic su Salva tutto:
categories
/etc.clientlibs
, seleziona cq:ClientLibraryFolder
, aggiungi la seguente proprietà, quindi fai clic su Salva tutto:
allowProxy
true
resources
nella cartella della libreria client.
resources
, non possono essere referenziati in un'istanza di pubblicazione.js.txt
: Usa questo nome file per generare un file JavaScript.css.txt
: Utilizzare questo nome file per generare un foglio di stile a cascata.#base=*[root]*
[root]
con il percorso della cartella che contiene i file di origine, relativo al file TXT. Ad esempio, utilizzare il testo seguente quando i file di origine si trovano nella stessa cartella del file TXT:
#base=.
cq:ClientLibraryFolder
nodo:
#base=mobile
#base=[root]
, digita i percorsi dei file di origine relativi alla radice. Posizionare ogni nome di file su una riga separata.Una volta che la cartella della libreria client è configurato come richiesto, le clientlibs possono essere richieste tramite proxy. Ad esempio:
/apps/myproject/clientlibs/foo
/apps/myprojects/clientlibs/foo/resources/icon.png
La allowProxy
La proprietà ti consente di richiedere:
/etc.clientlibs/myprojects/clientlibs/foo.js
/etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png
Una volta archiviate e gestite correttamente le clientlibs nella cartella della libreria client, è possibile accedervi tramite HTL.
Le librerie client vengono caricate tramite un modello helper fornito da AEM, accessibile tramite data-sly-use
. In questo file sono disponibili modelli helper, che possono essere richiamati tramite data-sly-call
.
Ogni modello helper richiede un’opzione categories
per fare riferimento alle librerie client desiderate. Tale opzione può essere una matrice di valori stringa o una stringa contenente un elenco di valori separati da virgola.
Consulta la documentazione HTL per ulteriori informazioni sul caricamento di clientlibs tramite HTL.
La maggior parte dei clientlibs sarà necessaria sull'istanza di pubblicazione AEM. In altre parole, lo scopo della maggior parte dei clientlibs è quello di produrre l'esperienza dell'utente finale del contenuto. Per le clientlibs sulle istanze di pubblicazione, strumenti di compilazione front-end può essere utilizzato e distribuito tramite cartelle della libreria client come descritto sopra.
In alcuni casi, tuttavia, le librerie client potrebbero essere necessarie per personalizzare l’esperienza di authoring. Ad esempio, per personalizzare una finestra di dialogo potrebbe essere necessario distribuire piccoli bit di CSS o JS nell’istanza di authoring AEM.
Se devi utilizzare le librerie client su autore, puoi creare le librerie client in /apps
utilizzando gli stessi metodi di pubblicazione, ma scrivili direttamente in /apps/.../clientlibs/foo
invece di creare un intero progetto per gestirlo.
Puoi quindi eseguire l’"hook" nel JS di authoring aggiungendo le librerie client a una categoria preconfigurata della libreria client.
AEM fornisce diversi strumenti per il debug e il test delle cartelle della libreria client.
La /libs/cq/granite/components/dumplibs/dumplibs
component genera una pagina di informazioni su tutte le cartelle della libreria client sul sistema. La /libs/granite/ui/content/dumplibs
il componente è impostato come tipo di risorsa. Per aprire la pagina, utilizza il seguente URL (modificando l’host e la porta come richiesto):
https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html
Le informazioni includono il percorso e il tipo della libreria (CSS o JS) e i valori degli attributi della libreria, ad esempio categorie e dipendenze. Le tabelle successive nella pagina mostrano le librerie in ogni categoria e canale.
La dumplibs
il componente include un selettore di test che visualizza il codice sorgente generato per ui:includeClientLib
tag. La pagina include il codice per diverse combinazioni di attributi js, css e a tema.
dumplibs.html
, fai clic sul collegamento nel Fai clic qui per il test dell’output testo.http://<host>:<port>/libs/granite/ui/content/dumplibs.html
categories
e fai clic su Invia query.Sono disponibili numerose altre funzioni supportate dalle cartelle della libreria client in AEM. Tuttavia, questi non sono richiesti su AEM as a Cloud Service e come tale il loro uso è scoraggiato. Sono elencati qui per completezza.
Queste funzioni aggiuntive delle cartelle della libreria client non sono necessarie in AEM as a Cloud Service e pertanto il loro utilizzo è scoraggiato. Sono elencati qui per completezza.
È possibile controllare altre impostazioni della libreria client tramite Adobe Granite HTML Library Manager pannello della console di sistema in https://<host>:<port>/system/console/configMgr
).
Ulteriori proprietà della cartella includono consentire il controllo di dipendenze e incorporamenti, ma in genere non sono più necessarie e il loro utilizzo non è consigliato:
dependencies
: Elenco di altre categorie della libreria client da cui dipende la cartella della libreria. Ad esempio, due cq:ClientLibraryFolder
nodes F
e G
, se un file in F
richiede un altro file in G
per funzionare correttamente, almeno una delle categories
di G
devono essere tra i dependencies
di F
.embed
: Utilizzato per incorporare il codice da altre librerie. Se nodo F
nodi di incorporamento G
e H
, il HTML risultante sarà una concatenazione di contenuto dai nodi G
e H
.Quando il codice nella cartella della libreria client fa riferimento ad altre librerie, identifica le altre librerie come dipendenze. La ui:includeClientLib
Se si fa riferimento alla cartella della libreria client, il codice HTML include un collegamento al file della libreria generato e alle dipendenze.
Le dipendenze devono essere un'altra cq:ClientLibraryFolder
. Per identificare le dipendenze, aggiungi una proprietà al tuo cq:ClientLibraryFolder
con i seguenti attributi:
Ad esempio, il /etc/clientlibs/myclientlibs/publicmain
dipende da cq.jquery
libreria. La pagina che fa riferimento alla libreria client principale genera HTML che include il seguente codice:
<script src="/etc/clientlibs/foundation/cq.jquery.js" type="text/javascript">
<script src="/etc/clientlibs/mylibs/publicmain.js" type="text/javascript">
Puoi incorporare il codice da una libreria client in un'altra libreria client. In fase di runtime, i file JS e CSS generati dalla libreria di incorporamento includono il codice della libreria incorporata.
L'incorporamento del codice è utile per fornire l'accesso alle librerie memorizzate nelle aree protette dell'archivio.
È consigliabile mantenere tutti i file relativi all’applicazione nella cartella dell’applicazione sottostante /app
. È inoltre consigliabile negare l’accesso ai visitatori del sito web /app
cartella. Per soddisfare entrambe le best practice, crea una cartella della libreria client sotto la /etc
cartella che incorpora la libreria client riportata di seguito /app
.
Utilizzare la proprietà categories per identificare la cartella della libreria client da incorporare. Per incorporare la libreria, aggiungi una proprietà all'incorporamento cq:ClientLibraryFolder
utilizzando i seguenti attributi di proprietà:
cq:ClientLibraryFolder
nodo da incorporare.In alcuni casi, potresti riscontrare che il HTML finale generato per la pagina tipica dall’istanza di pubblicazione include un numero relativamente elevato di <script>
elementi.
In questi casi, può essere utile combinare tutto il codice della libreria client richiesto in a un singolo file in modo che il numero di richieste avanti e indietro al caricamento della pagina venga ridotto. Per fare questo puoi embed
le librerie richieste nella libreria client specifica dell’app tramite la proprietà embed della cq:ClientLibraryFolder
nodo.
Quando incorpori file CSS, il codice CSS generato utilizza percorsi verso risorse relative alla libreria di incorporamento. Ad esempio, la libreria accessibile al pubblico /etc/client/libraries/myclientlibs/publicmain
incorpora /apps/myapp/clientlib
libreria client:
La main.css
il file contiene lo stile seguente:
body {
padding: 0;
margin: 0;
background: url(images/bg-full.jpg) no-repeat center top;
width: 100%;
}
Il file CSS che publicmain
node genera contiene il seguente stile, utilizzando l’URL dell’immagine originale:
body {
padding: 0;
margin: 0;
background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
width: 100%;
}
Per tracciare l'origine del codice incorporato o per garantire che le librerie client incorporate producano i risultati previsti, puoi vedere i nomi dei file che vengono incorporati in fase di esecuzione. Per visualizzare i nomi dei file, aggiungi il debugClientLibs=true
all'URL della pagina web. La libreria generata contiene @import
istruzioni invece del codice incorporato.
Nell'esempio precedente Incorporazione Di Codice Da Altre Librerie la sezione /etc/client/libraries/myclientlibs/publicmain
la cartella della libreria client incorpora /apps/myapp/clientlib
cartella della libreria client. L'aggiunta del parametro alla pagina web produce il seguente collegamento nel codice sorgente della pagina web:
<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">
Apertura publicmain.css
il file rivela il seguente codice:
@import url("/apps/myapp/clientlib/styles/main.css");
?debugClientLibs=true
AEM consente preprocessori inseribili e navi con supporto per Compressore YUI per CSS e JavaScript e Google Closure Compiler (GCC) per JavaScript con YUI impostato come preprocessore predefinito AEM.
I preprocessori inseribili consentono un utilizzo flessibile, tra cui:
Per impostazione predefinita, AEM utilizza il compressore YUI. Consulta la sezione Documentazione GitHub del compressore YUI per un elenco dei problemi noti. Il passaggio al compressore GCC per particolari clientlibs può risolvere alcuni problemi osservati quando si utilizza YUI.
Non inserire una libreria minimizzata in una libreria client. Fornisci invece la libreria non elaborata e, se è necessaria la minimizzazione, utilizza le opzioni dei preprocessori.
Puoi scegliere di configurare la configurazione dei preprocessori per clientlibrary o a livello di sistema.
cssProcessor
e jsProcessor
sul nodo clientlibraryUna configurazione preprocessore sul nodo clientlib ha la precedenza sulla configurazione OSGI.
config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;
cssProcessor: ["default:none", "min:yui"]
jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]
jsProcessor: [
"default:typescript",
"min:typescript",
"min:gcc;obfuscate=true"
]
failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")
Per ulteriori dettagli sulle opzioni GCC, consulta la sezione Documentazione GCC.
YUI è impostato come minificatore predefinito in AEM. Per modificare questo valore in GCC, segui questi passaggi.
http://<host>:<portY/system/console/configMgr
)min:gcc
.
min:gcc;obfuscate=true
.