Creazione di un Cloud Service personalizzato creating-a-custom-cloud-service
Il set di Cloud Services predefinito può essere esteso con tipi di Cloud Service personalizzati. Questo consente di inserire un markup personalizzato nella pagina in modo strutturato. Questa funzione è utile principalmente per i provider di analisi di terze parti, ad esempio Google Analytics, Chartbeat e così via. I Cloud Service vengono ereditati dalle pagine padre alle pagine figlie con la possibilità di interrompere l’ereditarietà a qualsiasi livello.
-
In CRXDE Lite, creare un nodo in
/apps
:- Nome:
acs
- Tipo:
nt:folder
- Nome:
-
Crea un nodo in
/apps/acs
:- Nome:
analytics
- Tipo:
sling:Folder
- Nome:
-
Crea due nodi in
/apps/acs/analytics
:- Nome: componenti
- Tipo:
sling:Folder
e
- Nome: modelli
- Tipo:
sling:Folder
-
Fare clic con il pulsante destro del mouse su
/apps/acs/analytics/components
. Seleziona Crea… seguito da Crea componente… La finestra di dialogo visualizzata consente di specificare:- Etichetta:
googleanalyticspage
- Titolo:
Google Analytics Page
- Super Type:
cq/cloudserviceconfigs/components/configpage
- Gruppo:
.hidden
- Etichetta:
-
Fai clic due volte su Avanti e specifica:
- Elementi padre consentiti:
acs/analytics/templates/googleanalytics
Fai clic due volte su Avanti e fai clic su OK.
- Elementi padre consentiti:
-
Aggiungi una proprietà a
googleanalyticspage
:- Nome:
cq:defaultView
- Valore:
html
- Nome:
-
Creare un file denominato
content.jsp
in/apps/acs/analytics/components/googleanalyticspage
con il contenuto seguente:code language-xml <%@page contentType="text/html" pageEncoding="utf-8"%><% %><%@include file="/libs/foundation/global.jsp"%><div> <div> <h3>Google Analytics Settings</h3> <ul> <li><div class="li-bullet"><strong>accountID: </strong><br><%= xssAPI.encodeForHTML(properties.get("accountID", "")) %></div></li> </ul> </div>
-
Crea un nodo in
/apps/acs/analytics/components/googleanalyticspage/
:-
Nome:
dialog
-
Tipo:
cq:Dialog
-
Proprietà:
- Nome:
title
- Tipo:
String
- Valore:
Google Analytics Config
- Nome:
xtype
- Tipo:
String
- Valore:
dialog
- Nome:
-
-
Crea un nodo in
/apps/acs/analytics/components/googleanalyticspage/dialog
:-
Nome:
items
-
Tipo:
cq:Widget
-
Proprietà:
- Nome:
xtype
- Tipo:
String
- Valore:
tabpanel
- Nome:
-
-
Crea un nodo in
/apps/acs/analytics/components/googleanalyticspage/dialog/items
:- Nome:
items
- Tipo:
cq:WidgetCollection
- Nome:
-
Crea un nodo in
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items
:-
Nome: scheda1
-
Tipo:
cq:Panel
-
Proprietà:
- Nome:
title
- Tipo:
String
- Valore:
Config
- Nome:
-
-
Crea un nodo in
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1
:-
Nome: elementi
-
Tipo:
nt:unstructured
-
Proprietà:
-
Nome:
fieldLabel
-
Tipo: Stringa
-
Valore: ID account
-
Nome:
fieldDescription
-
Tipo:
String
-
Valore:
The account ID assigned by Google. Usually in the form UA-NNNNNN-N
-
Nome:
name
-
Tipo:
String
-
Valore:
./accountID
-
Nome:
validateOnBlur
-
Tipo:
String
-
Valore:
true
-
Nome:
xtype
-
Tipo:
String
-
Valore:
textfield
-
-
-
Copiare
/libs/cq/cloudserviceconfigs/components/configpage/body.jsp
in/apps/acs/analytics/components/googleanalyticspage/body.jsp
e modificarelibs
inapps
alla riga 34 e rendere il riferimento allo script alla riga 79 un percorso completo. -
Crea un modello in
/apps/acs/analytics/templates/
:- con Tipo risorsa =
acs/analytics/components/googleanalyticspage
- con etichetta =
googleanalytics
- con Titolo=
Google Analytics Configuration
- con allowedPath =
/etc/cloudservices/googleanalytics(/.*)?
- con allowedChildren =
/apps/acs/analytics/templates/googleanalytics
- con sling:resourceSuperType =
cq/cloudserviceconfigs/templates/configpage
(nel nodo modello, non nel nodo jcr:content) - con cq:designPath =
/etc/designs/cloudservices/googleanalytics
(in jcr:content)
- con Tipo risorsa =
-
Creare un componente:
/apps/acs/analytics/components/googleanalytics
.Aggiungi il seguente contenuto a
googleanalytics.jsp
:code language-xml <%@page import="org.apache.sling.api.resource.Resource, org.apache.sling.api.resource.ValueMap, org.apache.sling.api.resource.ResourceUtil, com.day.cq.wcm.webservicesupport.Configuration, com.day.cq.wcm.webservicesupport.ConfigurationManager" %> <%@include file="/libs/foundation/global.jsp" %><% String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{}); ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class); if(cfgMgr != null) { String accountID = null; Configuration cfg = cfgMgr.getConfiguration("googleanalytics", services); if(cfg != null) { accountID = cfg.get("accountID", null); } if(accountID != null) { %> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', '<%= accountID %>']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><% } } %>
Questo dovrebbe generare il markup personalizzato in base alle proprietà di configurazione.
-
Passare a
http://localhost:4502/miscadmin#/etc/cloudservices
e creare una pagina:- Titolo:
Google Analytics
- Nome:
googleanalytics
Tornare in CRXDE Lite e in
/etc/cloudservices/googleanalytics
aggiungere la seguente proprietà ajcr:content
:- Nome:
componentReference
- Tipo:
String
- Valore:
acs/analytics/components/googleanalytics
- Titolo:
-
Passare alla pagina Servizio appena creata (
http://localhost:4502/etc/cloudservices/googleanalytics.html
) e fare clic su + per creare una configurazione:- Configurazione padre:
/etc/cloudservices/googleanalytics
- Titolo:
My First GA Config
Scegli Configurazione Google Analytics e fai clic su Crea.
- Configurazione padre:
-
Immettere un ID account, ad esempio
AA-11111111-1
. Fai clic su OK. -
Passa a una pagina e aggiungi la configurazione appena creata nelle proprietà della pagina, nella scheda Cloud Service.
-
Alla pagina verrà aggiunto il markup personalizzato.